Discussion on Crafty - Responsive Retina-ready HTML Template


66Themes supports this item


This author's response time can be up to 5 business days.

67 comments found.

Hello, I was interested in your theme for my portfolio website. I’m using wordpress though, and I caught in the description that it says, “Wordpress version coming soon!” does this mean that this theme, as of now, is not able to work through wordpress? Thank you


Yes that’s exactly what it means. WordPress version is coming soon!


I’m having a few problems getting the layout just right. For the most part, all the pages of my website will have the same look, just changing the ”#content” portion. Currently I’m fixing up the header area.

1) I want both a graphic logo and a text version of the name. So I put in a background-image style. But depending on the screen size, I see various amounts of the image. How can I make sure that the whole image is always shown? To further complicate things, the image is a tree so I would like the ground level flush with the ”#pageHeader”. The image is 192×150.

2) For readability, I’d like the .logo text to be a little lower (it becomes obscured in the branches). And the .slogan to appear underneath the .logo text.

3) In the navigation, I’d like to put a badge next to some items, like “3 new messages”. But when I use the .badge class, the text appears to the right, sunk halfway between the line it should be on and the one below it.

4) I’m also experiencing trouble with the icons, but only on the most recent version of FireFox. It looks fine when I’m on version 4.x.

Sorry to swamp you with all this at one time.

Hi there,

1. Don’t use CSS for placing your logo image, CSS background images don’t scale well. Try to use an img tag.

2. You can achieve this by simply changing some CSS. Apply a margin value for example. Do you have any experience with CSS? Otherwise, you might have to find someone to help you out.

3. Make sure you actually place the badge inside the link. It should look like this:
<a href="YOUR_URL_HERE">YOUR_LINK_TEXT <span class="badge">YOUR_BADGE_TEXT</span></a>

4. What troubles are you experiencing exactly? And on what system and OS?

Hope this helps!

Kind regards, 66Themes

1. I’ll have to play around with it. Unfortunately, the website has a long name (14 characters) and a number of menu items. So things get crunched together once I add an image. I was hoping to put the logo in the background so the name could over lap slightly.

2. Yeah, I’ve used a lot of the basic CSS. I’m a programmer by trade so I’m more of a “make it work” guy than a “make it pretty” guy.

3. I finally figured that one out. Didn’t realize it would make a difference.

4. It was FireFox 18.x, on a Windows 7 system. I was able to solve the problem by moving the CSS and Assets directories to be parallel to the html documents. For some reason ”../css/” kept failing on the latest version of FireFox, but nowhere else. Changing everything to ”./css/” worked.

You could try pushing the website name up al little bit using position: relative and top: -10px or something.

Is it just me, or did this theme once support IE8?

No, this template does not officially support IE8. While some steps for supporting this browser have been taken, full support is only guaranteed on IE9+.

The compromises that would have to be made and the extra investment in development time is simply not worth it.



Is it possible to make the home page slider smaller? I am using the LayerSlider. The slider takes up the whole screen and users would have scroll down to use the left and right buttons to view further slides or even realise they’re are further slides, they also have to scroll down to see any of the main content.

My search function does not work, I have made no changes to the code.

Thank you for the reply. I followed your advice but no luck. I changed the heights under #layerslider in style.css and bottom margin in .header main. Not sure if if that is correct. I have another issue. This time with the contact form. The email comes through when Send is pressed but the screen does not display the confirmation message nor load the loader gif. I replicated the mail-form.php to create a form to receive comments from the blog item page, I copied and pasted the js code for the contactForm and ‘re named the Id tag. This form displays the confirmation message and loads the loader gif so I am not sure about the contactForm

Hi, I sorted out the contact form issue but is there a way to get it to load a confirmation page?

Yes, you can find an oncomplete function in the script.js, the same function which shows the succes message and hides the loader after it’s done.

You can use JavaScript to redirect the user to a different page.

Hope this helps!


I need help getting my new icon font to work. I purchased icomoon-ultimate package, selected the ones I wanted, sorted them, and downloaded into a new package.

I updated the icomoon.css file to point to the new files, overwrote all the classes, etc.

