How To Implement Genesis Content Boxes and Colored Buttons

Written by Jean Galea
Written by Jean Galea
This guide will show you how easy it is to implement and use the Genesis content boxes and colored buttons.

Table of Contents

Full disclosure: If you purchase through a link on our site, we may earn a commission. Here’s why you can trust us.

Free Resource

Master the 60/30/10 Rule for Web Design
Unlock the secrets of effective web design with our free guide.

This guide will show you how easy it is to implement and use the Genesis content boxes and colored buttons.

First up, here’s what the end result will look like:

colored buttons content boxes

The Plugin Way

There’s a very handy plugin that will implement all this for you very quickly, however there will some performance impact since it uses shortcodes. Nevertheless, that’s one option to do things.

standout color boxes and buttons

The Manual Way

In the manual way, here are the steps:

Add Styles for Content boxes and Colored buttons to your theme

/* Content Boxes
------------------------------------------------------------ */

.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
}

.content-box-blue {
    background-color: #d8ecf7;
    border: 1px solid #afcde3;
}

.content-box-gray {
    background-color: #e2e2e2;
    border: 1px solid #bdbdbd;
}

.content-box-green {
    background-color: #d9edc2;
    border: 1px solid #b2ce96;
}

.content-box-purple {
    background-color: #e2e2f9;
    border: 1px solid #bebde9;
}

.content-box-red {
    background-color: #f9dbdb;
    border: 1px solid #e9b3b3;
}

.content-box-yellow {
    background-color: #fef5c4;
    border: 1px solid #fadf98;
}

/* Color Buttons
------------------------------------------------------------ */

.button-blue,
.button-gray,
.button-green,
.button-purple,
.button-red,
.button-yellow {
    color: #fff;
    padding: 5px 10px;
}

.button-blue:hover,
.button-gray:hover,
.button-green:hover,
.button-purple:hover,
.button-red:hover,
.button-yellow:hover {
    text-decoration: none;
}

.button-blue {
    background-color: #afcde3;
    border: 1px solid #afcde3;
}

.button-blue:hover {
    background-color: #83a2be;
    border: 1px solid #83a2be;
}

.button-gray {
    background-color: #bdbdbd;
    border: 1px solid #bdbdbd;
}

.button-gray:hover {
    background-color: #919191;
    border: 1px solid #919191;
}

.button-green {
    background-color: #b2ce96;
    border: 1px solid #b2ce96;
}

.button-green:hover {
    background-color: #86a36e;
    border: 1px solid #86a36e;
}

.button-purple {
    background-color: #bebde9;
    border: 1px solid #bebde9;
}

.button-purple:hover {
    background-color: #9291c7;
    border: 1px solid #9291c7;
}

.button-red {
    background-color: #e9b3b3;
    border: 1px solid #e9b3b3;
}

.button-red:hover {
    background-color: #c78787;
    border: 1px solid #c78787;
}

.button-yellow {
    background-color: #fadf98;
    border: 1px solid #fadf98;
}

.button-yellow:hover {
    background-color: #ecb870;
    border: 1px solid #ecb870;
}

Enable the Styles dropdown in TinyMCE

/** Add the Styles dropdown to the TinyMCE editor */
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Populate the Styles dropdown with some styles

/** Populate the Styles dropdown in TinyMCE with some styles */
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
        array(
        	'title' => 'Content box blue',
        	'block' => 'div',
        	'classes' => 'content-box-blue'
        ),
        array(
        	'title' => 'Content box green',
        	'block' => 'div',
        	'classes' => 'content-box-green'
        ),
        array(
        	'title' => 'Content box red',
        	'block' => 'div',
        	'classes' => 'content-box-red'
        ),
        /* Just as an example of what you can do, from alisothegeek.com
        array(
        	'title' => 'Bold Red Text',
        	'inline' => 'span',
        	'styles' => array(
        		'color' => '#f00',
        		'fontWeight' => 'bold'
        	)
        )
        */
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

That’s it! You’re done, now you can use the styles dropdown in TinyMCE to set the content boxes and buttons.

If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.

Agency Hosting Partner

BionicWP

Community Partner

Topics:

3 Responses

  1. Awesome resource, thank you! I was wondering how you would make these content boxes full width, so that covers the entire screen in width?

  2. This is awesome, thanks so much.
    Can you also tell how to populate the buttons in a dropdown with some styles in the editor?

Leave a Reply

Your email address will not be published. Required fields are marked *

New discoveries, every week.
Join thousands of designers, developers, and builders that come to WP Mayor to find the best guides, tools, and services for their next website. One email, once a week.
WP Mayor Newsletter

Hey, design enthusiasts...

Elevate your website designs with our free transformative guide on the 60-30-10 rule.

Discover how this simple, yet powerful, principle can make your designs infinitely better!

By downloading this guide, you are opting in to our email list. We don’t send spam. You may unsubscribe any time.

What's missing?