Thesis Terracotta Skin

by chris on December 30, 2009 · 76 comments

Terracotta is a premium skin for the Thesis WordPress Theme that will allow you to instantly transform the look of your Thesis powered site.

Thesis Terracotta Skin

The skin features a warm terracotta color scheme and styles for a sharp and unique look with a minimal use of graphics to keep site loading times fast. Also included is an optional header ad class for the use of banners or social media icons in the header area.

Easy Thesis Customization

If you don’t have the budget for a professional designer or the time to customize Thesis using the themes custom folder and hooks, the Terracotta skin gives can give your site a quick and effortless makeover.

Free Lifetime Upgrades & Complimentary Install Service

I will be constantly tweaking and working to improve the skin and you’ll receive free lifetime upgrades as part of your purchase. Terracotta can be easily installed in a matter of seconds but if you would like a little help with the install, I’m also throwing in a free skin installation with your Terracotta purchase. If you’re interested, see the Free Install & Setup Service page.

Upgrade to Thesis Terracotta Today

If you’re ready to try the Terracotta Thesis Skin, go ahead and purchase you’re copy using the banner below. You’ll be directed to a secure download link immediately following your payment and you’ll also receive an email containing the download link. You’ll also be notified by email anytime an update for the skin is released that will contain a download link for the updated version of the skin. Once you have the skin files, check out the Installation Instructions at the bottom of this post or setup an appointment with me to install the skin on your site.

Get the Terracotta Thesis Skin

Don’t have Thesis yet? Purchase it through us and save 40% on Wufoo. More Info

Promote Terracotta, Earn Money

In order to provide the best support and to the resources to improve and upgrade this skin on a regular basis, I am charging a fee for Thesis Terracotta. To show my appreciation to the users of the skin, I’ve added an affiliate program for the skin so the users can earn some money from it as well. By helping spread the word about Terracotta, I’m offering a whopping 40% commission on every copy of the skin that sells that originates from a link on your site. In addition to the 40% base commission, there are also performance incentives. If you can send us a high number of referrals, contact me about getting that base commission bumped up!

Click here to join the affiliate program and start earning money with your skin!

Installation Instructions

  • Purchase Terracotta and download the skin files which contain the two custom files (custom.css and custom_functions.php) and the background image seen in the header and footer areas.
  • Backup your current custom files if you’ve got any customizations you want to save and then upload all the files to your custom folder.
  • You need to make a few small changes in your Thesis Options panel for the skin to display properly. In the Design Options panel:
    1. Choose the Full-width framework.
    2. Change the Outer Page Padding to 0 (zero).
    3. Save your changes using the Big Ass Save Button and refresh your site.
  • The skin will work with multiple layout options. This demo site uses the following settings in the Thesis Design Panel that you might want to start with.
    1. 2 Column Layout.
    2. 600px Main Column Width, 270px Sidebar Width.


Alexia January 11, 2010 at 8:30 pm

Awesome skin. Thanks!

Alexia January 11, 2010 at 8:32 pm

one thing though… hierarchical menu doesn’t look quite right.. background is transparent & header shows through.

chris February 10, 2010 at 10:15 pm

Update February 19 – This quick fix works for Firefox but not IE. Scroll down a couple comments to see revised code that fixes the drop down menu issue in both browsers.

Good Catch! I’ll update this in the next skin release. For a quick fix though, look for this line of code in the nav menu section of the custom.css file:

.custom li {margin-bottom:0; position:relative;}

And add this attribute to it:

background: #A12D02;

Or just overwrite it with:

