WordPress.org

Ready to get started?Download WordPress

Forums

EasyRotator for WordPress - Slider Plugin
[resolved] Adding a border (8 posts)

  1. SupernaturalBrews
    Member
    Posted 1 year ago #

    I want to add a thin black border to the rotator.

    What is the best way to do that?

    http://wordpress.org/extend/plugins/easyrotator-for-wordpress/

  2. DWUser.com
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. SupernaturalBrews
    Member
    Posted 1 year ago #

    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:
    http://www.kcnanobrews.com/

    Thanks for you help. Awesome plugin btw.

  4. SupernaturalBrews
    Member
    Posted 1 year ago #

    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

  5. DWUser.com
    Member
    Plugin Author

    Posted 1 year ago #

    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(http://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(http://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(http://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

  6. DWUser.com
    Member
    Plugin Author

    Posted 1 year ago #

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

  7. SupernaturalBrews
    Member
    Posted 1 year ago #

    Drew,

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

  8. DWUser.com
    Member
    Plugin Author

    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic