Markup
Understanding the HTML structure of the content added by Auction Nudge will allow you to modify it to suit your needs.
Template Overview
As Auction Nudge uses open web standards (HTML, CSS and JavaScript) to add content to your page, with the right knowledge you are able to modify themes or even create your own. Below is the markup structure for each Your eBay Listings theme.
Container
All themes share the same outer container, which includes optional areas for the eBay logo, User Profile, Category List, Search Box, and pagination controls:
<div id="auction-nudge-items" class="auction-nudge-items theme-[theme_name] [an-paged] [an-cats] [an-search]">
...common elements (eBay Header, Advertising Disclosure, Filters & Pagination)...
<div class="an-item-wrap">...theme-specific items...</div>
</div>
eBay Header
This section displays the eBay logo and the seller's User Profile (if enabled):
<div class="an-ebay-top">
<div class="an-ebay-logo">
<a href="[ebay_home_url]" rel="nofollow" target="_blank">
<img src="[ebay_logo_url]" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
</div>
[if_user_profile:]
<div class="an-user-profile">
<div class="an-username">
<a href="[username_url]" rel="nofollow" target="_blank">[username]</a>
</div>
<div class="an-feedback">
<a href="[feedback_profile_url]" rel="nofollow" target="_blank">
<span class="an-percent">[feedback_percent]%</span>
(<span class="an-count">[feedback_score]</span>
<span class="an-star"><img src="[feedback_star_url]" width="25" height="25"></span>)
</a>
</div>
</div>
[/if_user_profile]
</div>
Advertising Disclosure
Auction Nudge is an eBay Advertising Partner and must display the following Advertising Disclosure on all feeds:
Ad Clicking an item will take you to eBay, who may pay a referral commission if a purchase is made (?)
Users Found Hiding The Disclosure Will Be Permanently Blocked.
Attempting to hide, obscure or modifying the disclosure puts the service at risk everyone.
Filters
Filters appear above items when enabled (Category List and Search Box):
<div class="an-controls-top">
[if_categories:]
<div class="an-cats-wrap an-cats-dropdown">
<select class="an-cats-nav">
<option data-cat_id="0">All Categories</option>
<option data-cat_id="[category_id]" class="an-cats-cat an-cat-[category_id]">[category_name]</option>
<option data-cat_id="[category_id]" class="an-cats-cat an-cats-child an-cat-[category_id]">- [category_name]</option>
...etc...
</select>
</div>
[/if_categories]
[if_search_box:]
<div class="an-search-wrap">
<div class="an-search-box" contenteditable="true">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
[/if_search_box]
</div>
Pagination
Pagination controls appear above and below items when enabled. 'Items per page' controls how many items display per page.
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev [an-inactive]">« Previous</li>
<li class="an-page-top-next an-page-next [an-inactive]">Next »</li>
</ul>
<!-- ... theme-specific <div class="an-item-wrap"> ... -->
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev [an-inactive]">« Previous</li>
<li class="an-page-bot-next an-page-next [an-inactive]">Next »</li>
</ul>
Pagination and the Carousel Theme
The Pagination option is not supported by the Carousel theme. The carousel provides its own previous/next controls to navigate items.
Theme HTML Markup
All themes share a common template with optional areas for the eBay logo, user profile, category list, search box, and pagination. The main difference between themes is the HTML inside <div class="an-item-wrap"> where items render.
Item Markup Only
Below we show only the inner HTML of <div class="an-item-wrap"> for each theme.
Responsive
This theme adapts automatically to the width of its container. Items flow into as many columns as will fit, wrapping to new rows on smaller screens. Images scale fluidly within .an-image.an-img-size to respect your configured image size while remaining responsive.
<div class="an-item">
<div class="an-title"><a href="[item_url]" rel="nofollow" target="_blank">[item_title]</a></div>
<div class="an-wrap">
<div class="an-image an-img-size">
<div class="image-container">
<a href="[item_url]" rel="nofollow" target="_blank"><img src="[image_url]"></a>
</div>
</div>
<div class="an-price"><span class="an-amount">[currency_symbol][price]</span> [if_auction:]<span class="an-bids">([bid_count] bids)</span></div>
<div class="an-ends"></div>
<div class="an-view"><a href="[item_url]" rel="nofollow" target="_blank">View Details [+]</a></div>
</div>
</div>
<div class="an-item alt">...</div>
Grid View
Theme-specific options: "Grid Columns" controls how many columns display; "Grid Width" sets the total grid width (px or %). Use both together to fit your layout.
<table class="grid" border="0" cellpadding="4" cellspacing="4" width="100%" style="width:100%">
<tr>
<td>
<strong><a href="[item_url]" rel="nofollow" target="_blank">[item_title]</a></strong>
<table cellpadding="8" border="0">
<tr>
<td class="image" width="60">
<div class="image-container">
<a href="[item_url]" rel="nofollow" target="_blank"><img src="[image_url]"></a>
</div>
</td>
<td class="info">
<strong>[currency_symbol][price]</strong> [if_auction:]([bid_count] bids)<br>
<a href="[item_url]" rel="nofollow" target="_blank">View Details [+]</a>
</td>
</tr>
</table>
</td>
<td>...</td>
</tr>
<tr>...</tr>
</table>
Column View
<table class="columns" border="0" cellspacing="0" cellpadding="5">
<tr>
<th class="image">Picture</th>
<th class="title">Product</th>
<th class="bids">Bids</th>
<th class="price">Price</th>
</tr>
<tr>
<td class="image" valign="top">
<div class="image-container">
<a href="[item_url]" rel="nofollow" target="_blank"><img src="[image_url]"></a>
</div>
</td>
<td class="title"><a href="[item_url]" rel="nofollow" target="_blank">[item_title]</a></td>
<td class="bids" width="60" align="center">[bid_count]</td>
<td class="price" width="80">[currency_symbol][price]<br><small>on eBay</small></td>
</tr>
<tr class="alt">...</tr>
</table>
Carousel
Theme-specific options: "Scroll" sets how many items are visible at once, "Item Width" controls each item's width, and "Auto Scroll" sets the auto-advance interval (0 disables). These map to data-scroll, data-width and data-auto on the container below.
<div class="auction-nudge-carousel-container" data-scroll="[carousel_scroll]" data-width="[carousel_width]" data-auto="[carousel_auto]">
<ul class="jcarousel-list">
<li class="an-item">
<div class="an-image an-img-size">
<div class="image-container">
<a href="[item_url]" rel="nofollow" target="_blank"><img src="[image_url]"></a>
</div>
</div>
<div class="an-title"><a href="[item_url]" rel="nofollow" target="_blank">[item_title]</a></div>
<div class="an-price"><span class="an-amount">[currency_symbol][price]</span> [if_auction:]<span class="an-bids">([bid_count] bids)</span></div>
<div class="an-view"><a href="[item_url]" rel="nofollow" target="_blank">View Details [+]</a></div>
</li>
<li class="an-item">...</li>
</ul>
</div>
Simple List
<ul class="simple-list">
<li class="title">
<a href="[item_url]" rel="nofollow" target="_blank">[item_title]</a> - [currency_symbol][price] <small>on eBay</small>
</li>
<li class="title">...</li>
</ul>
Details
<table border="0">
<tr>
<td class="title" colspan="2"><a href="[item_url]" rel="nofollow" target="_blank">[item_title]</a></td>
</tr>
<tr>
<td class="image" align="center" valign="top" width="80">
<div class="image-container">
<a href="[item_url]" rel="nofollow" target="_blank"><img src="[image_url]"></a>
</div>
</td>
<td class="details" valign="top">
<div class="price"><b>[currency_symbol][price]</b> [if_auction:]([bid_count] bids)</div>
<div class="view"><a href="[item_url]" rel="nofollow" target="_blank">View Details [+]</a></div>
</td>
</tr>
</table>
<!-- Repeat for each item -->
Unstyled
Looking to build your own look and feel? See Customizing the Unstyled Theme for a step-by-step guide.
<ul class="item">
<li class="image first">
<div class="image-container">
<a href="[item_url]" rel="nofollow" target="_blank"><img src="[image_url]"></a>
</div>
</li>
<li class="title"><a href="[item_url]" rel="nofollow" target="_blank">[item_title]</a></li>
<li class="price">[currency_symbol][price] <small>on eBay</small></li>
<li class="format auction">[bid_count] bids</li>
</ul>
<ul class="item alt">...</ul>