How To Make Thesis Teasers Full Column Width

In: WordPress

17 Jun 2010

how to make Thesis teasers full column width

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:

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

full width Thesis teasers

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

If you like it, share it:


This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

12 Responses to How To Make Thesis Teasers Full Column Width

Avatar

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 ..

Avatar

@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

Avatar

Tsuchiyama

July 20th, 2010 at 7:02 am

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

Avatar

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?

Avatar

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!

Avatar

Marriage Project

July 27th, 2010 at 4:35 am

It does, thanks!

Avatar

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.

Avatar

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

Avatar

LucyBeer

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…

Avatar

klutzychef

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.

Avatar

LucyBeer

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

Avatar

klutzychef

August 19th, 2010 at 12:54 pm

Brilliant! It worked. Thanks so much!

Comment Form

How I Can Help You

The goal of Web Training Wheels is to coach small businesses & entrepreneurs in internet marketing and strategy so that you can take a hands-on approach to your own online efforts.I work with people one-on-one or in small groups to provide the necessary coaching and education. I'll give you the confidence and tools you need to effectively use the web to expand your business and express yourself online. Find out more.

Are you in the Los Angeles area? Get customized training to suit your needs.

Blogging For Small Business Training Program
Customized 1-on-1 training program to get your small biz blog up and running with a strategy.

Social Media For Small Business Training Program
Customized 1-on-1 training program to formulate and implement a social media strategy for your business.

What Do You Need Help With?
Blogging For Beginners
Just starting out? Learn all the blogging basics

Learning Simple SEO Techniques
SEO made simple - I'll teach you what you need to know

Taking Your Site To The Next Level
Need to drive more traffic? Not sure how to increase your audience? Let's work together to get things moving.

WordPress Training
Get in-person help and training for WordPress

Sign up for updates and workshop info

Sign up to the email list and you will receive a free copy of my ebook "Practical SEO." I respect your privacy and your information will not be sold, rented or abused in any way. You will receive a weekly update of posts from the blog and, if you provide your location, occasional emails about events in your area.
join my mailing list
* indicates required field

Connect With Me

Where to find me and what to expect:

Email Me:
lucy [AT]webtrainingwheels.com

 

Discussions on WordPress, blogging, online marketing

 

blog updates, useful articles and tips

 


business networking

 


bookmark collection contains marketing resources for small business and non-profits

Ask A Question

Do you have a specific question or topic you'd like to have addressed on the blog? Shoot me an email with your inquiry and I might be able to write a blog post about it to help you out. lucy [AT] webtrainingwheels.com

OC WordCamp – April 24, 2010