Theme background texture for lightbox

wizardry · September 25, 2013

Howdy all,
Does anyone know of a way to use a background texture theme for the background as the lightbox? I'd like to use my grey texture on the lightbox too if possible.

Thanks!

Hikin' Mike · September 25, 2013

Try this:

.sm-lightbox {
    background: url('background-imge-here');
    }

wizardry · September 25, 2013

Thanks Mike. How can i locate where the particular texture i'm using is? I'm trying to use the same texture that's actually embedded on the smugmug site as a theme. Thanks again!

wizardry · September 25, 2013

Did the F12 thing and figured out the link. Thanks again for the help Mike!

Hikin' Mike · September 25, 2013

I used the source code feature and found the stylesheet for your site:http://cdn.smugmug.com/css/skin/p/290/1375169639-50d984da0dcef9c80393b3d446377da4.css

Here is your background image: http://demo-themes.smugmug.com/photos/i-ZbLxWPp/2/O/i-ZbLxWPp.png

.sm-lightbox {     background: url('http://demo-themes.smugmug.com/photos/i-ZbLxWPp/2/O/i-ZbLxWPp.png
');     }

Hikin' Mike · September 25, 2013

Glad you found it!

wizardry · September 25, 2013

Thanks again MIke. One last question i hope..lol...now that i have the texture on the lightbox, i'd like to create the same drop shadow i have on my slidshow on the homepage on the actual lightbox image...for some reason the same parameters used in the .sm-lightbox-image aren't working....any help with how to do the drop shadow in the lightbox itself?

Hikin' Mike · September 25, 2013

I don't know why it's not working for you. I use the same '.sm-lightbox-image' on my site and it works.

Hikin' Mike · September 25, 2013

This is what I have:

.sm-lightbox-image{
    box-shadow: 5px 5px 5px #1e1e1e;
    -moz-box-shadow: 5px 5px 5px #1e1e1e;
    -webkit-box-shadow: 5px 5px 5px #1e1e1e;    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    }

wizardry · September 25, 2013

Mike,
Can i see the specific code you are using on your lightbox images to get the drop shadow to display? Just want to make sure im not doing something wrong....

Hikin' Mike · September 25, 2013

wizardry wrote: »

Mike,
Can i see the specific code you are using on your lightbox images to get the drop shadow to display? Just want to make sure im not doing something wrong....

I posted the code before you replied here...

!

wizardry · September 25, 2013

lol..so i pasted in your code and nothing is showing by way of a drop shadow...i wonder what's going on...could it be a priority issue where the drop shadow is behind the texture somehow?

Hikin' Mike · September 25, 2013

I used the Firebug tool to add that code to your site and it worked. Not sure why it isn't displaying.

Hikin' Mike · September 25, 2013

The background image shouldn't effect it. Try removing it just "because" and see what happens.

wizardry · September 25, 2013

Hmm..i'm using the Chrome browser...i wonder if that could be the issue...

Yeah just checked in IE...works ok...must be something to do with chrome..which is weird because the same property for the slideshow works with no issue....

Hikin' Mike · September 25, 2013

I just tried adding the code again using Firebug and it didn't work.

Hikin' Mike · September 25, 2013

Looks like you got it taken care of. I see a shadow on the bottom of your images.

wizardry · September 25, 2013

Yeah...thanks again Mike. Must be a chrome issue. Seems to be working fine in IE. Need to check safari and firefox!

Hikin' Mike · September 25, 2013

I use FF on an old XP machine and I saw it.

wizardry · September 25, 2013

Yeah...works on IE and FF. No on Chrome and Safari...must be some incompatibility with some of the CSS properties...

Hikin' Mike · September 25, 2013

Odd. I checked my site using Chrome and it shows up. I checked your site and it doesn't display.

Theme background texture for lightbox

Comments