How I Customized my Thesis WordPress Theme

Posted by: Toan Nguyen Minh on August 2 in My Style

Too tired. Today, I spend most of my time to learn and customize for my thesis wordpress theme to it be better and more pretty. I have read some articles by experts in customizing for thesis theme as: 8 Thesis theme design tips to make your blog better, 6 ways I customized my WordPress blog theme and how, 4 Great Ways I Customized my Thesis Theme, Customizing Thesis with custom.css, How to Customize the Thesis WordPress Theme and etc… And then I decided to try to design a thesis skin:

The first, you just download Thesis OpenHook plugin then upload to your hosting and active it. Then follow the following:

Click to Appearance —> Thesis Custom Styling —> Add this code:

/*
File:            custom.css
Description:    Custom styles for Thesis
*/

body.custom { background: #333333; color: #292929; margin: 2em 0; }

/*—:[ global elements & resets ]:—*/

.custom a { color: #ff3333; outline: none;  }
.custom a:hover { background: #ff3333; color: #FFF; text-decoration: none; }
.custom img { background: #ffffff; outline: none; }
.custom a:hover img { background: #ffffff; text-decoration: none; }
.custom ul#tabs li.rss, .custom ul#tabs li a:hover, .custom a.teaser_comments:hover { background: none; }
.custom #header, .custom .post_box { position: relative; }
.custom #tagline, #random-posts h3, #popular-posts h3, .freebies .headline_meta, .footermod .headline_meta, .archivesmod .headline_meta { display: none; }
.custom .sidebar h3 {font-size:1.2em; text-align:center; color:#ffffff; background:#ff3333; border-bottom:1px solid; clear:both;}

/*—:[ heading styles ]:—*/
.custom h1, .custom h2 a { color: #292929 !important; letter-spacing: -0.5px; }

.custom h2 a:hover { color: #FFF !important; }

.custom h3 {
border-bottom: 1px dotted #DDD;
color: #2B8EBA;
font-size: 19px;
font-variant: normal;
padding-bottom: 2px;
}

.custom h4 {
border-bottom: 1px dotted #DDD;
color: #656667;
font-size: 17px;
margin-bottom: 10px;
}

.custom .headline_area h2 { line-height: 28px; }

.custom .teaser h2 { line-height: 20px; }

.custom #sidebars h2 {
color: #787171;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
}

#custom h3, #foot h3 { border: 0; font-size: 21px !important; margin-bottom: 10px; }

#foot h3, #foot h5 {
color: #DBEDF9;
font: bold 26px Myriad Pro, Helvetica, Arial, sans-serif;
line-height: 16px;
padding-top: 3px;
text-transform: uppercase;
}

/*—:[ core layout elements ]:—*/

.custom #container { border: 0.6em solid #ff3333; margin-bottom: 2em; }

.custom #page { background: #FFF; padding-bottom: 0; }

.custom #footer { border: 0; margin: 0; padding: 0; }

/*—:[ header styles ]:—*/

.custom #header { padding: 18px 0 21px 0; }
.custom #logo a { color: #ff3333; }
.custom #logo a:hover { background: #ffffff; color: #ff3333; }

/*—:[ nav menu styles ]:—*/

.custom ul#tabs li { background: #ff3333 repeat-x bottom; }

.custom ul#tabs li a { color: #FFF; }

.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat { background: #000 repeat-x; }

.custom #tabs .rss { padding-right: 0; border: 1px solid #DA5F0F; float: right; }

.custom #tabs .rss a {
background: #ff3333 bottom repeat-x;
color: #FFF;
padding: 5px;
}

.custom #tabs .rss a:hover { background: #ff3333 repeat-x; }

/*—:[ post styles ]:—*/

.post table { font-size: 12px; margin: 0 0 20px 0; text-transform: uppercase; width: 100%; }

.post td { background: #f9f9f9; border: 1px solid #dfdfdf; border-width: 0 1px 1px 0; color: #6f6d6d; padding: 5px; }
.post td:first-child { border-left: 1px solid #DFDFDF; }

.post td.bar {
background: #EEE;
border-bottom: 1px solid #c7c9c9;
color: #555;
padding: 4px;
}

.post td.four { width: 145px; }

.post td.title {
background: #32A4D6;
border: 1px solid #32A4D6;
color: #FFF;
font-size: 14px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
padding: 10px;
}

.post .notice {
background: #FFFBCC;
border: 1px solid #E6DB55;
border-width: 0 1px 1px 1px;
color: #7e7c60;
font-size: 13px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
text-transform: none;
}

.custom .post li { margin-bottom: 10px; }

.custom .to_comments a { background: none; color: #2E2E2E; }

.custom .to_comments a:hover { background: none; color: #2E2E2E; text-decoration: underline; }

#similar { float: left; margin-bottom: 20px; overflow: hidden; width: 45%; }

#similar a { font-size: 15px; line-height: 1.3em; }

#similar img { float: left; margin: 0 8px 8px 0; }

#similar span {
color: #AEAEAE;
float: right;
font-size: 11px;
margin: 4px 0 13px 0;
text-transform: uppercase;
}

#similar p { float: right; margin-bottom: 20px; width: 195px; }

#similar ul { list-style: none; margin-top: 13px; overflow: hidden; }

#similar li { height: 80px; height: auto !important; min-height: 90px; }

#custom {
background: #E4F2FD;
border: 1px solid #C6D9E9;
float: right;
margin: 0 15px 0 0;
padding: 19px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 44%;
}

#custom a { border-bottom: 1px solid #5296CC; font-size: 14px; }

#custom img { padding: 8px 0 0 1px; }

#custom p { font-size: 14px; line-height: 1.5em; padding: 10px 2.5em 10px 0; }

#custom ul { list-style-position: inside; list-style-type: square; margin-left: 1em; }

/*—:[ comment/trackback styles ]:—*/

.custom #comments { clear: both; margin: 0 0 0 -11px; }

.custom #comments a:hover { color: #FFF; text-decoration: none; }

/*—:[ sidebar styles ]:—*/

.custom #sidebars a { text-decoration: none; }

.banners a { border: 0 !important; }

.banners a:hover { background: none !important; }

.custom #image_box { background: none; }

#image_box img { border: 0; }
.flickr-photos a { border: 0 !important; }
.flickr-photos a:hover { background: none !important; }

/*—:[ footer styles ]:—*/

#foot {
background: #2B2A2A;
color: #DBEDF9;
font: normal 12px Myriad pro, Helvetica, Arial, Georgia, sans-serif !important;
margin: 0 auto;
overflow: hidden;
padding: 1.5em 1.5em 0;
}

#foot a { text-decoration: none; }

#foot a:hover { background: #ff3333; color: #FFF; }

#foot span {
color: #ff3333;
font: 600 18px Myriad Pro, Helvetica, Arial, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}

#foot ul.sidebar_list { padding: 30px 0 0; }

#foot .textwidget p { margin-bottom: 11px; }

.col { float: left; list-style: none; width: 33%; }

ul#cats {
background: #ff3333;
list-style-type: none;
overflow: hidden;
margin-top: 13px;
padding: 10px 0 7px 20px;
}

#cats li {
float: left;
font-size: 1.2em;
margin: 0 5px 8px 0;
width: 170px;
}

#cats a { color: #DBEDF9; font-size: 15px; }
#cats a:hover { background: #ff3333; color: #FFF; text-decoration: underline; }

li#get-recent-comments ul li { height: 60px; height: min-height: 60px; }

li#text-434534361 { color: #191919; }

li#text-434534361 ul { margin-top: 10px; }

p.more { margin-top: 15px; }

#copyright {
border-top: 1px dashed #3D3C3C;
clear: both;
letter-spacing: 1.3px;
line-height: 21px;
padding-top: 10px;
text-transform: uppercase;
}

#copyright p { font-size: 13px; }

#copyright .textwidget p { margin: 0; }

#copyright ul.sidebar_list { padding: 10px 0 0;}

#copyright span {
float: right;
font-size: 13px;

}

Then click to Thesis OpenHook –> Select Thesis_Hook_Footer and add this code:

</div>
</div>
</div>
<div id=”container”>
<div id=”foot”>

<h5>Blog Categories</h5>
<span>Information Covered on the Blog</span>
<ul id=”cats”>
<?php wp_list_categories(‘title_li=&depth=4&orderby=name’); ?>

</ul>

<div>
<ul>
<li id=”get-recent-comments”><h3>Recent Comments</h3><div id=”get_recent_comments_wrap”><ul>
<?php

global $wpdb;

$sql = “SELECT DISTINCT ID, post_title, post_password, comment_ID,

comment_post_ID, comment_author, comment_date_gmt, comment_approved,

comment_type,comment_author_url,

SUBSTRING(comment_content,1,60) AS com_excerpt

FROM $wpdb->comments

LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =

$wpdb->posts.ID)

WHERE comment_approved = ’1′ AND comment_type = ” AND

post_password = ”

ORDER BY comment_date_gmt DESC

LIMIT 7″;

$comments = $wpdb->get_results($sql);

$output = $pre_HTML;

$output .= “n<ul>”;

foreach ($comments as $comment) {

$output .= “n<li>”.strip_tags($comment->comment_author)

.”:” . “<a href=”" . get_permalink($comment->ID) .

“#comment-” . $comment->comment_ID . “” title=”on ” .

$comment->post_title . “”>” . strip_tags($comment->com_excerpt)

.”</a></li>”;

}

$output .= “n</ul>”;

$output .= $post_HTML;

echo $output;?>
</ul></div></li>
</ul>
</div>

<div>

<ul>
<li id=”text-428520341″>
<h3>Recent Posts</h3>
<div>
<ul>
<?php get_archives(‘postbypost’, 10); ?></ul>
</div>
</li>
</ul>

</div>

<div>
<ul>
<li id=”linkcat-2″>
<h3>My Blogger Friends</h3>
<ul class=’xoxo blogroll’>
<?php wp_list_bookmarks(‘title_li=&categorize=0′); ?>
</ul>

</li>
</ul>
</div>

<div id=”copyright”>
<ul>
<li id=”text-5″>                        <div><span><a href=”#”>Going Up?</a> &uarr;</span>

<p>Powered by the dynamic duo: <a href=”http://www.chotoan.com”>Toan Nguyen Minh</a> &amp; <a href=”http://wordpress.org/”>WordPress</a>.</p>

<p>Under the Hood: <a href=”http://validator.w3.org/check?uri=referer”>Valid(ish) xHTML</a> | <a href=”http://jigsaw.w3.org/css-validator/check/referer”>Valid(ish) CSS</a> | <a href=”http://www.chotoan.com/themes/thesistheme.php”>Thesis Framework</a></p></div>
</li>
</ul>
</div>
</div>

</div>

Hahaha very easy to customize this skin ^_^ and if you want to customize a unique skin, you just contact me ^_^ I will help you to have a great thesis skin. Good luck!