Before we talk about how you style a typical block quote in Agility 3.2 for the Thesis Theme, let’s take a look at what block quotes are. Here is an example of a block quote on this page that we’re looking at right now.
How to Apply a Block Quote
You apply a block quote by selecting the paragraph that you want to apply it to. Put your cursor in the paragraph you want and then you click this block quote icon and that applies the block quote.
Notice how Agility 3 shows you those styles. Because we’re in full width, the skin editor doesn’t know the difference between a full width and the regular layout so it’s not showing us this as if it were a full width layout. It’s showing us this as if it were a regular page width. But it does otherwise import the styles from the styles that we set up so that this shows properly. That way you can see what it looks like in the skin editor.
Where to Find the Styles
Anyway that’s the style and the place you style a block quote is under typical font styles. Then you go down to block quotes. Again block quotes have the typical font style, font family, font size and font color. And you choose from the list or enter your own.
You can use font style options and the full complement of font style options are available. You can choose to set margins. In this case the margins are around the block quote.
You can choose to set the padding which applies inside the block quote.
You can choose to a set a background color. and now you can see all these other options which you’re familiar with. So you just pick a color from the list, choose your own background color, give a opacity if you want and you can choose add a border.
The interesting thing about the border is that it will either take a single value, two values or four values. Those of you who do this professionally know the shorthand for border-top, border-left or border-top width, border-left width, border-right width, border-bottom width is just border width. Then you put the value in from the top, the right, the bottom and a value in for the left.
The border style needs to be solid or something because if you leave it at default it doesn’t show up. So border solid. Then if we only wanted a border on the left we’d do border width 0 for the top, right and bottom. Then the left one we’ll call 10px.
In this example, you’re going to get a left border along the side of this block quote. This is one place where I failed to add those colors so I strongly encourage you to use those colors. I’m going to fix this because this border color shouldn’t be like this. The border color should in fact, be a drop down where you can pick from your list instead of something else.
Let’s take a look at adding a custom margin. Let’s add a left margin of 50px to this. We’ll let that be our typical block quote and let’s make it italics. Then save that block quote.
Review Block Quote Examples
Come over to smart typography here. Do I have a little block quote in here? I do but let’s refresh this. Let’s edit the page for a second. I’m in www.agilityskin.com. I just saved it. Now I’ve got to clear my cache again and then reload this again. Sometimes the editor is really slow to pick up changes in the styles.
So there’s our block quote now. It looks like I’ve got a bit too much padding defined for this block quote so you know maybe I’ll reduce the padding. And I’ve got bold text so you know maybe I want to change that up.
On BYOBWebsite, my block quote style has a Grayscale dark color as the text. It has a normal font weight, default text align and it’s got this padding set up. I also set up a background color which I made very light blue. Those are my settings.