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.
- 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.
- 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.
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.
If you have any problems and the content boxes or buttons aren’t displaying, try clearing your browser cache.
Content Box Example
- You can also create colored boxes with custom icons using shortcodes
- 3 Ways to create custom colored content boxes
- Make the corners of your boxes rounded.
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
Deepak Singh says
Hi. This is an excellent article.
That makes my task pretty simple.