Add Colored Content Boxes To Your WordPress Theme Using CSS3

Here’s a video i created recently which explains how easy it is to add colored content boxes to any WordPress theme.

Add CSS & HTML Code

There’s 2 simple steps needed to create a content box using CSS3.

1. Copy and paste all the CSS from the Gist labelled style.css near the end of your child themes style.css file before the start of the Media Queries.
2. Paste the HTML from the Gist labelled content-box.HTML into your editor or text widget.

You could also hook into the HTML anywhere in your theme using PHP code.

Colored Boxes

Add the small line of code to your WordPress HTML/text editor.

Add the big block of code to your child themes or parent themes style.css file.

Not Working?

If you have any problems and the content boxes or buttons aren’t displaying, try clearing your browser cache.

Content Box Example

Other Options

1. You can also create colored boxes with custom icons using shortcodes
2. 3 Ways to create custom colored content boxes
3. Make the corners of your boxes rounded.

Conclusion

These features plus content column classes will be added to Genesis 1.9 when it is released later this year.

You Don’t need to be using the Genesis theme framework or a StudioPress theme to use any of this code and it won’t lock you into the theme or cause any problems if you change themes