I've got another design over at the MadLab for MuNuviana that has a white background. I popped that baby into a black background and... It.Is.Tough!!!

If they don't like it at MuNu, I'll bring it over here as a skin along with the white one.

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;
}

<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.

What are they...
There are 3 ways to specify color codes in your HTML and CSS stylesheets:

Where do I find them...
Visibone Webmaster's Color Lab
Visibone Webmaster's Color Card
Madarin Design: Web Color Swatches
ColorMatch 5K
Web Color Reference: Named Colors
Web Color Reference: Proprietary Color Names

How do I use them....
Dmitry's Design Lab: The World of Color
Communicate With Color
Color Matters - Design Art: Color Theory

What about fonts...
Visibone Webdesigner's Font Card

A really neat color code converter...
Southern Twilight RGB to Hex and Hex to RBG Converter

Feedback from MuNuviana

Rob from Xset:
Just my 2c worth. Hex codes can be shortened to a 3 digit number (yeah I know it's got letters in it - it's still a number) so #ff0000 can become #f00, black becomes #000 and white becomes #fff.

Annika from Annika's Poetry & Journal:
One great way to get hexadecimal color codes I discovered is through Photoshop. On the lower right corner of the color selector chart is a little box that shows the color code for whatever color you have selected, which takes a lot of the guesswork out of it.

Rob from Xset:
They should validate as they are valid hex equivalents to their 6 digit cousins. And I meant it only as a short hand method of entering appropriate colors. By all means use 6 digit codes for more complex hues.

Ted from Rocket Jones:
I do the same thing as Annika, but with Paint Shop Pro. When doing a banner, I select a color to match, then read the color code given in hex. Works like a champ, and makes it easy to clone that particularly nice blue you found on someone else's site.

Bravo Romeo Delta from Anticipatory Retaliation:
A neat color-picker can be found here (http://www.pixy.cz/apps/barvy/index-en.html). Cool stuff soon as I figure out how to do something wid it.

« You're cut off!

I had external calls for scripts to load both the Munuviana blogroll and my personal stuff from Blogrolling.com. Those two things were always hanging up the load times. So, for Munuviana, I just hard coded in the members in; for Blogrolling.com, I put in a D'oh! listing. I'll access those sites from my toolbar and gradually work them into the hard coded categories where they fit in.

I had a rotating banner script that selected a random banner from six choices. While the banner images are fairly large (as most banner images are), I decided I could rotate them out myself each week when I vote for the New Blog Showcase. I put my vote at the bottom of my sidebar, because it just has to be on the fron page to be counted.

Which brings us to the number of posts displayed on the page. I have my configuration set to 7 days. Well, some days I post 4 or 5 times. That's a lot of posts over a week's time. So, I decided to only show the last 20 posts. Then, in the sidebar above the Archives grouping, I put in a group that will show the titles of the last 15 posts that went off the page, so there would be easier access to them. [In case you can't live without the Dumb-Ass Jokes!]

I also took out most of my internal calls to stuff in modules and hard coded them into the index file. I left in the comments thingy, the extended text roll down thingy, and the random toasts thingys just because I wanted to. So there....

The net result is that my page should load quicker and you can get on with your business quicker when you visit. Let me know if there is anything you would like to see changed back!

We finally worked out the main design challenge - which was making the site viewable in 800x600 resolution. A three column design is just not conducive for 800x600 viewing. My inspiration and guidelines for overcoming this issue came from Jim at Snooze Button Dreams. I have a test skin up over there that he points to and accesses via a different index file and associated stylesheet. So, I tore that page out of his book added a script from JaveScript.com and adapted it for Eric's site. As you go to Eric's main page, you will notice a button labled [View Old Format] in the left sidebar. When you click that button, it takes you to his old two column layout. We formatted the site using the new stylesheet and adapted the three column index to the two column layout. We were both real pleased at the poutcome and the flexibility it gives him in presenting his site.

One of the features of this method is that when he posts to his main site, both sites are updated when the index is rebuilt! Cool beans! I also used some modular techniques in order to update the links in both indexes with just one edit.

We did most of the debugging and troubleshooting via MS Messenger so I could respond immediately to his change request. At each edit we would either approve the change and move fporward or go back and start over. It was a very effective way get things done for both of us.

Here is a list of some of the other features we designed for Eric:

• Custom 3 column design


• Custom 2 column design


• Custom banners & logos


• Custom graphics in sidebars


• Custom archive pages logos


• Custom comment pages logos


• Custom trackback page logo


• Custom sidebar background images


• Custom body background image


• Custom blog background image


• Custom archive page designs


• Custom comment page designs


• Custom trackback page design


• Custom display trackback pings code


• Expanding & collapsing extended entry scripts


• Expanding & collapsing comments viewer scripts


• Text formatting buttons in comment listing and comment preview templates


• Coding based on heavy use of modular programming techniques


• Access to a secondary site updating with primary site data for 800x600 viewers