• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Add Simple Colored Content Boxes in your site

Last Updated on December 2, 2018 Favorited: 0 times

This tutorial provides the steps to create some colored content boxes to use in our site. You can use it on any WordPress theme or HTML template as we are going to use the simple HTML and CSS method.

Installation:

Add the following CSS in style.css of your child 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;
}

Usage:

<div class="content-box-COLOR">TEXT CONTENT GO HERE</div>

We can use the following color class based CSS mentioned above.
blue gray green purple red yellow

Example:

<div class="content-box-blue">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.</div>

Here change the class content-box-blue to yours.

Shortcode:

Most of the times, we don’t want to switch the editor mode to HTML so we can simply create a shortcode and will use it.

Add the following in functions.php of your child theme.

// Add content box Shortcode
add_shortcode( 'content-box', 'content_box_shortcode' );

function content_box_shortcode( $atts = [], $content = null ) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'color' => 'blue',
		),
		$atts
	);
	//return
	return '<div class="content-box-' . $atts['color'] . '">' . $content . '</div>';
}

Usage:

[content-box color="COLOR"]Text Content[/content-box]

default is blue.

Example:

[content-box]Sample Text[/content-box]
[content-box color="red"]Sample Text in Red Box[/content-box]

Source:

https://studiopress.blog/custom-message-boxes/
https://www.studiopress.com/colored-content-boxes-buttons/

Related Posts

  • Cookie Consent bar in Genesis
  • Add Beautiful Notification Boxes with Icons in your site

Categories: Free Content, Genesis Tutorials Tags: content box, Message Box, notification box

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service