How To Make Thesis Teasers Full Column Width

17 Jun 2010

In a previous article I discussed how to add thumbnail images to your Thesis teasers as an easy way to customize the look.
Another fairly simple tweak you can make to the teasers is to change the width. By default the teasers are set to be half the width of the main column, displaying 2 teasers per row, like this:

For an alternate look, I like them to display the full width of the column so you only have one per row, like this:

To achieve this look:
Go into Custom File Editor in the Thesis submenu
Make sure custom.css is selected in the pulldown.
Scroll to the bottom of this file and paste the following code underneath: */

.custom .teaser {
width: 100%;
margin-top: 2em;
padding-top: 2em;
border-top: 1px dotted #bbb;
text-align: justify;
}
.custom .teasers_box {
padding-top: 0;
padding-bottom:0;
border-top: 0;
}

Save this and you will now have teasers that span the full-width of your main column!

I really like the way this looks, particularly for image-heavy blogs since it allows you to display a good size thumbnail making your posts all the more compelling. Once you’ve changed the teaser width, you now have more space to play with so you can increase the size of the thumbnail graphic to really catch attention. That is found in the Design Options menu, in Default thumbnail settings

I hope you found this post useful. If you enjoyed it, consider signing up for updates via email (includes a free SEO ebook). I help entrepreneurs and businesses learn how to use WordPress - with patience and hand-holding, I turn technophobes into technopros. I also help businesses develop an effective online marketing strategy and compelling web presence.

If you enjoyed this post, I'd be thrilled if you clicked one of these buttons!:

Tags: customization, teasers, thesis, wordpress tutorial

65424 Responses2010-06-17+14%3A52%3A15Lucy to How To Make Thesis Teasers Full Column Width

Jules

June 21st, 2010 at 9:32 am

Hi! – Thankyou for this pointer and the CSS – exactly what I was looking for, being a total newbie..I just implemented this on my new fledgling blog ..

@sitejedi

July 9th, 2010 at 10:36 pm

It worked perfectly on thesis 1.7. I don't know why they didn't make this option native to the configuration

Tsuchiyama

July 20th, 2010 at 7:02 am

I had to modify the width value to get it to display properly
width: 93%;

Marriage Project

July 27th, 2010 at 4:34 am

How do you get the text to display tight next to the thumbnail instead of below it?

LucyBeer

July 27th, 2010 at 5:10 am

You'll find that option in the "Default Thumbnail Settings" menu. I wrote a separate post on that: http://www.webtrainingwheels.com/2010/06/how-to-a…

Hope that helps!

July 27th, 2010 at 4:35 am

It does, thanks!

John

August 15th, 2010 at 2:01 am

This is great thank you. Im using Thesis reluctantly as I dont really want to learn CSS styling, but the framework makes it much easier.

klutzychef

August 19th, 2010 at 5:57 am

Thank you so much for this, it worked like a charm on my work in progress. My only problem now is that the test seems to kearn really closely to the image. Any idea on how to add padding around the teaser to make room? http://www.klutzychef.com

August 19th, 2010 at 8:27 am

Well I have half an answer for you. Looks like you need to add something like:
margin-right: 0.75em;
to the styling for the thumbnail image.
Unfortunately I don't know off the top of my head where exactly you should add that in your CSS…

August 19th, 2010 at 10:20 am

Thanks, I had a feeling that was the answer. I've played around a bit with the css to no avail, but I'll keep at it. Cheers.

August 19th, 2010 at 11:00 am

Try adding:
margin-right: 0.75em;

to this:
img.alignleft, img.left {
float:left;

found in style.css

well actually best practice is to add changes to custom.css

August 19th, 2010 at 12:54 pm

Brilliant! It worked. Thanks so much!

christie

September 23rd, 2010 at 4:41 pm

Thank you! I'd really gotten tired of the same old two-across teasers, but I hated to buy another premium theme so soon.

Christian

October 8th, 2010 at 4:52 am

How do I get rid of teasers on my homepage and just display full posts instead? I have marked "show 10 posts" on the /Reading/ section (under settings, but it only shows 2 full posts and the rest are teasers :(
Thank you!

October 10th, 2010 at 6:26 pm

You have to go into the Thesis Site Options, then under Display Options, click on Posts. Select "Display Full Post Content". Then you have to go into the Page Options menu and under the Home Page Display menu you would select '10' for the number of featured posts. That will show 10 full posts on your homepage and no teasers.

BGR

November 24th, 2010 at 5:01 pm

not working for me on thesis 1.8 at halfwaytoconcord.com

teasers show but two across

Neil

February 7th, 2011 at 3:47 am

Hi,
Do you know how to tell Thesis to have teasers on the homepage, but have one column dedicated to one category and a second column dedicated to another category?
What I would like to do is post MANY news articles per day, but not let this drown out my other types of posts on the homepage (posted only twice a week).
Thanks for any help you can offer.