Options

Thumbnail Box Shadows

SierralewisSierralewis Registered Users Posts: 5 Beginner grinner
edited March 5, 2014 in SmugMug Customization
I know this has been explained a number of times. I have read the threads, tried different chunks of CCS code, and looked at the source code for sites displaying thumbnail shadows, but I cannot make it work on mine.

It is a lightly modified version of the new SM template. Background color changed to white. CCS code to (1) round corners on thumbnails and (2) darken the banner under the title on thumbnails. It did take a fair amount of experimenting with code from different sources to round the thumbnails. Only the solves-for-every-possible-use code from Nicholas Sherlock worked.
/* Round thumbnails for folders, pages and galleries*/
.sm-page-widget-folders .sm-tile, 
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
	border-radius: 15px;
	overflow: hidden;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
Any suggestions to make shadows appear "behind" thumbnails on the home page and folders will be appreciated.

Comments

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,459 Major grins
    edited March 4, 2014
    Add this in red should take care of that:
    /* Round thumbnails and drop-shadow for folders, pages and galleries*/
.sm-page-widget-folders .sm-tile, 
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
    border-radius: 15px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
[COLOR=Red]    width:90%
    box-shadow:5px 5px 5px black;[/COLOR]
    }
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    SierralewisSierralewis Registered Users Posts: 5 Beginner grinner
    edited March 4, 2014
    Mike - Your suggested code makes sense, but it is not adding a shadow. Any additional thoughts?
  • Options
    phaserbeamphaserbeam Registered Users Posts: 452 Major grins
    edited March 4, 2014
    Sierralewis wrote: »
    Mike - Your suggested code makes sense, but it is not adding a shadow. Any additional thoughts?

    The code is missin a semicolon... this should work: 
    /* Round thumbnails and drop-shadow for folders, pages and galleries*/
.sm-page-widget-folders .sm-tile, 
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
    border-radius: 15px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    width:90%[SIZE=5][COLOR=Red][B];[/B][/COLOR][/SIZE]
    box-shadow:5px 5px 5px black;
    }
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,459 Major grins
    edited March 4, 2014
    phaserbeam wrote: »
    The code is missin a semicolon... this should work: 
    /* Round thumbnails and drop-shadow for folders, pages and galleries*/
.sm-page-widget-folders .sm-tile, 
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
    border-radius: 15px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    width:90%[SIZE=5][COLOR=Red][B];[/B][/COLOR][/SIZE]
    box-shadow:5px 5px 5px black;
    }

    ...and that's what happens when I type something at 2am...Laughing.gif! Thanks!

    It should work because I added it (with the ';' using the Firebug tools and it worked.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    SierralewisSierralewis Registered Users Posts: 5 Beginner grinner
    edited March 5, 2014
    Hmmm... close but not all the way. The shadow appears in Firefox and IE but not Safari or Chrome (OS X & Win 7). I suspect that's what was happening before but it was only appearing in browsers I don't typically use. Adding the legacy webkit tags doesn't do anything--and it shouldn't with current releases of Safari and Chrome.

    Ideas?
  • Options
    phaserbeamphaserbeam Registered Users Posts: 452 Major grins
    edited March 5, 2014
    Sierralewis wrote: »
    Hmmm... close but not all the way. The shadow appears in Firefox and IE but not Safari or Chrome (OS X & Win 7).

    You can try to add the red line: 
    /* Round thumbnails and drop-shadow for folders, pages and galleries*/
.sm-page-widget-folders .sm-tile, 
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
    border-radius: 15px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    width:90%;
    box-shadow:5px 5px 5px black;
    [B][COLOR="Red"]-webkit-box-shadow:5px 5px 5px black;[/COLOR][/B]
}
  • Options
    SierralewisSierralewis Registered Users Posts: 5 Beginner grinner
    edited March 5, 2014
    The webkit syntax does not add a shadow with Safari or Chrome. I have tried a number of variations of it over the last few days.

    Is there something within the SM template that supersedes the box shadow code in CSS for those browsers?
  • Options
    phaserbeamphaserbeam Registered Users Posts: 452 Major grins
    edited March 5, 2014
    Sierralewis wrote: »
    Is there something within the SM template that supersedes the box shadow code in CSS for those browsers?

    Maybe you have some extra code that prevents the shadows from appear on the screen... or maybe Chrome handles some CSS elements different then the other browsers. I just installed ubuntu+chrome inside of a virtual machine and played a bit with some CSS code. The box shadow syntax does work for other elements, just not for the thumbs...

    I opened your /browse page and added this code and at least i get some shadows there now, see screenshot. You maybe need to remove the old box-shadow code or you may get two shadows on firefox and IE.

    EDIT: I think i found the problem... the -webkit-mask-image does overwrite the shadows. I tested the code below and on some thumbs on a gallery page i do not get round corners. I applied the mask-code and the shadow disappeared.
    .sm-page-widget-folders .sm-tile-content,
.sm-page-widget-galleries .sm-tile-content,
.sm-page-widget-nodes .sm-tile-content,
.sm-page-widget-pages .sm-tile-content {
    box-shadow:6px 6px 6px #222;
    margin: 0 10px 10px 0px;
    border-radius: 12px 12px 12px 12px;
}
.sm-page-widget-folders .sm-tile-info,
.sm-page-widget-galleries .sm-tile-info,
.sm-page-widget-nodes .sm-tile-info,
.sm-page-widget-pages .sm-tile-info {
    border-radius: 0px 0px 12px 12px;
}
  • Options
    SierralewisSierralewis Registered Users Posts: 5 Beginner grinner
    edited March 5, 2014
    Yes, that's the cross-browser challenge. I can have rounded corners on every thumbnail in every browser Or shadows in everyone one. But not both rounded corners and showdown in every browser.

    Here's the really inconsistent behavior with the code you suggested in Safari. Thumbnails based upon portrait aspect photos have consistently rounded corners. But thumbnails based upon landscape aspect photos may or may not. Resizing the browser window changes the relative location of thumbnails--and in some instances makes the rounded corners appear or disappear. Feels like I chasing ghosts.

    Update: I threw in the towel. Removed rounded corners from the thumbnails to make the shadows work.
Sign In or Register to comment.