CC Page Adjustments for Craigslist

CC html to Craigslist html Patch


Creating cc html-----------------------------
Extract the entire cc page simply by coping the entire wrapper "divRoot" tag.
Place this "divRoot" tag inside the Banner slice table center td tag.


Add Outer Table Tag-----------------------------
In order to place cc.html at the center of the screen, the following table tag outside (on top or below) of the cc.html.
<div><table border="0" cellpadding="3" cellspacing="0" width="100%"> <tbody><tr> <td width="100%">add extra content outside</td> </tr></tbody> </table></div>

(Opt.) Anti Spam Assasin------------------------------
<td rowspan="1"><span> <p> ........fill a lot of different text each time from long blogger site use space above and below for quick edit............... </p></span></td>

Dark bg, white lettering--------------------------
Insert:
style="color: rgb(255, 255, 255); padding-left: 5px; font-family: Arial,Helvetica,sans-serif; font-size: 10pt; padding-right: 5px;"

inside the outer most <> tag
Only 16 colors are recognized by font tag

(Opt.) Dash Coupon Box-----------------------------------
To make the Dash line visible, insert
style="border: 2px dashed rgb(154, 89, 115); margin-top: 6px;"

after
< bgcolor="#000000" border="0" bordercolor="#570000">

Realign image left or right-----------------------
the p tag inside the Craigslist interrupts float, either place the image and text a table td; or make sure the text and image are not separated by the p tag, and use br tag to form paragraph.
<br /> <p>... </p> cancel the float to right or left, <br> use a pair of <br>

Enable the Page BG image-----------------------
The following table has to be inserted outside of the cc html, to add page background. Selecting the appropriate seamless bg image from the library to change the appearance.
<br><br> Top:<br><td background="http://plus247.net/artworks/bg/leaf10.jpg" style="width: 1000px;"><br> <tbody><tr><br /> <td width="100%" colspan="1" rowspan="1" style="padding-left: 200px; padding-right: 200px;">< width="600" cellspacing="0" cellpadding="1" border="0"></td></tr><tr><br> <td width="100%" colspan="1" rowspan="1" style="padding-left: 60px; padding-right: 60px;"> </td></tr></tbody><br /> <

Craigslist/Newsletter SOP

SOP
This 4 Step SOP is very complicated, took us a few days to go through. However, it is simple to execute, once you know it.

1. creating banner templates
banners = ccBanner.png + bgBanner.png

2. creating base pages

3. more pages by banner variation

• export all slice images in .gif format, the cc message images to set as non-transparent, the rest of bg image to set as transparent.
• upload the server/images folder to server's server/images folder(http://plus247.net/server/images)
• replace all 'src="images/' with 'src="http://plus247.net/server/images/
• copy the containing table inside the reference cc_#x.htm, and replace at the center <>
• save as an cc_page instance , cc#.htm
• repeat this step for more bg pages with different layer combination

4 more messages by page variation

• instanciate posting.htm by incresing the pic seq # (keep track of the seq set#, no duplication)
• save as c#_seq#.htm

Rules

Step 1 Banner creation

• standard banner dimension: 600x300, except those "sticking out/in/sideway"
• to have different image looks: great background, nice vectors
• the banner template is to provide a framework for different images, the image rules:
• -- do not use the same single actor
• -- use "working people" instead of just people
• -- use scene from different time i.e. season, sunset, dawn scenery
• -- use "transportation" instead of just plane
• -- use "group" instead of individuals
• -- use vector art in white on dark, or dark on white (dezignus_templates.rar - Vector Images in PNG format)

Step 2 Page Creation

• extract from the cc_pages,
  
• remove the coupon and excess infoBoxes
• fix: Craigslist limitations: p tag float, contact reference url, image url, header title, b/w letter contrast,..., i.e. convert div to table.
  
• merge banner with the cc page to a full html pages
• cc_pages/ holds 000-999 templates
• 000-399 is sloted for templates with no banners, hence simply selecting from existing pages
• the postfix x, e.g. 400x, is the reference for the next 5, 400, 401,...,404, banner variations

Step 3 Banner Variation

• change both the html and banner template settings:
  
• -- layer selection
• -- alpha on the mask
  
• -- color, border, background,...etc.
• do not touch the text or internal images (inside the .html) yet
• target to have finished 70 templates
• try to stick with one process would be easier, i.e. the same banner slicing and adding the code of the sliced image to the target template

Step 4 Page Variation

• each cc_page template will contain 11 messages
  
• 70 cc_page template can result more than 500 messages by picture variations
• use flash extraction to get a lot of different bg and thumbnails
• -- layer selection
• -- alpha on the mask
  
• -- color, border, background,...etc.
• select from the standard Components
  
• -- standard 150 px width image libraries: http://plus247.net/artworks/biz (also lux, lzr, obj, tek, tvl)
• -- standard page background image library: http//plus247.net/artworks/bg
  

FavIcon

First, change the name of the favicon to "favicon.ico".
Insert the following HTML tag inside the <> ... < /head> section of your web page:

< rel="shortcut icon" href="favicon.ico">

If you have downloaded an animated favicon, insert this:

< rel="shortcut icon" href="favicon.ico">

< rel="icon" href="NAME OF THE ANIMATED FAVICON.gif" type="image/gif">

After you have generated your favicon and saved it to your computer, it must be renamed to favicon.ico (since most tool generated favicons are given a random name).

The common method for using a favicon is to simply upload it to the root directory of your public web space. This is where most web browsers automatically look for it.

Just uploading the file is generally fine, but for the best support across various browsers, place the following lines in the head section of your HTML:

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon"><br />&#xA<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">

(where http://example.com/favicon.ico is the path to your favicon)

Be sure to add that code in all of your html files - not just the index.

http://www.html-kit.com/favicon/test/54b72bfbbe81097484b94ce1f68010f0/

How to maintain a static main page blogger

http://help.blogger.com/bin/answer.py?hl=en&answer=41456
set the posting time to future

Creating Design Variation

Design Mixes:

1. gradient page background on table, fr 4 10
2. use old paper/geo shape/gel background
3. overlap shapes, fr 4 island shapes fr 6
4. apply different colors
5. live effect the border fr 4
6. have 2 or more columns and rows fr 6 7
7. apply different InfoBox design fr 6 9
8. inserts Iconic/Logo
9. overlay cross boundary or cut-out (appearance) Object Images
10. blend transparent Images
11. have different theme picture header
12. add freebies download InfoBoxes, such as the 3D-CD box
13. stack the entry tags fr boxedart.com
14. export and extract the design from flash
15. use extensible space of a spectacular place
16. mix with Cartoon layout
17. place content inside of an Artwork
18. have visible sections fr 12 13
19. use frame from electronic gadgetry

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