• Skip to main content

Premium WordPress Themes

  • Genesis Pro
  • Blocks
  • Custom Blocks
  • Framework
  • Themes
  • Hosting
  • Agencies
  • My StudioPress
← Go back to StudioPress Blog

Design Tips

Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons

Brian Gardner on September 11, 2012

A few months ago I published separate tutorials on how to add content boxes and how to add color buttons to your website. Apparently that struck a cord because there was a number of people who left comments those posts.

With that said, I thought it’d make sense to make this process available here at StudioPress, considering we get a lot more traffic here than I do on my site.

Colored Content Boxes

Here are the 6 content boxes that this tutorials will show you how to implement:

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.

In your text editor, all you need to do is wrap the text in a div with a class applied to it. Here’s how that should look:

Add Content Box CSS to Your Style Sheet

In your theme’s style.css file, place the following code and edit as necessary:

Color Buttons

Here are the 6 color buttons that this tutorials will show you how to implement:

Blue Button Link

Gray Button Link

Green Button Link

Purple Button Link

Red Button Link

Yellow Button Link

In your text editor, all you need to do is add a class to your link. Here’s how that should look:

Add Color Button CSS to Your Style Sheet

In your theme’s style.css file, place the following code and edit as necessary:

It’s THAT simple. So go on, add some content boxes or some color buttons to your website, and stand out!

About Brian Gardner

Designer. Founder of StudioPress. Creator of Frost.
Connect with him on LinkedIn or follow him on Twitter.

Footer

© 2023 WPEngine, Inc.

Products
  • Genesis Pro
  • Blocks
  • Custom Blocks
  • Framework
  • Themes
  • Hosting
  • Agencies
Company
  • Brand Assets
  • Terms of Service
  • Acceptable Use Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • Facebook
  • Twitter
  • Dribbble