Styles

The styling associated with Ad-rotator.js is fully customizable to the very pixel. Some basic styling is provided for a seamless integration.

1. Ad unit sizing

The size of Ad-units is controlled via CSS. There is no default size attributed to any of the Ad units, hence it is required that you set the desired size for each Ad-unit.

You can also use media queries to further tweak the Ad dimensions.

/* set Ad size */
#containerElement {
  height: 600px;
  width: 300px;
}

/* set img elements to be responsive */
img {
  height: 100%;
  width: 100%;

  /* [optional] To stretch image to fit container */
  /* object-fit: cover; */
}

<!-- Ad unit container  -->
<div id="containerElement"></div>

Here is a reference for common sizes for responsive Ads. Feel free to use any of the avaiable dimensions.

2. 🎨 Overriding/Rewriting the default Styles

Ad-rotator comes with some basic styles which are completely optional. To customize, you can either override the basic styles or you could directly rewrite them.

Rewriting Styles

Since Ad-rotator has only a few lines of css, it is pretty simple to rewrite the styles. We recommend rewriting the styles for a greater control.

To rewrite styles, you can grab the latest version of the stylesheet from the CDN. Then, all you need to do is either add, update or delete CSS as per your liking.

Overriding Styles

You can also choose to override the basic styles. To do this, you first include the base stylesheet (either locally or via CDN) and then override the necessary styles via CSS.

/* Override animation during Ad-rotation */
#publicity .fadeIn {
  -webkit-animation: exampleAnimation 300ms ease-in;
  animation: exampleAnimation 300ms ease-in;
}
/*
 * Then, define "exampleAnimation" as you'd like
 */

/* Override sticky Ad transition */
#publicity.stickyElx {
  transition: all 0.5s linear;
}

<!-- include stylesheet locally  -->
<link rel="stylesheet" href="./node_modules/ad-rotator/dist/style.css" />

<!-- OR include stylesheet via CDN  -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ad-rotator/dist/style.css" />

<!-- Ad unit  -->
<div id="publicity">Ad area</div>

As seen above, you can override styles using higher CSS Specificity.

Helper Classes

To facilitate styling, certain important elements within Ad-rotator are assigned a specific class. These are listed below...

1. Every image has a class fadeIn which by default, is used to add a smooth transition while updating images.
2. When using sticky Ads, a class stickyElx is added to the Ad unit's container element that allows setting the position of the Ad unit.

You could use these classes to add or override animations or for other general styling.

Note - The config options linkClass and imgClass are at your disposal to customize the styling of the link and image elements respectively.