Tech Support - Pullquotes

From Susie, from SilverBlue, from KiwiFruit, from Mandarin Design

Pullquotes...

I've seen several sites over the last few days using a neat little CSS formatting trick to display pullquotes like a magazine. Here is a screen cap of my at MadLab test site

I set mine up in my stylesheet. See the extended entry for the code I used. I have included the code for a left float pullquote and a right float pullquote.

Here is my CSS for the pullquotes plus the colored and formatted text.

.pullquoteRt {
float:right;
width:175px;
padding-bottom:10px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
font-family:Arial, Helvetica, Georgia;
font-size: 26px;
line-height:28px;
color:#B1D3EC;
text-align: right;
}

.pullquoteLt {
float:left;
width:175px;
padding-bottom:10px;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
font-family:Arial, Helvetica, Georgia;
font-size: 26px;
line-height:28px;
color:#B1D3EC;
text-align: left;
}

.dark {
color: #285577;
font-weight: bolder;
}
.med {
color: #0066B2;
font-weight: bold;
}
.reg {
color: #6CAAD9;
font-weight: normal;
}
.light {
color: #B1D3EC;
font-weight: lighter;
}

Here is the text in my post edit box:

<span class="dark"><i>What is Lorem Ipsum?</i></span>

<span class="pullquoteRt">Neque porro
<span class="reg">quisquam est </span>
<span class="med">qui dolorem </span>
<span class="dark">ipsum quia </span>
<span class="med">dolor sit, </span>
<span class="reg">consectetur, </span>
<span class="light">adipisci velit...</span></span>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras tincidunt diam ac diam. Cras tristique, augue vitae dictum tristique, turpis elit mollis nunc, nec venenatis turpis risus ac mi. Ut eget ipsum. Nunc a diam. Nunc ut ante eget eros blandit convallis. Proin vitae pede. Nam semper gravida arcu. Vivamus porta sollicitudin neque. Nam luctus. Mauris tempor dolor vel libero. Nullam arcu turpis, pulvinar eu, luctus in, rutrum sed, lectus. Pellentesque arcu lectus, congue id, rutrum eu, fringilla id, elit. Vivamus nibh sapien, eleifend eget, mattis non, placerat vel, magna. Pellentesque hendrerit ullamcorper felis. Aliquam feugiat, quam nec commodo pulvinar, est lacus faucibus nunc, scelerisque ultricies tortor libero sed tortor. Suspendisse nec mauris eu nisl sodales ultrices. Fusce quam metus, placerat sed, imperdiet elementum, luctus nec, augue.

Here is a preview of the post:

You won't see any colored text, at least in Mozilla, and it won't "look" like it will display in the browser.

You can put the code anywhere you want in your stylesheet.

You have to assign the span class everytime you want to use the code. If you take a real close look at what you did in your post today and compare it to what I did in my post, you'll see that mine is the easier way to duplicate... much less actual code to remember and type in. If you only want to assign one color or class to the entire pullquote, then the whole process is shortened. I just tried to re-create what everyone was posting for their test samples.

You can also modify and/or use the color codes in any other part of your post. You only have to surround the desired text in the span tags and assign the span tag a class code. I have several that I use occasionally at MFW so I don't have to type in all the font tags individually.

Sample from Madfish Willie CSS:

.mrn {
color:#800000;
font-weight:bold;
}
.blu {
color:#0000FF;
font-weight:bold;
}
.blue {
color:#000067;
font-weight:bold;
}
.ind {
color:#4B0082;
font-weight:bold;
}

Then, when I want to use maroon text, I just do this:

<span class="mrn">Selected text for color</span>

Which will display: Selected text for color

I've counted the keystrokes and the CSS code is shorter that using the font tags, plus you don't have to memorize a bunch of color codes, just the class name.

And, if you ever want to change the code for a different look or color, you will have a blog-wide change, which is the point of CSS in the first place.

Note: I've just added a top and bottom border on the sample over at MadLab. I think think they help set the pullquotes off a bit better.