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?
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.
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.
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.
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-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.
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.
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.
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
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
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.
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
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
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
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
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