Saturday, August 6, 2011

Changing/styling/customizing/etc. your blockquotes in blogger

Ok, whew, so I have just been on an emaculate journey through blogger. This journey began with trying to display LaTeX in blogger. I then wanted to tweak and fix my "blockquote" in blogger since the template I am using doesn't specify a different background color or border which helps the quotes pop/stand out to the reader for better aesthetics and distinguish-ability. (I will also mess with and talk about the "code" and "pre" HTML tags in another post.) Then default "blockquote" in my template that I chose to use only indented the quote which made it very difficult to pick out of the blog post.

So one of the problems was finding out what to do. I knew I had to go into the Design tab, then the Edit HTML tab/option in the Blogger Dashboard. This allows you to edit the HTML code which controls your template settings of how your blog post/page/widgets/etc. will look. So I Googled "how to edit blockquote in blogger" where of course about a million (figuratively and literally) links returned.

Here are some links I came across which you might find helpful:

Blogger 101: Blockquote Coding -

Quotes in Blogger - Customization -

How to customize "block quotes" in your posts -

How to Style Up Your Quotes in Blogger -

Now this post ^ tells you to find this piece of code in the HTML template editor:

blockquote {
margin:1em 20px;
background: #dfdfdf;
padding: 8px 8px 8px 8px;
font-style: italic;

However, in the template that I am using there was not a piece of code like this. I couldn't even find "blockquote" in the code using the find function, CRTL + F. This next post then showed an alternative possibility of code, but alas, it was not there either.

Customize Blockquote In Your BlogSpot Blogs -

Weird, this link is nearly the same as this ^, information-wise.

How To Customize Blockquote In Blogger -

.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1; 

So ,what I did was simply find a spot to copy and paste to see if this code would work. I saw where the blockquote needed to be in between

<b:skin> </b:skin>

I then searched for a similar phrase as


This is in the Post section of this template code.

I then changed the color and added a border. The colors are in a 6 digit hex code. You can find out more about these colors and digits here:

Color Hex Color Codes -

About gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. also generates a simple css code for the selected color.
Html element samples are also shown below the color detail page.
Simply type the 6 digit color code in the box above and hit enter.

1 comment:

  1. very informative and the classic blockquote thank you