Sunday, April 10, 2005

My Quote Style.

Yesterday Kevin blegged for an HTML lesson at the and I promised to reveal my quote style and instruct bloggers on how to implement and use it.

Provided blogger doesn't mess itself up I will do that.

<>

Here is the code that makes it all happen! Place the code below into your blogger template
div.quote {font-family: Times; font-style: italic; margin: 0.30in; border-top-style: solid; border-bottom-style: solid; border-right-style: none; border-left-sytle: none; background-color: #d1d1d1; width: 350px; text-align: justify;}

Whereever it goes it must be between the <head> and the </head> tags. It can not also be embedded in another style.

That is do not try:

body {
div.quote {. . .
background: #fff;...
}


In fact my template is this:
Date: 26 Feb 2004

----------------------------------------------- */


div.quote {font-family: Times; font-style: italic; margin: 0.30in; border-top-style: solid; border-bottom-style: solid; border-right-style: none; border-left-sytle: none; background-color: #d1d1d1; width: 350px; text-align: justify;}


body {...


Save your template and republish.

When you go to use the quote style here are the tags you need.

  • <center> & </center>

  • <div class="quote"> & </div>

and that is it!

Example:

<center><div class="quote">This is the code you would use to create a block quote in the style I have defined. I ramble on, hey that is a really cool Led Zeppelin song, in order to create enough text to show you how it handles multiple lines!</div></center>

Yields:
This is the code you would use to create a block quote in the style I have defined. I ramble on, hey that is a really cool Led Zeppelin song, in order to create enough text to show you how it handles multiple lines!


The only problem is it doesn't preview accurately, the center tags take over and the text you are quoting is centered nicely.

If you want, you may modify the style by altering existing values, by adding or removing properties. Do a web search on "CSS" or on cascading style sheets.

I hope this is helpful. You can then extend this little example to see how your template works and alter it to better suit your needs and desires for your blog.
|