How to Install and Customize a Thesis Site in a Weekend (Part 4)

Welcome to Part 4. Learn how I customized the default Thesis Theme to create a unique WordPress site. I include css code snippets and take you through the different looks of Middle Path Marketing from the default Kubrick, to the default Thesis Theme to a uniquely customized Thesis site.

Learn how I use a unique background, header, multimedia rotator boxes with images and links to pages, adjust fonts, tailor headlines, sidebars and tweak many other elements to make the site unique.

Disclaimer

• Be aware that like many WordPress and Thesis Theme users I am self taught and I do not guarantee that the use of any of the following code will make your site look exactly like the case study.
• The custom.css code is to illustrate aspects of the site’s design. Feel free to use any of it and if you have any problems let me know and I will do my very best to assist you further.
• Make sure you back up your custom.css file and/or your site before experimenting with any changes. I have learnt the hard way many times.

Have Fun

Yes, have fun! Learning about code for the first time is exciting. When you go from no knowledge to some knowledge, and gradually build on it (also dangerous sometimes – don’t get cocky) you realise that you can create a spectacular site without paying anybody to do it for you!

NOTE:

• The default Thesis Theme screenshot above is a site immediately after installing WordPress and installing Thesis Theme - BEFORE you add any content.
• The unique Thesis site above has content and is several hours old – AFTER adding some pages, posts, categories and images and customizing the appearance using code offered later on in this post.

Upgrading from Thesis Theme 1.5 or 1.6 to 1.7

If you currently use Thesis you might want to make sure you are using the latest version of Thesis Theme.

The upgrade (in the early days) has some hiccups, depending on what instructions you follow. You also need to have the time to do site backups and spend time fixing any bugs you come across due to plugin issues or not holding your mouth right (a bizarre reason why sometimes it works and sometimes it doesn’t with no scientific or logical reason).

• I have not yet upgraded Thesis Theme HQ as I need some quiet time and my kids are on school holidays at the moment for a few weeks.

I highly recommend Philip Barron’s upgrade guide - also recommended by the Thesis Theme Forum. It seems to have a higher success rate for many Thesis users who took the time to complain of their problems (or lack thereof) when upgrading.

Read Philip’s easy to follow Getting there: Upgrading to Thesis 1.7 post.

Installing Thesis Theme 1.7 from scratch

Philip Barron has a great article on First-time Thesis installation.

Customizing Thesis Theme

The following screenshots show most of the settings I use to get Middle Path Marketing to look like it does above.

Thesis Options Settings - Click on image for full size:

Design Options Settings - Click on image for full size:

Code snippets

• You can use the Thesis Design Options to adjust your Fonts, Colours and More or alter these elements using the custom.css (aka custom style sheet).
• I prefer to use the custom style sheet because I can copy and paste without having to go through numerous drop down menus.
• If you don’t want to play with the custom.css code you can select colours, fonts, nav menu, multimedia box, etc settings using drop down menus in the Thesis Design Options.
• If you would like to use custom.css code and/or learn how to adjust custom code to get a look like Middle Path Marketing, check out some of the code from Middle Path Marketing, offered below.
  • I am not offering all of my custom.css code – just some snippets to give you an idea of what changes to make to get a unique look.
• Note that I checked the “use custom stylesheet” box.

Unique background

Default Thesis Theme background

• white ~ choose to add a cool shadow with a check of a box
• use one of several background images that come with the Thesis Theme package e.g. ocean

Read how easy it is to add custom backgrounds with Thesis at the DIY Themes site.

Middle Path Marketing background - custom.css code
Background image of a forest

.custom #container {
background: none;
padding-top: 0em;
}
body.custom {
background:  url(images/path.jpg) center top fixed no-repeat;
}

Background for page – same as content area
.custom #page { background: none; padding-top: 0em; }
.custom .page { background: none; padding-top: 0em; }

Unique header

Remove background and padding from header area
.custom #header_area .page {
padding-top: 0em;
background: none;
}

Header space
.custom #header {
background: none;
border-bottom: none;
display: block;
height: 269px;
outline: none;
padding: 0;
}

Header image
.custom #header #logo a {
background: url(images/mpmhead.jpg) center top no-repeat;
display: block;
height: 269px;
margin: 0 auto 0;
text-indent: -9999px;
width: 100%;
}

Remove tagline from header space
.custom #header #logo,
.custom #header #tagline {
text-indent: -9999px;
}
.custom #header #tagline { height: 0; }

Navigation Menu

• I recommend using the Thesis OpenHook Plugin to easily change the location of your nav menu to below the header.

Nav (menu) custom.css
.custom .menu,
.custom .menu a,
.custom .menu li ul {
background: #b1bda3;
border: none;
color: #D3D3D3;
font-family: Kristen ITC, Georgia, "Trebuchet MS", Helvetica, sans-serif;
font-style: bold;
font-size:20px;
}

Menu background, height and padding
.custom .menu {
background: #b1bda3;
height: 40px;
padding-bottom: 0px;
}

Menu fonts
.custom .menu a {
background: #none;
color: #222222;
font-size: 16px;
letter-spacing: 2px;
text-transform: none;
text-decoration: none;
outline: none;
padding-bottom: 0em;
}

Menu hover
.custom .menu a:hover {
background: #b1bda3;
color: #ffffff;
}

Menu current item styling
.custom .menu .current > a,
.custom .menu .current-cat > a {
color: #ffffff;
cursor: text;
}

