This question is answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 3 - Pages: 1 - Last Post: 25-Apr-2019 08:57 Last Post By: Laza Threads: [ Previous | Next ]
BlueCheckbox

Posts: 2
Registered: 18-Feb-2012
Using CSS gradient background in the Lightbox
Posted: 24-Apr-2019 23:17
 
  Click to reply to this thread Reply
Hi - I'm loving the new Tiger skin. Still setting up my galleries and have used a CSS gradient background for the pages but can't find a way of using the same CSS for the Lightbox background too. I can change the colour in the settings but can't find a way of it using the same CSS as the pages.

Hoping you can help. CSS below. Thanks. David

Code:
html, body {height: 100%;
background: #0F1374;
background: -moz-radial-gradient(center, ellipse cover, #0000ff 0%, #000000 85%, #000000 100%);
background: -webkit-radial-gradient(center, ellipse cover, #0000ff 0%,#000000 85%,#000000 100%);
background: radial-gradient(ellipse at center, #0000ff 0%,#000000 85%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#000000',GradientType=1 );
}
jGromit

Posts: 7,556
Registered: 31-Jan-2006
Re: Using CSS gradient background in the Lightbox
Posted: 24-Apr-2019 23:31   in response to: BlueCheckbox in response to: BlueCheckbox
 
  Click to reply to this thread Reply
For starters, you should drop the -moz-radial-gradient and -webkit-radial-gradient. These are aimed at obsolete versions of Firefox, Chrome, and Safari, and since those browsers are all updated automatically, the chances of a site visitor using one of the obsolete versions is almost nil. And if someone is stubbornly sticking to an ancient version, that's his problem, not yours.

You can also dump the filter: progid. That's aimed at IE9 and below, but the skin itself doesn't support those browsers, so it's serving no purpose.

To target the lightbox background, point your CSS at:
.lightbox .lightbox-overlay
But be aware that there may also be a semi-transparent background texture PNG being used, in addition to the color, and specifying just background will override that.

Not sure why you'd bother with this, however, since properly sized images will occupy most of the viewport. The lightbox background is mostly hidden.
BlueCheckbox

Posts: 2
Registered: 18-Feb-2012
Re: Using CSS gradient background in the Lightbox
Posted: 24-Apr-2019 23:47   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Hi - Thanks for the very quick reply. I'm fairly new to this so thanks for the advice on my existing CSS. I have indeed now deleted as suggested.

I've also managed to get the Lightbox to match the site now which is great - you're right, you don't see that much of it around the images but it just helps it feel like it matches as the transition between the pages and the lightbox is now seemless.

Thanks again. David
Laza

Posts: 2,175
Registered: 6-Sep-2005
Re: Using CSS gradient background in the Lightbox
Posted: 25-Apr-2019 08:57   in response to: BlueCheckbox in response to: BlueCheckbox
 
  Click to reply to this thread Reply
Try Gray or Yellow style which both has gradient in the lightbox out-of-the-box.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums