If you have enabled the Thesis Feature Box in your Theme, then it is probably the first thing to show up when a reader reaches your blog. So why don’t you use it for things like introducing the reader to your blog, pre-selling, marketing or promoting content. In this post you will learn exactly that – How to style the Feature Box and put in relevant content.
What will we Create?
Enabling Thesis Feature Box
Enabling the Feature Box with Thesis is pretty simple – it doesn’t test your programming skills! From your Wordpress Admin Dashboard, navigate to Appearance => Design Options and the “Feature Box” appears right at the center, near the bottom. For our tutorial, we will use the following options:
- In your Content Column
- On Home Page Only (if you wish it everywhere, select Sitewide option)
- Above all Posts
Creating 2 Styled Columns in the Feature Box
Next, we will create 2 columns in the feature box with custom styles. Then we will worry about what content to place within them.
Copy the following into the custom.css CSS File. You can locate this file under the following path – <your thesis theme path>/custom/custom.css
/* Feature Box Styling */
.custom #feature_box {
background:#DDDDDD;
border-bottom:1px dotted #800000;
border-top:1px dotted #800000;
height:125px;
border-left:6px solid #800000;
border-right:6px solid #800000;
}
#my-feature-box {
width:100%;
height:125px;
color:#800000;
font-size:14px;
}
#my-feature-box h2 {
color:#800000;
font-size:20px;
letter-spacing:1px;
margin-bottom:3px;
}
#feature-box-column-left {
width:45%;
float:left;
height:125px;
margin-left:1px;
}
#feature-box-column-right {
width:45%;
float:right;
height:125px;
}
Copy the following into the custom_functions.php File. You can locate this file under the following path – <your thesis theme path>/custom/custom_functions.php
/* Feature Box */
function featurecontent() { ?>
<div id="my-feature-box">
<div id="feature-box-column-left">
<h2>Welcome to <?php bloginfo('name'); ?></h2>
I am <a href="<?php bloginfo('url'); ?>/**About Page Name**">Ashwin</a> and this Blog is about Web Design, Blogging Tips and Thesis Customization Ideas. Check out more about me <a href="<?php bloginfo('url'); ?>/** About Page Name**">here</a>.
</div>
<div id="feature-box-column-right">
<h2>Free Thesis Tips</h2>
<!-- Change the Image Name to the Thumbnail you wish to use -->
<a href="**Your Thesis affiliate Link**"><img src="<?php bloginfo('template_url'); ?>/custom/images/thesis7575.jpg" border="0" align="right"/></a>
Check out some Cool and Free Thesis Customization Tips available <a href="<?php bloginfo('url'); ?>/** Thesis Tips if you are providing **">here</a>. They are absolutely FREE!
</div>
</div>
<?php
}
add_action('thesis_hook_feature_box', 'featurecontent');
A Few Things to Change in the PHP Code:
- Change the name in the first box to your name and change the link for the “About” page to the correct location.
- Change the Description of your blog in the first box.
- Feel free to change the header, content and images in the second box to something that you wish to promote.
How to Change Colors to Fit Your Theme?
I have tried to use colors that go well with most of color schemes. However, if you wish to change the design, use this as a guide.
/*
Change background: hex value to change the background color
Change border-bottom,border-top: hex values to change Top and Border line colors
Change border-left,border-right: hex values to change Left and Right thick border colors
*/
.custom #feature_box {
background:#DDDDDD;
border-bottom:1px dotted #800000;
border-top:1px dotted #800000;
height:125px;
border-left:6px solid #800000;
border-right:6px solid #800000;
margin-top:5px;
}
/*
Change color: hex value to change the Text colors
*/
#my-feature-box {
width:100%;
height:125px;
color:#800000;
font-size:14px;
}
#my-feature-box h2 {
color:#800000;
font-size:20px;
letter-spacing:1px;
margin-bottom:3px;
}
How to Change This Into a 3 Column Layout?
If you wish to change this into a 3 column layout, then use the following CSS and Custom functions code.
/* Feature Box Styling */
.custom #feature_box {
background:#DDDDDD;
border-bottom:1px dotted #800000;
border-top:1px dotted #800000;
height:170px;
border-left:6px solid #800000;
border-right:6px solid #800000;
margin-top:5px;
}
#my-feature-box {
width:100%;
height:170px;
color:#800000;
font-size:14px;
}
#my-feature-box h2 {
color:#800000;
font-size:20px;
letter-spacing:1px;
margin-bottom:3px;
}
#feature-box-column-left {
width:33%;
float:left;
height:170px;
margin-left:1px;
}
#feature-box-column-middle {
width:33%;
float:left;
height:170px;
}
#feature-box-column-right {
width:33%;
float:left;
height:170px;
margin-left:3px;
}
And here is the PHP Code to be added into the custom_functions.php file.
/* Feature Box */
function featurecontent() { ?>
<div id="my-feature-box">
<div id="feature-box-column-left">
<h2>Welcome to <?php bloginfo('name'); ?></h2>
I am <a href="<?php bloginfo('url'); ?>/**About Page Name**">Ashwin</a> and this Blog is about Web Design, Blogging Tips and Thesis Customization Ideas. Check out more about me <a href="<?php bloginfo('url'); ?>/** About Page Name**">here</a>.
</div>
<div id="feature-box-column-middle">
<h2>Subscribe to Newsletter</h2>
To get interesting and useful updates, consider subscribing to the Weekly newsletter. We will reach you in your Inbox.
</div>
<div id="feature-box-column-right">
<h2>Free Thesis Tips</h2>
<!-- Change the Image Name to the Thumbnail you wish to use -->
<a href="**Your Thesis affiliate Link**"><img src="<?php bloginfo('template_url'); ?>/custom/images/thesis7575.jpg" border="0" align="right"/></a>
Check out some Cool and Free Thesis Customization Tips available <a href="<?php bloginfo('url'); ?>/** Thesis Tips if you are providing **">here</a>. They are absolutely FREE!
</div>
</div>
<?php
}
add_action('thesis_hook_feature_box', 'featurecontent');
Conclusion
The options are endless, if you plan to start using the Thesis Feature Box. This is definitely just the beginning. Contact me @thotsunlimited or ashwin.chandrasekaran@gmail.com if you need more help with the Thesis Feature Box
Guest Post by Ashwin, who blogs about Blogging, Web Design, Wordpress and the Thesis Theme at Thoughts Unlimited.
