08 September 2006

Workarounds: 3 - Enhancing blockquote

FOUR posts below, you will see that my blockquote now has a better look, thanks to a light yellow background I was able to tack in.

This was made possible by using a combination of the Pick New Template, Edit HTML and Fonts and Colors functions under the Template tab. What I did was to apply a new template (where blockquote attributes are more properly defined) to another blog using Pick New Template. In particular, Todd Dominey's Scribe template has this requirement. Then, I opened the HTML code using Edit HTML, located the following and copy-pasted it in the HTML code of this blog:

blockquote {
font-style:italic;
padding:0 32px;
line-height:1.6;
margin:0 0 .6em 0;
}
The Fonts and Colors function comes in handy in identifying the corresponding hexadecimal code for the background color I preferred. But to be able to apply this, I first had to create (again by copy-pasting and editing one of the original variable name entries) a variable name for my blockquote color: I called this blockquoteColor.

The final step was to insert the following line in the blockquote code I copied from the other test blog:
background: $blockquoteColor;
Confused? Most probably. But you'll only get to understand the logic if you also try...sometimes err...and get rescued by the "Preview" and "Clear Edit" commands under the Template > Edit HTML function.

2 comments:

Anonymous said...

I'm currently using blogger beta. Before moving to Blogger Beta, my blockquote looks amazing with all the decorations and borders.

Now, it's all gone.
I tried using the above html which you posted, but the blockquote is just the same - plain.

Help.?

Willy B Prilles, Jr said...

Hi Syluscious. Thanks for dropping by. At least, you and chymera make me feel I'm not alone in my (mis)adventures with Blogger Beta, hahaha.

I used the following codes to define my blockquote. You're free to try them::)

Variable name="blockquoteColor" description="Blockquote Color" type="color" default="#f7ffd2" / value="#f7ffd2"

blockquote {
font-style: normal;
background: $blockquoteColor;
line-height: 1;
padding: 7px 7px 7px 7px;
margin: 13px 13px 13px 13px;
}

P.S. Kindly enclose the variable name declaration inside "<" and ">" signs in inserting these in your HTML code. I just can't cut-and-paste the entire thing here.