I’ve just snazzed up the blockquotes styling on a couple of my P2 sites and thought I’d share the code that did it. Here’s an example of the final result in P2:
This is a block quote. You can create one by adding blockquote tags to the beginning and end of a block of text you’d like to look a little different. It doesn’t always have to be a quote, just something you’d like to give a little emphasis to.
This is a little plain in the original P2 and I thought it deserved a bit of styling. Here’s what creates the above:
blockquote {
background: #fef;
padding: 20px;
font-size: 1.1em;
border-style:dashed;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
The first line creates the background colour for the block. Any f/e variations work well as they give only a slight highlight. Try the following:
- #eee for grey
- #eef for yellow
- #ffe for blue
- you get the picture…
Next we add a bit of breathing space all around the block of text by adding some padding, and we’ll increase the font size to something more readable.
The border-style property adds the dotted outline to the blocks. Feel free to remove it if that’s too much emphasis, or try any of the following values as variations:
- groove
- double
- ridge
- dashed
- dotted
- inset
- outset
- solid
- thin
And finally we’ll add some rounded corners to those blocks with the last three lines (courtesy of that marvellous http://border-radius.com generator)
Fell free to experiment with those values, and let me know if you find anything else that may look interesting. Add the above code to your child theme’s style.css file, or add it to a custom CSS field in your WordPress installation.
Note that the effect of this styling will only be visible upon a browser refresh, as this is overriding styles provided by P2. So when you write a post, you’ll see the old (plain) version being inserted. Visitors will see the new styling right away.