Posting HTML Template on Craigslist

Wednesday, August 6, 2008

Craigslist does not like Style
Almost all templates that we work with has the css tags like class="txt_... every where, such as

.txt_blue_bold {
color:#23758C;
font-family:Tahoma;
font-size:10px;
font-weight:bold;
}

One would think that, ah this is easy, just to do an inline style tag. However, Craigslist strips the style elements out of the posting. The inline style, such as:

..... class="txt_blue_bold" style=" font-weight:bold;"

will NOT work.

To get the text in the right face, size, and color, one has to use the deprecated font tag
< size="4" face="Bookman Old Style" color="#FF0000">Your Text Here< /font>

* font tag supports only 16 colors
Black = "#000000"
Green = "#008000"
Silver = "#C0C0C0"
Lime = "#00FF00"
Gray = "#808080"
Olive = "#808000"
White = "#FFFFFF"
Yellow = "#FFFF00"
Maroon = "#800000"
Navy = "#000080"
Red = "#FF0000"
Blue = "#0000FF"
Purple = "#800080"
Teal = "#008080"
Fuchsia = "#FF00FF"
Aqua = "#00FFFF"

** the white color is not permmited by Craigslist.

What to Adjust
The following adjustments, not necessary in its order, are recommended to shape up the HTML posting from a CSS template.

0.----------Adjust text face, size, and color using font tag

1.----------Replace image reference link globally
http://www.plus247.net/boxedart/NTAutoUpdate/html/filled-version/images/
Caution:
Do NOT use Diino for template image directory. Although the Diino images placed inside the webpage doe not affect the actual browsing. However, the pop up ad generated by Diino crashes the Dreamweaver when there are large image components.

2.----------Span image size to the (stretched) text area
remove all style references:
- external < link href="style.css"....
- inline < style ....

3.----------Match and fill color background
use colorpicker, here, to match and
to change to < bgcolor="#f3fbfb">

4.----------Gradient background
All browsers follow the same rule to fill the background IMAGE:
- Start the fill from (0,0) rightward and downward,
- Repeat or cut off when hits the border.
So, make sure
- Gradient the image straight along the long side
- Lengthen the long side enough to cover the entire block length, so no repeat pattern
- keep the short side to 1-3 pixels, to achieve the uniform pattern when repeated

5.----------Avoid text on dark background

6.----------Place the table on the center
enclosure the whole body inside of this div tag:
< div align="center" ....
....../div>

7.----------Animated GIF is allowed