Searching for the best way to highlight part of your posts content in a feature box? There’s an easy way to display a line or paragraph of text in a colored box using HTML Code tags for Alert & Note Boxes.
But they won’t work for multiple paragraphs with line breaks or content which includes an email form or javascript.
I’ve already shown you how to Add a Feature Box to Thesis using PHP code but the placement options are limited so lets take a look at another method using CSS that’s more flexible and doesn’t require any PHP editing.
Solution – In this simple CSS tutorial i’ll show you how to manually create a feature box for any location in your posts or pages.
There’s 2 ways to add CSS code to your site.
- Inline – Unique to one page/post
- External – Site wide (Globally)
External CSS File – Using Thesis Custom CSS File Editor
Adding CSS code to the Custom CSS file editor in Thesis or your Style.css file if you’re not using the Thesis theme, is the best way because once added, you can simply add the tags to other posts/pages and achieve the same result.
Inline CSS
If you add the CSS inline, within a single post, then you need to add the full code every time you want to create a feature box to highlight sections of your content in future posts.
Thesis Inline CSS Class Field
Custom CSS File Backup
The advantage of using the Thesis custom.css editor is that you don’t need to backup this custom file every time you upgrade WordPress. If you upgrade Thesis then you can simply backup the file using the Thesis > Manage Options > Download Options > Design Options. Otherwise your custom code will be overwritten and lost when you update.
Alert: Always create a backup of the file you are editing before you start making changes to it. If you make a mistake simply delete the file and upload the backup to start again.
Feature Box CSS Code
/* FEATURE BOX - YELLOW */
.format_text .highlight_box_yellow {
padding: 0 1em 0 1em;
margin: 0 0 0 0;
background: #FEFD80;
border: 1px solid #B28F00;
}
Paste this code at the end of your Custom CSS file editor or style.css file
You can edit the colors to match your own styling & Decoration choice as well as change the margins, spacing and border dimensions.
In Post CSS Tags
To get the CSS code to work in your post or page simply add the opening (start) class tag and the closing (end) Div tag to the content you want in the feature box.
<div class="highlight _box_yellow">Your content Here</div>
Next time you want to use the feature box to highlight content, you simply wrap your content in these blue tags so there’s no need to add the code again to your CSS file editor.
Colored Box Plugins
The WordPress plugins directory also offers plugins that will do this trick for you if you’re a non coding type or short on time. There’s also a premium plugin which uses tags to create colored boxes amongst many other styling features for non coders
Finished Feature Box Highlighted in Post
You could use a hook after content with some php as an alternative method or the add after post code from the Thesis users guide.
Update: The easiest way to do this would be to use the Thesis Hook plugin or the Woo frameworks Hook Manager.
I’m also using mailchimp with Wooforms however you could use the mailchimp form code or aweber form code on its own. Better still, the outstanding gravity forms plugin which integrates perfectly with mailchimp and aweber is another excellent option.
Leave a Reply
You must be logged in to post a comment.