New background image for direction nav

  • Resolved ritalcnyc

    (@ritalcnyc)


    11 years, 6 months ago

    I want to redesign the background image for the navigation in the flex slider, so I made a graphic/sprite of the same size and uploaded it to the media library, then I copied what I thought was the pertinent css from the flexslider css into my style sheet (and i remembered to prefix my css with .metaslider[space]), and changed the url of the background image to the media library url to test it.

    For some reason, I get two “previous” images/arrows instead of a “previous” and “next”. I used this css from the flexslider.css:


    .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url([myURL]bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}

    but I wonder if I’m missing something that changes the positioning of the background image for the next slider?

    (in case it’s not obvious, all the stuff in square brackets is just explanatory, not literal.)

    I hope this is clear. Thanks in advance.

    Rita

    https://www.ads-software.com/extend/plugins/ml-slider/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi,

    I can’t remember off the top of my head, but you might to override the .flex-next and .flex-prev css too. Those selectors have a ‘background-position’ rule which needs to be overridden, so.. total guess

    .metaslider .flex-direction-nav a.flex-next {
    background-position: 100% 0;
    }

    Hopefully that sends you in the right direction.

    Regards
    Tom.

    Thread Starter ritalcnyc

    (@ritalcnyc)

    You were right. Thanks so much.

    No problem!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘New background image for direction nav’ is closed to new replies.