Appearance
As well as choosing from different themes when you generate your Auction Nudge code snippet, you can change how Auction Nudge looks using simple CSS (Cascading Style Sheets) rules.
Auction Nudge will automatically use the CSS rules for your web page (for example, font and link colours), so it integrates nicely with your site.
You can then add additional CSS rules in your style sheet, to customize Auction Nudge for your site.
Changing Styles with CSS
Auction Nudge displays content on your page using HTML (HyperText Markup Language); using CSS we can style the HTML as we like.
A Note on CSS
Some knowledge of CSS will be helpful when customizing Auction Nudge. If you are interested in learning some CSS basics, here is a good place to start.
As a quick example, to make all of links displayed by Auction Nudge red, you could add this rule to your website style sheet:
div.auction-nudge-items a {
color: red;
}
This tells the browser to apply a style 'declaration' (color: red) to all elements that match a certain 'selector' (div.auction-nudge-items a {). This means we are specifying that all links/anchors (<a>) elements found within the Auction Nudge container (<div id="auction-nudge-items">) should be red.
Using this principle, we can look at the HTML Markup for each theme and work out the declaration needed to style a specific element. For example, if we wanted to hide the 'bids' column in the 'Column' theme, we can look at the relevant part of the theme's HTML structure:
<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> <!-- ««« We want to hide this -->
<th class="price">Price</th>
<th class="ends" align="center">Time Left</th>
</tr>
<tr>
<td class="image" valign="top">
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</td>
<td class="title">
<a href="[item_url]">Item Title</a>
</td>
<td class="bids" width="60" align="center">[bid_count]</td> <!-- ««« We want to hide this -->
We can then write a CSS rule that targets the <th class="bids"> (heading) and <td class="bids"> (actual bid counts) elements and hide them like this:
div.auction-nudge-items table th.bids,
div.auction-nudge-items table td.bids {
display: none;
}
Let's also make the 'Time Left' column a little wider, to fill the space:
div.auction-nudge-items table th.ends,
div.auction-nudge-items table td.ends {
width: 120px;
}
/* Hide the bids column */
div.auction-nudge-items table th.bids,
div.auction-nudge-items table td.bids {
display: none;
}
/* Set the width of the 'Time Left' column */
div.auction-nudge-items table th.ends,
div.auction-nudge-items table td.ends {
width: 120px;
}
<!--
Just the standard code snippet, nothing needs to be changed here :-)
-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/SellerID/soundswholesale/siteid/3/theme/columns/MaxEntries/1/show_logo/0/img_size/100"></script>
<div id="auction-nudge-items" class="auction-nudge"></div>
You can use this approach to modify almost any part of the content displayed by Auction Nudge, right up to creating your own theme by customizing the Unstyled theme.
Some CSS Examples
Below are some simple examples of how to customize tool themes using CSS
Code View
Use the tabs in the example windows to view the custom code used. Feel free to copy and modify the code examples for your purposes.
Note
As different themes require different CSS 'selectors', the examples below may not work for all themes. Please refer to the Theme HTML Markup section.
Changing Text Colours
This example demonstrates how to change the colour of different text elements in the Your eBay Listings 'Responsive' theme.
/* The title link */
div.auction-nudge-items .an-title a {
color: red;
}
/* The price */
div.auction-nudge-items .an-price {
color: blue;
}
/* Time left label */
div.auction-nudge-items .an-ends .an-label {
color: green;
}
/* Time left */
div.auction-nudge-items .an-ends .an-time {
color: purple;
}
/* View item link */
div.auction-nudge-items .an-view a {
color: orange;
}
<!--
Just the standard code snippet, nothing needs to be changed here :-)
-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/theme/responsive/img_size/100/show_logo/0/SellerID/soundswholesale/siteid/3/MaxEntries/2"></script>
<div id="auction-nudge-items" class="auction-nudge"></div>
Changing Row Colours
This example demonstrates how to change the row colours in the Your eBay Listings 'Columns' theme.
/* Text colour of headings, cells and links */
div.auction-nudge-items table.columns th,
div.auction-nudge-items table.columns td,
div.auction-nudge-items table.columns td a {
color: #fff;
}
/* Add a white border between rows */
div.auction-nudge-items table.columns td {
border-top: 1px solid #fff;
}
/* All rows */
div.auction-nudge-items table.columns tr {
background-color: #7ccdf8;
}
/* Every other row */
div.auction-nudge-items table.columns tr.alt {
background-color: #cdcdcd;
}
<!--
Just the standard code snippet, nothing needs to be changed here :-)
-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/SellerID/soundswholesale/siteid/3/theme/columns/MaxEntries/3/show_logo/1"></script>
<div id="auction-nudge-items" class="auction-nudge"></div>
Adding Scroll Bars
This example demonstrates how to set the width and height of the Auction Nudge container and add scroll bars to Your eBay Listings.
/* All styles are applied to the Auction Nudge container */
div.auction-nudge-items {
/* Center align */
margin: 0 auto;
/* Set desired dimensions */
width: 600px;
height: 150px;
padding: 10px;
/* Add scroll bars */
overflow-y: scroll;
border: 1px solid #999;
}
<!--
Just the standard code snippet, nothing needs to be changed here :-)
-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/SellerID/soundswholesale/siteid/3/theme/responsive/MaxEntries/4/show_logo/0"></script>
<div id="auction-nudge-items" class="auction-nudge"></div>
Theme HTML Markup
Understanding the HTML structure of the content added by Auction Nudge will allow you to modify it to suit your needs.
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:
Responsive
<div class="auction-nudge theme-responsive" id="auction-nudge-items">
<a href="[ebay_home_url]" rel="nofollow">
<img src="[ebay_logo_url]" class="an-ebay-logo" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
<div class="an-controls-top">
<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>
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
</div>
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-top-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
<div class="an-item-wrap">
<div class="an-item">
<div class="an-title">
<a href="[item_url]">Item Title</a>
</div>
<div class="an-wrap">
<div class="an-image first">
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</div>
<div class="an-price">
<span class="an-amount">[currency_symbol]Item Price</span>
<span class="an-bids">([bid_count] bids)</span>
</div>
<div class="an-ends">
<span class="an-label">Time Left:</span>
<span class="an-time">Xd Yh Zm</span>
</div>
<div class="an-view">
[if_auction:]<a href="[item_url]">Bid on item »</a>
[if_buy_it_now:]<a href="[item_url]">Buy It Now »</a>
[if_auction_with_bin:]<a href="[item_url]">Bid or Buy It Now »</a>
</div>
</div>
<div class="an-item alt">
... and so on ...
</div>
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-bot-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
</div>
Column View
<div class="auction-nudge theme-columns" id="auction-nudge-items">
<a href="[ebay_home_url]" rel="nofollow">
<img src="[ebay_logo_url]" class="an-ebay-logo" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
<div class="an-controls-top">
<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>
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
</div>
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-top-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
<div class="an-item-wrap">
<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>
<th class="ends" align="center">Time Left</th>
</tr>
<tr>
<td class="image" valign="top">
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</td>
<td class="title">
<a href="[item_url]">Item Title</a>
</td>
<td class="bids" width="60" align="center">[bid_count]</td>
<td class="price" width="80">
[currency_symbol]Item Price
[if_buy_it_now:]<br /><small>Buy It Now</small>
[if_auction_with_bin:]<<span class="bin-available"><br />(<small>Buy It Now available)</small></span>
</td>
<td class="ends" width="60" align="center">
<small>Time Left</small>
</td>
</tr>
<tr class="alt">
... and so on ...
</table>
</div>
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-bot-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
</div>
Carousel
<div class="auction-nudge" id="auction-nudge-items">
<div class="an-item-wrap">
<div class="auction-nudge-carousel-container">
<div class="carousel-header">
<div class="right-now">
<img src="[ebay_logo_url]">
</div>
<a class="an-powered" href="[auction_nudge_url]">Widget by <span>Auction Nudge</span></a>
</div>
<ul>
<li class="item">
<div class="image">
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</div>
<div class="title">
<a href="[item_url]">Item Title</a>
</div>
<div class="price">[currency_symbol]Item Price </div>
[if_is_auction:]
<div class="format auction">X bids</div>
[if_is_auction_with_bin:]
<div class="format auction bin">X bids<span class="bin-available">, Buy It Now available</span></div>
[if_is_classified:]
<div class="format classified">Make Offer</div>
[if_is_buy_it_now:]
<div class="format bin">Buy It Now</div>
<div class="ends last">Ends: DD/MM/YYY HH:MM</div>
</li>
<li>
... and so on ...
</ul>
</div>
</div>
</div>
Simple List
<div class="auction-nudge theme-simple_list" id="auction-nudge-items">
<a href="[ebay_home_url]" rel="nofollow">
<img src="[ebay_logo_url]" class="an-ebay-logo" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
<div class="an-controls-top">
<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>
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
</div>
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-top-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
<div class="an-item-wrap">
<ul id="simple-list">
<li class="title">
<a href="[item_url]">Item Title</a> - [currency_symbol]Item Price</li>
<li>
... and so on ...
</ul>
</div>
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-bot-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
</div>
Image and Details
<div class="auction-nudge theme-details" id="auction-nudge-items">
<a href="[ebay_home_url]" rel="nofollow">
<img src="[ebay_logo_url]" class="an-ebay-logo" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
<div class="an-controls-top">
<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>
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
</div>
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-top-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
<div class="an-item-wrap">
<table border="0">
<tr>
<td class="title" colspan="2">
<a href="[item_url]">Item Title</a>
</td>
</tr>
<tr>
<td class="image" align="center" valign="top" width="80">
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</td>
<td class="details" valign="top">
<div class="price">
<b>[currency_symbol]Item Price</b>
[if_auction:]([bid_count] bids)
[if_buy_it_now:](Buy It Now)
[if_auction_with_bin:]([bid_count] bids<span class="bin-available">, Buy It Now available</span>)
</div>
<div class="ends">Time Left: Xd Yh Zm</div>
<div class="view">
<a href="[item_url]">View Item</a>
</div>
</td>
</tr>
</table>
<table border="0">
... and so on ...
</div>
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-bot-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
</div>
Images Only
<div class="auction-nudge theme-images_only" id="auction-nudge-items">
<a href="[ebay_home_url]" rel="nofollow">
<img src="[ebay_logo_url]" class="an-ebay-logo" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
<div class="an-controls-top">
<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>
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
</div>
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-top-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
<div class="an-item-wrap">
<ul id="images-only">
<li>
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</li>
<li>
... and so on ...
</ul>
</div>
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-bot-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
</div>
Grid View
<div class="auction-nudge theme-grid" id="auction-nudge-items">
<a href="[ebay_home_url]" rel="nofollow">
<img src="[ebay_logo_url]" class="an-ebay-logo" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
<div class="an-controls-top">
<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>
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
</div>
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-top-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
<div class="an-item-wrap">
<table class="grid" border="0" cellpadding="4" cellspacing="4" width="[grid_width_option]" style="[grid_width_option]">
<tr>
<td>
<strong>
<a href="[item_url]" rel=nofollow>Item Title</a></strong>
<table cellpadding="8" border="0">
<tr>
<td class="image" width="60">
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</td>
<td class="info">
<strong>[currency_symbol]Item Price</strong>
[if_auction:]([bid_count] bids)<br />
[if_buy_it_now:](Buy It Now)<br />
[if_auction_with_bin:]([bid_count] bids<span class="bin-available">, Buy It Now available</span>)<br />
Ends: DD/MM/YYYY HH:MM<br />
<a href="[item_url]" rel=nofollow>View Item</a>
</td>
</tr>
</table>
</td>
<td>
... and so on ...
</tr>
<tr>
... and so on ...
</table>
</div>
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-bot-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
</div>
Unstyled
<div class="auction-nudge theme-unstyled" id="auction-nudge-items">
<a href="[ebay_home_url]" rel="nofollow">
<img src="[ebay_logo_url]" class="an-ebay-logo" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
<div class="an-controls-top">
<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>
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
</div>
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-top-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
<div class="an-item-wrap">
<ul class="item">
<li class="image first">
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</li>
<li class="title">
<a href="[item_url]">Item Title</a>
</li>
<li class="price">[currency_symbol]Item Price</li>
<li class="format bin">Buy It Now</li>
<li class="ends last">Xd Yh Zm </li>
</ul>
<ul class="item alt">
... and so on ...
</div>
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-bot-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
</div>
Customizing the Unstyled Theme
The Unstyled theme displays eBay items on a page with no additional styles applied. This gives you full control over how the items are displayed.
Items are marked up using a simple <ul> element with child <li>s; these can be used as hooks for custom CSS styling as explained above.
For example, once loaded onto your page your Auction Nudge content will look something like this:
<div class="auction-nudge theme-unstyled" id="auction-nudge-items">
<a href="[ebay_home_url]" rel="nofollow">
<img src="[ebay_logo_url]" class="an-ebay-logo" width="[ebay_logo_width]" height="[ebay_logo_height]">
</a>
<div class="an-controls-top">
<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>
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
</div>
<ul class="item">
<li class="image first">
<div class="image-container">
<a href="[item_url]">
<img src="[image_url]">
</a>
</div>
</li>
<li class="title">
<a href="[item_url]">Item Title</a>
</li>
<li class="price">[currency_symbol]Item Price</li>
<li class="format bin">Buy It Now</li>
<li class="ends last">Xd Yh Zm</li>
</ul>
<ul class="item alt">
... and so on ...
</div>
Using this format you should have enough hooks to write your own custom CSS and style the items however you wish. Please note for auction style listings, the 'format' <li> element will be displayed like this:
<li class="format auction">X bids</li>
You can also create custom behaviour and modify the HTML produced by Auction Nudge using a JavaScript callback function as described here.
A Custom Unstyled Theme Example
This example demonstrates how to customize the Unstyled theme using CSS and JavaScript. Click on the 'CSS' tab to see the style rules applied.
/* Item element */
div.auction-nudge-items ul.item {
padding: 10px 20px;
margin-right: 30px;
float: left; /* Align items side by side */
width: 180px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 12px;
list-style-type: none;
border: 2px solid #cecece;
border-radius: 3px;
color: #333;
}
/* Every other item */
div.auction-nudge-items ul.item.alt {
margin-right: 0;
}
/* Each element in item */
div.auction-nudge-items ul.item li {
display: block;
margin-bottom: 10px;
text-align: center;
}
/* Image element */
div.auction-nudge-items ul.item li.image {
display: table; /* Allows us to vertical align */
height: 180px;
width: 180px;
margin-bottom: 0;
}
/* Image container */
div.auction-nudge-items ul.item li.image div.image-container {
/* Vertical align */
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* The actual image element */
div.auction-nudge-items ul.item li.image img {
/* Specify maximum dimensions */
max-width: 180px;
max-height: 180px;
}
/* Price element */
div.auction-nudge-items ul.item li.price {
padding: 6px 3px;
font-size: 16px;
color: #33a5af;
border: 2px solid #33a5af;
border-radius: 3px;
}
/* Title element */
div.auction-nudge-items ul.item li.title {
font-size: 18px;
font-weight: bold;
}
/* Title link element */
div.auction-nudge-items ul.item li.title a {
text-decoration: none;
color: #333;
}
/* Format element */
div.auction-nudge-items ul.item li.format {
display: none;
}
/* Self clear floats */
div.auction-nudge-items .an-item-wrap {
overflow: hidden;
}
//Auction Nudge Callback function
//Details: https://www.auctionnudge.com/customize/behaviour#javascript-callback
function auction_nudge_loaded() {
//Get the Auction Nudge container
var an_container = document.getElementById('auction-nudge-items');
//Get the item end time element
var an_ends = an_container.getElementsByClassName('ends');
//Iterate over each element
for(i in an_ends) {
//Prepend some text
an_ends[i].innerHTML = 'Time Left: ' + an_ends[i].innerHTML;
}
}
<!--
Just the standard code snippet, nothing needs to be changed here :-)
-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/SellerID/soundswholesale/siteid/3/theme/unstyled/MaxEntries/2/show_logo/0/img_size/180"></script>
<div id="auction-nudge-items" class="auction-nudge"></div>
Increasing Image Sizes
You can use the "Image Size" option when building your code snippet to display larger item images.
When you specify an image size, the image width or height (depending on the image ratio) will not exceed this size. By default Auction Nudge loads 140px source images, specifying a value higher than 140px will cause higher quality images (and therefore a larger file size) to be loaded in the browser, which may slow page load times. The largest source image size available to Auction Nudge is 500px.
The system uses multiple breakpoints to determine how large the source image size needs to be. This maintains image quality as the image size increases, but attempts to load an appropriately sized source image in order to prevent loading larger files than necessary.
If the source image for the size you specified is not available, then a smaller version will be loaded. This may happen if the original image uploaded by the seller is smaller than the size you specified. This means some images may appear smaller than others. You can use the following CSS to 'force' the image to be upscaled to match the image size specified:
.auction-nudge-items .image-container img {
/* Change this number to match the specified the 'image size' value */
width: 300px !important;
}
Note
The 'Carousel' theme does not support the 'Image Size' option. Images will be displayed at a maximum size of 98px by 98px.
Customizing the Pagination Area
The pagination area displays previous/next links to allow navigation between pages of items. This can be customized using CSS.
Enabling Pagination
This feature is enabled with the "Show multiple pages?" option in the Your eBay Listings tool. The HTML markup for the pagination area is as follows:
<!-- Pagination above the items -->
<ul class="an-page-top an-page-wrap">
<li class="an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-top-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
<!-- Pagination below the items -->
<ul class="an-page-bot an-page-wrap">
<li class="an-page-bot-prev an-page-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
<li class="an-page-bot-next an-page-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>
Adjusting the Pagination Area Appearance
Using CSS you can alter the appearance of the pagination area. For example, you could use the following rule to change the background colour of both areas to white:
div.auction-nudge-items ul.an-page-wrap {
background-color: white;
}
The following changes the pagination link colour:
div.auction-nudge-items ul.an-page-wrap li {
color: red;
}
Hiding the Pagination Area
If you do not wish to display both sets of pagination areas, or you wish to style them differently, you can can target them individually. For example, to hide the bottom area:
div.auction-nudge-items ul#an-page-bot {
display: none;
}
Changing the Pagination Area Loading Graphic
When navigating between pages a small animated loading graphic will appear while the required page is being loaded. If desired, this can be changed using the following rule:
.auction-nudge-items.an-loading ul#an-page-top {
/* To hide the graphic... */
background-image: none !important;
/* To change the graphic... */
background-image: url([url_to_alernate graphic]) !important;
}
Changing the Pagination Inactive Button Style
When a pagination link is inactive (i.e. the "Previous" link on the first page and the "Next" link on the last page) it will be given the class an-inactive. By default, this is still visible but is made less prominent. It can be hidden all together like so:
div.auction-nudge-items ul.an-page-wrap li.an-inactive {
display: none;
}
Putting It All Together
Click on the 'CSS' tab to see the style rules applied.
/* The pagination element */
div.auction-nudge-items ul.an-page-wrap {
background-color: white;
border: 2px solid #cecece;
border-radius: 3px;
}
/* Previous / Next links */
div.auction-nudge-items ul.an-page-wrap li {
padding: 6px 12px;
font-size: 16px;
color: #fff;
background: #33a5af;
border-radius: 3px;
}
/* Hide the bottom pagination links */
div.auction-nudge-items ul#an-page-bot {
display: none;
}
/* Hide inactive link */
div.auction-nudge-items ul.an-page-wrap li.an-inactive {
display: none;
}
<!--
Just the standard code snippet, nothing needs to be changed here :-)
-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/theme/responsive/page/init/img_size/80/SellerID/soundswholesale/siteid/3/MaxEntries/2"></script>
<div id="auction-nudge-items" class="auction-nudge"></div>
Compatibility with Internet Explorer
Pagination is not supported in some old versions of Internet Explorer (it is supported in IE 9+). You can choose to hide the pagination areas from these versions by adding the following HTML into the <head> element of your page:
<!--[if lt IE 9]>
<style type="text/css">
div.auction-nudge-items ul.an-page-wrap {
display: none;
}
</style>
<![endif]-->
Customizing the Category List
The Category List option displays a list of categories which can be used to filter your items. This can be customized using CSS.
Enabling the Category List
This feature is enabled with the "Category List" option in the Your eBay Listings tool. Please view the Help page for more information on how the category list is created for your items.
Hiding Certain Categories from the Category List
You may not want certain categories to appear in the category list. You can hide them by obtaining the relevant eBay category ID and adding the following CSS rule to your stylesheet:
/* Replace 12345 with the category ID in question */
div.auction-nudge-items .an-cats-nav .an-cat-12345 {
display: none;
}
Styling the Unstyled Category List
You can write your own CSS rules to fully customise how the Unstyled category list is displayed. The HTML structure for the Unstyled category list is as follows:
<div class="an-cats-wrap" class="an-cats-unstyled">
<div class="an-cats-nav">
<strong class="an-cats-title">Filter items by category:</strong>
<a class="an-cats-cat an-cat-[category_id]">[category_name]</a>
<a class="an-cats-cat an-cats-child an-cat-[category_id]">[category_name]</a>
...etc...
<a class="an-cats-cat an-cat-[category_id]">[category_name]</a>
</div>
</div>
The following CSS will add some basic styling to the category list, nesting categories under each other:
div.auction-nudge-items div.an-cats-wrap a.an-cats-cat {
display: block;
font-weight: bold;
cursor: pointer;
}
div.auction-nudge-items div.an-cats-wrap a.an-cats-child {
margin-left: 20px;
font-weight: normal;
}
Styling the Active Category
If a starting category (using the Category ID option) has been specified, or once a category is selected from the list it will be given the an-cat-selected class, so you can style the active category as you wish. For example:
div.auction-nudge-items div.an-cats-nav .an-cat-selected {
font-weight: bold;
text-decoration: underline;
}
Putting It All Together
Click on the 'CSS' tab to see the style rules applied.
/* The 'Filter items by category' text */
div.auction-nudge-items div.an-cats-wrap .an-cats-title {
display: block;
margin-bottom: 10px;
padding: 8px;
font-weight: normal;
background: #f5f5f5;
}
/* Every category link */
div.auction-nudge-items div.an-cats-wrap a.an-cats-cat {
display: block;
padding-left: 1%;
font-weight: bold;
cursor: pointer;
}
/* Child categories */
div.auction-nudge-items div.an-cats-wrap a.an-cats-child {
margin-left: 20px;
font-weight: normal;
}
/* The active category */
div.auction-nudge-items div.an-cats-nav .an-cat-selected {
font-weight: bold;
text-decoration: underline;
}
<!--
Just the standard code snippet, nothing needs to be changed here :-)
-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/theme/responsive/img_size/120/cats_output/unstyled/show_logo/1/SellerID/soundswholesale/siteid/3/MaxEntries/4/page/init/categoryId/106438"></script>
<div id="auction-nudge-items" class="auction-nudge"></div>
Customizing the Search Box
The Search Box option displays a search box above your items which will allow users to search your active eBay items. This can be customized using CSS.
Enabling the Search Box
This feature is enabled with the "Show search box?" option in the Your eBay Listings tool. Please view the Help page for more information on this feature.
Styling the Search Box
You can write your own CSS rules to change how the Search Box is displayed. The HTML structure for the Search Box is as follows:
<div class="an-search-wrap">
<div class="an-search-box">Search items...</div>
<div class="an-search-submit">Search</div>
</div>
The following CSS will change the colours of the Search Box:
/* Change the border colour to blue */
div.auction-nudge-items div.an-search-box {
border-color: #167aba;
}
/* Change the background colour to blue and the text to white */
div.auction-nudge-items div.an-search-submit {
background-color: #167aba;
color: white;
}
Putting It All Together
This demo shows the Search Box with the above CSS applied.
/* Change the border colour to blue */
div.auction-nudge-items div.an-search-box {
border-color: #167aba;
}
/* Change the background colour to blue and the text to white */
div.auction-nudge-items div.an-search-submit {
background-color: #167aba;
color: white;
}
<!--
Just the standard code snippet, nothing needs to be changed here :-)
-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/theme/responsive/img_size/80/SellerID/soundswholesale/siteid/3/MaxEntries/2/search_box/1"></script>
<div id="auction-nudge-items" class="auction-nudge"></div>