0

I'm trying to create custom image to replace the “numbers” of Control-Nav. The result would be something like this

Been trying out various different ways to modify the nivo css but it's not working. Adding the follow options doesn't work.

.nivo-controlNav a:nth-child(1) {
    background-image:url(‘image/banner_button.png’);
}
.nivo-controlNav a:nth-child(2) {
    background-image:url(‘image/banner_button2.png’);
}

Neither do these.

.nivo-controlNav a {
    cursor:pointer;
    width:50px;
    height:50px;
    background:url('image/banner_button2.png');
}

The image path works as i have sucessfully display images out on my test site. I would only need 2 bullets as i have 2 banner images to display only.

Is there any solution to this? Any help would be greatly appreciated!

5
  • You probably have to be more specific: .nivo-controlNav > a.nivo-control {style...} & .nivo-controlNav > a.nivo-control.active {style...}
    – Christina
    Sep 2, 2014 at 4:49
  • @Christina Can you explain further? I came across this site, <css-tricks.com/forums/topic/…> and tried using it with no avail.
    – Gene
    Sep 2, 2014 at 4:52
  • The css has to be more specific. I've styled the bullets to be as you described using CSS and it works fine. Open up their css, see how they specify the styles on the bullets and then use their specificity.
    – Christina
    Sep 2, 2014 at 4:56
  • @Christina can you show me how is it done? i tried but i just can't make it appear. From my understanding, .nivo-controlNav and its childs are the one that make how the bullets appear. Am i right?
    – Gene
    Sep 2, 2014 at 8:12
  • Why don't you just change one of their themes? Are you sure that that's your image path from your CSS directory? Usually, mine is one out assets/css/ and assets/images so the path to my images in css is ../images/filename.png
    – Christina
    Sep 2, 2014 at 11:30

1 Answer 1

0

Found the solution and i guess i'll post the solution out to help anyone facing this problem. The trick is to Import a theme, in my case i'll use the default theme.

This is my following codes to add the nivoslider in html

   <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider"  style="margin-top:-17px;border:none;padding:0px; z-index:1">
     <img src="./image/banner1.jpg" alt="" />
     <img src="./image/banner2.jpg" alt="" />
   </div>
  </div>

And adding this line to the default theme css.

.nivo-controlNav a:nth-child(1) {
background-image:url(banner_button.jpg);
}
.nivo-controlNav a:nth-child(2) {
background-image:url(banner_button2.jpg);
}

Hope that helps. Special Thanks to @Christina !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.