.custom li {background: #A12D02; margin-bottom:0; position:relative;}

Kim February 18, 2010 at 6:48 pm

Regarding the nav drop down bar issue, I copied the code and followed your instructions to fix the issue. That fixed the transparent drop down, but the drop down menu is still going behind my header. Any suggestions? Thanks!

chris February 19, 2010 at 12:20 pm

Hey Kim – My quick fix for the drop down menu works for Firefox but not IE which I hadn’t checked. I’ve now rewritten the navigation menu css and the drop down now is functioning as expected in both IE and Firefox. I’ll update the skin files shortly but if you already have the skin installed, you’ll just need to overwrite the existing nav menu css in the custom.css file with this new code:

/***NAV MENU***/
.custom #nav_area {background: #A12D02;}
.custom {background: #A12D02; border:none;}
.custom li a, .custom li a:hover {background:none; border:none;}
.custom li a {color: #fff; font-size: 1.2em;  font-family: "Myriad Pro",Helvetica,Arial,sans-serif; font-size: 12px; font-weight:bold;}
.custom li.current a:hover, .custom li a:hover  {color:#DDC359;}
.custom li.current a, .custom li.current-cat a {color:#DDC359;}
.custom li a:hover {color:#DDC359; text-decoration:none;}
.custom li li {background: #A12D02; margin-top:1px;}
.custom li li a:hover {background: none;}
.custom li li:hover {background: #A12D02;}
.custom .rss {border: none;}
.custom .rss a, .custom .rss a:hover {padding-right:  16px;}
/***NAV MENU END***/

Red Dayton January 25, 2010 at 9:41 pm

Hey Chris, I just installed the Terracotta Skin for Thesis and think it is great. Just one question about the ads in the sidebar, is that a plugin or did you code it.


chris February 8, 2010 at 10:10 pm

Hey Red – The ads in the sidebar were just added using a standard text widget.

Robin February 10, 2010 at 8:26 pm

Red, if you’re still looking for an adblock plugin, I used WP125 with this theme. Cheers

Pamela January 27, 2010 at 6:55 pm

Hi, Chris –
Wha??! I just clicked on the above people commenting – where is their beautiful Terracotta Skin?? I love this skin – and modified it (hope you don’t mind) but kept the links intact, etc. (Take a gander: Crafting Spirit)

Question: I was trying to put a hook for a text box above the first post on the front page and can’t seem to get the right code for the custom_functions.php. Any suggestions – I am such a newbie at php – so I am doubly in debt to you for the really nice skin.

: )

chris February 10, 2010 at 10:27 pm

Hey Pamela – I don’t know where their beautiful Terracotta skin is! They should definitely be using it :)

I love the mods you’ve made to the skin! Great colors!

To add a sticky text box above the first post, you can use the thesis_hook_before_content hook in a custom function.

I’ve done this on some of my other Thesis sites using the following function :

function welcome_message() { 
echo ' 
Your front page text
'; } add_action('thesis_hook_before_content', 'welcome_message');

You can style the welcome box in your custom.css file. Here’s the code I’m using on one of my sites that gives the box a border and background color.

.custom div.welcome_box { border: 3px solid #F2EC49; background-color: #FFFDCB; color: black; padding:0.5em; margin-left:0.5em; margin-right: 1.8em; margin-top: 1em; padding-bottom: 0em;}

LouAnn February 3, 2010 at 4:45 am

Just getting started, love the color of this skin! Why is that thesis ad showing up in my header?! (I’m sure it’s simple, but it’s almost midnight and I’m tired.) Thank you.

chris February 10, 2010 at 10:04 pm

LouAnn – The header ad area was added to the skin to allow you to easily add your own banner or social media icons to the header. If you open up the skins custom_functions.php file you’ll see the code for this area in the section labled Optional Header Ad

You can replace the default banner by modifying the code there or remove it completely by deleting those few lines of code.

Robin February 10, 2010 at 8:30 pm

Chris, love the theme, but better than the theme was the easy instruction on how to replace your header banner ad with my own. At last I can focus on my articles and marketing. Cheers

chris February 10, 2010 at 10:05 pm

Robin – Thank you for the positive feedback. Terracotta looks great on your site!

Francis February 17, 2010 at 2:25 pm

Hi Chris,

Great skin! Thanks for making it free.

One question. I’ve removed the media box and now the widget box goes right up to the header. How can I create some space between it and the header.


chris February 19, 2010 at 12:29 pm

In the custom.css file under the sidebar and widgets section, look for .sidebar ul.sidebar_list code. Once you find it, add margin-top: 2em; to the end of that line of code and that should do it.

The end product should look like this (bolded section is the new code):

.sidebar ul.sidebar_list {background: #ECE7B3; border: 1px solid #AEA866; padding:1em; margin:0; margin-top:2em; -moz-border-radius: 4px; -webkit-border-radius: 4px;}

Francis February 19, 2010 at 11:23 pm

Thanks Chris! Works perfectly.

Kim February 18, 2010 at 5:41 pm

Hi! Love this skin! Thanks for making it so easy to use and configure. One question…..I just installed it and am starting from scratch on our site. I can’t figure out why the drop cap letters aren’t working like they are on the demo. Is there something that needs to be configured? Thanks very much for your time!

Kim February 18, 2010 at 6:34 pm

Sorry….I got it. Looked at your code. Stupid question…..!!!!

Michal February 20, 2010 at 10:23 pm

Hello. I have a problem. I installed the skin but I don’t see frames around pictures in posts. What should I do?

chris February 21, 2010 at 2:18 am

The image frames are built into Thesis, the skin just changes the way they are styled. Check out this page from the Thesis user’s guide for more info on adding frames to your post images:

Michal February 21, 2010 at 8:44 am

Yes. I see it now. But it looks that I have to go to every image in every post and add ‘frame’ class to it. This is painfull. Why it is like this? In every theme I saw before the ‘frame’ style was attached to ‘img’ tag. So every image inside a post had the frame by default.

chris February 21, 2010 at 12:52 pm

I’m not sure why the theme developer did it that way, it would be labor intenstive to go back and add frames to every image in every post. On the other hand, if you only want frames on certain images and not all, this method is probably the best option.

Chris Moon March 2, 2010 at 11:28 am

Hi Chris,
Thanks for Terracota skin, great design.
However my Custom Title Tag is displayed transparently in a huge font over my page and not sure how correct this.
Can you tell me what’s gone wrong.

chris March 2, 2010 at 12:06 pm

Looking at your code on your Russian Dwarf Hamsters – Are They Right For You? page I see you’ve used Drop Caps but never closed that tag. So instead of just the first letter being enlarged, the whole paragraph is.

Chris Moon March 2, 2010 at 12:09 pm

Brilliant, thank you so much Chris.

RT March 5, 2010 at 11:08 pm

Hi Chris,
I installed the theme and except for the drop down menu problem, it seemed to work fine. But this morning the changes are completely MIA? I’m not sure how that is even possible. The custom files are still showing fine in the custom folder on my server. Any ideas?


chris March 7, 2010 at 3:17 am

The skin’s custom.css file must of been overwritten with the default thesis custom.css file somehow. Don’t know how that would of happened but from your more recent comment, it looks like you’ve already fixed this.

RT March 5, 2010 at 11:35 pm

Chris – RT again. I recopied your skin files and seem to be back where I was. Note though that there is a mystery horizontal while bar under the top terracotta colored row. Is that normal? I don’t see it on yours.

chris March 7, 2010 at 3:20 am

The navigation code had to be updated in order to be compatible with the drop down menu feature that came out with Thesis version 1.6. The updated code is available in this comment but I still need to upgrade the skin files in the download file to include this new code. Its on my to do list and I’ll try to get that update out soon!

cathy March 6, 2010 at 2:22 pm

Thank you for a gorgeous thesis skin! I’m a bit of a thesis newbie…can you tell me how I might change up the color of the theme at the very top? (the color where the navigation menu is)

I appreciate your help.

chris March 7, 2010 at 3:15 am

In the custom.css file under the navigation menu section, you’ll need to change the color settings. The orangish color for the background will be #A12D02. It’s in there several times and you’ll need to change this color code to the color you’re wanting to use.

If you need help finding the color code for the color you want to use, you can use a tool like this Programs like Photoshop or Fireworks can also identify colors by their hexadecimal code.

RT March 6, 2010 at 6:28 pm

Chris – RT once more. I think I got all of the above items fixed. I’m changing the color scheme a bit and am not sure how to change the background color beyond the content and sidebar areas to my new color. It seems to be defaulting to the default color of the skin.

Great skin by the way. After fixing the menu drop down, it works great.



chris March 7, 2010 at 3:23 am

I’ve tried to keep the custom.css file as clean as possible by grouping all the customizations together by the area of the skin they affect (navigation menu, content area, sidebars, etc.) You’ll need to go into this file and look for the area where you want to modify the colors and change those hexadecimal color codes. See this comment for a little more info on how to do that. It’s in regards to the navigation menu but you would follow the same method for each area of the skin you want to modify.

Michal March 7, 2010 at 11:43 am

I was following the totorial “Example 1: Make Your Header Display Above Your Nav Menu”. I added the 2 commands to custom_finctions.php:
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
The second one works and I can put the Nav Menu below the header. The problem is that the first one is not working. So after applying this two commands I have two Nav Menus, one above and one below the header.

chris March 7, 2010 at 3:15 pm

That’s because this skin uses a custom navigation function to make it stretch the width of the page instead of the default thesis menu.

The custom navigation menu is added with this command:


If you want to remove it, you could delete that function from the custom_functions.php file or add this line of code to it:


Michal March 7, 2010 at 3:36 pm

This works. Now I can move the Nav Menu below the header with 2 commands:

add_action(‘thesis_hook_after_header’, ‘custom_nav’);

But how to make the menu that is below the header to stretch to the full width of the page (like it was before).

chris March 7, 2010 at 11:37 pm

By default the Thesis nav menu is placed in thesis_hook_before_header hook which is only as wide as the header. I wrote the custom nav function so I could place it before the header and therefore make it full width.

The code you are now using places the menu using the thesis_hook_after_header hook now so the menu will only be as wide as your header. I’m not sure how you could make it full width using that hook, though I’m sure it could be done. Might want to try the forums and see if someone has a work around for this.

Michal March 8, 2010 at 8:09 am

I found it. It should be like this:

add_action(‘thesis_hook_before_content_area’, ‘custom_nav’);

chris March 8, 2010 at 12:08 pm

Michal – I hadn’t thought of using that hook but it works perfectly. Nice job!

Bob Fortner March 11, 2010 at 10:03 pm

When my site is viewed in IE8 things in the sidebar, like links and widget titles, are centered. In Firefox they are right justified. The Firefox behavior is more what I expected. Do you have a fix that will right justify things in IE8?

chris March 11, 2010 at 10:46 pm

Bob – Looking at your code for text widget that has the two images in it, you’ve got a center tag that was opened before the images but not closed afterwords. Close it and everything else should align properly.

Bob Fortner March 12, 2010 at 4:05 pm

Doooh! Thanks Chris! I commented out some stuff in that widget I was playing around with and clipped the end of the center tag. Just fixed it.

Avinash D March 17, 2010 at 2:38 pm

Great job Chris!

Avinash D March 17, 2010 at 3:39 pm

Quick question: has anyone gotten an error with the post image frame CSS yet?

I have 7 test posts with the 7th as featured post and the rest as teasers. I see the frame on the home page for the post image of TP7 and when I go to the single post page. However, I don’t see this functionality kicking in on any of my other posts when i go to their post pages. Test posts 1-6 show up without the image frame which looks a bit weird now.

I’d drop a link here so that you could see what I was talking about but I’m in local testing.

Ryan March 25, 2010 at 1:47 am

This is a fantastic theme, thanks for offering it here. I am now using it on my website, however the only problem that I have is when I want to make images clickable – ie, they open in a new window, or using the lightbox plugin.

I have left an image on the page that I have linked to when I posted here so that you can see what the problem is. Basically, when you hover over the image, you get strange highlighting around the place.

I am no guru with CSS (I believe this is what it is that is causing the problem), so if there is a simple fix that anyone can help with, that would be fantastic.

Thanks again for providing such a great theme!

Ryan March 25, 2010 at 2:32 am

Nevermind, it would seem as though there was a conflict between the link highlighting and images that were active links. Fixed on line 72 in custom.css by removing the highlighting.

Aaron Hoos April 6, 2010 at 8:53 pm

Great looking theme; thank you!

I’ve added it to my site but am encountering 2 problems:

1. The nav menu looks normal on every page except the Lifestream page. I’m not sure why.

2. The footer text is white when viewed in IE but black when viewed in Firefox. I’d love to give you clearer attribution than what it is currently providing… but I’ve tried a few text color changes in CSS and can’t seem to get it to turn white. Any suggestions?

Thanks in advance for your answers, and thanks again for this great-looking theme!

chris April 6, 2010 at 9:30 pm

The footer colors seem to be getting overwritten by html font color settings that you’ve used at various places throughout your site that haven’t been closed. You should really be doing this through CSS and not HTML though.

Not sure about the nav menu on that one page. Did you set up a custom template on that page only?

Aaron Hoos April 6, 2010 at 11:27 pm


Re: footer. HTML? haha, yeah, that’s a surprise. I’ll need to look into it. Weird.

Re: nav menu. Hmm… There’s a plug-in that is creating the lifestream so maybe the plug-in is changing the template.

Thanks for the guidance and sorry to bug you about issues that apparently have nothing to do with the skin.

All the best!

Kevin April 10, 2010 at 12:55 pm

Wonderful skin! I have one customization question. You will notice a rectangular border just above the top post. It doesn’t appear on the demo site and I am wondering how it got there. I would like to remove it. Any suggestions?

Thanks again.

Kevin April 10, 2010 at 1:03 pm

Got it. Had to deactivate Feature Box.


Aly April 13, 2010 at 6:33 pm


I was using your skin for a client’s page, since the colors just happended to match perfectly, but have been having problems with the footer. I have made it a four-colum widgettized footer. It works perfectly in firefox but is not showing up in IE. This may have to do with the widgets and not the theme but I haven’t found anyother mention of this issue other than on your sharp site, any suggestions would be much appreciated. Thank you.
The site is:

chris April 14, 2010 at 11:08 am

Got with Aly on twitter and found a solution. Check out NomadicChick link in here comment to see a very nicely designed site running Terracotta!

Kevin April 14, 2010 at 9:26 am

I do have one question for you. I would like to change the hover style in the post box. The highlighting pushes punctuation away from the word and looks kind of sloppy or that my grammar skills are problematic. Can I change the hover style to an underline? Either an underline appears when hovering over the hyperlink or it appears. Either way works for me.


chris April 14, 2010 at 11:14 am

Kevin – I’ve got some extra padding in this code that I probably need to kill to eliminate the extra spaces. To do what you’re wanting to do, you’ll need to edit two lines of code in the custom.css file under the content area sections.

First locate these two lines:

.custom .format_text a {color: #A02C01; padding-left:0.2em; padding-right:0.2em; text-decoration:none;}

.custom .format_text a:hover {color: #fff; background: #A02C01; padding-left:0.2em; padding-right:0.2em; text-decoration:none;}

Get rid of the padding attributes on both. If you want the link to be underlined and then have that underline disappear when the link is hovered over, change the text-decoration from none to underline in the first block of code. Change it in the second block if you want the underline to appear when the link is hovered over.

Kevin April 14, 2010 at 2:33 pm

Thanks so much for the timely response.

chris April 14, 2010 at 4:50 pm

No problem. Thanks for using my skin on your site!

John Bogdanski May 29, 2010 at 11:15 am

BEWARE – “The internet is full of scams, spam and people out to take your money and hurt you” … Every time I slide my credit card out of my wallet a little voice in my head repeats that over and over again.

Let’s face it you never really know who’s on the other end of the wire, what they’ll do or how they’ll treat you.

I get it!

I also get that Chris (the creator of this theme) is a genuinely nice guy that take exceptionally good care of you.

Let me tell you what happened.

I ordered terracotta and wasn’t sure about a few things and I dropped Chris a note. Chris went ABOVE and BEYOND anything I would have expected.

Get this… he responded to my emails so fast I thought he was glued to his computer patiently waiting for each and everyone of my emails. His responses were clear, direct, easy to follow and he gently helped me get through each and every imaginary issue I had.

Fact is thesis and terracotta are ridiculously easy when you have some one like Chris to reach out to. You can see it in it’s glory at

So if you’re the least bit squeamish about trying thesis and using Chris’s terracotta theme, I’m here to tell you put those feeling to rest. Chris is a straight shooter.

He could have easily made things hard or talked me into giving him more money BUT he didn’t. He was straight forward, honest and wickedly brilliant when it came to answering any questions I had.

Do yourself a big favor. Grab this theme or any other product Chris offers. If there anything like terracotta you’ll be thrilled with the product and with Chris.

Great job Chris…

You’re a shinning example of some of the great people that are online, BRAVO!


Kim July 17, 2010 at 9:40 pm

Love this theme! One question that I can’t figure out though….How can I remove the horizontal line that isn’t spaced well? It appears on my page here: I can’t find it anywhere in the coding. Thanks!

chris August 7, 2010 at 11:45 am

Kim – I’m not seeing the horizontal line on the archive pages anymore but I do know what you are describing. The earlier versions of the skin, which I believe you are still running, did not have the code in the custom.css file to get rid of that border. I looked at your custom.css file and it looks like you’ve already found the solution by adding this line of code at the end of the file:

.custom #archive_info {border-width:0;}

Kim July 17, 2010 at 9:59 pm

Wondering why the image framing doesn’t work on my site. An example is here:

Dennis O'Brien August 7, 2010 at 8:08 am

The frames look fine from here Kim and no horizontal lines either. (Firefox Browser)
But I like your menu setup and the header section. Similar to what I want to do. Did you do this yourself or with some help? If you found some tutorials I would love to know where they are.

chris August 7, 2010 at 11:48 am

The skin only controls the style of a framed image. You’ll still need to frame the image by following the instructions on this page from the Thesis User’s Guide:

chris August 7, 2010 at 11:51 am

Dennis – Kim added the banner to the header area by adding this code to her custom.css

.custom #logo {background-image: url('images/brt-header.png');
background-repeat: no-repeat; width: 885px; height: 250px; text-indent:
-9999px; }

.custom #logo a {width: 885px; height: 250px; display: block; outline: none;}

It also looks like she removed the full width navigation menu and the header widget functions from the custom_functions.php file.

Dennis August 10, 2010 at 9:10 am

That was a big help Chris and all worked fine after a little bit of tweaking. New header is up but I need to redo it to make the text clearer. But hey free software to do it so what can a man say. If anyone is interested you can see the software in action here

With all the free panoramas and headers out there it was quite easy to do.

Dennis O'Brien August 14, 2010 at 9:21 am

Sorry I took so long getting back here and thank you for that it works fine.

Dennis O'Brien August 16, 2010 at 7:09 am

Hi Chris
Thought I would ask what to do once Thesis 1.8 is released. Do we save our Theme via Manage Options and revert back to Thesis standard theme before upgrading to 1.8 then install Terracotta and upload the files we saved.? And I guess disabling all plugins would be advisable during the whole process. Your advice would be appreciated.

chris August 17, 2010 at 10:35 am

Dennis – You won’t need to revert back to the standard Thesis but it is not a bad idea to save your settings and to disable the plugins temporarily. Once you upload 1.8 you’ll again need to copy the skin’s custom files over to 1.8′s custom folder.

Dennis O'Brien August 20, 2010 at 7:38 am

Thanks for that.

Dennis O'Brien August 23, 2010 at 10:45 pm

Hi Chris
Just wondering if you can help me with something. I am told the following code would assist in having my website open much quicker.

Thing is it tells me to place it in Header.php which of course Thesis handles differently. I tried using Thesis Hooks plugin and a hook itself in custom_functions.php but without success. Hoping you might be able to help. I tried DIY Forums but I get lost in there. Perhaps I should create a post my self.

Dennis O'Brien August 23, 2010 at 10:54 pm

The code didn’t show up so I’ll try here by placing it as a block quote using HTML

Dennis O'Brien September 2, 2010 at 12:05 pm

Hiya Chris

I must be missing a point here. How do you create the drop down menu that this page has? I Placed the //***NAV MENU**// code from the top of these comments in the css file but that doesnt look quite right. ( white background is slightly oversize and creates a white underline under custom nav). Any hints on both these issues Chris?

Dennis O'Brien September 10, 2010 at 6:54 am

Didn’t realize I placed this in a reply slot…hope this catches your attention Chris

I must be missing a point here. How do you create the drop down menu that this page has? I Placed the //***NAV MENU**// code from the top of these comments in the css file but it doesn’t look quite right. ( white background is slightly oversize and creates a white underline under custom nav). Any hints Chris? No drop down menu appears. I thought it would be a case of selecting the item you want for the drop down menu using the deign or site optiions.

Michael Krotchie October 14, 2010 at 6:38 pm

How can I add space/padding between sidebars when I have a setup with two columns? Tried several tweaks and they all resulted in my 2nd sidebar mysteriously disappearing (margin/padding/etc).

Comments on this entry are closed.

{ 1 trackback }

Previous post: