Support Center - EasyRotator for WordPress

EasyRotator KnowledgeBase – Making Layout Customizations

Basic customization options for each layout template can be set when the template is applied in the Layout / Presentation section. If you're familiar with basic HTML and CSS editing, you can also make more advanced adjustments to a rotator by editing its layout source code.

The lines are identified by class="erimgMain_arrowLeft" (the left arrow) and class="erimgMain_arrowRight" (the right arrow). Note the highlighted data-erConfig property on the first div; this is what specifies the arrow images to be used. If either line doesn't have a data-erConfig value explicitly specified, you need to add one. Using our example from above, you would copy and paste the first line's data-erConfig value onto the second line:

In each data-erConfig attribute, the up-state button image is specified via the image property, and the hover-state button image is specified via the image2 property. For example, if we wanted to use images/button-left-up.png and images/button-left-hover.png, the following code would be needed:

Each value should be the URL to that arrow image file. If you're using WordPress, you'll need to first upload your images to the media library and copy their full http://-based URLs. Using our example again, here's what the final updated code might look like:

The line is identified by class="erimgMainOneUp". Note also the highlighted data-erConfig property at the end of the line; this is where you will be making a code modification. To set the custom fade speed, add a new duration property with a numeric value at the end of the data-erConfig attribute, like this:

The value is specified in milliseconds (1000 milliseconds = 1 second). You can specify any value of 1 or greater (if you want an instant transition, use 1 not 0). Using our example again, here's what the final updated code might look like:

The line is identified by class="erimgMain". Note also the highlighted data-erConfig property at the end of the line; this is where you will be making a code modification. To set the custom transition speed, add a new duration property with a numeric value at the end of the data-erConfig attribute, like this:

The value is specified in milliseconds (1000 milliseconds = 1 second). You can specify any value of 1 or greater (if you want an instant transition, use 1 not 0). Using our example again, here's what the final updated code might look like: