1. says

    Looking forward to the rest of the series. Great to be able to watch your method.

    I’m too lazy to type my CSS so use Stylizer. A bit dangerous as I’ve started to forget how to do it now. I agreed with you about how well laid out the Genesis style-sheets are.

    • says

      Yes, I use Dreamweaver from time to time – if you’re doing a lot of it you need something like that. You can get a sneak peak at the subsequent videos in the series at my YouTube channel or you can wait for them to come here with the instructions. Glad you’re liking them. :)

      • says

        hi Rob

        just noticed your tutorials on wordpress themes and genesis.

        Im looking forward to having a look at them as have seen the light and am looking at using wordpress on sites that dont require tons of bespoke coding.

        • says

          Hey Louie, good to see you back here again. Definitely, WordPress is the way to go with simple sites – it can handle just about anything although, if you’re looking to do a huge shopping cart with 1,000’s of products, it’s not the CMS for that! Let me know if you need any help with it. :)

  2. says

    Hey Rob – This is great – just what I was looking for – are yo doing any more posts about styling a Genesis child theme? If so let me know where I can subscribe.

  3. says

    Hi Rob

    I love this, I am currently looking into creating websites with wordpress (I have already set up my own with it) I just love the ease of wordpress compared to dreamweaver and FTP and how you have to check it constantly.

    Anyway I am eager to make sites that are different and have my own spin on it instead of just a custom wordpress theme so these articles are great! I am taking my time as I am not a coder so I especially like how you have put together the tutorials/ videos. I am hoping to find your guide useful. :-)

    • says

      Thanks, Sian, if you check out this post it has all the videos I made in this series so it shows you how to go from the PSD design to the finished website using Genesis and WordPress. It’s possible to get the site to look anyway you like and get it to do anything you want it to do!

  4. says

    Well, I guess you can make a genesis theme that’s attractive if you’re as talented as you obviously are, but it’s the ugliest framework of them all. The child themes are drab and unbelievably narrow width. They brag about theme control panels but the CPs are almost bereft of options. I’m a civilian. I don’t want to use Dreamweaver, I don’t want to tinker much with the code. I want a great looking site fast — and that’s their sales pitch.
    Granted, everybody’s designs are shrinking these days. In the rush to create responsive themes, content space gets sacrificed because it’s easier to get the theme to scale down if it’s narrow to begin with. (btw, I did try eleven40, their widest theme — it’s also the ugliest).
    The only good thing about Genesis is that it seems very stable — probably because there are so few bells and whistles it’s less likely to break down.

    • says

      Hello Amy, thanks for calling me talented (although I’m not) :) I can understand your frustration as Genesis taken straight out of the box is pretty ugly. Yes, there aren’t a huge amount of options in the control panel – I think they keep that down to a minimum, as you say, to keep loading time down and to increase stability.

      However, I think at 960 pixels they’re as wide as most themes. Maybe, others are nearer 1000 pixels but I don’t think that makes much difference. I quite like the responsive theme Streamline which redesigns itself to present a different look for mobiles and tablets and I personally quite like eleven40 that you tried and that’s a massive 1140 pixels wide on a desktop browser (ah, just worked out why it’s called eleven40!)

      OK, if you don’t like them, you don’t like them, fair enough. I see from your link you’re trying out Generate (the Copyblogger theme) – if you need a hand with anything, drop me a line.

  5. says

    Hi Rob

    Thanks for the info, I’m really battling with the image logo for my Genesis child theme, it was working then I wanted to make the logo a little smaller, I deleted the file, put the new file in images then changed the CSS file to reflect the new file and now I get nothing up there? Help Please 😉

    • says

      Hello Shannon. Sounds like you may have made a mistake with the image name or file path in the CSS? Instead of deleting the old logo why didn’t you just create a new logo with the same file name and over-write it. Do you have a URL?

  6. says

    I use Genesis a lot, and thanks very much for these tutorials. I wanted to say I disagree with Amy up there. I really like eleven40!

    Now I know the video currently on this website is far too large (and a bit pointless at the moment), but I’m going to make it smaller and more purposeful when I can, BUT, here is a new site I just launched for local businesses in my area, using eleven40 and people seem to like it. Take a look : – I think eleven40 is a beautiful theme.

    • says

      Hey Liz. Yes, I’ll probably re-do this website in eleven40 one day when I get a chance. I absolutely love! I don’t think the video’s too big. I love the baseline in it! Did you use the FitVids plugin to re-size the video in the smaller devices? The only thing I would have done differently would have been to center the logo in the smaller sizes. But a lovely, beautiful website. Thanks for sharing!

  7. says

    Hi Rob, I am currently going through all of your tutorials and have found them extremely helpful. I’m a bit new to Genesis and I have a question that the support forums just don’t seem to like.

    I am using the Balance theme here:

    however I would like to have 3 widget areas in place of the blog and sidebar. Im not sure if this is anything you would be willing to help with, But if you could point me in the right direction I would appreciate it beyond words! I would like it to be just like the 3 footer widgets I have on my main site here:

    Thanks Rob!!!

    • says

      Hello Samuel. I’m glad you’re finding the Genesis tutorials helpful. I’m not sure if I completely understand your request though. Do you just need three footer widgets on every page? You can get that by pasting this in your functions.php and the widget areas will appear in Appearance > Widgets.

      /** Add support for 3-column footer widgets */
      add_theme_support( ‘genesis-footer-widgets’, 3 );

      Have a look at the functions.php of the two themes and see if you can work it out by pasting code from one to the other. Keep copies of the originals to upload by FTP in case you make a mistake. I hope this helps.

  8. Sharif says

    I love your writing style. You know how to explain clear enough to make newbies like me understand. Anyway I got a problem here. I used DreamWeaver CS5.5 to build a child theme. I used @import to import every styles from the parent theme. Till now everything was fine but problem arose when I tried to save all the customization I made. All the codes go to the parent stylesheet. Is there anyway to put codes to the child theme stylesheet?

    • says

      Thank you, Sharif. I’m glad you like my style! I’d need to see your files to be able to see what’s going on. I like to use that @import method from the parent theme but I usually have all the styles copied into the child themes styles. Maybe you could try that?

  9. Rustan Corpuz says

    Hey very nice guide. answered lots of my questions . Hope you will continue doing more guides.

  10. says

    Hi Rob!
    I’m using genesis fw with prose child theme and I m trying to insert a background image to the whole body area, that is header, menu, body and footer.

    Do I have to slice the image in 4 sections and insert the in appropriate css styles that belong to the header(I think its the wrap style, right?), menu, body and footer(I wonder if this will work on different resolutions) or there is another way to achieve this result?

    • says

      Hello Makis, you should be able to insert a background image onto the body selector. Certainly don’t slice it. Something like this can respond nicely:

      background: url(images/bg.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;

      But it depends what effect you’re after.

  11. Sam says

    You have saved my life Rob… Thanks a lot 😀

    I just would like to request you, can you also make a post on how to make the circles (that’s at minimum pro) theme?

    If you can help in comment section, I’d be very grateful too.

    Thanks again Rob.. this post helped me a lot.

    • Sam says

      Thanks a lot Liz for your help :)

      Yes I was trying it with new minimum pro. As you said, the way It works. I wasn’t able to figure out how to make it circle, but after changing the radius it’s done.

      Just one more question, can I change the social icons to other picture?

          • says

            Hi, Sam. I’m afraid I don’t have the Minimum theme so I’ve no way of knowing how those social icons are created. If you want you could email me with your WP login and I could take a look.

      • says

        No problem Rob.

        Sam – no you can’t change those icons in the plugin without changing the code. I still find the plugin really very useful though as you can change the colours to go with each site you do so easily.

        We did modify the plugin code of it to allow for more than one set of simple social icons on a page. No idea if they fixed that in the latest version, but certainly up until recently you couldn’t do it.

  12. says

    Thanks, Liz, for helping Sam out. I’ve no experience with the Minimum theme – although I’ve often thought what a cool theme it looks!

    Glad this post helped you, Sam.

    • says

      I haven’t used the :before and :after pseudo elements nor the content property before in CSS. So I would have to refer you to the answer from my clever friend David. I would definitely try to do what he suggests plus copying the styles that they have on .navigation-main:before, .navigation-main:after {}. I hope this helps, Jessica.

  13. Jessica M says

    Thank you guys so much for taking the time to respond. I will try out your suggestions tonight and let y’all know how it goes:) much appreciated

  14. Jeremi says

    Hi Rob,

    Do you know on how to put a wrapper to the header div? as of now my div is outside the wrap class. using some function so relocate it.

    I would like it like this: