This post was written for Thesis 1.x. You can find Thesis 2 here.

It’s true, Thesis blogs are easy to recognize. If it’s not the Georgia font that stands out, it’s the easily recognizable byline underneath the post title.

Or maybe it’s the “boxy” navigation menu with the gray background?

Who cares?

Whatever the reason, it’s enough to send design snobs headed in the opposite direction once the page loads.

That doesn’t have to be the case, though. Let me show you a few tricks to help your Thesis site step outside of the norm.

The Header and Menu

Some time ago, I wrote an article about the first five changes I make to my Thesis sites. In that article, I gave a short chunk of PHP that would move your nav menu beneath your header instead of above the header, which is default.

Let’s take it a step further, though.

I’m sure we’d all agree that the logo left – nav menu right look is pretty slick, right? It’s what I run here on SDavis Media.

Surprisingly, it’s not hard to do. All it takes is a little PHP in your custom_functions.php file and some CSS love for your custom.css file. Let’s thank Kristarella for this short and sweet solution to our normalcy problem.

Throughout this tutorial, I will tell you to paste things into your custom.css and custom_functions.php files. That’s your Custom File Editor under your WordPress Dashboard => Thesis options. Be sure to have FTP access and a backup of your custom_functions.php file before editing.

Paste this inside of your custom_functions.php file:

// Move Nav Menu Inside Header

That code removes the “thesis_nav_menu” from before the header and adds it to the area after the site title. If you don’t know how Thesis Hooks work, stare that short chunk of code down for a minute. It should start to click.

Now that we’ve moved the menu inside of the header, we now need to slide it to the right. That’s as simple as adding this to your custom.css file:

.custom #header {
	position: relative;
.custom {
	position: absolute;
	top: 2.2em;
	right: 1.1em;
	width: auto;
.custom li.rss {
	float: left;

Chances are, your menu won’t be perfectly centered vertically. If that’s the case, the .custom CSS selector has a top property with a value of 2.2em. That is the distance from the top of the header. Decrease that number to move the menu up and increase the number to move the header down. Follow the same concept for the right property.



How easy was that? Now all we need to do add some style.

Luckily, Thesis has a great bunch of Design Options for you to use without any code. So you can navigate to your design option under your Thesis Menu and make adjustments to your header logo and tagline.

Likewise, you can use the built in “Header Image” feature to upload an image in place of your text logo. Too easy.

The menu links still look boring, though.

I think it’s always best to use the built in Thesis options whenever possible. So, we’ll use a little bit of custom CSS to remove the current styling and leave the rest to the Thesis Design Options.

Add this to your custom.css file:

.custom .menu {
.custom .menu > li > a {
	background: none;

With that CSS, I removed the borders and background from the menu elements. However, the dropdown menus will remain styled as they will need to be distinguishable from the page background upon display. Now, you can go into your Thesis Design Options and style the links however you want them.

Quick Tip: If you upload a header image and for some reason it isn’t clickable, go into your Thesis Design Options and in the Header area, make sure the box is checked to show the site title in header.

This little header adjustment alone will set your site apart from most Thesis sites. Nice.

The Content and Sidebar

One of the first things you’ll see beneath the header of a Thesis site is the Feature Box. We love that thing. I must admit, though,  that it’s pretty boring right out of the box.

I wrote an article about making your Feature Box change based on the page. Put that tutorial to good use after you read this article and implement some other good stuff.

Below the Feature Box, there’s so much you can do to change the look of your site. So let’s dive right into it.

Main Content

Rafal Tomal, the lead designer over at Copyblogger Media, wrote a great article about designing your site around great typography combinations. I’ll admit that I haven’t always done that. I was more into bells and whistles.

I’ve grown up a bit now and I really believe that typography sets the pace for design. We’ve only played with our header so far. So we’re still free to make some major typography changes to not only step outside of the typical “Georgia” matrix, but also create a foundation to design on later.

Thesis Design Options are great for changing your font. But let’s face it, there are only a few that most Thesis users will use and it still keeps us all looking just alike.

For the main content font, there’s no reason to be fancy. Keep it simple. It’s the headlines, menu items, and other key elements where you can really start to shine. I believe you should choose those first, and then you can adjust your main content font to something that goes will with your headline choice.

Adding Downloaded Fonts

I like to use to find great fonts to use on my websites. Let’s walk through how to use them.

First of all, you will have to do a little bit of work to get your fonts implemented. No big deal. Stick with me and I’ll get you taken care of.

Let’s start out by visiting Font Squirrel picking a nice font. Currently on SDavis Media, I use a badass font called “Bebas” for my headlines.

When you find a font that you like, select to view it on its own individual page. There, you can see the font examples A through Z, 0 through 9, and some special characters. You can also see a full character map, license information, and even play with the font live.

Most of the fonts don’t even require an attribution link on your site!

The main link to concentrate on is @font-face Kit as it will give you everything you need to download the font and begin the process for using it on your Thesis site. Click that link.

By default, the font will be in English and all font formats (font formats are outside the scope of this article… no need to be concerned) will be selected for download. So, all you need to do is download the @font-face kit to your computer and we’ll be ready to rock and roll.

Once you’ve downloaded the zip folder of your font to your computer, go ahead and unzip it. Usually, there’s only one folder and it carries all of the font files inside of it as well as the font’s license, a demo HTML page, and a stylesheet holding the CSS needed to use the font on your site.

To be safe, I won’t advise you on what files you should keep and which ones you can scrap before uploading to your server. However, if you are familiar with this kind of stuff, you are free to “cut the fat” before we upload.

Here’s what I want you to do. Let’s slim down the name of the folder that’s holding your fonts to make things easier on ourselves. No extra words. No hyphens or dashes. No capital letters.

I’ll be changing the name of my folder from  Bebas-fontfacekit to bebas. Again, keep it simple.

Now, via FTP, I’ll create a new directory (folder) called fonts directly inside of my Thesis custom folder. The reason why I create this fonts folder is because I may upload more fonts in the future. So, I’ll use the fonts folder to hold all of the individual font folders that I download.

So once that folder is created, you’ll want to upload your new font folder to it. So, your structure will look something like this:

thesis_xxx/custom/fonts/your_font_folder (“bebas” for me)

Most of the work is done now! At this point, your font is uploaded to your server. You just need a little CSS to get it working.

In your specific font folder, there was a file called stylesheet.css or something similar. It should be the only CSS file in the download folder. Find that file and open it. In it, you will see a CSS comment stating that the font kit was generated by Font Squirrel and then the ugly chunk of CSS for your font. Here’s what the CSS looks like for my Bebas font:

@font-face {
    font-family: 'BebasRegular';
    src: url('BEBAS___-webfont.eot');
    src: url('BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('BEBAS___-webfont.woff') format('woff'),
         url('BEBAS___-webfont.ttf') format('truetype'),
         url('BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

If there are multiple versions of the font you chose, like bold or italic, you will see a similar chunk of code repeated for each version. That’s fine.

Copy all of that CSS to your custom.css file and save.

We’re not ready to use the font yet, though. First, we have to adjust the code to reflect the file structure on your Thesis install. I won’t go deep into detail about how file structure works in this article. Just know that file structure is nothing more than folders and files on your server exactly how you have folders and files on your computer. It’s the same thing.

So, if you look at my CSS above, each line that has “url” near the beginning actually refers to a file in your font folder. However, only the file names are displayed. That’s because the CSS is written as if our custom.css file is in the same folder as the individual font files. But that’s not the case.

So, we have to create the real path ourselves by drawing the actual path between our custom.css file and the actual font files. In other words…


src: url('BEBAS___-webfont.eot');

Really needs to be this:

src: url('fonts/bebas/BEBAS___-webfont.eot');

Which means that from my custom.css file, we will travel into the fonts folder, and then into the bebas folder where the actual font file is located.

Once that’s done for every “url” related line in my CSS, here’s what my bebas CSS looks like:

@font-face {
    font-family: 'BebasRegular';
    src: url('fonts/bebas/BEBAS___-webfont.eot');
    src: url('fonts/bebas/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bebas/BEBAS___-webfont.woff') format('woff'),
         url('fonts/bebas/BEBAS___-webfont.ttf') format('truetype'),
         url('fonts/bebas/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

The heavy lifting is done! All I need to do now is actually use my font. If you don’t know CSS at all, this part may be a little difficult for you. But I’ll make it as simple as I possibly can.

Take a look at the first line of CSS inside of the above CSS rule:

font-family: 'BebasRegular';

That’s the property:value; combination that you’ll need to set your chosen fonts to your new font family. (Instead of BebasRegular, use whatever name is in the CSS for the font you downloaded, of course.)

Here are a few Thesis specific examples you can paste into your custom.css file to set certain site elements to your new font. Keep in mind that where I have BebasRegular, you will need to use your font’s name given in the CSS.

Site Logo (Title)

#logo, #logo a {
    font-family: 'BebasRegular';

Menu Links

.menu a {
    font-family: 'BebasRegular';

Feature Box Headlines (h3)

#feature_box h3 {
    font-family: 'BebasRegular';

Sidebar Headlines

#sidebar_1 h3, #sidebar_2 h3 {
    font-family: 'BebasRegular';

h3, h4, h5, & h6 In Your Main Content

.custom .format_text h3,
.custom .format_text h4,
.custom .format_text h5,
.custom .format_text h6 {
    font-family: 'BebasRegular';

Post/Page Titles (and Archive Titles)

.headline_area h1,
.headline_area h2,
#archive_intro h1 {
    font-family: 'BebasRegular';

Any of those CSS rules pasted into your custom.css file should overwrite the default font settings in your Thesis Design Options. If not, leave me a comment with a link to your site and the CSS you were trying to use and I will tell you what adjustments to make.

Custom Byline and Comments Links

Another easy way to point out Thesis sites is to look at the homepage link to the post comments as well as the post/page bylines. They all look alike. That’s no good.

The first thing I would suggest is to get rid of this little buddy you see to the right. That’s textbook Thesis and everyone knows it. And if your blog isn’t bringing in 20+ comments per post, it’s hurting you anyway.

Add this to your custom_functions.php file to remove it altogether:

remove_action('thesis_hook_after_post', 'thesis_comments_link');

That was too easy. Let’s hit the byline now. That’s the post/page information you see directly beneath the post/page title in the content.

That area is so easy to pin to Thesis it’s not even funny. Not only can we create a custom byline, we can also change the font style a bit. Let’s start with a little PHP to gain full control over the byline.

Normally, the byline is controlled through WP Dashboard => Thesis => Design Options => Display Options => Bylines. Go there and uncheck everything!

Then, paste the following code into your custom_functions.php file:

function custom_byline() {
if (!is_page()) { ?>
<p class="headline_meta"><?php thesis_author(); ?> on <abbr class="published" title="<?php echo get_the_time('Y-m-d'); ?>"><?php echo get_the_time(get_option('date_format')); ?></abbr> · <span><a href="<?php the_permalink(); ?>#comments" rel="nofollow">
<?php comments_number(__('0 comments', 'thesis'), __('1 comment', 'thesis'), __('% comments', 'thesis')); ?></a></span> · </abbr>Follow (YOUR NAME) on <a class="twitter_byline" href="your_twitter_url">Twitter</a></p>
<?php }
add_action('thesis_hook_after_headline', 'custom_byline', '1');

Once this is done, your byline will still look close to the same as it did before. However, you now have to freedom to customize the hell out of it.

First, I would suggest changing what’s displayed. If you notice in the code I gave you, it’s setup for you to link to your Twitter profile. All you have to do is replace the “your_twitter_url” text with your Twitter profile page URL. Of course, you can change that to any link you want or simply delete it.

You can also stare closely at the code (don’t be scared) to figure out what it all represents based on what you see in the byline. Once you fully understand it, you’ll see how free you are to customize the entire thing.

To control the look and feel, you can use CSS like this to get started.

p.headline_meta {
    color: #666;
    font-size: 1.2em;
    margin-top: .6em;

With a little CSS knowledge, you can make that text look however you’d like. You can also change the color of the Twitter link to stand out just a bit by adding this to your custom.css file (I already added a class to the Twitter link in your PHP):

p.headline_meta .twitter_byline {
	color: #0091bb;

Notes and Alerts

A great built in feature of Thesis is the use of notes and alerts in your content. They are an easy way to make certain content stand out from the rest for various reasons.

To use them, all you have to do is add a special class to your paragraphs when you’re creating a page or post. In the editor, switch to the HTML tab to do this. What you want to do is wrap your special content in paragraph tags:

<p>Your special content</p>

As of now, that does nothing to your content. However, once we add a class of either “note” or “alert,” you’ll see the difference.

It would look like this for a note:

<p class="note">This is a note.</p>

and this for an alert:

<p class="alert">This is an alert.</p>

Here’s what notes and alerts look like by default:

How boring is that? I mean, it’s cool but it’s not that cool. Let’s switch things up a little bit to fit your site a little better.

What I like to do is change the color of the notes and alerts as well as the borders. To do that, you can add some simple CSS to your custom.css file like this:

.custom .format_text p.note {
	background: #F0FFFF;
	border: 1px solid #DAE8E8;

.custom .format_text p.alert {
	background: #FFF2F3;
	border: 1px solid #E8DCDD;

Here’s what it looks like now after that small chunk of CSS:

Not much of a difference but it’s much better than default if you site has a color scheme that you enjoy sticking with.

How about a background pattern? I love to surf Subtle Patterns for background patterns to use on my sites. So, you can find a cool pattern to use on your notes and alerts as well.

Find a pattern you like and download it to your computer. Then, upload it to your WordPress Media Library. Be sure to copy the new URL of your pattern. Then, try the following CSS in your custom.css file (instead of the above CSS) for your note/alert backgrounds:

The color property has been added to the following CSS because your background pattern may be dark. If that’s the case, you can change the color code and that will adjust your font color for you.

.custom .format_text p.note {
    color: #000;
    background: url('your_pattern_url');
.custom .format_text p.alert {
    color: #fff;
    background: url('your_pattern_url');

As you can see, the possibilities are endless. You can make your notes and alerts look however you’d like. So feel free to break free from the norm and branch out with your design.

As a quick tip for advanced users, to make my notes and alert stretch the full width of the content column, I use CSS to remove the paragraph’s left and right borders, I give the paragraph negative left and right margins, and I give the paragraphs a left and right padding that match the actual content padding… that way the text lines up perfectly. Here’s the CSS I use currently based on my dimensions:

.custom .format_text p.note,
.custom .format_text p.alert {
    border-left: 0 none;
    border-right: 0 none;
    margin-left: -24px;
    margin-right: -22px;
    padding: 0.533em 1.6em;


Other areas of your content can use some love too. Block quotes are sectioned off content intended to be used for quotes. The quotation mark button on your visual editor in WordPress toggles the blockquote on and off.

Here’s what the blockquote looks like by default:

Pretty plain, huh? The text is a lighter shade and there’s a left border. That’s it. Just like notes and alerts, you can play around with blockquotes to make them look better.

I like to remove the border, italicize the font, and add a cool little quotation mark image as the background in the upper left corner. To do that, we’ll turn to CSS once again in the custom.css file:

.custom .format_text blockquote {
    background: #fff url('your_image_url') no-repeat;
    font-style: italic;
    border: 0;

Notice that you’ll need an image to use for your quote background. However, you don’t necessarily have to use that. You could visit Subtle Patterns again and give the entire area a background pattern just as easily.

If you do use a full background pattern, erase “no-repeat” from the above CSS.

Here’s the very basic look I like to keep for my blockquotes:

Just that little bit of flare serves me well.

Ordered and Unordered Lists

One of the last things I like to do in my content is add a little bit of style to my lists. Take a look at how the lists look by default:

That’s boring, dude. Seriously. Now just like the blockquote, I don’t get super fancy with my lists. I do, however, add very little changes to keep from interrupting the flow of my content, but also add just a little bit of style.

What I like to do is add some separation between the list items, give them a bottom border, and add a background color to every other list item. It spreads things out a little bit and breaks up the monotony just enough.

Here’s the the CSS I use to do just that:

.custom .format_text ul li,
.custom .format_text ol li {
	border-bottom: 1px dashed #DEDEDE;
	padding: 1em .5em;

.custom .format_text ul li:last-child,
.custom .format_text ol li:last-child {
	border: 0;

.custom .format_text ul li:nth-child(even),
.custom .format_text ol li:nth-child(even) {
	background: #f1f1f1;

The first rule gives the list items some breathing room and also adds a bottom border to each one. The second rule removes the bottom border from the very last list item. The last rule adds a background color to every even numbered list item, starting with 2.

Here’s the simple difference:

How about the unordered list bullets? Using just the little square or circle can get pretty boring as well. If you have a heavily branding site, consider creating a very small image to use as bullet points. Many people use check marks or arrows.

Whatever image you use, upload it to your WordPress Media Library, copy the URL, add the following CSS to your custom.css file, and paste the URL in the appropriate spot.

.custom .format_text ul li {
	list-style-image: url('your_bullet_url');

Get Creative With Your Design

Nothing I have given you above is enough to turn your Thesis install into a major work of art. However, everything you see here is pretty much what I used to build SDavis Media. Nothing special!

Implementing the things you see above, a 3 column layout (much different from the traditional content/sidebar layout), and just a dash of creativity, I’ve change the look of my site greatly.

To see a few more ways to customize your site, be sure and read my other articles about styling Aweber forms, the first 5 changes I make to my Thesis sites, and making your Feature Box dynamic.

There are many more things you can do but hey… I have to save some for future articles.

And of course, if you hate me already for making you do all of this, maybe you’ll be better off just using a skin from Kolakube for your Thesis design needs. It’s your call. 🙂

Leave a comment below if you have any questions.

photo credit: ecstaticist via photopin cc

Published by Sean Davis

When I'm not developing WordPress themes and plugins, I'm usually helping further the Easy Digital Downloads project, traveling, or playing racquetball. Say hi on Twitter. @SDavisMedia


  1. Hi Sean! 
    Thumbs up for another great post! 
    a quick note, we can use 
    .custom .menu > li > a {border:0;} for eliminating border from only top level links
    and .custom .menu {border:0;} 
    this way drop-downs won’t be affected. 
    People usually like to have a border for differentiating various links in drop-downs 🙂

  2. I see you used Skitch here. Well done!

    This is an awesome resource though dude. You hit the exact places that scream “THESIS!” and made them look nice.

    The one thing you missed:

    The previous post/next post links at the end of each post. 😉

    • Awe, snap! That sure is another one of those Thesis-y elements. As a matter of fact, it’s one of the biggest ones lol. Good catch! Maybe I’ll write pagination post and include that. 😉

      P.S. Skitch for the win. I almost Skyped you when I was using it to tell you how much I love it lol.

    • This article is an extension of your post on Blogussion titled “4 Great Ways I Customized my Thesis Theme”.

  3. Quick question, would you extend the grey background to the left on the alternate list items to INCLUDE the bullets?

  4. Also, for some reason, I remember the alerts & notes over at 😉

  5. Nice tips to customize thesis blog. I am looking for how to move logo to the top navigation and make it fixed. If you can please help me.

    Thanks for this nice tutorial of thesis

  6. Thanks for these tips very useful for me.

  7. Thanks sean, worked like a charm bro!

    If you’re having problems make sure you check the permissions folder and make sure they match with the rest!

    • Awesome! Glad it’s working for you!

      For anyone reading this conversation wondering what the hell we’re talking about, Monty’s custom fonts weren’t working properly because his “fonts” folder had the wrong file permissions. 🙂

      Glad it worked for you, bro.

  8. Sean, this has to be the most insanely useful post on Thesis dissection-ing I have ever read on the whole Internet.

    The subtle patterns reference was GOLDEN bro and all the mini how-to’s were just as useful.

    Thanks again for another brilliant guide!


  9. This is a great post Sean. I can customize the heck out of other themes but I’m just diving into Thesis and this (and a few of your other posts I’ve read so far) helps TREMENDOUSLY. Love it!

  10. I use the chronicl theme and I noticed that a lot of the customization provided here does not work on my theme. Any idea why? Sean.

    • Hey, Eddie.

      It should be understood that Chronicl itself IS a Thesis customization. Everything written in this article is for barebones Thesis. Chronicl, or any other Thesis skin, already has a ton of this written. So it’s not as cut and dry when it comes to customizations.

      For example, the menus are hard-coded into Chronicl. My menu code would work. At the same time, though, the header menu in Chronicl is already in place. So that hack is worthless for you.

      Same with the content formatting. It’s already been written with Chronicl. My code overrides the default Thesis formatting… and so does Chronicl’s code. So to override Chronicl’s code, the CSS has to be written specifically for that.

      Installing fonts should still work just fine.

      Basically, this article is written based on Thesis… not customized variations of Thesis like Chronicl and other skins. If you are trying to do a specific thing, though, let me know and we should be able to get you taken care of.

  11. Hey Sean, I luv especially the stuff about the custom fonts.

    Question: I did copy everything you did about using the Bebas font (as a test), naming my Thesis folder just like yours, and copying everything in your code, and yet it doesn’t show up on my blog – instead, I see an old school classic font instead of Bebas.

    Do you know what this could be ?

  12. nevermind, figured it out – I had to delete the “regular” from “bebasregular”

    • I didn’t even get a chance to respond! Good stuff, Mars. Glad it’s working. Love your site, by the way. So unique.

      Thanks a ton for stopping by my little ol’ blog!

  13. Hi, I am using Thesis 1.8 on my website, I would like to change my blog post titles to Bebas font, i tried using css given above but couldnt get it done. Could you please help me?

  14. Yeah, not having much luck implementing the CSS code to change my headline font on Thesis 1.8.

    Here is the code I have put in.

    @font-face {
    font-family: ‘AlexBrushRegular’;
    src: url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.eot’);
    src: url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.woff’) format(‘woff’),
    url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.ttf’) format(‘truetype’),
    url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.svg#AlexBrushRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    .headline_area h1,
    .headline_area h2,
    #archive_intro h1 {
    font-family: ‘AlexBrushRegular’;

    Any help would be greatly appreciated.

    • That should definitely work. From the custom.css file, what’s the exact directory structure leading down to the font files?

      Also, if you have any caching plugins, clear the cache. If you use a CDN, purge it. And then clear your browser cache.

      • How exactly do I clear the cache and what is CDN? I am self taught and fumbling my way through it all. 🙂

        This is the entire custom.css stylesheet

        .custom .menu {padding: 1em 1.1em; font-weight: bold; }
        .custom #header {padding-top: 1.5em;}
        .custom #footer {padding-bottom: 0;}
        .custom #sidebars {background: #FFF4D1; }
        .custom .menu .tab {margin-right: 10px; }
        .custom .teaser { text-align: justify; }

        @font-face {
        font-family: ‘AlexBrushRegular’;
        src: url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.eot’);
        src: url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.eot?#iefix’) format(‘embedded-opentype’),
        url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.woff’) format(‘woff’),
        url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.ttf’) format(‘truetype’),
        url(‘fonts/AlexBrush/AlexBrush-Regular-OTF-webfont.svg#AlexBrushRegular’) format(‘svg’);
        font-weight: normal;
        font-style: normal;

        .headline_area h1,
        .headline_area h2,
        #archive_intro h1 {font-family: ‘AlexBrushRegular’;

  15. […] Unique Customization Ideas for Thesis Theme […]

  16. This was an amazing tutorial. I just used the menu changes in my website and it looks amazing. I know it’s spammy to put the website on here, but it’s the one linked in my name. Thank you so much!

Comments are closed.