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:
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
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?
I would need to see your site….
It's http://madisonstories.com/
Got it figured out. Thank you so much for the code! Made my life a million times easier :)
Awesome! Glad you found it helpful!
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
Bingo Bango! Easy as pie. Thanks. I need to know if I can customize the teaser length on a per post basis…
Hey, thanks! Worked like a charm, I now will be off to tour the rest of your site for more helpful little jems. Cheers:)
A quick search found you and the perfect code. Thanks so much!
You are welcome! I really like your site\’s design – very clean and elegant.
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.
not working for me on thesis 1.8 at halfwaytoconcord.com
teasers show but two across
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!
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.
Thank you! I'd really gotten tired of the same old two-across teasers, but I hated to buy another premium theme so soon.
Brilliant! It worked. Thanks so much!
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
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…
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.
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
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.
How do you get the text to display tight next to the thumbnail instead of below it?
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!
It does, thanks!
I had to modify the width value to get it to display properly
width: 93%;
It worked perfectly on thesis 1.7. I don't know why they didn't make this option native to the configuration
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 ..