Using quotes in vSlider

Mon 28, November 2005 23:28:54

One very interesting debate among web design purists is how to best use CSS to represent quotes. In HTML, it is very simple to markup a block of text as a quote. Simply use the blockquote tag, like this:

<blockquote>The first step to getting the things you
want out of life is this: Decide what
you want.</blockquote>

Using CSS, we can assign a distinct look and feel to make the quote stand out from the text, like making it italic and maybe even indent it a little. A very common technique is to use an image as the quote symbol, and by setting it as the background of the block, we can have a rather nice effect, without any messy “img” tags.
I’ve created a custom quote image for the vSlider theme, and the CSS to use it, so the previous example would be rendered like this:

The first step to getting the things you want out of life is this: Decide what you want.

Now, the problem is that although this looks quite ok, it would be a lot nicer if we could also have the closing quote as well. And this is where the problems begin, since in CSS there is no way we can use two different images as backgrounds for the same block. If we could, it would be rather simple: the opening quote would be defined in the top left, and the closing quote on the bottom right. Since this is not possible, again we have one of those (unfortunately common) situations where we have to mix semantics and presentation. By adding a “div” tag, we can create a nested block with its own style and that can be used as a placeholder for the closing quote.
In the case of vSlider, I have defined this as a class named blockquote-inner. So, we can slightly change our previous example to:

<blockquote>
<div class="blockquote-inner">The first step to getting
the things you want out
of life is this: Decide what you want.</div>
</blockquote>

And the result would be:

The first step to getting the things you want out of life is this: Decide what you want.

Which looks a lot better, if I may say so. Uglier code, true… but nicer result :)
If you are using the vSlider theme, you can give it a try.

4 Responses to “Using quotes in vSlider”

Mike wrote a comment on Tue 29, November 2005

Rui,

Sent you an email re: a CSS issue with just this post, rendering improperly in Safari. Less than 24 hours later, it’s displaying perfectly. I don’t know if you tweaked the code, or if I was having some weird caching issue or what, but the issue seems to be resolved.

Ahhh….standards…;)

regards!

Rui wrote a comment on Tue 29, November 2005

Hi Mike, sorry I didn’t have time to reply, but I did some quick checks on the problem - I was able to replicate it using Opera, since it was fine in IE and FF.
I changed the text of the post, and that’s why it is correct now. The issue is on the length of “code” blocks… damn CSS floats…. :)
When I have some more time I’ll see if I can find a good solution for this.

Cheers

Mike wrote a comment on Tue 29, November 2005

No prob on the reply, I can relate to lack of time! Perhaps you could answer another question at your leisure: on the posts on your site, below the post title, it displays the date (day/month/year). However at the same place on my posts, it only displays the time (ie, “2:31pm”), no date. Any idea why that would be? Apologies if this is a Wordpress setting, believe me I’ve searched through the admin section.

best,
Mike

Rui wrote a comment on Tue 29, November 2005

In WordPress admin, go to Options -> General.
Use this for both “Default date format” and “Default time format”: D j, F Y

Care to comment?