Options
Fixing thumbnail frames
ChancyRat
Registered Users Posts: 2,141 Major grins
I would like to replicate Digital Grin's photo frames (thumbnails at the top of the site).
Plus my thumbs are kind of broken in one respect.
For folders and photos:
- I choose rounded corners, but the bottom corners remain squared.
- Hover over is the way to obtain a shadow effect currently - how can I make all have shadows by default, similar to DG?
- Then the hover would add a border, similar to DG, and the shadow effect doesn't go away either.
This is the CSS code I have that I think applies to thumbnails.
Thanks.
Plus my thumbs are kind of broken in one respect.
For folders and photos:
- I choose rounded corners, but the bottom corners remain squared.
- Hover over is the way to obtain a shadow effect currently - how can I make all have shadows by default, similar to DG?
- Then the hover would add a border, similar to DG, and the shadow effect doesn't go away either.
This is the CSS code I have that I think applies to thumbnails.
/* 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: 8px;
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
/* Round the images inside Collage Landscape or Collage Portrait galleries */
.sm-gallery-roworganic .sm-gallery-images .sm-tile, .sm-gallery-columnorganic .sm-gallery-images .sm-tile {
border-radius:8px;
overflow:hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
/*
* Instead of vertically centering portrait images within their tiles (a 50% shift downwards), only
* shift these by 25% in order to have a better chance of keeping people's heads in the frame.
*/
.sm-page-widget-galleries .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait,
.sm-page-widget-nodes .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait,
.sm-page-widget-pages .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait,
.sm-page-widget-folders .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait {
top: 25%;
-webkit-transform: translate(0,-25%);
-moz-transform: translate(0,-25%);
-ms-transform: translate(0,-25%);
-o-transform: translate(0,-25%);
-webkit-transform: translate(0,-25%);
transform: translate(0,-25%);
}
Thanks.
0