Tuesday, March 14, 2006

Shaded Text Boxes in Blogger Templates

I recently edited my Blogger template to enhance the look of blockquotes and code snippets , by enclosing them in shaded boxes. Hopefully others will find it useful. To use this, just enclose the text you want boxed-in with
<blockquote>...</blockquote>
or
<code>...</code>
tags in the HTML editor. The difference between the two is that text in a code block will have it's formatting preserved (the white-space: pre attribute). Here is the template code itself - I had to add the code block, the blockquote was already present in my template CSS (post section), it just needed to be edited. blockquote { margin:.75em 0; border:1px solid #596; border-width:1px 1px; padding:5px 15px; display: block; background-color: #dedede; } code { font-family: Courier; margin:.75em 0; border:1px solid #596; border-width:1px 1px; padding:5px 15px; display: block; background-color: #dedede; white-space: pre; } Technorati Tags: , , ,

10 comments:

Cynos said...

Thanks for the awesome code block... I'm a newbie at this, and tend to use Python for my coding, hence whitespace is sort of important... and didn't realise I could customise the CSS!

Durandal said...

Hi,

I came here after finding your post to the Blogger Help group. Unfortunately your trick works for formatting, but the Post Editor eats my code.

If you'd like to take a look, the post to the group is at

< http://groups.google.com/group/blogger-help-publishing/browse_frm/thread/9570502438f8836c >

I've googled, but I can't believe I'm the only person that has this issue... strange.

Paul

Jeff Burkey said...

thanks for the tip! how can i add a shaded text box around one item in my sidebar?

Doug said...

The same code will work, you just have to put it in the sidebar area of your template. Look for the HTML comment containing "Begin #sidebar" - you should see the various things already there by default. Just try enclosing one of them in the blockquote tags as a test (I would back up your template before making any changes).

Raihan Iqbal said...

How can we add codes like those present inside web.config files or xml files since they contain tags??

Doug said...

Do you have an example of what you want to display? Most special characters can be represented using the appropriate HTML entity code.

Anonymous said...

Great advice, however after inserting the block quote my spacing is messed up below the block quote (it gets smaller, whereas the the spaceing above the quote is larger) anyone know how to fix that?

Anonymous said...

Also, how to change the block quote border another color aside from green? Say black for instance. Thanks in advance.

KjellKod said...

Great help, thanks :-)

dannybuntu said...

To mr. anonymous asking about changing the color - i think you just have to edit the html color code - for example #113355 is dark blue.