Adding a border

Hi @supernaturalbrews,

To add a border around an entire rotator, the easiest solution is to edit the rotator’s layout code (instructions here) . In the Layout Source Code, insert the following new line at the very start:

<div style="position: absolute; left:0; right:0; top:0; bottom:0; border: 1px solid #000;"></div>

Please let me know if you have any other questions.

Sincerely,
Drew O’Neill

Drew,

I put the code in but it is not keeping the border. The border flashes really quick when it first loads but then disappears.

You can see it here:
https://www.kcnanobrews.com/

Thanks for you help. Awesome plugin btw.

also @dwuser.com ,

I figured out how to change the type and font but how do I change the size of the circles in the right bottom corner.

Thanks

Hi,

To change the navigation dots, you’ll need to update each of the background-image declarations in these lines of code:


<div class="erdots_wrap" style="wasbackground-color: #CFC; float: right;" align="left">
<!-- modify the float on this element to make left/right/none=center aligned. -->
<span class="erdots_btn_selected" style="padding-left: 0; width: 21px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 2px 0 0; cursor: default; background: url(https://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_wite_65.png) top left no-repeat;"> </span>
<span class="erdots_btn_normal" style="padding-left: 0; width: 21px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 2px 0 0; cursor: pointer; background: url(https://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_wite_35.png) top left no-repeat;"> </span>
<span class="erdots_btn_hover" style="padding-left: 0; width: 21px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 2px 0 0; cursor: pointer; background: url(https://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_wite_65.png) top left no-repeat;"> </span>
</div>


Sorry for the confusion regarding the border; to ensure that it remains visible, you should actually add the line I mentioned before at the very end of the layout code.

Sincerely,
Drew O’Neill

(The formatter wrapped the text, which makes it hard to read. Here’s the unwrapped version: https://gist.github.com/anonymous/e2a25d02b10c1d831c00 )

Drew,

Thanks, but I put the border code at the bottom of the layout code and now I’ve lost my hyperlinks?

Hi,

Sorry for the confusion; you shouldn’t use the <div> at the end approach if you have links, as it will block them. I see that you updated the rotator to include the border directly on the EasyRotator <div> which is another option. Or, you can wrap the entire rotator in code like this:

<div style="width: 600px; height: 400px; border: 1px solid #000;">
[easyrotator]erc_xx_xxxxx[/easyrotator]
</div>

The width/height values must match the rotator size.

Sincerely,
Drew O’Neill