• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Make Blogging Easier

Start, Grow and Make Money

  • Start Here
    • About Me
    • Contact
  • Categories
    • Blogging
    • Affiliate Marketing
    • Affiliate Programs
    • Make Money
    • Blog Traffic
    • WordPress Tips
  • Shop
    • eBooks
  • Deals
    • SiteGround Coupon $3.95
    • ConvertKit Free Month
    • Tailwind Free Month
    • $5 AWIN Affiliate Network
    • More Blogging Resources
  • Blog

How to Add Content Boxes to Your Genesis Child Theme

October 17, 2017 by Susan Velez

Last updated on August 10th, 2018 at 03:41 pm

Do you love the Genesis theme as much as I do? Do you know how to add content boxes to your Genesis child theme?

add content boxes to your Genesis child theme

If not then today is the day that you’re going to learn how easy it is. Grab a cup of your favorite beverage and let’s get started.

If you need help understanding WordPress, I’ve compiled a great list of WordPress tutorials on this blog that will make it easy for you to understand WordPress better. If you’re ready to rock your WordPress blog, then be sure to visit my easy to understand WordPress tutorials for beginners

You’re going to love Genesis once you realize how easy it is to create content boxes that spice up the look of your blog posts.

Why I Love The Genesis Framework

To tell you the truth, I am biased. I purchased my Genesis license back in 2009. When I purchased them, it took me forever to log into my account and start using them.

I only purchased them because the Pro Package was on sale. To tell you the truth, I am not really sure why I bought them.

Maybe it was because I was scared to miss the sale. You know what they say about scarcity.

Anyway, I am glad that I purchased them. Now I have access to all the StudioPress child themes and can change them out whenever I want.

I’ve also learned how to work with the Genesis Child theme just by playing with it while using Desktop Server.

While I am NOT a PHP developer or designer. I’ve learned enough to make the changes and customize it to fit my needs.

It takes a little getting used to, that’s why I’ve created several Genesis tutorials to help you with the basics.

What Is A Content Box?

You may have seen bloggers who use contentbox modules to put text or important information. The border boxes help make your content stick out.

In fact, I use them a lot on my site. Here are some of the ones that I use on my blog.

black and purple content boxes

 

Basically, anything you want to add to a content box can be done on Genesis with a little bit of coding.

Don’t worry, it’s not difficult. If I can do it, I have no doubt that you can do it. If you want the quick low down on adding one to your blog, you can go here.

