This post can also be called “How I Designed My Site” because this is a list of almost all the modifications I made to my default Thesis install. Please don’t just take all of my customizations, but rather learn from them. After reading through all of these you should get a basic understanding of Thesis Hooks, custom functions, and your custom.css file and also the knowledge to make some basic (and more advanced) hacks.
Here are 10 ways to make your Thesis site stand out from the rest:
Add a Background Image
One line of code can have you differentiating your Thesis site very quickly. Just add this to your custom.css:
body.custom {background-image:url('image');}
That’s the code for a perfectly tile-able image. You can use CSS to change the which axis it tiles on.
Make a Full-Width Header
I like the using and customizing the page framework over the full-width. Staying in the page framework meant that I had to get rid of the header completely so that it’s not wrapped in a container, and put it back spanning the whole page. This requires a custom function.
fremove_action(’thesis_hook_before_header’, ‘thesis_nav_menu’);
remove_action(’thesis_hook_header’, ‘thesis_default_header’);
function full_width_header() { ?>
<div id=”nav_area” class=”full_width”>
<div class=”page”>
<?php thesis_nav_menu(); ?>
</div></div>
<div id=”title_area” class=”full_width”>
<div class=”page”>
<div id=”header”>
<?php thesis_default_header(); ?>
</div></div></div>
<?php
}
add_action(’thesis_hook_before_html’, ‘full_width_header’);
Source: Francis Raymond
That also moves the navigation area below the header, so if you don’t want to do that then just remove the relevant code.
Make a Clickable Header Logo
Ah yes, the clickable header logo. Such a sought-after and useful customization and yet so easy to do.
.custom #title_area {background:#000; padding:0; border-bottom:none; color: text-indent: -9999px;}
.custom #header #tagline { height: 0; }
.custom #header {padding: 0; border-bottom: none;}
.custom #logo a { display:block; height:100px; width:100px; background:url('yourimagesource') center no-repeat; text-indent:-9999px; }
Make sure to change the background, height, width and image source to their appropriate values.
Add Adsense to Top of Post
This is a really easy way to add Adsense into your blog without manually doing it or using a plugin.
Put this in your custom_functions.php:
<pre>
function add_adsense() {
if (is_single()) {
?>
/// ADSENSE CODE
<?php
}
}
add_action('thesis_hook_after_headline', 'add_adsense');
Thesis makes advertising really easy as you can change the hook to place the code almost anywhere in your blog i.e after your posts, in the sidebar etc.
Create an After-Post Box
You can put anything in this box you’re about to create. I like to advertise my RSS feed and Twitter account, but you can put an advertisement or an “about the author” or whatever else you’d like.
function post_footer() {
if (is_single())
{
?>
<div class="footerbox">
Put whatever you'd like in here.
</div>
<?php
}
}
add_action('thesis_hook_after_post_box', 'post_footer');
Notice I wrapped it in a Div. Go to your custom.css and add #footerbox{} with some styling inside if you’d like.
Use Custom Teasers
I wanted my teasers to be sort of unique. I didn’t want a preview of the post, I just wanted the headline. Accomplishing this in Thesis is quite easy. First you’ll have to make changes to the Post Teasers section of the Design Options to set what you’d like to include. I chose just the title and date.
Then open up custom.css and add
.custom .teaser {
width: 100%;
margin-top: 2em;
padding-top: 2em;
border-top: 1px dotted #bbb;
text-align: justify;
}
.custom .teasers_box {
padding-top: 0;
padding-bottom:0;
border-top: 0;}
You can also change the headline style by using .custom .teasers_box h2 {whatever}
Reference: DIY Answers
Change Sidebar Colour
This is one of the easiest changes to make. In order to make the sidebar and post content different colours, you need to add a background to the whole container and add a background to the post content. The sidebar will be the container colour, and your regular content will stay white (or whatever you’d like).
.custom #content_box {background-color: #eee; }
.custom #page { background: #fff; }
Use a Different Link Colour in Sidebar
When you have your sidebar in a different colour than your posts, having a single link colour won’t always vibe. Luckily it’s one-two lines of code in your custom.css to make everything pretty again.
.custom .widget a, .custom .widget a:visited {color: #191919;}
Change the Post Title Background Colour
This is one of my favourite customizations. It’s very easy to do and can really spice up a theme. It adds a background bar behind the post title and makes it very easy to find the next post.
.custom h2 {background: #000; color: #fff; font-size: 24px; padding: 7px;}
You’ll probably want to change the header links to match now, especially if you’re using a contrasting bar.
.custom h2 a, .custom h2 a:visited {background: #000; color: #fff;}
.custom h2 a:hover {color: #999999; text-decoration: none;}
To make it follow through to individual post pages just adjust .custom h1.
Notes and More Customizations
Some of this I thought of and customized myself, other stuff I took from various sources on the internet. I copied all of these over from my custom.css so If you recognize any of your code here, please let me know and I’ll give you credit. Also, If I made any errors here or forgot to copy something etc etc let me know and I’ll get a fix up.
If you’re interested in more customizations for the Thesis theme, or pre-made skins, make sure to check out Theme Thesis. There are lots of goodies on there.
In case you don’t have Thesis and for some reason read through this post and think it’d be awesome to be making these customizations, make sure to go and pick up the theme. It’s really worth it.
