Limited availability during the holidays
Another busy year is coming to its end, and an exciting year lies ahead. In order to get ready for a fresh new start, our team will spend a few days' rest during the winter holidays. Over the holiday break, we will have reduced staffing from December 20th, 2024, to January 5th, 2025, so please be patient if you do not receive a response as quickly as you normally would.
We send our warmest wishes for happiness, health, and success throughout the coming year. Thank you for your continued support, and may you have a peaceful and blessed Happy Holidays!
Hello,
I am trying to change the navigation buttons (ls-bottom-slidebuttons i think)
I am wanting to change skin 6 (circles) to larger squares and also change the colour of the selected slide to #ff9900. the other slides I would like to be a 50% grey with a 1px white stroke.
And #ff9900 on hover.
I am happy for this to be altered in the general CSS if needed, but would be good to know if there is a way i can apply this only to a page or select sliders if possible.
I started to try and work it out with my very limited CSS knowledge and this is as far as I have got. No idea if I'm even on the right track or if there should be a different method of achieving this.
I have attached an image of what the code looks like below, and also a quick photoshop mockup of what I'm trying to achieve. Any help would be much appreciated.
I will also need to reposition them on one slider so they are in the middle of the slide, so I would need to alter the position of them on certain sliders if this is possible?
Thanks,
Zach
ls-v6 .ls-bottom-slidebuttons a,
.ls-v6 .ls-bottom-slidebuttons {
background-attachment: scroll !important;
background-clip: border-box !important;
background-color: #ff9900 !important;
background-image: url("../img/bg_noise2.png"), -moz-linear-gradient(center top , #fcfcfc, #eeeeee) !important;
background-origin: padding-box !important;
background-position: !important;
background-repeat: repeat !important;
background-size: auto auto !important;
border-radius: 0px !important;
box-shadow: 0 0px 0 #000000 inset, 0 0px 0 rgba(0, 0, 0, 0.14) !important;
cursor: pointer !important;
display: block !important;
height: 20px !important;
margin: -30px 0 0 !important;
opacity: 100% !important;
overflow: visible !important;
position: absolute !important;
top: 50% !important;
transition: opacity 300ms ease 0s !important;
width: 20px !important;
z-index: 99 !important;
}
.ls-v6 .ls-bottom-slidebuttons a,
.ls-v6 .ls-bottom-slidebuttons a:hover {
background-attachment: scroll !important;
background-clip: border-box !important;
background-color: #ff9900 !important;
background-image: url("../img/bg_noise2.png"), -moz-linear-gradient(center top , #fcfcfc, #eeeeee) !important;
background-origin: padding-box !important;
background-position: !important;
background-repeat: repeat !important;
background-size: auto auto !important;
border-radius: 0px !important;
box-shadow: 0 0px 0 #000000 inset, 0 0px 0 rgba(0, 0, 0, 0.14) !important;
cursor: pointer !important;
display: block !important;
height: 20px !important;
margin: -30px 0 0 !important;
opacity: 100% !important;
overflow: visible !important;
position: absolute !important;
top: 50% !important;
transition: opacity 300ms ease 0s !important;
width: 20px !important;
z-index: 99 !important;
}
Hey ZacharyDonohue,
To achieve this, I'd recommend to create a new skin, for example make a copy of the v6 skin.
You can do this by navigating to the skins folder, copying the v6 skin and renaming it to a custom name.
After that you can edit this new skin's CSS file (skin.css) to your liking. Please note that you will need to edit the selectors to this custom skin's name in its skin.css as well.