I’ve been asked a few times recently if there’s a way to include support for various colored content boxes for sites powered by the Genesis Framework.
There are a number of themes in the market that implement this with shortcodes. I feel that isn’t necessary and want to show you just how it easy it is to do with CSS.
Below are the 6 default colored content boxes that are included in this tutorial:
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.
Implementing the Content Boxes
In your text editor, all you need to do is wrap the text in a div with a class applied to it. Here’s some sample HTML, along with the CSS required for the colored content boxes.
Brilliant.
I have wanted to add boxes like these for a while, but the plug-ins I tried always ended up more problematic than anything else (partly, I assume, because they had to offer a lot “more” that I did not want, so they would be seen as “worthwhile” plug-ins in the first place).
Simple. Incredibly useful. Many thanks.
Glad to hear it. So many things like this (in my opinion) are included in ways that are far more complicated than they should be. A few lines of CSS and a simple paragraph class and you’re on your way!
I agree with you Brian. That is what I encourage the members of my Club to do. To be able to do things like this without resorting to plugins all the time.
Oh, how cute!
Nice and easy Brian.
I did use a paragraph as a box, but soon discovered that if you want to add a heading or a list, you need to use a div.
I know it’s obvious but eh….
I used a nice styled div to make the info stand out here… http://www.wmwebdesign.co.uk/premise-2-0-way-more-than-wordpress-landing-pages/
Styled it with rounded corners and a subtle drop shadow.
Great insight with the headline issue, which is something easy enough to swap out with the CSS and markup.
Thanks!! I love it. And so easy to do and make site look different.
Kieth,
Wondering if ads get in the way. I am currently playing with your .yellowinfobox div class and wondering how to make the box not clash with an add. I am sure this is simple, just trying to fail forward.
http://screencast.com/t/0bkUcUDV0
Ah yes, I also ran in this issue when creating our sales letter (see large green boxes at middle and end) http://bit.ly/MYVPus – these content boxes span multiple paragraphs so you have to use divs!
What’s a little frustrating is that when you use div tags the text immediately below the content box sits flush to the bottom of the content box (even if it’s in a p tag!). I just looked at Keith’s code and I see he uses an empty P tag – I’ve been doing the same, however what’s weird is that sometimes, if I republish the post WordPress seems to remove these empty tags for me. I tried putting a non-breaking space inside the open and closing p tags but I still get the same problem. I think it’s when I switch to design view and publish. Anyone else have this issue?
Neil, are you using the visual editor or the HTML editor? (by the way, your link throws an error so I can’t see it in action.)
Yes sorry about the link – I just realised I’m on day 29 of a 30 day trial with my new host, and I’d experienced problems so I decided to cancel the account and move my site back – not exactly something I’d recommend for a Friday evening … or any evening for that matter
I tend to switch between the two editors. As far as I’m aware it keeps my empty tags when switching, but maybe not when posting.
Apologies for that – the link should be working again now.
Keith, how do make the corners round as in your example?
Thanks
J
Hi Jason
I’ve added the CSS below.
The border-radius is what gives it the rounded corners and you can mess around with the values.
.yellowinfobox {
background: none repeat scroll 0 0 #FFFFE6;
border: 1px solid #DDD;
border-radius: 8px 8px 8px 8px;
box-shadow: 0 2px 3px #666;
display: block;
margin: 10px;
padding: 35px 35px 20px 40px;
}
You can get CSS info like that using the developer tools in Chrome or firebug in Firefox.
At the moment I’m using the developer tools and the CSS below was just copied and pasted from my page.
Hope that helps
Thanks a lot Keith for the info, appreciate it.
Great tip Brian. One thing I would also love to see, are more short codes in future releases of Genesis. Such as CTA buttons, highlights, and more. A lot of themeforest themes come with them, and I constantly miss the small things like that inside Genesis.
Maybe even make them a plugin, that would work just as well.
Cheers Brian,
Jonathan
The thing is Jonathan, most of that stuff can be handled by CSS and easier implementation that does not require anything from Genesis itself. In other words, no code bloat in the Framework. Here’s another example of something that folks use shortcodes for.
I was thinking something more along these lines, just adding more value to running on Genesis — possibly by creating a huge plugin.
Something that worked uber well specifically with Genesis could be a huge benefit to people that want to enable it — even if it means more code bloat (speaking non-core of Genesis).
Cheers Brian
Ah, gotcha. Yeah – the problem with that from a Content Box standpoint is the CSS that’s involved. If you customize the hexcodes, how to save it without it being overwritten in a plugin update?
That is more exciting.
Me too. Would like to see a simple tutorial on creating nice buttons using code. User could then make a simple plugin if needed.
add it anywhere?
Yep, place it anywhere in your post or page copy that you want.
In fact, with the code I provided you should be able to do the same in other places like sidebar/footer widgets as well.
I put the code in my CSS style sheet in the Prose theme and added the divs in the HTML and nada. I’m not a coder by any means. Something (elementary I’m sure) I’m missing?
Can you link me to the page where you have this implemented?
Brian,
I do have the same problem, and I run Minimum child theme 2.0
I wrote the code in HTML view, and added the CSS code in the the editor.
The content box doesn’t appear.
What do I miss ?
Thank you
Oh gosh…
I managed to make it by adding the parent “div” in the stylesheet.
Works fine now.
Thank you for your great tutorials
You can put it anywhere as long as the CSS code provided is in your theme’s stylesheet.
Thanks for this Brian. For those someone that needs their content boxes stand out more, they must have a background knowledge of CSS but this should be a good start.
In the child themes I built I used div classes with appropriate styling. I prefer your approach. But then you are the expert, I’m a newbie.
Divs would be necessary, as Keith pointed out, if you want to also include a headline.
Initially, I read the title as “add context boxes” and I was both amused and confused.
Thanks for this Brian! I will definitely be adding this to my site.
Hi Brian,
Love this but unfortunately I’m not seeing any styling for the content boxes on this post. I’m running that latest version of Chrome on a Macbook Pro. In saying that, it looks great in Safari!
Do a hard refresh on your browser, as the CSS probably isn’t cached.
Boom. Works great!
Thanks for this! I’ve been wanting to do it, and now it seems like such a simple thing… I’ll be putting this code to good use!
Probably nice for a lot of people… but it feels a bit strange to see basic CSS presented a higher math
So anyone who like this… go check out what you can do with just a little bit of CSS you ‘ll be amazed what old fashioned html/css is capable of
This is exactly what I’ve been looking for. I was using block quotes as a workaround, but prefer these content boxes in many cases.
Easy Peasy Lemon Squeezy…
Great tutorial, I always knew how to do it (in theory at least), but it is actually a lot less code than I thought it would be. I just relaunched my company’s website on the (in)spyr child theme (with a few customizations) http://protechig.com/ and it would be great to highlight special offers with those boxes.
I also read a blog post yesterday speaking that 51% of the top 1,000,000 websites that are running WordPress, and the Genesis framework is the #2 premium theme of those sites congrats on your good work!
Also, for future tutorials, I’d love to see a tutorial on responsive web design, especially with that 1140 framework, I love the 1140 theme by the way.
Keep up the awesome work!
Thanks so much Brian. I was just about to implement this via html, which felt a bit unwieldy. This is a much better option. Awesome.
Thanks Brian!
Your tips + Genesis Framework can make even a lawyer (like me) a web designer…
Hi!
Don’t you forget too “Empty All Caches” in W3TC ?
I see classes on your but not the color
Did a hard refresh on my browser and the content box still doesn’t appear. Any suggestions?
Are you doing Command + R if you’re on a Mac?
Thanks for writing this tutorial on colored boxes Brian.
I requested this not so long ago and its always easy following your simple to follow tutorials.
Good stuff Brad, the idea is to keep things simple, so that all folks can implement.
The only change I would make would be to abstract the box class (which defines the padding and margin) away from the coloring.
Like this: https://gist.github.com/3014500
This way, if you wanted to add a new color, you would only need to add a new class for that color instead of also adding it to the first line where the margin/padding are defined. And it adds the nice benefit of making the CSS slightly more readable.
Great post, Brian. Thanks for sharing it!
Thanks for the suggestion Brett. It’s probably the proper way to go, but in the end the idea is to keep this super simple for users, and one class for the content boxes is what I was shooting for.
Very simple stuff here, basic really… I switched from the bloat of Woo to Genesis after realizing how easy it was to replicate the most used shortcodes with CSS. This means a leaner and faster website! Thanks Brian
Great CSS Brian I used block quotes for the same purpose. Can you post the code to add block quotes to the box? I’m a newbie
‘I’m fairly certain that I’m one of the people who’s been a pest about colored boxes,, callouts, pull-quotes, and other obscure layout elements. And this looks like it might be possible for the CSS-challenged among us without causing cascading power outages, traffic-light malfunctions, or whatever other things happen when one makes CSS mistakes. So, thank you, Brian, for this tutorial. And applause for putting it out there for the larger WP community. Question(s): if it’s enclosed within a div, isn’t it then possible to specify margins and use it as callout or pull-quote? And – margins aside – if one were to use these frequently, are there safe ways to assign buttons using one of the MCE editor add-on plugins? Great tutorial. Thanks again – Jon
Yes, if you enclose this in a div, you can give it right/left margins to “indent” the boxes, in the same way that blockquotes are styled on some themes.
Brian, how would you make the box respond properly to ads or similar?
What problem in particular are you having? Are the ads sitting outside the box? If so, add this to the CSS: overflow: hidden;
Thank you, they look separated now with some white space in between. I will research ‘overflow:hidden’ to understand why.
w00t
Brain,
Thanks for sharing.
What is the timeline for Genesis 1.9? I check in with StudioPress Forums quite often but have been unsuccessful in discovering this information.
Hi Brian,
Your tutorial is great. But Is there any way to simplify the process? For example, every time I want to get a blue box, I have to enter the lengthy, heavy class “content-box-blue”. Can you tell us how to make a simple popup window on WordPress Post Editor, so we can click to format the text as our wishes?
Brian, I avoided buying Genesis until this week. I didn’t feel like my coding skills were up-to-snuff to make the most use of the framework until recently. I’ve been using it for a couple of projects I’m working on this week and I love it.
I’m with you. Don’t bloat it up with a bunch of shortcodes that most people will never use. I like the approach Genesis has taken and I’m looking forward to making the most out of it.
Awesome to hear Matt, and glad that you finally took the plunge! Even I had the “ah-hah” moment where it all clicked and was easy to work with from there on out!
One thing you should add, when you are using on page with column divs you need clear: both; added to the code.
Also you need to change the margin to this… margin: 0 0 35px !important; otherwise it will not work.
You should just use divs, not paragraphs. using paragraphs causes some issues with margins.
.content-box-yellow {background-color: #fef5c4; border: 1px solid #fadf98; border-radius: 6px; clear: both; margin: 15px 0 35px; padding: 20px;}
Yeah, good suggestion – and I see why. I’ve appended the post.
Just did the tutorial, looks great on client site. Thanks Brian for the great tutorial!
We need to add these cool styles to tinymce buttons or shortcodes. Most of my clients can’t use (And I prefer they do NOT use) the html editor.
Is there a good tutorial or best practices for adding new tinymce buttons?
The second item is adding these to an editor stylesheet. There’s so much that we can do to make the lives of regular users easier!
Excellent Brian!
I always find a healthy tutorial here about any professional issue. thanks alot again
Brian: Thanks for this simple but very useful tutorial. It’s a great way to break up and highlight certain sections of lengthy text. Take care. –Tom
Simple is always good.
isn’t working for me. I have to use for some reason. Thoughts?
What’s the link to the page you’re trying it on?
Sorry. Meant div class isn’t working for me, but p class is. Did you change this after you posted? http://goinswriter.com/one/ is an example where I used the yellow box.
Yeah, I did change the code. Looks good on your site!
Why?
An how do I get my site to look awesome on mobile like yours?
How about adding an icon to the content box. http://wpsites.net/custom-php-scripts/creating-shortcodes-wordpress-colored-boxes/
Will these content boxes cover multiple paragraphs?
Shortcodes would also be easier don’t you think?
Will you be introducing shortcodes in Genesis 1.9 and if so, roughly when do you expect to release the update?
Wouldn’t it be better to use <p class rather than <div class ?
Whats the difference?
This is awesome! Thank you so much for taking the mystery out of WordPress and Genesis design!
This method works great even on my (horrendously outdated but oh-so-comfortable) WP 2.6. Thanks for the easy-to-follow coding tips!
perfect!! I was loooking for this… Was googling around, but I should have known to start here Brian!
Heh, subscribe to my blog and you won’t even have to come back for the info. Delivered right into your inbox.
Done!
OK, that looks very manageable: good timing. Can’t wait for Genesis 1.9. Thanks
Great idea! I would try them. Greetings from Munich, Germany.
This is just brilliant, Brian, thanks a bunch, easy to implement a couple of boxes in my own color just by editing the hex code in your examples.
You’ve gained a new subscriber, there are things here i find useful and come late or never in the SP blog.
Once again, genesis, proves to be the right choice.
How do you create different colored columns using CSS as displayed on this page:
http://www.isitebuild.com/hosting/ where I used table classes.
The problem is that it is not mobile compatible.
Thanks
Thank you so much for sharing this! Exactly what I was looking for, and you spared me having to install another plugin. Bless you!
This works great on some of my sites using the Minimum theme. On the one I’m working today with Genesis 1.9.1, it doesn’t seem to work at all. I don’t see it in the Genesis CSS, either. Someone missed the memo. Could have been me.
Yeah I’ve been trying to use this with Genesis 1.9.1 and it doesn’t seem to work as well.
Can you provide a link to the page? Chances are you just need to do a hard refresh to clear the browser cache.
Simply the best solution. Before this I was using 3rd party plugin, however, knowing now that using your own style with just a couple of CSS codes gives you a fresh air. Thanks Brian.
Brilliant Brian, Thank you!