Okay
  Public Ticket #1500170
change the lightbox color background
Closed

Comments

  • Manustee started the conversation
    March 12, 2018 at 10:43am

    Hi guys,

    Great template !!

    How can i change the lightbox color background to solid white instead of black ? I've tried some CSS (

    body div.pp_overlay { background: none repeat scroll 0 0 #fff !important; }

     but it doesn't work ..

    Any ideas ?

    Thanks for your help

    Best regards 

    Manu 

  •  8,441
    Tahir replied
    March 12, 2018 at 12:03pm

    Hey M,

    Could you provide the page url where i can see the overlay ?. 

    Best 

    ThemeNectar Support Team 

  • Manustee replied
    March 12, 2018 at 12:40pm

    Hello Tahir, 

    Here is the link http://e59858b6.ngrok.io/seance-engagement-a-monbazillac/

    I want to change the lightbox color background (when you click on the image) to white solid background instead of black 

  •  8,441
    Tahir replied
    March 12, 2018 at 12:43pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .fancybox-bg {
    background: #fff !important;
}

    Thanks

    ThemeNectar Support Team 

  • Manustee replied
    March 12, 2018 at 1:34pm

    Hello Tahir, it's work perfectly except for the "fancy box button" (right corner top of the screen), the background is staying black. it is possible to turn them into solid white too ? 

  •  8,441
    Tahir replied
    March 12, 2018 at 2:04pm

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .fancybox-toolbar button.fancybox-button {
    background: #ffffff !important;
}
.fancybox-button:focus, .fancybox-button:hover {
    color: #000;
}

    Thanks

    ThemeNectar Support Team 

  • Manustee replied
    March 12, 2018 at 2:28pm

    PERFECT !!

    All is clear and white now !!

    Thanks for your help Tahir !

    Best 

  • Manustee replied
    March 13, 2018 at 11:07am

    Hi,

    I have a additional question. How change the background of video lightbox to solid white too. The border around the player are black. See the attachment below.

    http://7239ae5e.ngrok.io (scroll down to video lightbox) 

    Thanks for your help

    Best

  •  8,441
    Tahir replied
    March 13, 2018 at 12:19pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .fancybox-slide--video .fancybox-content, .fancybox-slide--video iframe {
    background: #fff !important;
}

    Thanks

    ThemeNectar Support Team 

  • Manustee replied
    March 13, 2018 at 12:27pm

    Perfect !! 

    You're the best Tahir ! ;) 

    Thanks for your help !!