Okay
  Public Ticket #1047179
3d Transition images, default gray to new color
Closed

Comments

  •  2
    Michael Charap started the conversation

    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 

  •  499
    Attila replied

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

    Best Regards,
    Attila | Kreatura Support Team

  •  2
    Michael Charap replied

    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  

  •  499
    Attila replied

    The correct code would be

    .ls-3d-box div {
        background-color: black;
    }


    Best Regards,
    Attila | Kreatura Support Team

  •  2
    Michael Charap replied

    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

  •  499
    Attila replied

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

    Best Regards,
    Attila | Kreatura Support Team

  •  2
    Michael Charap replied

    Attila

    Yes this is working perfectly!  Thank you ! 

    Michael C.  

  • konayoda replied

    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.