About this illustrated tutorial
This nontechnical tutorial is part of a series we call "Show Me". It is written for people who want to know how to to use EZRound in just as few steps and with as little technical explanation as is possible.
Show Me: What are we about to do?
This tutorial will show you how to take the design created by EZRound and insert it into your Turbo Lister auction listing. Then it will show you how to put text or photos in the container created by the EZRound design.
Show Me: The Sequence
- Use EZRound software to load or create your design then export it so that it is ready to use in Turbo Lister. Then use your FTP software to upload the design slices to your photo hosting center.
- Start Turbo Lister software and follow the basic steps to create a new listing.
- Copy the HTML container created by EZRound to the Windows clipboard and paste it into Turbo Lister.
- Add content (a caption, photo and text) to the EZRound container.
This tutorial starts when you get to step 2 of 3 in the Turbo Lister software entitled "Enter Your Description" as shown here:
Show Me: About the Turbo Lister Software
The screen you are looking at in the Turbo Lister software has three tabs on it. They are labeled:
- Design View
- This tab is an interactive area that uses a "WYSIWYG" (What You See Is What You Get) interface. When you add a picture or text or change font settings, you "see" your changes and how they affect the listing.
- HTML View
- This tab presents you an opportunity to "see" the HTML code that operates "behind the scenes" to produce the effects that you see in the Design or Preview modes. This is the tab where you add your EZRound HTML container to your listing.
- This screen shows you a final preview of what your listing should look like when you upload it to eBay. If you have external linked files (such as photos or the slices of your EZRound design), they will be displayed from their locations on the Internet. This gives you an opportunity to make sure that your photos and slices are linked correctly and that they will display correctly after you upload your listing to eBay.
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.
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. 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 Turbo Lister entry on the Windows task bar to return to Turbo Lister.
In the Turbo Lister program, click the HTML View tab, then click into the text area (as shown above).
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 Turbo Lister software, it is ready for us to use.
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.
When you are certain that your image slices will display correctly with the test file, click the Design View tab of the Turbo Lister software.
If you are online on the Internet, then the Turbo Lister Software should load and display your design from the Internet. If you are working Offline, then you will see small squares at the four corners of your design with red X’s in them. These are just broken image link representations that Windows is displaying because it can not “see” your design slices. You can still work on the design - just be sure that the actual image slices display BEFORE you upload your listing to eBay.
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 Turbo Lister 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 Design View of Turbo Lister. 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 Turbo Lister and 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) Your screen should look like this:
Use your mouse to drop your cursor to the line just below the caption. It should look like this:
Next we are going to add a photo below the caption. To start this process, click the camera icon (as show above).
A note about photo hosting.
Just to be sure that you understand, EZRound is only going to work for you if you are NOT using eBay’s picture services (in other words you are doing what eBay calls “self-hosting”. To make sure that you are hosting your own photos, you can click the menu option on the left side of this screen titled: “Change photo hosting” under “Other Tasks”
When you click that item, you should see this screen:
If you are configured for your own hosting, your screen should look like the one above.
Now back to our tutorial...
After you click the camera icon, you should see this screen:
Type in the URL to your photo. (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).
After the photo loads, your screen should look like this:
Click your mouse on the empty line that we put into place (which is now below your photo as show above). Next type in your description for the photo.
After you have finished you can use the normal Turbo Lister HTML Editing tools to change the fonts, alignment or text color. When you have finished making changes, click the Preview tab.
The Turbo Lister software HTML Viewer control will show you how your listing will look in a normal web browser as shown:
Note that the white hairline crack that was visible in the Design View has disappeared when we switch to the HTML Viewer for the preview mode!
One other limitation of the Turbo Lister software is not being able to maximize it to full screen (like you can in the EZRound Live Preview), so you may have to scroll the image to see that everything looks OK. Hopefully eBay will fix this small annoyance at some point in the future.
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 HTML tab of Turbo Lister. Then we uploaded our design slices to our photo hosting company and used the regular HTML editor of Turbo Lister to add our content.
If you wanted more than one HTML container in your listing, you would just switch to the HTML View mode 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!).
... The End ...
This tutorial is copyrighted and may not be reproduced or linked without permission. If you are interested in this material, please contact us.