CSS Cookbook

Hide Featured Post title and footer

This code will hide the Featured post title and/or footer as desired.

/* Hide featured post title */ .entry-featured .entry-header { display: none; } /* Hide Featured post footer */ .entry-featured .entry-footer { display: none; }

Add a post divider

With this code, we can add a fancy image between posts to act as a divider. Upload your image in Library > File Manager and adjust the height element as needed for the size of your divider.

/* Post Divider */ div.entry-footer { height: 100px; background: url(http://themes.typepad.com/images/post-divider.gif) no-repeat 50% bottom; }

Style blockquotes in posts

The default code for the blockquote tag used in posts is:

/* Style Blockquote */ blockquote { background-color: #f4f4f4; border-bottom: 1px dotted #dedede; border-left: 8px solid #dedede; border-right: 8px solid #dedede; border-top: 1px dotted #dedede; }

For more customization ideas, see Styling the Blockquote Tag on Everything TypePad.

Change the line spacing of text in posts

The default line spacing for the text in blog posts is 150%. You can adjust that up or down with the following code.

/* Post Text */ .entry-body,.entry-body p,.entry-more,.entry-more p { line-height: 120%; }

Change the color of post items

Post Link Colors

/* Link Color */ a { color: #f27982;} a:hover, a:visited:hover { color: #fdd0a6; } a:visited { color: #666; }

Post Text Colors

Post Date Header

/* Date Header Color */ h2.date-header { color: #FF8C00; }

Post Title

*For this you set both, because the post titles on the index pages are link, and on the individual archives pages are plain text.

/* Post Title */ h3.entry-header,.entry-header a { color: #444; }

Post Text

/* Post Text Color */ .entry-body { color: #FF8C00; } .entry-more { color: #FF8C00; }

Post Footer

/* Post Footer Text Color*/ .entry-footer p { color: #FF8C00; }

Style the Featured Post

Border around the entire Featured Post

Set the border width, radius, padding, and colors:

/* Featured Post */ .entry-featured { border: 2px solid #ddd; margin-bottom: 15px; border-radius: 25em/3em; background: #F5DEB3; padding: 30px 25px; } /* Border around content */ .entry-featured .entry-content { border-top: 2px dotted #fff; border-bottom: 2px dotted #fff; } /* Hide Featured post footer */ .entry-featured .entry-footer { display: none; }

Remove the border-radius line in the code to have a rectangle instead of rounded corners:

Change the border of images in posts

The default style specifies rounded corners around images in posts:

/* Rounded corners on images in posts */ .entry-body img,.entry-more img { -moz-border-radius: 7px; -webkit-border-radius: 7px; }

To remove the rounded corners, use:

.entry-body img,.entry-more img { -moz-border-radius: 0; -webkit-border-radius: 0; }

To add a standard border around each image by default, use:

.entry-body img,.entry-more img { border: 1px solid #000000; }

Style post image caption

The default style sets the text as slightly smaller than the post text and italicized:

/* Photo Caption */ .photo-caption { font-size:90%; font-style:italic; font-weight:400; text-align:center; }

To make the text slightly larger, bolder and a different color, use:

/* Photo Caption */ .photo-caption { color: #003366; font-size: 110%; font-style:italic; font-weight:600; text-align:center; }

Add a date header ribbon

Here we'll add a date header ribbon that wraps around the edge of the container. This effect is specific to a Two-Column-Right layout (since the ribbon wraps around the content edge on the left):

h2.date-header { position: relative; width: 40%; font-size: 1.3em; font-weight: bold; padding: 7px 20px 7px 25px; margin: 0 10px 25px -30px; color: #555; background-color: #eee; text-shadow: 0px 1px 2px #bbb; -webkit-box-shadow: 0px 2px 4px #888; -moz-box-shadow: 0px 2px 4px #888; box-shadow: 0px 2px 4px #888; } h2:before, h2:after { content: ' '; position: absolute; width: 0; height: 0; } /* wrap */ h2.date-header:after { left: 0px; top: 100%; border-width: 5px 5px; border-style: solid; border-color: #666 #666 transparent transparent; }

You can make the ribbon stretch across the full content area by using the code above and changing the width:

/* Ribbon width */ h2.date-header { width: 100%; }

Change the color:

/* Ribbon color */ h2.date-header { background-color: khaki; }

Add a flag on the end:

/* flag */ h2.date-header:before { left: auto; right: -2px; top: 0px; border-width: 20px 10px; border-style: solid; border-color: transparent #fff transparent transparent; }

Code thanks to RedTeamDesign and adapted to paste into TypePad.