Meta-Blog

SEARCH QandO

Email:
Jon Henke
Bruce "McQ" McQuain
Dale Franks
Bryan Pick
Billy Hollis
Lance Paddock
MichaelW

BLOGROLL QandO

 
 
Recent Posts
The Ayers Resurrection Tour
Special Friends Get Special Breaks
One Hour
The Hope and Change Express - stalled in the slow lane
Michael Steele New RNC Chairman
Things that make you go "hmmmm"...
Oh yeah, that "rule of law" thing ...
Putting Dollar Signs in Front Of The AGW Hoax
Moving toward a 60 vote majority?
Do As I Say ....
 
 
QandO Newsroom

Newsroom Home Page

US News

US National News
Politics
Business
Science
Technology
Health
Entertainment
Sports
Opinion/Editorial

International News

Top World New
Iraq News
Mideast Conflict

Blogging

Blogpulse Daily Highlights
Daypop Top 40 Links

Regional

Regional News

Publications

News Publications

 
Style Evolves
Posted by: Dale Franks on Tuesday, December 27, 2005

CSS is a great breakthrough in web designAs you may have noticed, we've implemented a new style element here at QandO: the callout box. This is a Cascading Style Sheet element that is simple to implement, format, and change. CSS is a great breakthrough in web design. It's not quite up to the usefulness and reliability of tables, mainly because different browsers still handle CSS differently. But it's still a very useful—indespensible, actually—part of modern web design.

It will also be a standard formatting tool available with .Blog v2.0, which will be released in the not-too-distant future. .Blog, by the way, is the blogging software that I created, and which powers QandO, and several other blogs. <shamelesspromo>It's only 20 bucks! You should buy it!</shamelesspromo>

To implement it yourself, in case you're interested, do the following:

1. Add the follwing styles to your CSS stylesheet:
.quoteright {
font-family: Arial, Helvetica, sans-serif;
background-color: #F6F6F6;
color: #000066;
font-size: 1.3em;
margin-right: 5px;
margin-left: 5px;
float: right;
border-style: dotted;
border-color: Maroon;
border-width: 2px;
padding: 2px;
width: 30%;
text-align: center;
}
.quoteleft {
font-family: Arial, Helvetica, sans-serif;
color: #000066;
background-color: #F6F6F6;
font-size: 1.3em;
margin-right: 5px;
margin-left: 5px;
float: left;
border-style: dotted;
border-color: Maroon;
border-width: 2px;
padding: 2px;
width: 30%;
text-align: center;
}
You can, of course, modify any of the attributes you'd like, except the "float" attribute. Don't screw with that. That determines on what side of the page the callout appears.

2. Once you've added the styles above to your style sheet, to make some text a callout use the following syntax in the body of your post:
<span class="quoteleft">Quoted text</span>

In this example, the callout will appear on the left side of the page. To make the callout appear on the right side of the page, use "quoteright", instead of "quoteleft".
Don't screw with the "float attribute!My experience indicates that the best practice is to drop in a callout at the very beginning of a paragraph. You can, of course, pop one in anywhere you'd like, but doing it at the very beginning of a paragraph works best, especially for people who wish to copy & paste text for quoting in other forums. You do not need to add in a carriage return, or anything above of below the callout text, and in fact, it's best if you dont. An example of the callout's use is given in the HTML example below:

<span class="quoteright">It's a happy place...as long as you have fun the way prescribed by Disney</span>Back in the 1990's, I worked for a company in Orange County, first as...

This code creates the callout as it appears in my Disney photoblogging post below.

For those who are interested in implementing this style, I hope you find this useful.
 
TrackBacks
Return to Main Blog Page
 
 

Previous Comments to this Post 

Comments
Nice bit of code, Dale.
Works in Blogger just fine.
Thanks for the tip. It came up at just the right time; I’ve set up a new look at BitsBlog, and added the code in. I’ll need to touch up the colors a bit, but it works just fine otherwise.


Cheers.

 
Written By: Bithead
URL: http://bitheads.blogspot.com
YW
 
Written By: Dale Franks
URL: http://www.qando.net
Nice Dale, but not very new actually. They are also called "pull quotes" and have been around in the magazine publishing business for a long time.

Here are some other CSS examples of them, although a bit more stylish.
 
Written By: Marc
URL: http://fullthrottle.cranialcavity.net/
Gotta tell ya; One of the concerns I have for this is how the various RSS feeds... Atom, etc, will react when they run across such insets. So far, I’m not seeing anything weird, so I’m encouraged, but I’ve only checked the Bloglines feed, so far. I’ll be interested to see what Feedburner does with it, for example.

 
Written By: Bithead
URL: http://bitheads.blogspot.com
Nice Dale, but not very new actually.
I know that. But it’s new here. And, as far as I know, .Blog is the only blogging software that uses it as a standard formatting tool.
 
Written By: Dale Franks
URL: http://www.qando.net
Arrgh.
Turns out, I missed it the first time. The Feedburner RSS picks up the Pull Quotes as raw text and inserts them in the article of the text.

Wish there was a way to hide those from the RSS.

 
Written By: Bithead
URL: http://bitheads.blogspot.com
Interesting;

My feed, once it makes it to your site, is formatted correctly... right down to the pull box being in the right place. Bloglines, wich also feed from that feedburner feed, screws it up.

 
Written By: Bithead
URL: http://bitheads.blogspot.com
My feed, once it makes it to your site, is formatted correctly... right down to the pull box being in the right place.
Uh, well, yeah, because the pull quote is part of our cascading style sheet. That’s how it’s supposed to work.
 
Written By: Dale Franks
URL: http://www.qando.net
Well, I know...

Understand; Initially I thought the RSS feed at Feedburner was the issue, since it was simply putting the pull inline, instead of hiding it or formatting it. My point was I was wrong, there.... the call is obviously making it through the RSS feed to your server. (Actually, I’m a little suprised that it does make it through the RSS pipe.) So, Feedburner isn’t the issue... it’s what Bloglines is doing with the feed that’s the causing issue I found.

 
Written By: Bithead
URL: http://bitheads.blogspot.com

 
Add Your Comment
  NOTICE: While we don't wish to censor your thoughts, we do blacklist certain terms of profanity or obscenity. This is not to muzzle you, but to ensure that the blog remains work-safe for our readers. If you wish to use profanity, simply insert asterisks (*) where the vowels usually go. Your meaning will still be clear, but our readers will be able to view the blog without worrying that content monitoring will get them in trouble when reading it.
Comments for this entry are closed.
Name:
Email:
URL:
HTML Tools:
Bold Italic Blockquote Hyperlink
Comment:
   
 
Vicious Capitalism

Divider

Buy Dale's Book!
Slackernomics by Dale Franks

Divider

Divider