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.
