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.

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>

View full example

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

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>

View full example

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>

View full example

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>

View full example

Profile Table Colours

This example demonstrates how to change colours in the Your eBay Feedback 'Profile Table' theme.


/* Text colour */
div#auction-nudge-feedback td {
  color: #929292;
}
/* Link colour */
div#auction-nudge-feedback a {
  color: #1896d0;
}
/* Top profile colour */      
div#auction-nudge-feedback .an-fb-profile {
  color: #333;
}
/* Table captions */
div#auction-nudge-feedback caption {
  color: #333;
}
/* Table horizontal headings */
div#auction-nudge-feedback th {
  color: #333;
}      
/* Table headings */        
div#auction-nudge-feedback table tr.an-ft-head th,
div#auction-nudge-feedback table tr.an-fr-head th,
div#auction-nudge-feedback table tr.an-fb-head th {
  color: #fff;
  background: #1896d0 !important;
}    
/* Feedback rows, alternating background colour */        
div#auction-nudge-feedback tr.alt {
  background-color: #f9f9f9;
}

<!-- 

Just the standard code snippet, nothing needs to be changed here :-) 

-->
<script type="text/javascript" src="//www.auctionnudge.com/feed/feedback/js/UserID/soundswholesale/siteid/3/theme/profile_table"></script>
<div id="auction-nudge-feedback" class="auction-nudge"></div>

View full example

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">
  <img id="an-ebay-logo" src="[ebay_logo_url]">
  <ul id="an-page-top" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-top-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-top-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
  <div id="an-item-wrap">  
    <div class="an-item">
      <div class="an-title">
        <a href="[item_url]">Item Title</a>
      </div>    
      <div id="an-wrap">  
        <div class="an-image first">
          <div class="image-container">
            <a href="[item_url]">
              <img src="[image_url]">
            </a>
          </div>
        </div>
        <div id="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 id="an-page-bot" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-bot-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-bot-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">
  <img id="an-ebay-logo" src="[ebay_logo_url]">
  <ul id="an-page-top" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-top-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-top-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
  <div id="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 id="an-page-bot" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-bot-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-bot-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
</div>
		
<div class="auction-nudge" id="auction-nudge-items">
  <div id="an-item-wrap">
    <div id="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">
  <img id="an-ebay-logo" src="[ebay_logo_url]">
  <ul id="an-page-top" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-top-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-top-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
  <div id="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 id="an-page-bot" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-bot-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-bot-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">
  <img id="an-ebay-logo" src="[ebay_logo_url]">
  <ul id="an-page-top" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-top-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-top-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
  <div id="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 id="an-page-bot" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-bot-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-bot-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">
  <img id="an-ebay-logo" src="[ebay_logo_url]">
  <ul id="an-page-top" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-top-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-top-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
  <div id="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 id="an-page-bot" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-bot-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-bot-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">
  <img id="an-ebay-logo" src="[ebay_logo_url]">
  <ul id="an-page-top" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-top-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-top-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
  <div id="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 id="an-page-bot" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-bot-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-bot-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
</div>

Unstyled

		
<div class="auction-nudge theme-unstyled" id="auction-nudge-items">
  <img id="an-ebay-logo" src="[ebay_logo_url]">
  <ul id="an-page-top" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-top-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-top-next" data-action="next" data-page="[next_page_number]">Next »</li>
  </ul>
  <div id="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 id="an-page-bot" class="an-page-wrap">
    <li class="an-page-prev" id="an-page-bot-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
    <li class="an-page-next" id="an-page-bot-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">
  <img id="an-ebay-logo" src="[ebay_logo_url]">
  <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>

View full example

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; 
}

Customizing the Pagination Area

The pagination area displays previous/next links to allow navigation between pages of items. This can be customized using CSS.

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 id="an-page-top" class="an-page-wrap">
  <li class="an-page-prev" id="an-page-top-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
  <li class="an-page-next" id="an-page-top-next" data-action="next" data-page="[next_page_number]">Next »</li>
</ul>

<!-- Pagination below the items -->
<ul id="an-page-bot" class="an-page-wrap">
  <li class="an-page-prev" id="an-page-bot-prev" data-action="prev" data-page="[previous_page_number]">« Previous</li>
  <li class="an-page-next" id="an-page-bot-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;
}	
/* While page loading... */
#auction-nudge-items.an-loading ul#an-page-top {
  /* Hide the loading graphic */
  background-image: none !important;
  /* Change border colour */
  border-color: red;  
}    

<!-- 

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>

View full example

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.

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 id="an-cats-wrap" class="an-cats-unstyled">
  <div id="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>

View full example