On this page I have 3d effects on this image, and it is transitioning back and forth. When the image spins into blocks or cuts up, there is a side that is a default grey color, can I change this color? I would like to change this to black. Is there a menu choice to make the change or do I need to code this in? How and where do make this change? Thank you
Thank you for the help! I entered the code into the CSS editor, but no change in the webpage's, 3d block sides. I also re-saved the slider after entering the CSS short code, and also in the page edit mode, and then refreshed the page too. I tried three browsers, IE 11, Chrome, & Fire fox. I also entered the code by hand and then copied straight from your example that you sent me. It still didn't take it. Also the animations worked in Chrome & Firefox but not in IE11. Is there a conflict with IE?
/*background-color can be replaced with background-image: url("yourimage.jpg/gif/svg/png/"); */
I figured this out by right clicking the slider in Google Chrome, clicking INSPECT, then clicking the SOURCES tab, which happened to put me in the layerslider.css?ver=... tab. From there, I could see the css for the slider. But NOT the custom css that I added.
On this page I have 3d effects on this image, and it is transitioning back and forth. When the image spins into blocks or cuts up, there is a side that is a default grey color, can I change this color? I would like to change this to black. Is there a menu choice to make the change or do I need to code this in? How and where do make this change? Thank you
Michael
Hey Michael Charap,
You can change the color of the grey side of the boxes of the 3D transitions in the CSS Editor (.ls-3d-box div).
Attilla
So if I want to change to black, the correct CSS code would be?
.ls-3d-box div {/* #000000*/}
Am I close? Thank you for the help!
Michael
The correct code would be
.ls-3d-box div { background-color: black; }Attila
Thank you for the help! I entered the code into the CSS editor, but no change in the webpage's, 3d block sides. I also re-saved the slider after entering the CSS short code, and also in the page edit mode, and then refreshed the page too. I tried three browsers, IE 11, Chrome, & Fire fox. I also entered the code by hand and then copied straight from your example that you sent me. It still didn't take it. Also the animations worked in Chrome & Firefox but not in IE11. Is there a conflict with IE?
http://mahanamusic.com/?page_id=1670
Sorry for the delayed response. It seems like you will need to add !important to the code for it to take effect. Like this:
.ls-3d-box div { background-color: black !important; }Attila
Yes this is working perfectly! Thank you !
Michael C.
The code for all sides of the box is:
/*layerslider transition box shading*/
.ls-3d-box div {
background-color: #00f;
}
.ls-3d-box .ls-3d-top {
background-color: #00ff00;
}
.ls-3d-box .ls-3d-bottom {
background-color: red;
}
/*background-color can be replaced with background-image: url("yourimage.jpg/gif/svg/png/"); */
I figured this out by right clicking the slider in Google Chrome, clicking INSPECT, then clicking the SOURCES tab, which happened to put me in the layerslider.css?ver=... tab. From there, I could see the css for the slider. But NOT the custom css that I added.