Weekend Project: Styling the Blockquote Tag

Blockquotes are used for a myriad of things--think recipes, quotations, poetry; it's something that has enough significance, or requires emphasis, to be set apart from the rest of your blog text.

Our goal with this Weekend Project is to show you a few ways in which you can style your blockquote tags to make what you emphasize stand out that much more.

This Weekend Project requires CSS, but this is a tip that all levels of TypePad bloggers can use. Note, however, that it'll be much simpler to setup (think "set it and forget it") for our Unlimited and above members. Plus users will need to manually add the CSS to the blockquote tags via the HTML tab. Don't worry, we'll give you the lowdown on how to implement the CSS in both ways. If you want the ability to only have to set it up once, though, we recommend upgrading to the Unlimited plan.

To get started, you'll need to think about your blog's design, what kind of impact you want to make with your blockquotes, and what fits your personal blogging style. Do you prefer simplicity, bold colors, lots of flourish? If we don't give you the exact example you're looking for, a quick search via your favorite search engine, and the tips we give you, will head you in the right direction.

Here are the examples we've setup for you at this time...

1) This blockquote is styled with a dark gray background, white text, and a thin, white, dashed border. It's also padded on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can go to Design > Custom CSS, or Design > Templates > Stylesheet if you're an Advanced Template user, and add the following CSS:

blockquote {
  background-color: #333; 
  color: #fff; 
  border: 1px dashed #fff; 
  padding: 5px 15px;
}

And that's it! Preview your changes, then, if you're happy with them, click "Save" and forget about it. You don't have to do anything else; just apply the blockquote in the editor and the CSS will do its magic to transform it using the settings you put into place.

Plus users will need to compose their post, select the text they want to offset, then click the blockquote icon (quotation mark) in the editor (note: you'll need to do this for every blockquote, manually via the HTML tab). Once that's in place, click the HTML tab and look for the <blockquote> tag. Then, add the CSS like so:

<blockquote style="background-color: #333; color: #fff; border: 1px dashed #fff; padding: 5px 15px;">

2) This blockquote is styled with a dark gray drop-shadow, and is padded on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  padding: 5px 15px; 
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 4px #000;
  box-shadow: 3px 3px 4px #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow
(Strength=4, Direction=135, Color='#000000')";
  filter: progid:DXImageTransform.Microsoft.Shadow
(Strength=4, Direction=135, Color='#000000');
}

Plus users will need to use:

<blockquote style="padding: 5px 15px; -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');">

3) This blockquote is simply styled with a 2px wide border in red (the hexadecimal--#c00000--can be changed to a color that suits your blog), displayed only on the left side. It also has padding on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  border-left: 2px solid #c00000;
  padding: 5px 15px;
}

Plus users can use:

<blockquote style="border-left:2px solid #c00000;padding:5px 15px;">

4) This blockquote style is a classic, using a simple background image of a large quotation mark. There is a greater amount of padding used on the top, right, bottom, and left (25px, 15px, 5px, 75px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  background:url(http://www.example.com/image.jpg) 
no-repeat top left;
  padding:25px 15px 5px 75px;
}

Plus users can use:

<blockquote style="background:url(http://www.example.com/image.jpg) no-repeat top left;padding:25px 15px 5px 75px;">

5) This blockquote style actually uses a couple of things we've already made use of in the above examples. The blockquote is set to only be 430px wide, is styled with a background image at the top, which is centered and dragged up -7px, and has a white background color. The perimeter of the blockquote has small gray dots on the left, right, and bottom. There's also padding set for the top, right, bottom, and left (30px, 15px, 15px, 15px, respectively), to push the text away from the inside edges of the blockquote border.

Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote { 
  width: 430px;
  background:#fff url(http://www.example.com/image.jpg) 
no-repeat center -7px;
  overflow:visible;
  border-right:1px dotted #c0c0c0;
  border-bottom:1px dotted #c0c0c0;
  border-left:1px dotted #c0c0c0;
  padding:30px 15px 15px 15px;

Plus users can use:

<blockquote style="width:430px;background:#fff url(http://www.example.com/image.jpg) no-repeat center -7px;overflow:visible;border-right:1px dotted #c0c0c0;border-bottom:1px dotted #c0c0c0;border-left:1px dotted #c0c0c0;padding:30px 15px 15px 15px;>

Note: The last couple of examples use background images, and if that's something that interests you, you'll need to first upload that image to your File Manager. Once uploaded, click on the file name of the image you uploaded, then copy the URL out of the address bar. You'll be using that URL to replace the http://www.example.com/image.jpg example in the CSS code above.

We hope you'll find these examples useful, possibly the oomph! an occasional post or two in your blog needs. Go ahead and steal some moments this weekend to figure out what works best for your blog. Remember: you can preview your blockquote changes, make some edits and preview again, then save when you've perfected the look you're going for.

Comments

[Lydia]

Great tutorial, Brianna!

[Murat BARUT]

I will be trying to figure out what works best for my blog http://bargainholidays-turkey.com .Great tutorial Brianna, a bit heavy for me but great neverless.

[Account Deleted]

Loving these new regular posts guys and gals, keep it up :)

[Maj Pain]

Awesome Post. The upgrade is well worth it. Cmon, stop being a wheeney and upgrade, that is if you are serious about your blog........

PS, someone give "Anke" a shirt. How about a www.onemarinesview.com shirt? anything just cover that thing up...

[jeff reine]

Another great tip from the great TypePad Support & Service team. Hizzah!

[Liz@ThisFullHouse]

I am an Unlimited Plus user and, unfortunately, cannot get this bit of css/html to work. Also, the html shown for plus users works fine if entered and viewed from html editor. However, the code is then changed when switching to rich text editor and not working in preview.

[Sadi Baly]

Pretty good posting here,I never thought about that I will catch any information like that ,but your post really help me.Awesome things are sharing here.I like your post ,Now I am waiting for your next post.So keep writing.

[A Twitter User]

I am an unlimited user and can not get this bit of code to translate into an adorned blockquote. Any tips? Like, Where should I copy the code on my CSS page and should it be written exactly as you have it or does it need to be tweaked?

I couldn't get it to work using the Plus users code pasted into the HTML page either.

Please help, would love to implement this new look!

[Bri]

Liz, it looks like your current CSS, at Design > Custom CSS, is missing a } at the very end of your last CSS code. You'll need to add that in before you add the code for the blockquote styles. If you still can't get it to work, keep the blockquote CSS added in the Custom CSS page, then open a help ticket at Help > New Ticket, okay? :)

[Bri]

Amy, it looks like the last bit of CSS you entered into the Custom CSS page is missing the end } at the end of the code. You'll need to add that, then add in the CSS for the blockquote before you'll be able to see it work on your blog. Once you do that, if it's still not working, just open a help ticket at Help > New Ticket, and we'll take a closer look.

[Liz@ThisFullHouse]

Well, that was easy -- thanks, Brianna!!!

[Curious Ellie]

More please?

I'm learning CSS on my own. Your post was useful because I've wanted to make my block quotes look different. I wanted greater control, to fine-tune. Now I know.

But this was also good reading because I learned more about CSS in general (painlessly). Figured out a little problem that puzzled me for awhile. Thank you!

[Lowell]

I'm a plus user. I've tried putting the code in different ways. It looks good in the editor but in the preview it's just a plain block quote. Any suggestions?