Weekend project: 15 super quick CSS tips

We love the Custom CSS feature and we think there's even a lot fun to be had with it. Some of these tips come from help tickets and others you might not even know you wanted to try until now. These will work with most themes and can be adjusted to the colors you want to use.

1. Set a custom line height for text
The theme builder allows for standard sizing - normal, loose and tight. If you want to customize that, you can use:

body { line-height: 130%; }
.module-content { line-height: 120%; }

2. Round the corners of the blog container
You might want to add some space above and below so the rounding stands out.

#container {
margin-top: 15px;
margin-bottom: 15px;
border: 20px solid #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

3. Round the edges of the banner background color while you're at it

#banner
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

4. Hide Page titles

.entry-type-page .entry-header { display: none; }

5. Style the featured post

.entry-featured .entry-content {
background-color: #EFEFEF;
padding: 10px 20px;
border-bottom: 1px solid #CCCCCC;
}

And you can hide the featured post's title and footer:

.entry-featured .entry-header,
.entry-featured .entry-footer { display: none; }

6. Set a default border around images in posts
This will apply to ALL of the images you include in your posts by default. This works best if you know the style you want to use and keep that consistent across all of your posts.

.entry-content img {
border: 1px solid #999;
padding: 10px;
background-color: #FFF;
}

7. Add a fancy divider between posts
You'll first upload your image and then copy the URL so you can use it in the following code.

.entry-footer {
padding-bottom: 60px;
background: transparent url(http://example.typepad.com/flourish.png) bottom center no-repeat;
}

8. Style every other blog comment

.comment-odd {
background-color: #EFEFEF;
padding: 10px;
}

9. Style your author image in the sidebar

.module-photo .module-content img {
border: 2px solid #999;
background-color: #efefef;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-bottom: 15px;
}

10. Style the "email me" module

.module-email .module-content {
font-size: medium;
background: #EFEFEF;
text-align: center;
padding: 10px;
}

11. Remove the extra space between items in the archive and categories sidebar lists

.module-archives .module-list-item,
.module-categories .module-list-item {
margin: 0;
}

12. Fancify the RSS "subscribe" sidebar link

.module-syndicate .module-content {
font-weight: bold;
border: 1px solid #000;
background: #EFEFEF;
text-align: center;
padding: 10px;
}

13. Customize the search results highlight color

.search-results .search-results-highlight {
background: #88dddd;
}

14. Style the "Powered by TypePad" module

.module-powered .module-content {
background: #88dddd;
text-align: center;
padding: 10px;
font-size: 14px;
}

15. Add some pizazz to your TypeList thumbnails

.typelist-thumbnailed { margin: -6px 0 20px 0; }

.typelist-thumbnail {
    min-width: 50px;
    width: 50px;
    margin: 6px 18px 0 0;
    text-align: left;
    vertical-align: middle;
}

.typelist-thumbnail img {
margin: 0px;
border: 1px solid #000000;
padding: 4px;
}

Comments

[Riot and Frolic]

Thanks, Typepad! Awesome helpfulness. Love my rounded corners!

[Nicole Beltane]

thanks typepad,

would be great to see these as standard features rather than having to mess around with CSS.

[@xannov]

These tips are great for advanced template users - but I agree with the comment by Nicole - it would be better for these to be standard features within Typepad too.

[Account Deleted]

Nicole and I are on the same page. It should be standard features rather than having to mess around with CSS. It's better if the options are given there instead of trial and error.

[Adrenalinfeed]

Nice stuff. Thanks for sharing! :-)

[Brian Hines]

Yes, for the past year or so TypePad's idea of a "new feature" is to tell subscribers how to do what already can be done with the blogging platform.

I'd much rather have genuine new capabilities, than all these posts about how to do something complicated with custom CSS, or whatever. How about making TypePad simpler and easier to use, with more useful features? (Hint to TypePad staff: look at how any Apple product evolves.)

[Maine Social Security attorney Gordon Gates]

I appreciate these tips on CSS. For example, it has always bothered me, having the footer in my featured post. I was glad to learn how to remove it. Thanks!

[Account Deleted]

VERY helpful tips! Thank you so much.