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:

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> ↑</span>

<p>Powered by the dynamic duo: <a href=”http://www.chotoan.com”>Toan Nguyen Minh</a> & <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!

CoreBloggers

very useful post DIY :)

Stefan

Everything seems to be working fine now. Now you only have to add threaded comments. ;)

Toan Nguyen Minh

@Stefan: Oh, thanks :D I just removed all Adsense Ads in post page :D
If you still have this case, please notify for me :P
Thanks again!

Stefan

No, I'm using FF. But for some reason AdBlocker decided to hide your whole post because of your AdSense-ad just above it.

Toan Nguyen Minh

@George Serradinho: Thanks for commenting, I am not looking for a fight too!
@Stefan: Are you using IE? Why don't you try to Firefox? :D It is the best brown for bloggers.
@Blog.it: I have just tried to comment on your blog but I couldn't because your comment form was having some problems. I think you must change your blog to new theme to have new comment form :) You're welcome!

how to make money online

Thanks for the info. This was very helpful.

blog.it

your theme before is more better than this one, but anyways thank for this post.

asian furniture

man your theme before is much better.

Stefan

Hm, seems like AdBlock Pro blocks all of your images in your posts. Maybe something to take a look at? The theme then. Well, it looks good as Thesis always do, but I'm not totaly fond of the red. Red against a dark bakground stands out a bit to much according to me. Other than that, interesting post and a good tutorial.

George Serradinho

To be honest here and I know I might get some lashing out, but copy someones css and html code is not stealing. Anyone can do it unless you have some kind of copyright on it.

If you say he is ripping then we all are ripping as I have seen many sites using other peoples code. This is just my opinion, not looking for a fight.

Alex - there is no copyright forbidding people not to use your code.

Toan Nguyen Minh

Thanks Liane but orange is the color that I love. And I want to say sorry to Alex because I recoded your footer style :D Recode but not copy!

Liane YoungBlogger

I've been reading the comment exchanges above and I'm glad you have this problem resolved. Cho, it's not good practice to not offer the credit to whom it should be given. I'm glad you had that settled between Alex.

About the new theme, constructive criticism here: maybe striking orange isn't really my thing, but I don't seem to get it on your color scheme.

Toan Nguyen Minh

I appreciate Asnio's design ^_^ You're welcome :D And Thanks for the interview!

Toan Nguyen Minh

Okie, I will add copyright back because I refered your code and your posts but I haven't copied your code. Thanks!

Alex Fraiser

The EXACT code is on your site. A reference would simply be looking at the code then writing your own. Referencing is not what you have done, which is copying and pasting. Also known as ripping.

So take my code down, and recode your footer without taking my code. Either that, or put a copyright on it since it's MY code.

Toan Nguyen Minh

Yes, truly say that I have also refered to your layout style and your post on Asino to customize this skin. But let see, Asino and Cho Toan are completely different. If I pay $ 5 to you to resolve so that is very easy but I won't pay any cent if I don't copy. Reference but not copy ^_^

Alex Fraiser

They are not completely different, you ripped my CSS code exactly from my blog. I am looking through your CSS code and you have EXACT lines of code that are fitting only to my blog, and wouldn't make sense for any real coder to add to their blog without fitting HTML.

Take this as one of the many examples:

#text-434534361 { color: #191919; }
li#text-434534361 ul { margin-top: 10px; }
p.more { margin-top: 15px; }

On top of that, you even use the same HTML codes as the footer I released does. So I'm going to tell you again now that you are busted, add my copyright back. If you don't want it, just pay the low free for removal. It's that easy.

Toan Nguyen Minh

Oh, Hi Alex,
I know that my footer is quite similar to your Footer Mod but let see them again, they are completely different so I won't bear any responsibility to Copyright. I appreciate Asino Footer Mod.
Thanks!

organizasyon

i used this, thank you so much for that

Diamond Bracelets

Gerry, a very interesting post thanks for writing it!

Computer Work At Home

Hi Toan,
Spending the time to do customizing the wordpress them is needed . It's also taking your time to figure out which one is best for you. It's shown your banners littlebit off on the right on my computer. I know your website from Peter's blog and it's nice to visiting your site.

Thanks
Kha
People can work on computer and you can too Computer Work At home

Alex Fraiser

You may not remove the copyright to my footer unless you have paid for it. Put it back now, or read the directions at my blog for removal options.

Make Money Online

How I Customized my Thesis Wordpress Theme

Make Money Online

Random Articles

Commentators

Our Partners