More options for slideshow content block

phaserbeamphaserbeam Registered Users Posts: 452 Major grins
edited December 26, 2013 in SmugMug Feature Requests
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.

Comments

  • phaserbeamphaserbeam Registered Users Posts: 452 Major grins
    edited 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.
Sign In or Register to comment.