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;
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.
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.