Add drop shadow to main image on smugmug gallery??

rvrkids

1. I've figured out how to add drop shadows to the thumbnail images in my smugmug gallery and I can get a drop shadow on the main/enlarged image container but my images vary in size and I want the drop shadow on the enlarged image and not the container. I can't figure out the CSS code to do this.

2. My thumbnails in the gallery are chopping off the top of some images...how do I make sure they are displaying correctly?

Can anyone help?

Thanks.

Allen

In the Smugmug style gallery you can re-crop the thumbnails. Look under tools.

rvrkids

Thanks Allen. I will give that a try.

Can anyone help me with CSS to add a dropshadow to my smugmug gallery main image ?? I can get a shadow on the container but my image sizes differ and I want the shadow on the image.

rvrkids

Still need help adding drop shadow to image in gallery
Hello --

I am still wondering if anyone can anyone can help me with the CSS code to add a drop shadow to the main/enlarged image in the smugmug gallery. I've been able to add the shadow to the container but the image sizes vary and I want the shadow on the image not the container which is sometimes larger than the image.

Please help!!

Thanks.

David_S85

This might get you closer. Someone else might be able to dial it in more.

This code adds a drop shadow to the main image in SM style, but only on hover. I don't know how to make it automatically display without hovering over it.

.sm-tile .sm-tile-content:hover {
   box-shadow: 7px 7px 5px #888;
}

Credit to Aaron Meyers in his customizations area.

Hikin' Mike

David_S85 wrote: »

This might get you closer. Someone else might be able to dial it in more.

This code adds a drop shadow to the main image in SM style, but only on hover. I don't know how to make it automatically display without hovering over it.

.sm-tile .sm-tile-content[B]:hover[/B] {
   box-shadow: 7px 7px 5px #888;
}

Credit to Aaron Meyers in his customizations area.

Just remove the ':hover' part.

David_S85

Ha! Mike, I didn't play with it long enough to get that. Too simple. Yup - that works - it also creates box shadows on all the thumbs too. So if the OP also had other code to make the thumbs have drops, maybe the older code is redundant now.

rvrkids

Thanks guys!

That code does work, and actually I've tried that before....only problem is it puts a shadow around all photos I have on the page and I have a photo being used as a sort of separator between my header and the body of the page (scalloped string). This code puts a shadow on that image too and it looks really weird. I was hoping to find a way to specify just the images in the smugmug gallery.....both thumbs and main enlarged image.

I had figured out how to do the tiles of the thumbs alone (even though that wasn't ideal).

Any ideas?? I did publish it this way so you could see what I was talking about with the shadow on my separator photo.

Thanks again for your help.

Hikin' Mike

Looks like you fixed it?? If not, can you post the page in question.

One thing I noticed, your Galleries page (http://karenmclaughlinphoto.smugmug.com/Galleries/) your photos are right-justified on my monitor. I'm pretty sure you want them centered.

rvrkids

Hey Mike - I have not fixed it. The original page in question is when you select a specific gallery http://karenmclaughlinphoto.smugmug.com/Galleries/Seniors/ this is where the shadow is on my separator image now.

As for my gallery main page....with the 3 galleries listed....It looks centered on my screen but I know it looks different on other screens. I don't seen an option to center the gallery pages across the screen. I did have a left margin that was centering it on my screen but I just took that off and made the right and left 12px but now it is pushed up on the left side....not sure how to center these 3 galleries ??? Maybe I need CSS code for that too ???

Hikin' Mike

Remove these two:

.sm-tile .sm-tile-content {
    box-shadow: 7px 7px 5px #171207;
    }

.sm-tiles-list .sm-tile-photo {
    box-shadow: 7px 7px 5px #171207;
    }

Add this instead:

.sm-gallery .sm-tile {
    box-shadow: 7px 7px 5px #171207;
    }

rvrkids

Yay!! Thanks Much Mike. I think that finally got the drop shadow....I actually added .sm-gallery in front of the original code and wound up with .sm-gallery .sm-tile .sm-tile-content and that did it. I think I also had some overlapping code that was causing a problem.

Now I have the other issue with my main gallery page not being centered on my screen. I don't see a way to center the 3 gallery pages. I originally did it by adding a large left margin so it looked good on my screen but then it didn't automatically center on other sizes.

Hikin' Mike

Add this to center your Gallery page:

.sm-page-widget-10001713{
    text-align:center;
    }

rvrkids

Thanks Mike...that did it. You've been awesome helping me! How do you figure out that was the element/id name (.sm-page-widget-10001713) and where did the 10001713 come from?...And why does it say text-align if it isn't text?

Hikin' Mike

rvrkids wrote: »

Thanks Mike...that did it. You've been awesome helping me! How do you figure out that was the element/id name (.sm-page-widget-10001713) and where did the 10001713 come from?...And why does it say text-align if it isn't text?

I use 'Firebug' a plugin/extension from Firefox so I can see "under the hood". It doesn't have to be text (obviously), it's just called that.

rvrkids

Okay, I was trying to use the Firefox developer tool but I just downloaded Firebug and am trying it. I still can't find the id you said to use with the 100001713. Can you tell me about where in the code you found that. Once I see that I might be able to figure this stuff out easier.

Thanks.

Allen

rvrkids wrote: »

Okay, I was trying to use the Firefox developer tool but I just downloaded Firebug and am trying it. I still can't find the id you said to use with the 100001713. Can you tell me about where in the code you found that. Once I see that I might be able to figure this stuff out easier.

Thanks.

Using Firefox I right-clicked between the photos and clicked "Inspect Element". The yellow came up
highlighted. Looking up the line I find the widget number.

...
<div id="sm-page-widget-BQcc9pRW" class="sm-page-widget sm-page-widget-nodes [COLOR=Red]sm-page-widget-10001713[/COLOR]" data-typeid="10001713">
    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header sm-page-widget-header-center"></div>
        <div id="sm-page-widget-73kHZwTJ" class="sm-page-widget-body">
            <div id="yui_3_8_0_1_1426116249899_275" class="sm-tiles-row-organic sm-tiles-spacing-48 sm-tiles-info-after sm-tiles">

    [COLOR=Yellow]<ul id="yui_3_8_0_1_1426116249899_274" class="sm-tiles-list sm-tiles-L"></ul>[/COLOR]
...

rvrkids

Thanks for that info Allen. I'm sure no one wants to give me a lesson on here but what is the line number in the highlighted area and how do you then look up a line number?

Allen

I have no idea what you mean by "line number in the highlighted area".

All widgets have a class name with a unique number.

rvrkids

Sorry about that...I misread your information.

So here is my screen capture from Firebug...



The line highlighted in blue is what was selected when I did inspect element between my gallery images and the line with the widget number is 5 lines above that. How do you know these 2 go together?

If this is too much teaching, please tell me and I will research and try to figure out on my own. I don't want to be too cumbersome here

Allen

Notice the indents, each indent is contained in the above div. Ever

ends with a

.
The closing div for the widget would be straight down in line where it was opened.
If you click any "-" in front of each the div, it will close. "+' expands the div and everything in
it is exposed.

rvrkids

I see and understand the indents. The thing I don't understand is that the blue highlighted line is in a different div statement than the ID that worked to center my gallery pages because there is a closing 1 or 2 lines above the blue highlight/after the 10007313 identifier.