Menu hover
.custom .menu .current > a:hover,
.custom .menu .current-cat > a:hover,
.custom .menu .current-parent > a:hover,
.custom .menu .current-cat-parent > a:hover {
background: #b1bda3;
color: #222222;
cursor: text;
}

Menu background and font colour
.custom .menu li ul a {
background: #b1bda3;
color: #222222;
}

Dropdown hover background and font colour
.custom .menu li ul a:hover {
background: #b1bda3;
color: #188742;
}

Current item hover
.custom .menu li ul .current > a:hover,
.custom .menu li ul.current-cat > a:hover {
background: #b1bda3;
color: #f5f5f5;
cursor: text;
}

Feature Box

The light coloured strip along the top of the site, below the nav menu with links to the main pages and posts.

• I recommend the Thesis OpenHook Plugin again – to insert whatever you would like in the Feature Box area – click for larger image :

Feature box custom.css

.custom #feature_box {
background: #f5f5f5;
/*height:300px;*/
padding-left: 1.5em;
padding-right: 1.5em;
padding-top: 1.8em;
padding-bottom: 1.8em;
line-height: 1.8em;
font-size: 1.0em;
}

Content Box

.custom #content_box {
background: #b1bda3;
margin-top: 0em;
margin-bottom: 0em;
padding-top: 0px;
}

Content

.custom #content {
background: #b1bda3;
margin-top: 0em;
}

No Background Content Page Area

.custom #content_area .page { background: #b1bda3; }

Teasers

.custom .teasers_box .entry-title a { color: #222222; font-family: Kristen ITC, Georgia; font-style: bold; font-size:20px; line-height:1.3em;}
.custom .teasers_box .entry-title a:hover { color: #188742; font-family: Kristen ITC, Georgia; font-style: bold; font-size:20px; text-decoration: none; line-height:1.3em;}
.custom .teasers_box {
border-bottom: 1px solid #cccccc;
margin-top: 10px;
}
.custom .teasers_box p { font-size: 14px; }
.custom .teaser .teaser_author a,
.custom .teaser a.teaser_comments,
.custom .teaser a.teaser_category,
.custom .teaser .edit_post a {
border-bottom: none;
}

Post Box

.custom .post_box {
background: /*#FFFFFF*/transparent;
color: #222222;
margin-left: 0em;
margin-right: 0em;
margin-top: 2.2em;
padding: 1em;
}

Multimedia Box Images

Add the code for your 1, 2 or 4 ads or images…

- with links to relevant  pages or sites

…in the ‘Custom Code’ field in the ‘Thesis Design Options’ panel.

This is the code I used for adding the 4 images in the multimedia box / rotator area – click for larger image:

The following code is the custom.css for the Multimedia box images:

.custom #multimedia_box {
margin-top: 1.1em;
padding: 1.1em;
padding-bottom: 0;
}
.custom .image_box,
.custom .custom_box {
background: none;
border: none;
}
.custom div.adblock img {
padding: 0px;
background-color: #F5F5F5;
display: inline;
}
.custom .cenx {text-align: center;}

Sidebars

.custom #sidebars {
background: none;
border: none;
padding-top: 0em;
}
Widgets in Sidebar
.custom .widget li { color: #222222; border-top: 1px solid #d0d0d0; padding-top:0.5em;}
.custom li.widget a {
color: #222222;
text-decoration: none;
}
.custom .textwidget { color: #222222;}
.custom li.widget a:hover { color: #188742; text-decoration:underline; }

Footer

.custom #footer_area .page { background: #b1bda3; }
.custom #footer_area {background: #b1bda3 /*url(images/footer.jpg) repeat-x*/; }
.custom #footer {
text-align: center;
font-size: 12px;
background: #b1bda3;
}
.custom #footer a { color: #663333; }
.custom #footer a:hover { color: #188742; text-decoration: underline; }

Custom Bullets

.format_text ul { list-style-image: url('images/yybullet.png'); background-position: 1.5em; padding-left: 0.5em; }
.format_text ul li {color: #222222; margin-left: 1em; }

Change the main font colour, font family and font size

.custom p {
color: #222222;
font-family: Georgia, "Trebuchet MS", Verdana, sans-serif;
font-size: 14px;
}

Headlines size, colour, style

.custom h1, h2 { color: #222222; font-family: Kristen ITC, Georgia; font-style: bold; font-size:20px; line-height:1.3em;}
.custom h3 { color: #222222; font-family: Kristen ITC, Georgia; font-style: bold; font-size:18px;}
.custom h4, h5, h6 { color: #222222; font-family: Kristen ITC, Georgia; font-style: bold; font-size:15px;}
.custom h1.entry-title, .custom h1.entry-title a {
color:#222222;
font-size:30px;
font-style: bold;
font-family: Kristen ITC, Georgia;
}

Links

Colour and style of links
.custom a, .custom #sidebars a {
color: #663333;
text-decoration: none;
font-style: bold;
}

Change the colour and style of links when they are hovered over
.custom a:hover, .custom #sidebars a:hover {
color: #188742;
text-decoration: underline;
font-style: bold;
}

Remove dotted lines around links
a:focus { outline: none }

Comments

Do not display comments closed if they are closed & Do not display comment numbers
.custom .comments_closed { display: none; }
.custom .comments_closed { display: none; }

Do not display comment brackets if comments are closed
.custom .comments_closed { display: none; }

Middle Path Marketing.com is currently in our treasure trove of future projects - because we were spreading ourselves too thin. Therefore the links to Middle Path Marketing have been disabled.

If you are interested at seeing what the home page looked like in its entirety, a jpg is here.