AEBN Top Stars Sales Tool

Load source files

First of all load the Javascript and CSS files:

<script src="https://top-stars.aebn.net/aebn-top-stars.min.js"></script>
<link rel="stylesheet" href="https://top-stars.aebn.net/aebn-top-stars.css">

Typically, this code is placed in the <head> of your document, but can be anywhere.

Create target element

Add an empty div element where you would like the sales tool to appear on the page and give it a unique ID.

Load the Top Stars sales tool

Add a script tag to your page and call the sales tool function:

<script> aebnTopStars.load(divId, options); </script>

divId: The ID of the target div element. This ID must be unique on the page.
options: An object listing the settings for the sales tool

Both parameters are required.

If you want to be sure your target element is loaded before the sales tool function is called, you can wrap it in a window.onload handler (or $(document).ready in jQuery). This is highly recommended, especially for pages with a lot of content.

Sales Tool options

Option	Required?	Value	Default Value
divId	Yes	The ID of the element the sales tool will be loaded into	None
orientation	Yes	"straight" or "gay"	None
refid	Yes	Your AEBN ref ID	None
theaterId	Yes	Your numeric AEBN theater ID	None
theaterCname	No	The host name for your theater if you have one	None
imgType	No	"head" or "body"	"head"
title	No	The title of the sales tool	None
newWindow	No	Does the star detail page open a new window? (true or false)	false

Errors

Errors will appear in your browser's console.

No valid div element found with ID of "badId": The ID passed into the sales tool function was not found. Check for typos or wrap the function call in an onload event handler.
Required parameter options is missing: Please supply a valid options object.
Required parameter options is not an object: Please supply a valid options object.
Required option orientation is missing: Please supply a vaild value for orientation.
Valid values for option orientation are "straight" and "gay": Please supply a vaild value for orientation.
Required option refid is missing: Please supply a vaild value for refid.
Invalid value for option refid: Please supply a vaild value for refid.
Required option theaterId is missing: Please supply a vaild value for theaterId.
Invalid value for option theaterId: Please supply a vaild value for theaterId.
Could not retrieve Top Star data: An error occurred while trying to get the data. The server might be down or too busy, or there may be a connection problem. These issues should be temporary.

Styling

The appearance (and to some extent, the behavior) of the Top Stars sales tool can be controlled through CSS. You can load your own stylesheet or add a style tag.

It is important to add your changes after the default stylesheet is loaded. Otherwise, your custom styles will be overridden.

Using the Builder for basic styling

Click Yes for "Use custom styles?"

The style options will then appear with the defaults.

The first four style options are colors. These fields will accept any valid color format: hex values (#fff, #000000, #r00), named colors (whilte, black, red), rgb (rgb(255, 255, 255)) and rgba.

The last field is for the width of the border. It takes an integer value representing the width in pixels (units are not accepted). The maximum recommended value is 4. Enter 0 (zero) to remove the border.

Adding styles manually

You can customize the sales tool to an even greater extent if you are familiar with CSS. Add your own stylesheet or add a style tag before the empty div that is the target of the sales tool. It is important that your styles must come after the default styles.

Some of the CSS selectors available:

Selector	Use
.aebn-top-stars	The main container for the sales tool, designed to take up 100% of its container. Set the width to a fixed pixel value to prevent it from resizing. Don't forget to clear the breakpoints (see below).
.aebn-top-stars-title	Change the font properties, background, etc. of the optional title. Or use padding or margin to adjust the spacing.
.top-stars-text-link	Change the font properties, background, etc. of the star's name. You can also add other effects like text-shadow.
.aebn-top-star img	Add a border to the image or use border-radius for rounded corners. Increase the space between images by adjusting the width (default 100%). (unit must be %)

Adjusting breakpoints

This sales tool features a responsive layout that is designed to look good on phones, tablets and desktops. The images will be displayed on multiple lines on smaller devices to avoid having images that are too small.

If you are familiar with CSS media queries, you can adjust the breakpoints where the multiple lines come into play (or force the sale tool to always display on one line).

The relative width of the image is used to break into multiple lines. A width of 10% will result in one line of ten images (the total width is always 100%). So, a width of 20% will display two rows of 5 images each. The final width used in the default layout is 50%. This is perfect for small phones and will display two images per line.

The default media queries are:

@media (max-width: 1024px) {
    .aebn-top-star {
        width: 20%;
    }
    .aebn-top-star-name {
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    .aebn-top-star {
        width: 50%;
    }
    .aebn-top-star-name {
        font-size: 12px;
    }
}

Note that this is subject to change. Examine aebn-top-stars.css to ensure that you have the correct media queries.

Fixed width

If your site is designed for desktop only and is not responsive (does not change regardless of screen size), you should set the Top Stars sales too to a fixed width.

Use the Builder

The easiest way to do this is to use the Builder.

Click on Yes next to "Use custom styles?"
Click on Yes next to "Use fixed width?"
Enter the width (in pixels) you want in the Width field.
Click on the "Load Top Stars Sales Tool" button
Click on the "Get Code" button under the preview
Click on the "Copy to Clipboard" button
Paste the code into the page where you want the sales tool to appear

The hard way

Add a style tag or a link to your custom stylesheet after the line that loads aebn-top-stars.css.

Set the sales tool width:

#aebn-top-stars {width: <your custom width>px;}

Copy the media queries from aebn-top-stars.css and change the width for the class aebn-top-star to 10% for all the media queries. The media queries must come after all other CSS.