Removing Borders from Thesis

By default Thesis theme looks pretty good, but the default theme is only the starting point, a blank slate. If you’re like me, you’ll want to customize it. It’d be like buying a bicycle and just hoping it fits without adjusting the seat or handle bars—it might work, but it may not be very comfortable, or pretty, in our case.

Often, my designs remove the default interior border displays. They look nice, but might seem like overkill if you use good spatial delineation of your content. And, thanks to Thesis, with a little effort you can remove the interior border quite easily. There are many ways you could do it, but I will show you two methods I use to remove borders from Thesis.

Thesis Interior Borders Map

This graphic below shows which CSS selector targets which border. It also shows the property name that you can modify for whatever style you wish.

Removing Borders in Thesis by Admin Options

If you want to just remove them all, then the admin option is for you.

Go to the Thesis Design Options menu. Under Fonts, Colors and More! expand the Body (and Content Area) section and uncheck the box labeled Show interior layout borders. Click the save button and you are done.

Removing Borders in Thesis using CSS

If you perhaps only want to remove one or two of the existing borders, you also have supreme control through the custom.css file. This is definitely a more refined way of specifying just the border you want to target.

First, open up your Custom File Editor under the Thesis menu. By default, the custom.css is visible.

Removing Header Borders from Thesis

The border just above the content area is part of the #header section and is, by default, a double border. To remove we simply target that specifically like this:

.custom #header: border-bottom: 0;

Removing Bottom Borders from Thesis

Like the header, the footer is a double border that you can do away with by setting the following style:

.custom #footer:border-top:0;

Removing the content area right border from Thesis

The content area doesn’t use a border, but has an image background as separator. This can be removed by setting the following CSS rule:

.custom #content_box {background: 0;}

Removing the post_box border from Thesis

If you display posts on the main page, there will be a border between each. To get rid of it set the following style:

.custom .post_box {border: 0;}

Removing the teasers_box border from Thesis

Like the post_box borders, the teasers (if you use them) have a border between each row. This is identical to above and we specify the following CSS rule for the class:

.custom .teasers_box {border: 0}

Removing Navigation Borders in Thesis

If you’ve ever wanted to remove the borders from the default Thesis nav menu, here are two more options which make it easy.

Removing Navigation Borders in Thesis by Admin Options

The simplest way is to either set the border width of the menu border to zero, or to change the menu border’s nav border color to match the background. I’ll only outline the first as I don’t recommend the second method for most cases.

Just open your Thesis Design Options panel and expand the Nav Menu subsection. Set the nav border width (px) to zero and save.

Removing Navigation Borders in Thesis using CSS

As always, the CSS allows you to be more specific.

By default there are two borders in the Thesis nav bar: one for the menu itself, and one for each tab’s link.

You can achieve the same results with the following style changes:

.custom .menu, .custom .menu  a { border: 0; }

There, as you can see there are some further simple ways to customize your Thesis WordPress theme framework without too much work. That’s one of the many things I love about using Thesis and WordPress to design websites—so simple!