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.

No comments:

Post a Comment