How to get colored content boxes

Support
#1

How do I get content boxes like the one below in my blog post? I tried the instructions below which I found doing a google search but did not work

*/Green content box———————– */
.content-box-green {
margin-bottom: 30px;
overflow: hidden;
padding: 30px;
background-color: #18B888;
color: #fff;
}
*/Gold box with left border———————– */
.content-box-gold{
margin-bottom: 30px;
overflow: hidden;
padding: 30px;
background-color: #dfd09c;
border-left: 8px solid #C6AC4F;
}
*/Plum box with border———————– */
.content-box-plum {
background-color: #cb93c1;
border: 1px solid #351930;
margin-bottom: 30px;
overflow: hidden;
padding: 20px;
}

HOW TO USE CONTENT BOXES WITHIN YOUR POSTS
Once you’ve added the CSS for content boxes, you will have to manually add code in the post where you want the content box to appear. The content box is created with a div class. Switch to your text mode and use the following code:

This is what you want to inside the box
The information inside the quotations needs to match the CSS class .content-box-plum at the beginning of the code you pasted into your CSS.
#2

Hi there,

I tried checking on of you blog articles but I can’t seem to see an paragraph where you added the classes that you mentioned in the CSS code. If you want the CSS code you added to take effect on a text block, you will have to add a class to a div or p tag that contains the text.

For example:

<p class="content-box-green">Fiverr has come along since their launch, when I started on Fiverr, all the gigs had a front end price of $5, but they are now many new features which allows you to price your gigs higher and send custom offers, therefore the potential to make money on Fiverr is even better than before.</p>

Since in the example above, the class that is added to the paragraph is content-box-green then the following CSS code should take effect to the block:

.content-box-green {
    margin-bottom: 30px;
    overflow: hidden;
    padding: 30px;
    background-color: #18B888;
    color: #fff;
}

Kindly also make sure that you do not have any CSS errors in the codes you have added in the global CSS to make sure that the CSS styles you added will take effect.

You can check for CSS errors using this tool.

Hope this helps.

#3

After using the tool, it show zero errors and 19 warnings, should I be concerned

#4

Hi there,

That should be fine. Warning are just to give you info about CSS coding standards such to avoid the use of !important.

You code will still work as long as there are no CSS errors.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.