A Cheat Sheet for writing your Guide Offline -

eBay's Guides have specific HTML tags and editing restrictions, and by adhering to them you can produce your guide manually offline and paste the results into the Guide Editor.

This is a technical document for Guide Authors who are comfortable with HTML.
Less technical Guides  are also available.

Code produced offline in an HTML editor or in MS Word can't be directly pasted into the Guide Editor, since the underlying codes won't match eBay's restricted list of codes.  Nor can you simply code a page by hand and paste the raw codes into the guide editor. After describing the codes that are allowed, we will further describe the simple procedure for pasting your offline work into the Guide Editor.

The HTML Codes

First of all, very few HTML commands are allowed, along with a few CSS style attributes. The HTML codes are:

These word- and block-level text modifiers will always contain a style attribute

The CSS Styles

A handful of style attributes are available to use within the HTML tags

Example styled codes

SPAN tags should not wrap around any of the other tags, although you may nest a SPAN tag pair inside another SPAN pair. They are used to add font attributes to small groups of words, rather than to whole blocks. By combining attributes when possible, the character count is reduced. Span tags can't be used for alignment, as that can only be handled in the block-level tags.

No other tags should wrap around DIV tags. DIV tags are the ultimate wrappers and are used for block-level alignment for loose text (text not inside a P, H, DIV, or UL/OL wrapper).

Text style attributes are added in the SPAN tag for single words, or in one of the block level tags if the entire block is to be styled.

The HTML codes used in a document will count toward the guide's allowable size limit, so if you find yourself up against the 20K size limit, every character will count. By observing the limited number of commands, and how styles are combined, you can reduce the number of tags that might occur in a page, and can clean out or merge tags when the editor leaves behind artifacts. Note that eBay will replace white space that you might remove, so compression is not an option for reducing code size.

Hyperlinks

All hyperlinks must be to the ebay site. Notice the ampersand replacement in the URL. Without that code replacement, the hyperlink will be rejected.

Images

Your guide images must be hosted on eBay. You will need to load your images through the Guide uploader, through eBay's Picture Manager, or through the eBay Picture Service (EPS) auction image uploader, as eBay has a fingerprint that they recognize. See my guide on Larger Guide Photos .

• The free Guide images uploaded through the guide editor will remain on eBay's servers until you delete them from your guide. When you upload them, they will be resampled to a maximum of 200 pixels wide or tall.
  

• Your Picture Manager subscription photos can be whatever size you determine, and you must maintain them in your account for them to continue to show in the guide.
  

• Auction Photos, uploaded to EPS with your auction, will only remain for the duration of the auction hosting (90 days) and can be any size within eBay's limitations.
  

• The About ME page uploader could also be used as a free source of larger images up to 400 pixels wide or tall, but only two photos are allowed there; and they must remain on your ME page to display in your guide.

Only ten images are allowed on a page. Images may be positioned on the page using a DIV wrapper to indent or center the image. A DIV tag can indent the image by using margin-left:80px;, or can center the image using text-align:center;. Small icons can be placed inline by not adding any positioning tags.

Standard Images

All images must be on eBay servers, and the code must be constructed as in this example.

Linked Images

Yes! You can link your images to other eBay locations. However, you will have a colored link-border around your image. The rules are the same, the image must be uploaded to an eBay server and the link must take the user to an eBay page.

Writing your Code

Write your offline code in a plain text editor (Notepad or RagTag) that won't add extraneous code or hidden characters. Microsoft Word, and other editors with a Rich-Text mode, will insert codes or symbols that are not compatible with eBay's code filter for guides.

Previewing your Code

This guide was written and tested entirely offline by adding the following code to the top of my text editor. This is the stylesheet that eBay uses when publishing your guide. As of this writing, eBay's preview function doesn't include this stylesheet, so their preview is close, but not exactly like the real thing.

 

 

Copy your Page

Now herein lies the trick you've all been waiting for! 

Preview your code in a browser. If you have added the stylesheet, it should look just like the real thing. If you haven't used the stylesheet, it will still look presentable and will look identical to the view you would normally see in eBay's rich-text editing box. My choice would be to remove the stylesheet at this stage (remember there are two parts), as you don't want to copy it with the rest of your code.

Highlight and copy the browser page. You will be copying or capturing the rich-text web-page view (not the code view). Internet Explorer won't accidentally pick up the stylesheet, but if you are using a different browser and still have the stylesheet in your code, then carefully highlight from your first character to your last character to avoid picking up the hidden style codes. Paste the browser-capture directly into eBay's editing window. Newer browsers, on a PC or Mac, support this type of rich-text data transfer, where WYSIWYG data is moved from one form to another.

One browser incompatibility exists, however. Images may not copy correctly in a non-Explorer browser, but should paste correctly using any of the browsers. When images are copied, Firefox adds more img tag fields that are not compatible with the guide editor.

If the "preview" button reports no errors, you are good to go. If you receive an error message, you will need to locate the problem in the code. The first thing to check is to make sure none of you stylesheet was included. Troubleshooting is a fairly routine procedure. Since your code is already saved on your computer, you can be aggressive. Start chopping large chunks from the top of your page and running through the preview until the code passes. Paste your code back in and start chopping from the bottom. That should bracket the problem code. Fix it in your desktop code and go again.

When it comes time to edit an existing page, you can do so in eBay's editor or you can edit offline again. Just pull out the source code from your posted Guide, or simply copy/paste segments that you have created offline.

 

Shipscript can be found on the eBay help forums and maintains help pages and free scripts for eBay sellers. Shipscript is not affiliated with eBay in any way, and spends way too much time problem-solving for them.

copyright © 2006 shipscript Free Tools for Better Auctions
Please see my other guides for Auction Template help, Page Design Basics, and useful tidbits.
The latest craze - Templettes - mini auction templates that fit into eBay "inserts".