This tutorial starts when you get to the point in creating a new listing where you see this screen:
Show Me: About the Sell Your Item Web Interface
The screen you are looking at in the Sell Your Item section has two tabs on it. They are labeled:
Standard
This tab is an interactive area that uses a "WYSIWYG" (What You See Is What You Get) interface. When you add text or change font settings, you "see" your changes and how they affect the listing.
Enter Your Own HTML
This tab presents you an opportunity to "see" the HTML code that operates "behind the scenes" and to add your own HTML code. This is the tab where you add your EZRound HTML container to your listing and also where you add your photo links.
Show Me: A simple example
In this simple example, we will start with an empty listing and add an EZRound HTML container. Then we will insert a caption for a photo, a photo (prepared by FotoKISS, the Auction Photo Editor ) and some text about that photo.
You can have multiple EZRound HTML Containers in your auction listings. They can be all the same style or they can be different styles. You are in complete control.
Show Me: How to do the work
First we need to copy the HTML container code that was created by EZRound onto the Windows clipboard. If you have just exported your design, then a Windows Explorer window will be open and you will be looking at the files created by EZRound.
Note: Be sure to use your FTP software to copy the image slices from the EZRound export directory to the picture hosting service where you have your listing photos. After copying the image slices to the Internet you should double-click the HTM test file ( in this example: _EBAYINTERNET.HTM ) and make sure that the design displays correctly.
The files you see in the list will all be a combination of the short filename (in this case "eBay1" and some other word that describes what the file is, where goes and what it does.
Since we want the HTML container code (which is a HTML TABLE) that will access our image slices from the Internet, we need to locate and double-click the file that is named with the design name and the words INTERNET_TABLEONLY.TXT.
When that file opens in Notepad, you should click Edit and then Select All from the pulldown menu or use CTRL+A (a Windows shortcut) to select all of it. (if you have just exported your design in EZRound, then you will be given an option to copy the HTML to the Windows clipboard to make this process easier). When you have all of the code selected, it should look like this:
Click Edit, then Copy from the pulldown menu or use CTRL+C (another Windows shortcut) to copy it to the Windows clipboard.
Click the web browser on the Windows task bar to return to the Sell Your Item Form.
In the Sell Your Item Form, click the Enter Your Own HTML tab, then click into the text area (as shown below).
Click Edit, then Copy from the pulldown menu or use CTRL+C (another Windows shortcut) to copy it to the Windows clipboard.
Click the web browser on the Windows task bar to return to the Sell Your Item Form.
In the Sell Your Item Form, click the Enter Your Own HTML tab, then click into the text area (as shown below).
Press CTRL+V (a Windows shortcut) to paste the HTML copied into the text area. When you have finished, it should resemble this:
Now that we have copied and pasted our EZRound HTML container into the Sell Your Item Form, it is ready for us to use.
When you are certain that your image slices will display correctly with the test file, click the Standard View tab of the Sell Your Item form.
The Sell Your Item Form should load and display your design from the Internet. If you see small squares at the four corners of your design with red X's in them, then there is a problem linking to your images. These are just broken image link representations that Windows is displaying because it can not "see" your design slices. If you see those, be sure that you have uploaded your image slices to your hosting center.
Broken image links look like this:
When the images display, you should see your design (as we do in our example):
A note about the hairline crack in the display.
The HTML Edit control in HTML Editor control that eBay is using has a flaw when it is displaying a sliced HTML table. You will notice a white vertical hairline crack to the left of the cursor in the photo above. This is just a cosmetic flaw that you see in the Standard View. Other HTML edit controls (such as the SoThink HTML editor by Sourcetek) display the design perfectly. The good news is that this flaw is only visible in this control and it will NOT appear when your design is viewed on the Internet. You may prove this to your own satisfaction by double-clicking the HTM files in your EZRound export folder to view the design in your browser.
Adding content to the HTML container.
Keep in mind that the design you are looking at has been sliced into 9 pieces. It is now represented in an HTML table that is 3 columns wide by 3 rows tall. If we were to look at a representation of the table without our design in it, it would look something like this (color and numbers have been added to make sure you know exactly what we are talking about):
The green areas have a slice of the image in them as content (sort of like dropping a picture in the cell), so you can not put anything in them.
The yellow areas have a slice of the image set as the BACKGROUND for them. As such you can put content in those cells and it will appear on top of the background image.
You should note that some designs (especially those with wide accent bands) would be blocked by your putting anything in cells 2,4,6 or 8. For this reason, most of the time you will limit your content to cell #5 (the CENTER).
A note about the WIDTH of the container.
The easiest way to set the WIDTH of your container (and indeed the alignment such as LEFT, CENTER or RIGHT) is inside EZRound when you do the design export. If you do it there, then EZRound will do the hard work and calculations for you.
Most people just set the container width to the same width as their photos (eBay recommends photos to be 400 pixels wide and 300 pixels tall). If you set it this way, then the photo will set nicely within the width of the table and you can put text above and/or below it.
You should also be aware that your container will expand to the size of the widest object (in the case of a photo), but that text will simply wrap and the container will get taller if needed.
In this example we are going to add a caption above our photo, then a photo and some text below it.
The easy way to get started is to click in the center cell (this is where the message about "Your text or photo would insert here"), then delete that text and type in our caption for the photo. Afterwards press ENTER two times (to put in two blank lines) Then type in your text that goes below the photo. Your screen should look like this:
Next you would click the Enter Your Own HTML tab again so we can insert our photo link.
You would insert your photo link between the photo caption and the description (that was one reason we put them in first and left a space between them)
Type in the URL to your photo as an IMG link with a Direct URL. (If you are using FotoKISS Auction Photo Editor software, you can use the HTML button to paste the Direct URL onto the Windows clipboard, then click here and press CTRL+V to paste it in place).
A note about photo hosting.
Just to be sure that you understand, EZRound is only going to work for you as a container if you are NOT using eBay's picture services (in other words you are doing what eBay calls "Your Own Web Hosting". To make sure that you are hosting your own photos, you can login to your eBay account and check your account preferences.
When you get to that page, you should see this setting:
Now - back to our tutorial...
After you enter your URL, click the Standard tab to return to the interactive preview.
You can also click the Preview Description link and the Sell Your Item page will open a pop-up window with your HTML container (and its contents) in it. It should look like this in our example:
Note that the white hairline crack that was visible in the Design View has disappeared when we preview the listing!
That is all there is to it!
Even though this tutorial seemed to have a lot of steps, all we really had to do was copy the HTML container code created by EZRound to the clipboard and paste it into the Enter Your Own HTML tab of the Sell Your Item Form. Then we uploaded our design slices to our photo hosting company and used both the Standard tab and the Enter Your Own HTML tab of the Sell Your Item Form to add our content.
If you wanted more than one HTML container in your listing, you would just switch to the Enter Your Own HTML tab and insert the next container above or below the current one. Just be sure that you do not paste one container inside another unless you were pasting into the center cell of the design (and meant to do it of course!).
Hint: Many people use an external HTML editor to prepare all of the HTML offline, then they can just paste it into the Sell Your Item Form when placing the listing. You can download a free copy of the SoThink HTML editor at the SoThink website. It works well, has both a design and a preview mode as well as a mode where you can edit the HTML directly.
This tutorial is copyrighted and may not be reproduced or linked without permission. If you are interested in this material, please contact us.