mu.nu - "My Tamagotchi!" she said. "It has to poop."
May 13, 2004
MuNuby Help - 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.
You won't see any colored text, at least in Mozilla, and it won't "look" like it will display in the browser.
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..pullquoteRtHere is the text in my post edit box:
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;
<span class="dark"><i>What is Lorem Ipsum?</i></span> <span class="pullquoteRt">Neque porroLet me know if you have any questions or need any help. Here is a preview of the post:
<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.
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 06:14 PM | Comments (26) | Add Comment | Trackbacks (Suck)
1
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
2
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
3
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:
<span class="mrn">Selected text for color</span>
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.
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:
<span class="mrn">Selected text for color</span>
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
4
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
5
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
Posted by: Pixy Misa @ at May 13, 2004 11:56 PM
7
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
8
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
9
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.
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
Posted by: Emma @ at May 14, 2004 07:27 AM
11
Mandarin is an excellent source of CSS information!!
Posted by: Madfish Willie @ at May 15, 2004 04:23 AM
Posted by: online casinos: casino del rio @ at March 08, 2005 10:13 AM
Posted by: lortab @ at July 21, 2005 11:38 PM
Posted by: lorcet @ at August 17, 2005 02:01 PM
Posted by: carisoprodol @ at August 25, 2005 03:41 PM
Processing 0.01, elapsed 0.0159 seconds.
22 queries taking 0.0118 seconds, 37 records returned.
Page size 16 kb.
Powered by Minx 0.8 beta.