Posting HTML Template on Craigslist

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

Streamline Graphic Work by Templating

Template is a BIG part of our standardize operation. We not only create and use the html and css templates. We also heavily rely on the layered image template for banner, box, and linked buttons. The examples can be find in our usual podcast library.Our design goal is to use a minimum set of attractive features to win the most acceptance on the market place - the 10/90 rule. Doing so, we leverage our large stock collection of images and clips; and we reduce the risk of our young and relatively un-experience staff design team.

I have included some of the sample templates here on this blog entry. The one on the top is a sample banner image generated by the standard banner template.png. The next image is generated by the box template. To see the link button at work, you have to go here.

Please go to the Podcast/SOP folder to download those .mov clips which are some of the key Fireworks operations required to make the SOP work.

The image templates heavily depends on the vector based geometric shapes. One needs to know the basic vector operations in order to modify the templates. For example, to cut certain shape from a vector artwork, another vector artwork can serve as a cutter:

1. to place the cutter vector shape on top of the target shape,
2. to select both artwork
3. to click on modify -> combine -> punch

Besides punch, Many more operations are available, e.g. join and union. There are more than one ways the vector images can be edited. Please refer to the video tutorial for more detail.

You may also find a lot of button and bullet design here, maybe useful.