Hello, I am noticing that based on my slide background image that the navigational controls are not always easily visible. To resolve this I would like them to have a solid black background. How can I do this?
Unfortunately at the moment there is no built-in option in the plugin to relocate or edit the navigation areas, you would need to do some coding to achieve it. Please note that it requires custom coding and web development experience so it is not recommended for unexperienced users. Alternatively, you can make a new skin or modify one, but it also needs some CSS knowledge.
You can approach this two ways. You can either edit the image file that contains the arrows. It was created with a "CSS sprites" method, meaning that only certain parts of the image is being showed. As long as you do not change the arrows' sizes drastically and leave it in the correct position in the image file, you can freely change it. This method does not require CSS editing.
Or you can edit the skin.css file. The classes you are looking for are .ls-nav-prev, .ls-nav-next
Thank you for the class names of the Prev and Next navigation buttons (.ls-nav-prev, .ls-nav-next). I was able to add the css to adjust the background for these images.
I would like to know the class names for the other navigational controls so I can do the same for the other navigational controls, the Start and Pause slideshow buttons located bottom center of slide as well as the dots which allow the user to link to a particular slide in the slideshow.
Also, somehow I have deactivated the navigational dots which allow users to click on one of then to link to a particular slide in the slideshow. Where do I find the setting to re-activate them again?
Thank you for the class names however I still have two more questions.
1) I added CSS to adjust the background of ls-nav-start and ls-nav-stop as I had done for ls-nav-prev and ls-nav-next however the background to start and stop did not change (still transparent). Below is the CSS that I am using. Can you tell me what I need to change to have a black background for these elements?
2) I would also like to change the transparent background to black on the navigational dots between the start and stop navigational buttons. What is their class name?
Thanks!
/*
CSS code added by me (Stephen).
*/
.ls-nav-prev { /* Sliders slide navigational previous button control */
background: #000000;
opacity: 0.75;
}
.ls-nav-next { /* Sliders slide navigational next button control */
background: #000000;
opacity: 0.75;
}
.ls-nav-start { /* Sliders slide navigational start button control */
background: #000000;
}
.ls-nav-stop { /* Sliders slide navigational stop button control */
I have checked and it is working for me, the code also seems to be valid. If you can show us your site or a test page where we can see it, we will be able to tell more. We also don't know which skin are you using, it matters as there are skins that use CSS only and the others are using images as well, that could block/cover the content you inserted.
The class name is .ls-bottom-slidebuttons
Please note that you can check the class names yourself in the browsers console, right click on the element and then "Inspect Element". This way you can see any element's name.
You can view my site at www.ORCA.consulting (no dot com just ORCA.consulting). Both of the sliders on my site have been created using LayerSlider.
I must be using the default skin from the initial LayerSlider installation as I am unsure how to find which skin I am using or how to change skins. How do I do both of these and which skin would you recommend?
Hello, I am noticing that based on my slide background image that the navigational controls are not always easily visible. To resolve this I would like them to have a solid black background. How can I do this?
Thanks,
Steve
Hey Stephen Gregg,
Unfortunately at the moment there is no built-in option in the plugin to relocate or edit the navigation areas, you would need to do some coding to achieve it. Please note that it requires custom coding and web development experience so it is not recommended for unexperienced users.
Alternatively, you can make a new skin or modify one, but it also needs some CSS knowledge.
You can approach this two ways. You can either edit the image file that contains the arrows. It was created with a "CSS sprites" method, meaning that only certain parts of the image is being showed.
As long as you do not change the arrows' sizes drastically and leave it in the correct position in the image file, you can freely change it. This method does not require CSS editing.
Or you can edit the skin.css file. The classes you are looking for are .ls-nav-prev, .ls-nav-next
Hello,
Thank you for the class names of the Prev and Next navigation buttons (.ls-nav-prev, .ls-nav-next). I was able to add the css to adjust the background for these images.
I would like to know the class names for the other navigational controls so I can do the same for the other navigational controls, the Start and Pause slideshow buttons located bottom center of slide as well as the dots which allow the user to link to a particular slide in the slideshow.
Also, somehow I have deactivated the navigational dots which allow users to click on one of then to link to a particular slide in the slideshow. Where do I find the setting to re-activate them again?
Thanks much!
They are called .ls-nav-start and .ls-nav-stop
The navigation and appearance of the thumbnails can be controlled in the Slider Settings -> Thumbnail Navigation section.
Hello,
Thank you for the class names however I still have two more questions.
1) I added CSS to adjust the background of ls-nav-start and ls-nav-stop as I had done for ls-nav-prev and ls-nav-next however the background to start and stop did not change (still transparent). Below is the CSS that I am using. Can you tell me what I need to change to have a black background for these elements?
2) I would also like to change the transparent background to black on the navigational dots between the start and stop navigational buttons. What is their class name?
Thanks!
/*
CSS code added by me (Stephen).
*/
.ls-nav-prev { /* Sliders slide navigational previous button control */
background: #000000;
opacity: 0.75;
}
.ls-nav-next { /* Sliders slide navigational next button control */
background: #000000;
opacity: 0.75;
}
.ls-nav-start { /* Sliders slide navigational start button control */
background: #000000;
}
.ls-nav-stop { /* Sliders slide navigational stop button control */
background: #000000;
}
I have checked and it is working for me, the code also seems to be valid. If you can show us your site or a test page where we can see it, we will be able to tell more. We also don't know which skin are you using, it matters as there are skins that use CSS only and the others are using images as well, that could block/cover the content you inserted.
The class name is .ls-bottom-slidebuttons
Please note that you can check the class names yourself in the browsers console, right click on the element and then "Inspect Element". This way you can see any element's name.
Thank you Attila,
You can view my site at www.ORCA.consulting (no dot com just ORCA.consulting). Both of the sliders on my site have been created using LayerSlider.
I must be using the default skin from the initial LayerSlider installation as I am unsure how to find which skin I am using or how to change skins. How do I do both of these and which skin would you recommend?
Thanks,
Stephen.
Currently you are using the default "v6" skin. You can see this and change your skin in the Slider Settings -> Appearance tab.
I'd recommend to use the Borderless Dark or Borderless Dark for 3D sliders skins, but you should check them all out to see which one fit your needs.