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;
}
