More options for slideshow content block

phaserbeam · December 23, 2013

Would be nice if the slideshow content block would allow to switch between info bar "under" and "over" (currently the default). Currently the info bar with titles/captions overlaps with the photo....

Also please allow to center captions and or titles since if you have landscape and collage style photos in a slideshow your have to move your eyes from the left to the center if the image orientation varies. I would like to see the captions/titles centered, more easy to read across multiple photos.

phaserbeam · December 26, 2013

Just for the record, this "feature request" has been done by Lamah using some custom CSS

I made some more changes and this is what me is using here:

body {
  overflow:hidden!important;
}

.sm-user-ui .sm-slideshow {
    /* 
     * Shift the top of the slideshow block down the page so the JS reserves less vertical height for the image.
     *
     * Add 12 pixels of extra margin too so there's some consistency with the bottom of the slideshow (which always reserves 12px by JS).
     */
    margin-top:46px; 
}
.sm-user-ui .sm-slideshow .sm-slideshow-tile {
    top:-34px; /* Move the content back up to where it should have started */
}
.sm-user-ui .sm-slideshow,
.sm-user-ui .sm-slideshow .sm-tile-content {
    overflow:visible;
}
/* Set font and line heights explicitly so we can reserve the right amount of space at the top of the slideshow */
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info,
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info p {
    font-size:1.1em;    
    line-height:1.3em!important;
    padding:0;
    text-align:center;
    color:#ccc;
    background:none;
}
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info {
    padding:10px 16px;    
    height:34px; /* 14px font height plus two lots of 10px vertical padding */
    position:relative;
    overflow:hidden;
}
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info p {
    height:1.2em;
}
.sm-user-ui .sm-slideshow .sm-tile-content .sm-tile-info p ~ p {
    /* Only permit one line of text to be displayed (so our height allocation for the caption is fixed) */
    display:none;
}

If you wonder about this code:

body {
   overflow:hidden!important;
}

This is only to hide the vertical scrollbars in the browser window.

More options for slideshow content block

Comments