Thursday, September 17, 2009

Customizing blockquote




Standar blockquote looks too simple for me, here is some trick to make it different.

1. Backup your template. recomended

2. Go to layout tab "Edit HTML".

3. Search:
blockquote {
bla
bla
bla }
or
.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1;
}
4. Replace it with following:
.post-body blockquote {
font: 12px/20px italic Times, arial;
padding: 8px;
background-color: #e5e5e5;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin: 0px;
background-image: url(http://img151.imageshack.us/img151/5882/bulletp.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 0px;
}
You can change its value to customize the looks.

Ps : This effect only appear in your blog posts, not in preview or compose mode.


Add To Google BookmarksStumble ThisFav This With TechnoratiAdd To Del.icio.usDigg ThisAdd To RedditTwit ThisAdd To FacebookAdd To Yahoo

0 comments:

Post a comment