Friday, August 17, 2007

Tutorial: Blockquote Background

I had just created my own Quote symbol as a background to the Blockquote tag. So today, I'll be showing you how to make your own Quote symbol background! :D

The code I'm using is originally from TechnoJuice, so be sure to head there to know how to apply the code.

Okay.. let's start with the tutorial!

Step 1

BTW I'm using Macromedia Fireworks. First, open a new document and set the width, the height and the canvas color. I'm using W = 80, H = 64, Canvas Color = Transparent.


Step 2

Select the Text Tool from the toolbar and select Wingdings as your font. You can use any other font, but I think that Wingdings Quote symbol looks the best.

Step 3

Now u need to find the Quote symbol in Wingdings. To find it, you need the Character Map (Start > Accessories > System Tools > Character Map). Copy the Quote symbol and paste it in your document. Resize the font (I use font size 150). Change the font colour to suit your blog. In my case I chose light green. Make it transparent by changing its opacity (50-80% opacity). Note that the Quote symbol will be place behind some text, so you need to make sure the colour you're using is lighter than the text colour.


^
copy-paste the Quote symbol from the Character Map

Step 4


Align your Quote symbol to make it center. In Fireworks, you can right click and select Convert to Paths. This will eliminate the font spacing and change it into an Object. Duplicate your Quote symbol before converting it to paths (in case u screw up!). Now you can align-center by creating a rectangle (same size as the document resolution 80x64). Then, Ctrl+A (select all) to select both and Align it to Center Vertical and Center Horizontal. When you have successfully centered the Quote Symbol, delete the rectangle.





Step 5


Save it as a .gif or .png.

Step 6

Upload it at Imageshack or any other image hosting site.

Step 7

Place the code in your Blogger Template (Template > Edit HTML).

The code I'm using:-

.post blockquote {
margin:1em 0px;
font-style: normal;
padding-left: 30px;
padding-top: 15px;
background-repeat: no-repeat;
background-position: left top;
background-image:url('quote.gif');
}


Step 8

Now you can test how it looks like on your blog. You can do that by simply selecting the text you want to format as a quote and then click on the Blockquote button on the toolbar on the Blogger editor.



Here is the demo:
Here is how the blockquote looks after the changes have been made.
The font style can be change to best suite your blog.
The text is padded to give prominence to the quote.
The quote looks subtle in light green.

Labels:



Comments:

blog comments powered by Disqus

Older Posts    Home    Newer Posts
Related Posts Plugin for WordPress, Blogger...