Fixing P Class Note & Alert Content Boxes After Changing Themes

Changing from Thesis to Genesis can cause problems.

I know Chris Pearson uses P Class for his alert and note boxes.

The CSS is built into the theme so you only need to add the code in your HTML/Text editor like this:

These boxes might not work depending on which framework you move to and which child theme you install.

The Fix.

I know after moving from Thesis to Genesis my boxes where a bit messed up.

The border was right next to the text because there wasn’t any CSS code supporting the boxes.

I have been fixing them manually over the last year but still haven’t finished so i came up with this solution.

Add this code to your child theme’s style.css file.

.note {
background: #F5F6CE;
border: 1px solid #F3E2A9;
display: block;
padding: 20px;
}

.alert {
background: #F6CECE;
border: 1px solid #F5A9A9;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}

You’ll notice the code in blue is different.

You can change this depending on the result which depends on your new theme.

You could also keep them all the same color if you new link color doesn’t go well with the yellow note boxes or red alert boxes.

This is something i have done because of the new link color clashing with yellow and red.

Now all the old boxes i created while using Thesis are grey which pretty much goes with any link color.

Creating Content Boxes

If you haven’t created any colored content boxes you have 2 choices

• Install a plugin and use shortcodes
• Add CSS code for colored content boxes to your child themes style.css file.

Subscribe for new Tutorials