Munuviana - Old site, do not use - go to munuviana.mu.nu/edit instead!: MuNuby Help

May 13, 2004

MuNuby Help - Pullquotes

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

Pullquotes...

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.

To Susie, With Love

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-left: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:

What is Lorem Ipsum?

Neque porro
quisquam est 
qui dolorem 
ipsum quia 
dolor sit, 
consectetur, 
adipisci velit...

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.

Let me know if you have any questions or need any help.

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.

Posted by Madfish Willie at May 13, 2004 06:14 PM

Comments

Or go to Lipsum.com and get all of the Lorems and Ipsums you can shake a stick at!

Posted by Jim at May 13, 2004 06:45 PM

Ok, you know how ungeekly I am--where in the CSS does the script go, and do I have to type that span class list in every post I want floating text?

Posted by Susie at May 13, 2004 08:16 PM

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 MFW CSS:

.grn {
color:#008000;
font-weight:bold;
}
.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:

Selected text for color

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

Posted by Madfish Willie at May 13, 2004 08:29 PM

Plus, 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 forst place.

Posted by Madfish Willie at May 13, 2004 08:32 PM

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

Posted by Madfish Willie at May 13, 2004 09:22 PM

Very cool, MW!

One day, I will update Ambient Irony...

Posted by Pixy Misa at May 13, 2004 11:56 PM

Ok, two questions--if I want it on the left, do I put Lt where the Rt is? And is it supposed to NOT show up in preview as colored text? Or did I do something wrong in the CSS?

Posted by Susie at May 14, 2004 03:16 AM

In a word... yes. To display a left floating pullquote, use the .pullquoteLt class. I have posted an image in an update to the post showing what the preview will look like in Mozilla.

Posted by Madfish Willie at May 14, 2004 03:30 AM

In .pullquoteLt change margin-left:10px; to margin-right:10px;

That will move the text to the left margin and give you some spacing on the right side of your text block.

Posted by Madfish Willie at May 14, 2004 03:55 AM

#10

Isn't Mandarin WUNNERFUL?

And you too, MFW.