How To Make Thesis Teasers Full Column Width

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

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

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Weekly WordPress Tips To Your Inbox

+ Get 50% Off The Beginner's Guide to SEO Ebook!
  • This field is for validation purposes and should be left unchanged.

This Post Has 27 Comments

  1. Nadine

    This works beautifully! Thanks. Unfortunately, the headers no longer show up in bold (i.e., darker than the text). Can you suggest a tweak that would remedy this?

    1. LucyBeer

      I would need to see your site….

      1. Nadine
  2. The Endless Meal

    Got it figured out. Thank you so much for the code! Made my life a million times easier :)

    1. LucyBeer

      Awesome! Glad you found it helpful!

  3. The Endless Meal

    I also love the way the full column width teasers look, much cleaner.

    I have copied and pasted the code into my custom css file and saved it but it is still showing 2 teasers per column. Any suggestions?

    Kristen
    http://www.theendlessmeal.com

  4. Byron

    Bingo Bango! Easy as pie. Thanks. I need to know if I can customize the teaser length on a per post basis…

  5. Dane

    Hey, thanks! Worked like a charm, I now will be off to tour the rest of your site for more helpful little jems. Cheers:)

  6. Pamela

    A quick search found you and the perfect code. Thanks so much!

    1. LucyBeer

      You are welcome! I really like your site\’s design – very clean and elegant.

  7. Neil

    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.

  8. BGR

    not working for me on thesis 1.8 at halfwaytoconcord.com

    teasers show but two across

  9. Christian

    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!

    1. LucyBeer

      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.

  10. christie

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

  11. klutzychef

    Brilliant! It worked. Thanks so much!

  12. klutzychef

    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

    1. LucyBeer

      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…

      1. klutzychef

        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.

        1. LucyBeer

          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

  13. John

    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.

  14. Marriage Project

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

    1. LucyBeer

      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!

      1. Marriage Project

        It does, thanks!

  15. Tsuchiyama

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

  16. @sitejedi

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

  17. Jules

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

Leave a Reply

Your email address will not be published. Required fields are marked *