But I am now getting spotty results as far as when icons show up.

For instance, the twitter bird. It shows in the social bar, but when I hover over it the background turns blue and it shows the letter “w”. And down in the twitter feed bar, it just shows “W”.

So it’s working in some places but not others. What could have changed?


Are you using the data-icon attribute to set the icon? If not, I believe that could be the problem.

Let me know!

Kind regards, 66Themes

I figured it out. There are a few places in the style.css file that referred to font-family icomoon that needed to be updated to icomoon-ultimate.

Glad you figured it out!


2 more things: 1) How can I make text not centered (so left justified) in the portfolio? I tried .portfolioItem p { text-align: left; } but the text is still centered. 2) Have you considered making a login dropdown for the theme? I tried building the one from http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/ but it closes when I try to give it focus.


Of course after posting I solve my own problem. Or at least one of them. I got the log in finally working. But I did find another issue.

Is there a way to keep images from starting on a new line? I’m inserting emoticons into posts, but it always causes a line feed and the image appears on a line by itself. How can I keep images next to the text?


apologies for the late reply! Glad you got the login figured out in the meantime :)

To left-align ALL the text in the portfolio item, just remove text-align: center; from .portfolioItem. It will default to the left.

To align just the title or the description to the left add text-align: left; to .portfolioItem .itemMeta .itemTitle or .portfolioItem .itemMeta .itemDescription.

Add the pull-left or pull-right class to the image to float it to the left or right of other content.

Kind regards, 66Themes

I’ll try the [em] thing with the portfolio and see if that works.

But for the image, I don’t want it pulled anywhere. I want the image to appear in the middle of a sentence. So just like this :) appears in my text, I need the smiles on my forum to appear where the user puts them; not pulled off to a side. Does that make more sense?


Yes, that makes sense. The image should actually remain inline by default. However, the plugin which preloads the image adds some style after fading in the image which causes it be to treated as a block-level element.

What this means is that you’ll have to make a small to change to the plugin code, fixing this behavior.

So first open up the scripts/vendor/jquery.preloadify.min.js file. Then just find $(this).parent().removeClass(“preloader”) and replace this with $(this).css(‘display’, ‘inline’).parent().removeClass(“preloader”).


How do I add a timer on the home page slider so it goes to the next slide automatically?

Thanks in advance!

Hi there,

Every slider has an option for enabling/disabling autoplay and to set the timer between slides. To enable this functionality open up script.js inside the js folder. Now search for ‘nivo/flex/layetslider Init’. Below you’ll find the options for this slider. To enable autoplay, simply change the value for the appropriate option from false to true.

Kind regards, 66Themes

Menus in the Header always flow to the right. However, this means that text in the leftmost menus overflow off the page (to the right).

A good example of this issue is when you mouse over the “Blog” LI in the header. The .badge in the span are clipped by the page. Are you going to issue an update where some menus will flow to the left? I.e. the right edge of the menu is aligned with the right edge of the menu label, rather than the left edge of the menu being aligned with the left edge of the menu label.

An update is available now! Any submenu that flows off the page will fold out to the left instead of right, keeping it within the visible area of the page.

Thanks for the suggestion and enjoy!

Kinds regards, 66Themes

Oh wow. That’s awesome. Thanks a ton!

You’re welcome!

It porting over my Terms of Service and Privacy Policy docs to this layout I noticed that all [ul] tags always left align. Being legalese, the pages consist of stacked [ul] tags; sometimes 3-4 levels deep. However in this theme, everything is pulled to the left with no indentation.

Is there a way to get the indentation back?

I sent you an email with the code I’m using. It looks right and passes the W3 validator so I’m pretty sure it’s all in the right order. Let me know what you find.

I have taken a look and found the problem. I have issued an update fixing both this issue and a couple of others and updated Bootstrap to version 2.3.1.

Will let you know when the update is available, it’s uploading now. The lists should then work properly. Sorry for the inconvenience!

Kind regards, 66Themes

Update available now!

Any ideal way to resolve responsive slider issues like the attached?


not really. The slider scales and positions the elements based on viewport. Getting it right in every situation is nearly impossible since it fills the width of the page.

