Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons

A few months ago I published separate tutorials on how to add content boxes and how to add color buttons to your website. Apparently that struck a cord because there was a number of people who left comments those posts.

With that said, I thought it’d make sense to make this process available here at StudioPress, considering we get a lot more traffic here than I do on my site.

Colored Content Boxes

Here are the 6 content boxes that this tutorials will show you how to implement:

This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.
This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.

In your text editor, all you need to do is wrap the text in a div with a class applied to it. Here’s how that should look:

Add Content Box CSS to Your Style Sheet

In your theme’s style.css file, place the following code and edit as necessary:

Color Buttons

Here are the 6 color buttons that this tutorials will show you how to implement:

Blue Button Link

Gray Button Link

Green Button Link

Purple Button Link

Red Button Link

Yellow Button Link

In your text editor, all you need to do is add a class to your link. Here’s how that should look:

Add Color Button CSS to Your Style Sheet

In your theme’s style.css file, place the following code and edit as necessary:

It’s THAT simple. So go on, add some content boxes or some color buttons to your website, and stand out!

Comments

  1. I’m a total beginner with Genesis, so please forgive if the question has been answered already and I haven’t come across it yet. Why wouldn’t Genesis deliver those features as ready-to-use shortcodes for the visual editor? Maybe even generated by extra toolbar buttons (similar to the modal add-a-link dialogue)? Or even better, wrap the whole thing in a functionality plugin? Wouldn’t that be even more simple and convenient? I’m going to use Genesis anyway, but in fact those boxes and button shortcodes were a feature I had been looking for already.

    • First off there is a performance hit that takes place when your theme has the generate and process the shortcodes. It’s also not theme portable if you go that route, because your new theme would also have to register the code for the shortcodes. If you wrap things in a HTML tags, then you can transport from theme to theme quite easily.

  2. Hi Brian,

    Thanks for sharing. I love this kind of stuff.
    I wanted to ask you something. I build sites for my customers and they love to create content for their blogs (or news or whatever) “section”. Being able to add this kind of boxes to highlight content is great, but you have to know HTML.

    I purchased Premise and, when you’re editing a landing page, you have an aditional button menu. You have a button, for example, to “insert a notice box”. I would like to add a similar toolbar for my customers sites with one button for each of the content boxes colors.

    Is it that hard to add a custom toolbar in the editing window? Any advise to start looking for?

    Thanks in advance.

  3. I’m using a shortcut to like in the tutorial above: I’m using Themedy Shortcodes that come free with free Themedy themes. It’s easy to implement as they are deployed via a button and interface in visual editor in WordPress.
    Will be nice to have something like that for Genesis.

    • Paal Joachim Romdahl :

      http://themify.me/ as Bob mentioned has implemented a shortcode icon in the toolbar. But Brians tutorial is a good one for learning about HTML and CSS and how easy it is to use. I myself use themify themes and use their shortcode icon to insert various codes.

      But in the long run it is better to use regular HTML and CSS, as in the above tutorial. As switching themes would not take the default theme shortcodes along removing whatever shortcodes I have already created through the theme.

  4. You rock. Thank you!

  5. I added the codes precisely as directed, but don’t get the buttons or boxes on my site. Whatsup with that?

  6. I’m not going to even act like I am a pro at this. I think what some of the people are saying is that they are (as I am) afraid to copy and paste anything into their CSS and would rather have it be a feature in the Studiopress platform. I can follow directions, but it’s so much easier to check a box, etc. I MAY try the feature, but I would say to anyone intending to do so to make sure you back up your blog before changing anything.

    • You can do it, Carol! You won’t mess it up when you add to to your style.css. Just cut and paste it. I usually put the new stuff toward the bottom, just before the color features.

      If it doesn’t work for some reason, just delete what you pasted and hit save. ;-)

  7. Genesis Rocks, thanks a lot, for providing such code snippets.

  8. Just…thanks. Awesome.

  9. Brian,
    Tutorials like this are really nice. One thing about running a web development company is that sometimes it can be frustrating to find reliable content to refer employees to for things like this; specific style questions. I find that all of your tutorials, both on StudioPress and BrianGardner.com are both invaluable resources for people starting off, and since I do most of my development on Genesis, these sites are even more valuable.

    Curious though, is this functinality anything you are going to consider to add natively within the Genesis Framework either by class call or shortcode? It would be interesting to see it in there in future versions.

    • We probably won’t go the shortcode route, for reasons I’ve already mentioned. There’s just no reason to in our opinion, as it’s just as easy to remember doing this:

      <div class="content-box-blue">

      Than it is this:

      [content_box_blue]
      • But shortcode would be easier with client don’t want to deal with HTML tab in editor. I try one time Elegant theme, they add some new button (for shortcode ) in the tinymce tool bar. Pretty usefull

        • Leave shortcode for plugin, it shouldn’t be theme-specific. What if a client change to a new theme and the theme doesn’t have the shortcode? Using plugin is much better for the shortcode stuff.

  10. I added the box code to my style sheet and then added the div with a blue box. the content from the box shows up, but not the box. It is 2.0 agency them — http://ambitcalifornia.net/box-test/

    I also tried it on a test site that is using the new Lifestyle them and exact same issue. Content but no box.

  11. Ok, you talked me into it. I just added the color buttons to my sidebar. Now…to tinker!

  12. Thanks Brian! I’ve added the content box feature and truly appreciate your input (again). Genesis is amazing and I’m so glad I use it. It’s people like you who make it great.

  13. Hi Brian the instructions are pretty straight forward but for some reason when I added the ( Content Boxes css ) to my stylesheet.css file nothing happen. Then added the div to my post nothing.

  14. Got it Brian just refreshed the page works great

  15. Is it possible to use the Content Boxes code for grid loops?
    something like this: http://video-editing-services-nyc.com/
    Thanks
    Surinder Singh

  16. Brian,
    I’m not sure if I thanked you on your site for this, but just in case I didn’t thanks and glad it was added here at StudioPress now I have two places I can find when I need. If you continue posting articles like this http://www.briangardner.com/portfolio-page/ you will get more traffic ;)

  17. The content boxes and the text box are not visible in my blog even after adding all the CSS codes in my theme. I use Genesis with News child theme.
    Please help ………

  18. You Rock!!

  19. Thanks for this, I created one such box a while back but it’s good to add a few more (an I think these look better than my attempt!)

    Not that I want to encourage ripping off a rival, but I liked the buttons put together by the DIY Theme guys using the websymbols font.

  20. I have one of my blogs with eleven40 child theme.
    It’s not showing post excerpts on homepage and is showing complete posts, despite of the fact that I have selected “display post excerpts” in Genesis Settings.
    Can anyone help me with the problem ???

  21. Thanks Brian….this is great…can’t wait to use them. Built a sample page following the directions you provided and looks beautiful..

  22. How do we get these boxes to show as ’round’ edged boxes as opposed to square edges?

    Any input appreciated.

  23. I am not a pro at these things, but I like to use a custom css instead of putting the theme or child theme style sheet at risk. Do I need to use different code to add these to my custom css plugin? Thank you.

    • I’ve seen a few comments from people who are reluctant to add anything to their style sheet in case it all goes wrong.

      A couple of suggestions:

      1 – Take a copy of your stylesheet before you add anything – that way if you do experience any problems, you can replace your stylesheet with the original.
      Taking a copy is just good practice.

      2 – Put the additional CSS at the bottom of your stylesheet.

      At the bottom of my sheet I have a section headed….

      /* Styles added by Keith Davis */

      And beneath that I add my additional styles.

      Again if anything goes wrong, I know what I’ve added and I can remove it.

      With the two precautions above you should be fine.

  24. I downloaded genesis and generate but cannot find my forum information thus I can’t log in to the forum nor can I even send an email through the studio press site. Could someone from studiopress please contact me at my email address so I can figure this out. I need access to the forum in order to get some questions answered but don’t know what to do. Thanks, Dan

  25. I turned Brian’s CSS into a plugin you can use with shortcodes. Check it out at http://wordpress.org/extend/plugins/standout-color-boxes-and-buttons/

  26. Hey Brian,

    Thanks for the action oriented, super useful post! This will be very handy for all my future blog post, as my theme (semiologic) doesn’t have any shortcode / function built in for this color box :)

    Cheers,
    Ming

  27. I have Socrates and there is no “color” section to add it above or below for that matter. I just scrolled to the very bottom of the code and pasted it in there. Unfortunately, that didn’t work. Maybe I’ll try again. Will advise if I get it to work. But thanks for sharing this. I’d love to have a feature like this. Looks cool and attracts attention.

  28. Okay, never mind. I got on another computer and that did work!! I added the code under everything else in the style.css section in the Editor section of the theme. I’m no HTML expert. I usually give up on this kind of stuff quickly because I’m afraid that I’ll “break” my theme. So if I can make it work, so can you!

  29. Hi, I have a quick follow up. How did you get the code,

    Enter content box text here.

    to show up in a colored box? It seems to me that if you replace the Enter content box text here. with that code it would just read the code twice and make two colored boxes on top of each other?

    Thanks!

  30. Thanks, I hope to use what I learn in my new blog MissionPhilippinesFundraiser. I am always willing to learn new ways to help my blog stand out!

    God bless you,
    Mark
    Isaiah 40:31

  31. Wow! I just did a test post on my blog, which I have now deleted, and it really worked! I am no longer just an average joe. I am so stoked. As you can see, it doesn’t take much to make me happy!

    Thank you for your helpful tips,
    Mark
    1 John 5:10-13

  32. Brian, I am considering purchasing your Associate theme and want to know if plugins that use short codes work in your themes? Thanks!

    • Hey Pat, so sorry for the delay in response as I missed this comment. I don’t see why shortcode plugins wouldn’t work, and we do have a 30-day money back guarantee in the event that something doesn’t work out for you.

  33. @Keith Davis

    I installed shortcodes but the problem is that it won’t work with custom post template. I’ve searched everywhere and I couldn’t understand how people were able to make it work. If you can help that would be great. Thanks.

  34. There are plenty of ways for novices to create their own buttons for websites. All it takes is a well set-up button generator and some creativity and you’re in the clear! Shop around for the button generator that you like the best and go from there! You’ll find that you’ll have plenty of options at your fingertips.

  35. Where should I add the CSS codes ?
    I mean in Genesis’s style.css or in my News Child theme’s style.css ??

  36. Is there any way to add those color buttons to the sidebar?

  37. How about some colored buttons like you use on this page http://www.studiopress.com/themes.

    Blue and green ones look good and are useful when creating landing and sales pages.

    Any chance these will be added to Genesis as shortcodes?

  38. Hosting Review Scripts :

    Thanks for great bonuses but I am wondering how to make these buttons rounded, what code should I add to do this? Thanks

  39. Codes work perfectly for me. It’s simply awesome to see in Genesis! Thanks a lot!

  40. Absolutely brilliant! I am not new to coding but i’ve never actually took any initiative in the past couple of years to implement something of this sort. I am really glad this was posted here. Thanks again!

    StudioPress for the win!

  41. Hey Brian

    I used your tutorial in my junior high school Web design class where we decided to teach the students WordPress instead of Dreamweaver. By following the tutorial they are slowly able to grasp the connection between HTML and CSS. Thanks for creating this lesson!