PrettyBordersPlus Template Maker
2. Get your Code
- The top toolbar drops open when hovered and automatically closes when departing.
This keeps it available, yet out of the way, when editing the template.
- Checkmark the option in the toolbar to lock it open for frequent use.
- Uncheck the option and move out of the toolbar to close it.
- The toolbar Ruler displays width in pixels.
Click ruler at desired template width or click 0 (or anything less than 100) on the ruler to return to flexible width.
The outer background/border is part of your template, and acts like a page background.
It will stretch to fill the page width.
The next inner border is the one with the defined width.
Inner content, like photos, may force a template wider than the selected ruler setting.
(See notes about scripts if your workspace template appears too wide.)
- Borders (Pretty Borders nested tables)
- Click a border on the template. Each border is an HTML table component.
(The outer background is also a border.)
- Drag border to resize. This will adjust cellspacing or cellpadding in the table code.
- Click a color from the toolbar palette to colorize the selected border.
- Click a background tile from the toolbar - or add the URL for your
own hosted tile in the toolbar slot and click the "apply" button.
The "no tile" button can be used to remove a tile from a selected border.
- Click the next border and repeat.
- Note:It is important that you choose a background color when using tiles so that if the tile is
slow loading or fails to appear on your auction page, there will still be an attractive border color.
Always add a solid color behind the text layer, even if you also have a fairly smooth background tile,
so that the text is immediately readable, regardless of the state of other border layers.
- Need border ideas? A droplist of premade borders is provided above the workspace.
Select one as a starting point and play around with different colors or patterns.
- Did you know you can save up to 30 custom border ideas right in the droplist?
If you've created your own border and want to try out other color variations,
scroll to the bottom of the droplist and click the option to add your border to the list.
The border is saved for the duration of your editing session.
You'll be able to continue with other iterations and come back to the list to compare them.
The action will refresh the HTML code in the "Make Code" window,
so if you have edited the HTML directly, you may want to save it before proceeding.
- To delete a custom border from the droplist and make room for more,
click the item in the list to load it in the page. Then press the keyboard delete-key.
You will be asked to confirm your decision. You won't be able to delete any built-in borders.
- There are 5 photo slots on the template - a main image at the top and a group of four in the middle. The top image can be either a logo banner or auction photo.
- Add an online photo URL to image slot (starting with https://). Double-click photo to view if it doesn't automatically appear.
- Drag photo to resize or double-click photo to return to actual photo size.
- The middle photos will appear inline as a centered group, so, depending on the image width and template width, more than one may appear on one line.
- To remove a photo, erase the URL. Double-click photo to minimize its placeholder.
- If adding a long URL stretches your screen, see notes in the script section.
- Hint: triple-click to select entire URL.
- Titles and Text
- Change the names of the titles. Erase title to omit.
- Change the content of each descriptive box. Typing will stretch box. Erase text to omit.
- Click text box and and use toolbar options to set font size, styles, and alignment for entire block of text.
- Click text box and click rainbow palette to change text color for entire block.
- Regardless of paragraph alignment, bullet lists will always be left-aligned in the code.
- Note: this is not a text editor, so individual words can't be separately styled.
- Technical: For users not wishing to code any HTML, the tool will automatically insert
linebreaks, bullet lists, and paragraph codes in the text blocks.
For users who DO want to use a bit of HTML in the text areas,
if your text includes a <p> or <div> block-level tag within a standard text block,
the program will not style that block and will assume you are using your own HTML.
If you avoid block-level tags, you can, however, add <font>, <span>, <b>, <i>, <img>, <br> and other similar
inline tags to your text to modify individual words, and the program will accept the text,
while still adding the line breaks, paragraphs, and lists. There are other block-level tags that aren't trapped,
and using them may cause the selected font styles to end in some browsers at the beginning of that inserted block-level tag.
Similarly, image code can be added to the title slots in addition to, or instead of, the title text.
The code will be wrapped in the default <h2> heading tag without any filtering.
If only the URL is inserted in the title slot, an image tag will be constructed.
- Add your own Code blocks
- The template has two boxes for custom codes.
- Add buttons, a counter, photo gallery, cross-sell gallery, or other custom code widgets.
- See online tools (above right) for buttons, charts, gallery, Qsell, Xsell.
(Hint: copy the color code from the toolbar palette and paste into one of the other tools to color-match the add-ins.)
- Note: wide URLs and scripts in Internet Explorer may stretch the workspace or template editor
and the scrollers may disappear off to the right. If this poses a problem,
checkmark the box in the toolbar to "shrink code boxes", which will resize the URL and Code boxes.
It won't adjust the text or title boxes.
- Make HTML Code
- Click the "Make Code" button below the template to create the HTML.
- Click the "Preview" button to see the HTML code as an actual page, then close the preview.
(If the preview fails to appear, it may be behind your browser window, or may be stopped by a popup blocker.)
- You can edit and repeat as frequently as needed.
- When satisified with the results, copy the Code from the box and paste into your listing
or paste into a text file on your computer. Or click the button to download the contents of the code window (the full template) to a file on your own computer.
It is best to use a plain text editor like Notepad for saving and modifying HTML code.
- The Popup Preview button at the top of the template combines the Make and Preview into one function.
Those two functions are on separate buttons at the code window for designers who want to edit the HTML directly and preview.
- Do you want to come back to one particular border setting later? After making the code, click the link underneath.
A new browser window will open with a path to your template settings. Bookmark that page, and then close the extra window.
Your template colors will then be saved in your browser bookmarks.
- Another method for returning to the same border is to make your code and then use the Import option in the
drop list to pick up the basic parameters (these are also saved at the bottom of your template).
You can collect a lot of parameters this way. When you come back to the tool, again use the Import function,
paste your previous parameters into the box, and use the Load button to push the values back into a template.
Your imported settings will be added as a new item to the drop list.
Add Code to eBay
To use your template on eBay, paste the code directly into the HTML tab of eBay's online description editor.
- eBay's Quick Lister, Advanced Lister, and Bulk editor all have the two-tabbed description editor.
Click the HTML tab to add your code.
- Flip back to the Standard tab to see your template, where you can continue to edit your text.
Personal use: For personal use in your own listings,
you may use and hotlink to the background icons this tool adds to your template,
provided the copyright notice remains intact. For your convenience,
the graphics may be rehosted on your own server for continued use
in your template and derivative works.
Resale: If you plan to sell the templates you create with this tool,
any selected icons must be rehosted on your own server,
and the image links in the code should be changed to match.
When these icons are used in this or derivative works where the visible copyright notice is changed,
please maintain a small graphics copyright acknowledgement within the source code.
Tool and Graphics All of the transparent background tiles used in this tool
are original designs created for this and related tools.
This tool and/or its graphics may not be resold, distributed, repackaged,
or bundled by any means for distribution or sale; except that template designers
may rehost and provide to their buyers any individual icons used in a specific template.
In no case should the placeholder auction images be used in auctions or be transferred to others.