Customize

As well as being very quick and easy to set up, Auction Nudge is easily customizable so users with a little technical knowledge can modify or extend the default appearance and behaviour.

Click on one of the FAQ (Frequently Asked Questions) below to be taken to the answer:

Changing how Auction Nudge looks

How Can I Modify The Appearance Of Auction Nudge?

As well as choosing from different themes when you generate your Auction Nudge code snippet you can also change the appearance using simple CSS rules. Auction Nudge will automatically use the default CSS rules for your web page, for example the default font and link colours so it integrates nicely with your page.

You can change the CSS rules for Auction Nudge by specifying new rules in your style sheet. You can see the HTML structure of themes here. Please see the CSS demos below and this introduction to CSS on W3Schools for more help.

As a quick example, to make all of the product titles bold you would add this rule to your style sheet :

div#auction-nudge-items td.title {
  font-weight: bold;
}

To change the alternating background colours when displaying rows of items you would add this rule to your style sheet :

div#auction-nudge-items table.columns tr {
  background-color: red;  /* Change to desired colour */
}
div#auction-nudge-items table.columns tr.alt {
  background-color: blue;  /* Change to desired colour */
}

All themes can be adjusted in this way.

What Is The HTML Structure Of The Your eBay Listings Themes?

Auction Nudge has a variety of theme options to choose from. Because Auction Nudge only uses open standards web technologies (HTML, CSS and JavaScript) to add content to your page, with the right knowledge you are able to modify these themes or even create your own.

The following pages outline the markup of each Your eBay Listings theme:

Are There Any Examples Of Customising The Appearance And Layout Using CSS?

Yes! Please see the list below for some CSS examples, the source code is also available for each ...

  1. How to adjust item text colours
    view demo
    view source
  2. Making the item title bold
    view demo
    view source
  3. Adjusting font type and appearance
    view demo
    view source
  4. Changing the background colour of the rows in the 'Column View' theme
    view demo
    view source
  5. How to set a theme width
    view demo
    view source
  6. Changing the appearance of images in the 'Images Only' theme
    view demo
    view source
  7. Specifying a width / height for listings and adding a scroll bar
    view demo
    view source
  8. How to change the text and background colours used by the 'Your eBay Feedback' theme
    view demo
    view source
  9. Hiding the "bids" column in the "Column View" theme if you only have Buy It Now items
    view demo
    view source

You can use any number of CSS rules to change the appearance, you can find an introduction to CSS on W3Schools.

How Can I Increase The Size Of Item Images?

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.

What Is The 'Unstyled' Theme And How Do I Customise It?

The 'unstyled' theme displays eBay items on a page with no added formatting using CSS. Items are marked up using a simple <ul> element with child <li>s which can then 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.

How Can I Change The Appearance Of The Pagination Area?

If you have enabled the "Show multiple pages?" option in the Your eBay Listings tool, a pagination area containing "Previous" and "Next" buttons will appear above and below the items. Once clicked, these will navigate between pages of items.

The HTML markup for these links 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 ul#an-page-top.an-loading {
  /* To hide the graphic... */
  background-image: none !important;

  /* To change the graphic... */
  background-image: url([url_to_alernate graphic]) !important;
}

Different loading graphics can be generated for free here.

Changing the pagination inactive button style

When a <li> 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;
}

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]-->  

How can I change the appearance of the category list?

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:

div#auction-nudge-items #an-cats-nav .an-cat-12345  {
  display: none;
}

Where 12345 is replaced with the category ID in question.

Styling the 'Unstyled' category list

You can write your own CSS rules to fully cutomise 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;
}

Changing what Auction Nudge displays

How Can I Stop The "No active items." Text From Appearing On My Site When I Have No Active Items On eBay?

Simply add the following CSS rule to your stylesheet:

div#auction-nudge-items p.no-items {
  display: none;
}

You could even take this a step further and use JavaScript to edit the content displayed when there are no active items. More details here.

How Can I Stop The "Buy It Now available" Text From Appearing In My Item Feed?

Simply add the following CSS rule to your stylesheet:

div#auction-nudge-items span.bin-available {
  display: none;
}

Can I Translate Auction Nudge Into Another Language?

Yes, the text displayed by the Your eBay Listings feed can be translated into another language using a simple script which must be included within the HTML of your page.

You can view the demo which explains how to do this, or view the source.

Changing the behaviour of Auction Nudge

How do I change the behaviour of Auction Nudge?

Auction Nudge is added to your page as HTML elements once the page has loaded. As with writing custom CSS rules this means you can also interact with these elements using JavaScript. For example:

Making links generated by Auction Nudge open in a popup window once clicked

view demo
view source

  1. Making Auction Nudge content load after other page content
    view demo
    view source
  2. Filtering items by keyword
    view demo
    view source
  3. Make the links created by the feedback and profile tools open in a blank window/tab by adding the target="_blank" attribute
    view demo
    view source

You can also create custom behaviour using JavaScript.

How can I make links open in a new browser window/tab?

Each tool has the option "Open links in new tab?". Once enabled, all links produced by Auction Nudge will open in a new browser window/tab. This uses the standard HTML target="_blank" attribute, which is supported by all browsers.

Can I Modify Auction Nudge Content Using JavaScript/jQuery?

Yes, once Auction Nudge has been loaded on your page you can use JavaScript (or your chosen JavaScript library) to manipulate the HTML produced by Auction Nudge as you wish.

In order to do this at the correct time Auction Nudge attempts to execute a JavaScript callback function called auction_nudge_loaded() once loaded. If this function exists, the code within the function will be executed. You can see an example of this in action here.