CSS recipe for a styled footer on TypePad's Pico theme

readme.mkd

This is a CSS recipe that I'm currently using on my blog at sippey.com to...

• Hide the "permalink" link (I personally think this is redundant with linkable post titles, and the comment link in the footer)
• Turn the comment link into a button styled like the buttons TypePad uses for both Favoriting and Reblogging.
• Line up the comment button, the favorite button and the reblog button all on one line.
• Give it some opacity so that it fades a bit into the background, and then pops a bit visually on mouseover.

Note that you should configure your footer in TypePad to...

• Don't show the "posted" on
• Don't show the date or time
• Don't show the category of the post

In case I ever change my design (which happens all the time), here's a screenshot of how it looks.

So if you want your footer to look like that, you can use this CSS recipe in your Custom CSS.

inline-comment-button.css

.entry-footer {
	display : block;
	padding-bottom : 40px;
	margin-top : 20px;
	opacity : 0.5;
}

.entry-footer:hover {
	opacity : 1;
}

.entry-footer a {
	font-family : Verdana, Arial;
	font-size : 10px;
	text-decoration : none;
	padding : 3px;
	border : 1px solid #ddd;
	background-color : #f8f8f8;
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px; 
    border-radius: 2px;
    color : #777;
    background-image : url(http://sippey.typepad.com/files/comment-link-background.gif);
    background-repeat : no-repeat;
    padding-left : 23px;
}

.entry-footer a:hover {
	border : 1px solid #bbb;
}

.entry-footer-info {
	display: inline;
	float : left;
}

.permalink {
	display : none;
}

.separator {
	display : none;
}

.entry-footer-share {
	display : inline;
	float : left;
	margin-top : -3px;
	margin-left : 6px;
}