Shaded Text Boxes in Blogger Templates
Mar 14th, 2006 by Doug
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: Blogger,
Blog,
CSS,
Howto ![[FSF Associate Member]](http://www.unixlore.net/images/fsf_button.png "[FSF Associate Member]"){kind=small}
![[SDF Public Access Unix System]](http://www.unixlore.net/images/sdf.jpg "[SDF Public Access Unix System]")
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!
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
thanks for the tip! how can i add a shaded text box around one item in my sidebar?
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).
How can we add codes like those present inside web.config files or xml files since they contain tags??
Do you have an example of what you want to display? Most special characters can be represented using the appropriate HTML entity code.
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?
Also, how to change the block quote border another color aside from green? Say black for instance. Thanks in advance.
Great help, thanks
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.
Nice info, thanks a lot
It helped me as I maintain a BASH scripting blog and I have to put codes in my posts. Thanks again.
//Jadu, India
http://unstableme.blogspot.com/