WYSIWYG HTML Auction Editor

Want better looking auctions? Can’t get the eBay editor to work?
Don’t want to use complicated webpage authoring tools to create code that won’t work on eBay?
Don’t feel comfortable doing all your editing on the listing page?

Spice up your auctions with a tool that creates eBay-compliant code.
It works best with Internet Explorer 6, Netscape 7, and FireFox 2.
We will continue over time to improve it as best we can.

Quick Start

  1. Erase the text and start typing your own.
  2. or Select a layout to create your own New Page.
  3. or clear the page, create a Pretty Border, and paste it into the code window.
  4. or clear the page and paste your own simple template (or one from the list below) into the code window.
    Some features like stylesheets, scripts, and mouseovers may not show or work in the editor, but should display in the Popup Preview window. So be sure to preview your template a few times to make sure it works before attempting to edit it. You can preview as frequently as you need.

Jump down to Toolbar features …

Mini Templettes: Scroll through the list to select a templette. Copy the selected code from the yellow code window into the CodeView above.

Spring Templates: Scroll through the samples and click on a selection. A new page will load in the window below. Copy the code from the box at the top of the new page into the CodeView above. Click the template button above to return to the preview list.

Instructions


New Page: Select a Page Format if you want a different background color or column arrangement. The popup screen provides some layout options and allows you to change the color and sizes of the background and borders. Using this option will erase the original page content, but content added to a selected template will be preserved if you go back to change page settings.

Select a format: The page setup has a set of table formats across the top. Select a layout.

Set colors: Click a border and select a color from the palette or dropdown list, or enter your own color in the palette input box and click “apply”.

Set Margins: Margins and Border sizes can be changed by editing the numbers and clicking apply, or by dragging a border or margin in the sample box until the size suits you.

Inscreen Preview: There is a preview pane to display the colors and thicknesses of the borders (but not the page layout).
Note that if the border and background are set to the same color, and if the 3D option is off, the text cells will appear to float on the background.

Use or Cancel: After modifying the parameters, click OK to use the new page settings.

-or-

Create the border you want at the

pretty borders

site or select one from the template

buttons

above. Click the “Clear page” button

on the editor and then flip to the “Code View” screen to paste the border code. Flip back to the “Editor” screen and add your description. The Page Format option will not preserve data or settings in an imported border or template, so shouldn’t be used after applying your own template.

Add your Text: Type or Paste your text. Depending on your browser, you may be able to use keyboard shortcuts, right-click menu, or the edit menu at the top of the browser to paste code or text into the page.


Save and Restore: While making changes to your template, you can make intermediate backups as a reference point for restoring if you make a mistake. The backups are not automatic – you must click the save button whenever you make changes worth keeping. Then if you make a mistake, or decide you don’t like the changes you made, you can restore the last-saved version and try again.
It is always a good idea to click the save button whenever you load your own template, as that will make it simpler to reload. Note that the copy is only temporarily saved within the page and will be lost when you close out.

Create Headings: Highlight your titles and select your Heading styles from the dropdown list before adding any other colors or styles. Using styles from the list will assure that the headings have good gaps between the heading and text. For inline headings, apply a font size from another dropdown list to normal text instead of using the heading options.

Font Style: Highlight your entire page in the window (right-click inside the editing window to “select All”). Then choose your font style from the dropdown list.


Text Color: Add color to your titles or text. Highlight your text and select one of the existing palette colors, or click the paint icon to open the popup rainbow palette with thousands of colors. Conveniently set up all the text colors in advance of using them by filling the empty cells on the toolbar palette with your own colors. Double-click on an empty cell to get the popup rainbow palette, where you can select a new color for the cell (and for any currently selected text).

The popup rainbow palette also includes a dropdown list of named colors and a sidebar changes the darkness of a color. Text colors from the popup rainbow palette usually need to be darkened for use on a light background and lightened for use on on a dark background.


Additional Formatting: Highlighted text can be set to bold, italic, underline, or strikethrough.


Lists: Lines of text can be set to a bulleted or numbered list. A whole sentence will be modified, so you can select an entire block of lines to be bulleted, or select each line individually to get more space between each line.


Alignment: The selected paragraph may be aligned left, right, center, or fully justified. Keep in mind that centered text and right-aligned text are very difficult to read and should be reserved for titles, captions, and short lines.


Indent: Paragraphs can be block-indented any number of times to the right, or can be undone a step at a time to the left.

To indent and tab text to make small tables and columns, use the Tabbed Text option on the Headings list. Do not use that option for paragraphs, as the page will stretch too wide in some browsers. Be sure to use the popup preview window to make sure the results are as you expected.


Horizontal Rule: Don’t use that long run of dashes to draw a line! A full-width horizontal line will be inserted at the cursor, and the content on both sides of the cursor will shift above and below the line. In Internet Explorer, you can resize its length by clicking on the line and dragging the end pullers.


Pictures: Pictures must already be hosted online before they can be added to the URL slot on the popup screen. A preview button will let you verify the image is available. Choose a left or right alignment option if you would like text to flow around the image, or, after adding a picture, you can center it on its own line using the “center” button on the toolbar.


Links: Link to your other pages. Highlight the text or image that will be clicked. In the popup window, add the destination URL (web address) for that link.
To modify an existing destination, place the cursor in the text and click the link button to display the existing link for modification.


Special Symbols: Insert special symbols (© ♥ ™ ¢) at the cursor.

Merry’s Playground: For the real enthusiasts, there is a drop open panel with a text scratchpad/clipboard area and three storage areas. Store your edited template in one of the panels and continue experimenting with your page.
Or pull three different pages into the editor and move each one up into a storage panel where you can swap between them to copy and paste sections. The “Store” button moves a copy of the active page into the storage panel, and the “Use” button moves a copy of the stored page back into the editing window. A one-chance undo reverses the operation. They all have a preview button for sharing the popup Preview window.

Send to Practice Writer: Practice Writer is an online HTML practice board where you can preview code and store it online for others to see. Use this option to send your code to www.PracticeWriter.com where you can post it and pick up the link to share with others.

Adding your own template code: Click the “Clear page” button and then flip to the “Code View” screen to paste the template code. Flip back to the “Editor” screen and add your description.

Caveats: the editor, by nature, will kill headers and body tags for eBay use, and therefore does not support full webpage editing.

Problems? There are still many bugs to iron out. If a feature fails to perform, the code may not have successfully loaded on the first pass. Sometimes holding down the shift-key while refreshing the page will get past obstacles (but may also clear the screen of any editing data).
Avoid using the back button to return to the editor from another page. The page will not fully load. If this happens, you will need to hold down the shift-key and perform a full page refresh.

Note: Do not test your dynamic (scripted) page content in the editor, as you will lose your editing data if scripts modify the page content or the page opens to a new location. Instead, test your content from the popup Preview window.

The different browsers have different idiosyncracies and perform differently depending on where the cursor is located on the page. Should you encounter confusing results, it may simply be cursor placement.

Back up to Editor

Source

Leave a Reply

Your email address will not be published. Required fields are marked *