[clickToTweet tweet=”Let’s Add Content Boxes to Genesis #FreeTraining #Genesis @susanvelez.com” quote=”Let’s Add Content Boxes to Genesis #FreeTraining #Genesis @susanvelez.com” theme=”style4″]

If you want to see how I created mine with a little bit of flare, then stay tuned. Like always, I am going to walk you through step-by-step and show you the exact code you need to add one to your Genesis child theme.

Caution: Before making any type of changes to any of your WordPress files, make sure that you have a current backup. If you need to know how to make a backup, read my tutorial.

How to Add Content Boxes to Your Genesis Child Theme

You’ll need to access your WordPress files, I am on a Mac and I use Sublime text. If you’re on a PC, you might be using Filezilla.

Either one will work, just make sure that you backup your blog before you start messing with any of the files. You don’t want to lose any of your hard work.

Here’s the code you’ll need for the default style online.

/* 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;
}

By default you have 6 colors of content boxes you can use. Feel free to use any of the styles for the colors above.

You can play around with the padding or any other elements you choose.

Let’s Create A Fancier Content Box

The default content boxes for Genesis look amazing. They’ll definitely draw the attention of your readers, which is what you want.

However, if you’re like me, then maybe you don’t want to use the default style box sizing elements. Maybe you want one that has a little bit more flare.

The cool thing is that you can set the width and height to whatever you want. You can also style the border color or change the padding and border to whatever you want to do.

My Syntax Box Code

That’s what I’ve done. As you can see, I don’t always use the same colors. I love wrapping my syntax code inside of the black content box I created.

I personally think that it makes my code stand out better. If you use any type of syntax code on your blog, feel free to use this code.

Of course, you can always change up any of the style elements you want.

.syntax-box{
background-color: #000000;
font-family: ‘Courier New’;
border: 1px solid #bdbdbd;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
color: #fff;
font-weight:600;
font-size: 18px;
text-shadow: 0 1px 1px #000;
border-radius:20px;
}

The great thing about using CSS, is that you can easily change any of the elements you want.

Scroll down to the bottom of this page and see my purple content box in action.

My Purple Content Box

If you’ve noticed some of my blog posts, I have a purple reference box that I’ve added to some of my blog posts. Click here to see one of my purple content boxes.

Here’s the code that I used to create my purple content box and make it a little fancier than the default one.

.reference-box{
background-color: #E6DBF1;
font-family: ‘”Open Sans”,sans-serif’;
border: 1px solid #e6dbf1;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
color: #222 !important;
font-size: 19px !important;
border-radius:20px;
}

As you can see, you can create any type of content box that you want. As long as you’re a little bit familiar with CSS.

No you don’t have to be a designer, heck I’m not. I have managed to make the tweaks and styles to my blog that I have wanted.

Sure one day, I may hire a designer, but right now, I am fine with learning and playing and making the changes that I need.

Hopefully, by me sharing this tutorial, helped you learn how to add content boxes to Genesis.

Genesis Quick Links

Once you become a Genesis user, it’s important to know how to find the help you need quickly. I’ve put together this list to help you find everything you need quickly.

A Beginner’s Guide: This guide will help you learn the ins and outs of using the Genesis framework. The best part is that it’s free.

Child Themes: Take your time and browse all the available child themes you can choose from. If you’re buying an individual theme, you won’t get access to all their themes.

StudioPress Pro Plus All-Theme Package: You understand that your blog is your business. It’s important for you to have access to over 90 child themes you can use in your business without paying another penny.

Genesis Features: Read through all the features before you make a buying decision. There’s nothing wrong with taking your time to do some research before you make a buying decision.

Visual Hooks Guide: Visually see the hooks in your Genesis theme. (this is for the advanced users or people who want to get more indepth with Genesis)

Genesis Specific Plugins: Created by StudioPress specifically for Genesis. I have used Genesis Simple edits (need to know how to work with plugins)

StudioPress Sites: Use this to get free migration to their managed WordPress hosting.

StudioPress Forums: Need help with a specific child them? Don’t hesitate to ask for help in the forums. I’ve used the forums to get answers to several of my questions.

Become a StudioPress affiliate: Love Genesis so much, make money any time someone uses your link to purchase Genesis.

Final Take Away

Most of us who start out don’t have the money to outsource little tasks like this. Don’t feel like you can’t dig into the stylesheet and make the tweaks that you need.

When I first started playing around with WordPress, I felt lost. If you’re not comfortable playing around with your live blog (which I don’t recommend) I personally use Desktop Server to set up WordPress on my localhost.

Hand Picked Articles for You

  • Edit Footer Credits On Your Genesis Child Theme
  • How to Style the Genesis Author Box Without A Plugin
  • Exploring the WordPress Text Widget On Genesis

If you don’t want to spend any money, download something like Xamp or Wamp. Either one will work.

I just prefer Desktop Server because it can do so much. How comfortable are you with making small CSS changes like this on your blog? Let me know in the comments below, I’d love to hear your stories.

Filed Under: How To, WordPress Tips

About Susan Velez

Hi! I'm Susan welcome to my blog. Are you ready to use the Internet and a computer to change your finances? I share tips to help you make money online through blogging, side hustles and other non-traditional methods learn more Twitter, Facebook, Pinterest and YouTube

Reader Interactions

Comments

  1. Ravi Chahar says

    October 17, 2017 at 8:58 am

    Hey Susan,

    I have used Genesis and it’s one of the finest frameworks. But the problems occur because people don’t have the freedom to edit the theme files.

    And adding such boxes can be overwhelming. It’s good to see that you’re providing the code.
    Thanks for sharing with us.

    ~Ravi

  2. Susan Velez says

    October 17, 2017 at 10:31 am

    Hi Ravi,

    Yeah, Genesis does take a little while to learn. However, I really like it.

    Thanks for taking the time to stop by and comment.

    Have a great day 🙂

    Susan

  3. Shantanu Sinha says

    October 18, 2017 at 4:21 am

    Hello Susan,

    Good one over here 🙂

    Just like you I too have bought some of theme which I haven’t explored yet, but yeah they were throwing out such exited
    offers which I can’t stop myself for going up for that.

    I have not been on Genesis child theme but yeah I can say that it is one of the most useful theme one can get.
    Frankly I am just like you, I too hate coding and all stuff, actually I never get going with them.

    I will be sharing this among to my friends so that they could learn from this one.

    Thanks for the share.

    Shantanu.

  4. Susan Velez says

    October 18, 2017 at 5:51 am

    Hi Shantanu,

    I’m not a coder, but I seem to be able to accomplish what I need to do. At least so far I have.

    I’ve finally stopped buying themes and plugins and just working with what I have. Unless I absolutely need something.

    Thanks for taking the time to stop by and comment.

    Hope you have a great day 🙂

    Susan

  5. Rob McDonald says

    October 23, 2017 at 9:13 am

    I have to take issue with Ravi’s comment about not being able to edit the theme files. I am not sure what he means by that, but I have been using Genesis for a while, and I have not had any problems editing the theme files.

    –Rob

  6. Rob McDonald says

    October 23, 2017 at 9:17 am

    Hey Susan,

    I wanted to comment here and share my love for the Genesis Framework.

    I have been using for quite some time, and build a lot of my custom WordPress sites with it. I have to admit though, that it is really not for the beginner. What I like about it as you can take a very basic theme (sample-child-theme), and turn it into what ever you want.

    I am a coder, but I don’t like to start a theme from scratch, it really just takes too much time, so I start with the child theme and customize it however I want. I think these days, this is what a lot of people do.

    Loved your article Susan. Have a great week!

    –Rob

  7. Susan Velez says

    October 23, 2017 at 2:51 pm

    Hi Rob,

    Like you, I’ve been using Genesis child themes for a while. While I don’t do a lot of customization, I haven’t had any issues getting in there and doing what I want to do.

    Glad that you haven’t had any issues editing the theme files. Do you do a lot of customization to the themes?

    Thanks for taking the time to stop by and comment.

    Hope you have a great day 🙂

    Susan

  8. Susan Velez says

    October 24, 2017 at 7:11 am

    Hi Rob,

    Glad to hear that you’re loving the Genesis theme. Like you, I’ve been using it for a while as well. Yeah, it comes with a bit of a learning curve, but I’ve noticed that a lot of beginners are still using it for their blogs.

    I’m not a coder, but have still been able to accomplish what I need to do.

    Thanks so much for taking the time to stop by and comment.

    Have a great day 🙂

    Susan

Primary Sidebar

Follow Me On

Twitter 1.2KFollowers
follow
Youtube 286Subscribers
subscribe
Pinterest 12.4KSubscribers
subscribe
RSS 19Subscribers
Subscribe

Hi! I'm Susan welcome to my blog. Are you ready to use the Internet and a computer to change your finances? I share tips to help you make money online through blogging, side hustles and other non-traditional methods learn more Twitter, Facebook, Pinterest and YouTube

What Are You Looking For?

COPYRIGHT

I love it when you share! Please keep in mind that all images and text on this site are property of Susan Velez. Feel free to use one or two photos provided that a link back to my original post. Please do not remove any watermarks, crop, or edit any of my images without first obtaining written permission from me. Pinning is always welcome and appreciated! Thank you!

Copyright © 2023 · Susan Velez · Powered by WordPress and the Genesis Framework | Affiliate Disclosure | Privacy Policy


Susan Velez website is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed a means for sites to earn advertising fees by advertising and linking to Amazon.com

Copyright © 2023 · Wellness Pro on Genesis Framework · WordPress · Log in

X
Share this
Subject:
Message:
Ajax loader