So, if you really want it under control I’d suggest giving it a fixed width, same as the content area width.

However you need to realise that the slider has been built to function optimally at certain screen sizes, for different devices. That means when you view it on a smartphone or tablet, it’ll fit and render nicely within the viewport. What you’re looking at here is not a normal viewport in any situation, so yeah it’ll look off.

Kind regards, 66Themes

This came up while viewing the site on my Note II in both landscape and portrait using the stock browser. If it works swimmingly on an iPhone5 then .. I guess I should count my blessings. It works well on Chrome on the Note II it appears.

Hmm I see. Disregard my last comment then, I was under the assumption you were viewing the page in a small sized desktop browser.

While I expected it to be, I’m afraid the viewport of the Galaxy Note is not a resolution that’s supported by the media queries used in this template.

You could try adding support for the viewport by adding a new or altering an existing media query in the CSS, if you know how, creating a new breakpoint for that specific resolution.

Hope this helps!

Kind regards, 66Themes


i’ve just bought your theme. Nice. But I have one question: your css for icons, with IcoMoon, you have added a display: block; So we can’t use icon by class name in text (with a <i /> or even a button like in your doc). It will always add it to a next line in the HTML, because of display:block. In bootstrap, icon are in display:inline

You can use the ‘noBorder’ class to remove those styles from the image.


Yes of course, I’ve seen theses noBorder and noShadow. But as a developer, I use inverse naming in creation (make a standard CSS, and create CSS class for chromes like border, shadow,...) thanks for your support

That’s totally fine too and makes sense, however I intended for every image to receive the border styling, so that’s why I did it!

Either way is totally fine and understandable. Keep in mind that a Template is used as basis and is intended to be customized. So if you require a different styling for elements, by all means, change it up!

Kind regards, 66Themes

Thanks for your update! One other question that’s been on my mind: did you write the CSS using SASS or LESS? If so, is there a Less file you could distribute along with the compiled CSS?


No preprocessors have been used.

Kind regards, 66Themes

How can I get a list of the icon codes for future reference? I’m looking to add the youtube icon.


check the icomoon folder within the documentation folder, just open the HTML file in there and you’ll find the list of all available icons and how to use them.


WP version coming ? 4? months and counting. ETA if possible… not soon [again] please. like 3 days, 2 weeks, 3 months etc. I like the theme, but can’t wait forever especially without knowing how the page builder [need it] will work out


thanks for your continued interest! I know, it’s really taking a while, and it’s frustrating, but unfortunately development has been stalled the past couple of weeks, because I barely had any time. My apologies for that! I’m still working on it though. No promises on when exactly, but I’m trying my hardest to release it ASAP!

I have some good news though: I co-developed the page builder with a close friend of mine who has already released it with one of his themes! Check out the promo video on YouTube here. Hope you like it!

Kind regards, 66Themes

Page builder looks like the best one yet. you should think about selling it separate on codecanyon. Great job to both of you. Now finish crafty please

Thank you! :)

It took a lot of time and hard work, but we’re very happy with the results and the positive response. We are indeed thinking about releasing it on CC eventually.


I’m having an issue with the slider background images – even large images aren’t big enough to cover the whole page. SInce they’re left-aligned, it leaves a good bit of background space on the right hand side. This is only a problem on large screens, but there are lots of large screens!

How can I adjust CSS to make this background image center-aligned?


you could try adding left: 50%; and right: 50%; to the .ls-bg inline styles.

Kind regards, 66Themes

Any update on when a Wordpress version will be ready? I know its “in the works”, but I’m waiting to purchase it for a site redesign and was hoping you might have a better idea of if its going to drop in a week, month, 6 months, etc…



Thank you for your interest! I plan on (finally) finishing up the theme this month, so keep an eye out.


Hi, I was wondering what you use for twitter implementation? is that seacloud pluging or is that twitter api1.1?


it’s indeed the Tweet plugin by Seaofclouds.


If I remove div id=”mapCanvas” from a page so that the Google map doesn’t show, the the “To Top” button no longer works. I don’t want the map but I do want the To Top button. Why is the button dependent on the map?