The steps I took to customise my Thesis theme

If you’re using the Thesis theme and are not doing any customisation to it, you’re not doing any justice to the immense flexibility of the theme! In fact, I think you’re simply wasting your money. Granted, I know not everyone of us is as tech savvy, but at least do something to it so that your theme doesn’t look like one of those free themes!

To help you guys kick-off some customisation juice in you, I’ll show you step by step what I did to customise my theme to make it look like the current one:

1. Install the plugin, “Thesis Open Hook“

When you install it, not only the “Thesis Open Hook” plugin will be installed, the plugins “Thesis Custom Styling” and “Thesis Custom Programming” will be installed too. You need the latter two to do the changes I mention below.

2. Add a pinstriped image to the background

Open up the ‘custom.css’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Styling”. Find the last immediate empty space and key in or copy and paste the following CSS codes:

/* Body and Background */
body.custom {
background: #ffffff none scroll right top;
background-image:url(i/bg.png);
background-repeat:repeat-x;
}

Note that ‘i’ is the folder where I put the ‘bg.png’ file. You do not have to name your background file, ‘bg.png’. Just name it anything you like and make sure you change the codes accordingly.

Click on the “Save Settings” button to save your file.

*3. Add a custom header image to your blog

Open up the ‘custom.css’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Styling”. Find the last immediate empty space and key in or copy and paste the following CSS codes:

/* Header Image */
.custom #header #logo a { display: block; height: 180px; width: 915px; background: url(i/melvin-header.jpg) no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header {border-bottom:none; padding:0}
.custom #header { padding: 0;
}

Note that the width of the image is dependent on the column and sidebar sizes you’ve selected. And ‘i’ is the folder where I place my ‘melvin-header.jpg’ file. Again, the header file can be any name. Just make sure you change the codes accordingly.

Click on the “Save Settings” button to save your file.

4. Add 2 borders – 1 dark grey and a ligher shade of grey

Open up the ‘custom.css’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Styling”. Find the last immediate empty space and key in the following CSS codes:

/* Content Container */
.custom #container {
margin-top: 1em;
margin-bottom: 1em;
padding: 0.6em;
background: #333333;
border: 0.3em solid #565656;
}

#333333 will output the dark grey and #565656 the lighter shade of grey border.

Click on the “Save Settings” button to save your file

5. Bring the header image above the navigation menus

Open up the ‘custom_functions.php’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Programming”. Find the last immediate empty space and key in or copy & paste the following codes:

//Move Header Up
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’); add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);

Click on the “Save Settings” button to save your file.

*6. Apply different colour codes to the navigation menu

Open up the ‘custom.css’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Styling”. Find the last immediate empty space and key in or copy & paste the following CSS codes:

/* Custom Navibar */
.custom ul#tabs {border-bottom:none; border-left:none; background:#333333;}
.custom ul#tabs li {margin-bottom:0; border:none; background:none;}
.custom ul#tabs li.current_page_item a {
color: #fff;
background-color: #333;
font-style:italic;
background-image: none;
}
.custom ul#tabs li.page-item-1 a {
background-color: #304860;
color: white;
}
.custom ul#tabs li.page-item-2 a {
background-color: #4890C0;
color: white;
}
.custom ul#tabs li.rss a { padding-right: 23px;
background: url(i/icon-rss.gif) no-repeat 97% 50%;
color: white;
}
.custom #tabs li a {
color: black;
text-decoration: none;
margin: 0;
padding: 7px 15px;
background: #EBF7FF none repeat-x;
}
.custom ul#tabs li a:hover {
background-color: #333333;
color: white;
text-decoration: none;
background-image: none;
}
.custom ul#tabs li.page_item a:hover {
background-color: #333333;
background-image: none;
}
.custom ul#tabs li.rss a:hover {
background-color: #91918f;
text-decoration: underline;
background: url(i/icon-rss.gif) no-repeat 97% 50%;
}

Click on the “Save Settings” button to save your file.

Note that ‘i’ is the folder where I put the ‘icon-rss.gif’ file. Currently, I only have “Home”, “What About Melvin” and “Contact Melvin” links, therefore, the codes stop at 2. If you want to add more just change the following:

.custom ul#tabs li.page-item-3 a {
background-color: #4890C0;
color: white;
}

‘3′ being the next page menu and ‘4890C0′ being another colour code. Note that 4890C0 is the same as item-2. Therefore, it’s good that you change it to another one.

Have fun customising your Thesis theme! This is not brain surgery. Nobody will die when you make a mistake.

Best regards
Melvin Neo

* The ideas for Step 3 were taken from  www.howtomakemyblog.com and Step 6 from www.berchman.com

Did you enjoy this article? Please subscribe to my feed either RSS Feed or Email to receive all the FREE updates!

Tagged as: Blog, Thesis Theme, WordPress