As with most bloggers, I frequently tweak the design and functionality of my site. Most of the time, the changes have a practical purpose, but there are times when modifications are born out of boredom.
Because I’ve gotten so many questions about the various modifications and enhancements I’ve made to my blog, I decided to write a post detailing how I did so. If you don’t already know, all of these things wouldn’t be possible without Wordpress and the excellent Thesis Theme by DIYthemes.
Change Sidebar Color
One of the easiest and most effective design modifications to Thesis is changing the background color of your sidebar. To do so, simply insert the following code into your custom.css file:
.custom #content_box {background-color:#F5F5F5;}
.custom #content {background-color:#fff;}
Both lines are necessary for this to work correctly! There is one minor bug with this solution, however. If for some reason, you have a page with a longer sidebar than content, the sidebar color will bleed over after the content. If done correctly, this ‘bug’ could actually look really cool on your site!
Insert Header Image
To replace the text on the default Thesis installation with a header image, simply paste all of the following code into your custom.css page.
This will make the header clickable, define the size, and place the background. Be sure to change the height, width, and url to match your site:
.custom #header #logo a { display: block; height: #px; width: #px; background: url('INSERT IMAGE URL') no-repeat; outline: none; }
This code will cast the text title and tagline out of the way:
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
This will remove any whitespace after the header image:
.custom #header #tagline { height: 0; }
This will remove the padding around the header, so there is no whitespace in any other region:
.custom #header { padding: 0; border-bottom:none;}
Social Media Links & Profile Box at Bottom of Posts
For a box that will display social media links and an author profile, keep reading! This is relatively simple, but does require that you edit custom_functions.php and custom.css. It makes use of Custom Hooks in Thesis. Using php, it will automatically pull each author’s description, photo, and number of posts.
This code was taken from a post on Blogussion and heavily modified to fit my needs.
First, paste all of this into your custom_function.php:
function post_footer() {
if (is_single())
{
?>
<div class="socialmedia"><p><strong>Share this post:</strong> <a rel="nofollow" href="http://twitter.com/home/?status=<?php the_title(); ?> - http://YOUR_URL.com/?p=<?php the_ID(); ?>">Tweet It</a> | <a rel="nofollow" href="http://www.facebook.com/sharer.php" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t='+encodeURIComponent(document.title), 'facebook','toolbar=no,width=700,height=400'); return false;">Facebook It</a> | <a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>">Stumble It</a> | <a rel="nofollow" href="http://www.digg.com/submit?phase=2&url=<?php the_permalink() ?>">Digg It</a> | <a rel="nofollow" href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=INSERT_TITLE">
Delicious It</a></p></div>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 120 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> awesome articles for us. <?php the_author_description(); ?></p><p>If you liked this post, you will definitely enjoy our others. Subscribe to the feed via RSS or EMAIL to get instantly updated for those awesome posts soon to come.</p>
</div>
<?php
}
}
add_action('thesis_hook_after_post_box', 'post_footer');
Be sure to insert your own URLs in the specified spots above. Also, feel free to add or remove links to additional sites.
You can style it all in any way you like, but here’s my CSS for the profile box to get you started:
.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }
And the css for the Social Media Box:
.socialmedia { background: #FFFBCC; border-top: 1px solid #E6DB55; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1em; text-align: center;}
.socialmedia p { color: #515151; font-size: 1.3em;}
Change Nav Hover Colors
Changing the hover colors for your nav menu is pretty straighforward. For the colors of the nav menu only, put this in your custom.css and change the colors as you see fit:
.custom ul#tabs li a:hover {color: #fff; text-decoration: underline; background-color: #1873a1; }
And to change the hover color of your Subscribe to RSS link, use this:
.custom ul#tabs li.rss a:hover { background-color: #fff; color: #111; }
Modify Archives
I’ve been asked many times how I added a post listing and reorganized my archives page. I do like the simplicity that thesis includes with their archives page, but I wanted to add a little more functionality.
If you want to achieve something similar to my archive page, first put this in custom_functions.php:
function my_archive() {
?>
<div class="archive">
<div class="archivel">
<h3>By Category:</h3>
<ul>
<?php wp_list_categories('sort_column=name&title_li='); ?>
</ul>
<h3>By Month:</h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
<div class="archiver">
<h3>By Post: (Last 100 articles)</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=100'); ?>
</ul>
</div>
</div>
<?php
}
remove_action('thesis_hook_archives_template', 'thesis_archives_template');
add_action('thesis_hook_archives_template', 'my_archive');
And place this is custom.css:
.custom .archive h3 {margin-top: 0;}
.custom .archive ul {font-size: .85em; }
.custom .archivel { float: left; width: 40%;}
.custom .archiver { float: right; width: 60%;}
Wordpress Image Captions
Image Caption Here
Code Removed. This was included in the most recent version of Thesis.
Remove Divider Line from Sidebar/Content Area
Another simple fix! To remove the vertical line between the Sidebar and Content Area, simply put this one line into custom.css:
.custom #content_box {background:none;}
Combined with the sidebar background color shown above, this will look very good!
Better CommentLuv Styling
The CommentLuv plugin is a great way to show your commenters that you appreciate them. Below their comment, almost magically, a link to their blog’s newest post will show. While the default styling isn’t bad, it could use some help.
If you like how it looks on my site (see above), simply paste this code into the Styling textfield in the CommentLuv settings:
Code Removed. The new version of CommentLuv makes this irrelevant.
Remove Category Titles on Category Pages
On every category page in Thesis, there is a visible title near the top, above all content. This simple code will remove those titles:
#archive_info {display:none;}
If you have any questions, you can ask them in the comments and I will try my best to help you!
