Customizing the New Lightbox

1468910

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited August 29, 2019

    @blouie said:
    Hi Hikin' Mike,

    That didn't work.

    In order to get captions back with that code, I had to delete the code to hide the "View Photos Details" button. So the result is that I got the caption, and it was positioned and colored perfectly, but the unwanted "View Photo Details" button comes back, and the unwanted gray shading at the bottom of my image comes back.

    Remove this:

    .sm-position-relative>div {
     transform:scale(1)!important;
     cursor:default!important
    }
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
     display:none
    }
    
    

    Add this:
    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background:none;

    Honestly, it's getting harder to follow all of the different requests. It's probably best to create your own thread if you need more help.

  • JSS44JSS44 Registered Users Posts: 46 Big grins

    @Hikin' Mike said:

    Try this instead:

    .sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4 {color:black}
    

    Fantastic, much thanks.

  • JSS44JSS44 Registered Users Posts: 46 Big grins

    Can someone from Smugmug say whether the inability to show the title and caption for portrait oriented images is intentional? For images with a title, only the title shows. For images without a title, the caption shows. I would like it to be consistent with landscape images and show both all the time.

  • JtringJtring Registered Users Posts: 675 Major grins
    edited August 30, 2019

    @JSS44 said:
    Can someone from Smugmug say whether the inability to show the title and caption for portrait oriented images is intentional? For images with a title, only the title shows. For images without a title, the caption shows. I would like it to be consistent with landscape images and show both all the time.

    I'm not from SmugMug, and I too am interested in the answer here (and would personally prefer to have captions all the time).

    But let me add just a little since I'm working around this one too on my site. The distinction is not always landscape versus portrait. It's whether the bar at the bottom of the image is in "large" or "small" mode. In "large" mode, the buy button is full size and shows the words "Buy Photo", titles use the Heading 2 style, and one line of the caption is present. In "small" mode, the buy button just has the icon, titles use the smaller-font Heading 4 style, and the caption is suppressed. On my site, most portrait pictures stay in "large" mode but a few of the narrowest ones go to "small". The choice can change depending on browser zoom. I think SmugMug chooses the mode depending on the space available.

    (BTW, I much like your garden photography.)

    Jim Ringland . . . . . jtringl.smugmug.com
  • JSS44JSS44 Registered Users Posts: 46 Big grins

    @Jtring said:

    @JSS44 said:
    Can someone from Smugmug say whether the inability to show the title and caption for portrait oriented images is intentional? For images with a title, only the title shows. For images without a title, the caption shows. I would like it to be consistent with landscape images and show both all the time.

    I'm not from SmugMug, and I too am interested in the answer here (and would personally prefer to have captions all the time).

    But let me add just a little since I'm working around this one too on my site. The distinction is not always landscape versus portrait. It's whether the bar at the bottom of the image is in "large" or "small" mode. In "large" mode, the buy button is full size and shows the words "Buy Photo", titles use the Heading 2 style, and one line of the caption is present. In "small" mode, the buy button just has the icon, titles use the smaller-font Heading 4 style, and the caption is suppressed. On my site, most portrait pictures stay in "large" mode but a few of the narrowest ones go to "small". The choice can change depending on browser zoom. I think SmugMug chooses the mode depending on the space available.

    (BTW, I much like your garden photography.)

    Thank you! And thanks very much for the helpful explanation of what's going on.

  • polarispolaris Registered Users Posts: 15 Big grins

    Hi everyone

    I want to change the background of arrow icon to white and the arrow to black color on Lightbox (see the attached file photo). Does anyone know it? Please help. Thank you so much.!

  • rjwilnerrjwilner Registered Users Posts: 86 Big grins

    @leftquark said:

    @W.W. Webster said:
    Did I miss something earlier, or has there been a change in the last few days to include the caption as well as the title briefly at the foot of the Lightbox image?

    What code can I add to suppress the caption, i.e. just show the title?

    We added the caption back this afternoon based on feedback from many of you (and others outside of DGrin).

    Adding the caption back in has made things even worse here. Now one line of a caption appears....sometimes. But if the caption is essentially a 'paragraph', most of it comes up missing. And the way it's employed, any 'line breaks' and/or 'paragraph' formatting are totally ignored and everything entered as a 'caption' is smushed together into one long paragraph.

    At this point, I have to join those who have posted something along the lines of 'I just want the LB to work like it did before...with the ability to put the title/caption/buy button outside and below the image'. I see no end user benefits at all to the 'new' LB functionality. And the fact that any user desired changes to the default settings seems to require custom CSS to make happen is less than ideal. There are at least a handful of common pieces of functionality I've seen requested that should be incorporated into the 'Lightbox' configuration tool and not require custom CSS.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @polaris said:
    Hi everyone

    I want to change the background of arrow icon to white and the arrow to black color on Lightbox (see the attached file photo). Does anyone know it? Please help. Thank you so much.!

    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[aria-label="Next"],
    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[aria-label="Previous"] {
      background-color: white;
      color: black;
    }
    
  • polarispolaris Registered Users Posts: 15 Big grins

    Hi Mike

    Thank you so much for the CSS code. My site now looks better :) I highly appreciated of your help. Have a lovely weekend and happy holiday :)

  • pilotdavepilotdave Registered Users Posts: 785 Major grins

    Anyone know how to change the icons used in the new lightbox? I'd like to use the more universal "share" icon previously available through the smugmug icon font (character \E12A), and I'd like to change the photo info icon to the same "i" icon used in the smugmug style. Looks like they've made it quite a bit harder to customize than it used to be.

    Thanks,

    Dave

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited September 1, 2019

    @pilotdave said:
    Anyone know how to change the icons used in the new lightbox? I'd like to use the more universal "share" icon previously available through the smugmug icon font (character \E12A), and I'd like to change the photo info icon to the same "i" icon used in the smugmug style. Looks like they've made it quite a bit harder to customize than it used to be.

    Thanks,

    Dave

    This should work.

    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[aria-label="Share"],
    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[aria-label="Photo Details"] {width:0 ;}
    
    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[aria-label="Share"]::before,
    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[aria-label="Photo Details"]::before {
      font-family: 'SmugMug Icon Font Regular';
      font-size: 24px;
      margin-left: 30px;
      margin-top: -5px
    }
    
    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[aria-label="Share"]::before { content: '\E12A';}
    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[aria-label="Photo Details"]::before { content: '\E00B';} /* or E00A */
    
  • pilotdavepilotdave Registered Users Posts: 785 Major grins

    @Hikin' Mike said:

    This should work.

    Thanks! Still working out an alignment issue (very inconsistent behavior with the margin-left for some reason). But it nearly works!

    Dave

  • vadbvadb Registered Users Posts: 5 Big grins

    Can anyone from SmugMug team tell us when we can expect a stable version?

    Two weeks ago I spent half a day to customize the new lightbox (titles and captions mostly). Today I was about to publish a new album and found that most of my customization no longer worked! Had to spent another hour to fix it but since it relies on combination of tags and styles that are not documented and subject to change, I am almost sure that the next UI version will destroy my customization again. I can fix it again, but photography is just my hobby, I cannot test the site every day, and working with CSS is not a fun at all.

    Pleeeese, just give us a stable version...

  • blouieblouie Registered Users Posts: 77 Big grins
    edited September 10, 2019

    If I'm not mistaken, recently (maybe within the last week or so?) the "Close" popup on hover over 'X' has a new stylization (a bit fancier container around the word 'Close'). I just want to eliminate the popup altogether, and if I can't do that, then I don't want even more new stylization imposed on it.

    And I'm still waiting to be able to have captions back without enabling the "View Photo Details" button.

    I guess I'm just waiting for all of this to be fixed. On my Lightbox, I want only (1) the image, (2) the caption, (3) the X button. And no other buttons, shadings, popups or bubbles or anything else - just the way it was before the new lightbox.

  • BigRedBigRed Registered Users Posts: 288 Major grins

    Has anyone tried hiding the "Close" tooltip? I'm stumped with the CSS. Thanks!

    http://www.janicebrowne.com - Janice Browne Nature Art & Photography
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 11, 2019

    removed

    Where the heck is the delete button?

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,013 Major grins

    @BigRed said:
    Has anyone tried hiding the "Close" tooltip? I'm stumped with the CSS. Thanks!

    Me too, looks kinda redundant.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 19, 2019

    I see the scroll bar has been changed in Firefox for the lightbox, thanks. But it affected all the other scroll bars.
    I just went into a menu and added a link. I could barely see the scroll bar let alone find the slider anywhere to grab it.
    The slider need to be brighter.

    Actually I don't think one exists?
    EDIT: Now I see the scroll bar in FF but nothing glows when hovered like in Chrome.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • dragandjordjevicdragandjordjevic Registered Users Posts: 188 Major grins

    Hm for some reason css #9 does not work for me, both title and caption stay over the photo instead of going down. Any ideas what could it be? :/

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @dragandjordjevic said:
    Hm for some reason css #9 does not work for me, both title and caption stay over the photo instead of going down. Any ideas what could it be? :/

    I'm not seeing the code in your site. I tested this on your site using a webtool and it works. Make sure you put the code in your theme's custom CSS section. If you don't know how to do this, read "Add CSS to your Site" in my signature.

  • dragandjordjevicdragandjordjevic Registered Users Posts: 188 Major grins

    Mike thanks, I believe i got this... but I am a bit puzzled here. Is the code placing content under the photo only when you click on photo details? Or it gets the text off the photo entirely as soon as you open the LB?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @dragandjordjevic said:
    Mike thanks, I believe i got this... but I am a bit puzzled here. Is the code placing content under the photo only when you click on photo details? Or it gets the text off the photo entirely as soon as you open the LB?

    Just when you click the photo details.

  • dragandjordjevicdragandjordjevic Registered Users Posts: 188 Major grins

    Thanks once again, I was afraid this was the case.... photos look like a real mess with this new caption over them + watermark on the photo = mama mia...

  • JtringJtring Registered Users Posts: 675 Major grins

    @Allen said:
    I see the scroll bar has been changed in Firefox for the lightbox, thanks. But it affected all the other scroll bars.
    I just went into a menu and added a link. I could barely see the scroll bar let alone find the slider anywhere to grab it.
    The slider need to be brighter ...

    I've got to agree, both on the thanks and on the sense that the slider (the "thumb" in Mozilla's language) is now too hidden. Maybe up the alpha on the thumb color to have something like scrollbar-color: rgba(224,226,232,0.3) transparent; instead of the current scrollbar-color: rgba(224,226,232,0.1) transparent; ?

    It would be nice if the user CSS interpreter didn't strip the Firefox-appropriate scrollbar-color and scrollbar-width entries. It does forward the Chrome scrollbar formatting using ::-webkit-scrollbar. If these went through we could work this locally to taste.

    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 20, 2019

    Thanks for the clarification Jim. "slider (the "thumb" in Mozilla's language)"

    For the menu settings overlay I now "kinda" see a scroll bar in the Basic tab but none shows in the Link tab?
    Oops, now can barely see a ~3/16 inch high "thumb" under Link tab. It is ~1 1/5 inches under the Basic tab.

    I personally, would like the "thumb" hover to brighten rather then dim as it is.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JtringJtring Registered Users Posts: 675 Major grins
    edited September 21, 2019

    @Allen said:
    For the menu settings overlay I now "kinda" see a scroll bar in the Basic tab but none shows in the Link tab?
    Oops, now can barely see a ~3/16 inch high "thumb" under Link tab. It is ~1 1/5 inches under the Basic tab.

    The place where I feel this change the most is in Carousel displays. I'll not post a screen shot, but see the Carousel displays at the very bottom of this gallery first under Firefox, where the horizontal scroll bar is almost invisible, and then under Chrome, where I've applied user CSS to widen the scrollbar and lighten the thumb. It would be nice -- and browser-equitable -- for SmugMug's user CSS interpreter to forward Firefox scrollbar CSS as it does the -webkit stuff.

    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen Registered Users Posts: 10,013 Major grins

    I had no idea what you were referring to, look up and down and found nothing, then at very close observation I think there might be a scroll bar. Sure enough it is. I would guess that maybe 10% of viewers might see it.

    I looked at one of your panoramas in lightbox and one click zoom to a very out of focus view.
    Then at least 10 seconds it popped into focus. I almost didn't wait to see what happens.
    Actually I went back to see this, first time I left LB before focus happened.

    This is as bad of watching some videos I uploaded last week. I watched a 24 sec.video that was out of focus for half of it.
    Every video took about 12 sec to pop in focus.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 21, 2019

    I would much prefer that only a loading wheel show until the whole photo/video loads IN FOCUS.
    I do not want visitors to be seeing an out of focus image of anything.
    Personally, I would not wait for the focus to appear and leave the page.
    (Watching a video out of focus for ~12 sec is a long time)
    BTW, I'm on 200meg download.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    Keep in mind that Firefox does not support the standard scrollbar CSS and its options are very limited (for example you can specify only that you want a "thin" scrollbar). Not much room to tweak that other than reach out to Firefox and let them know you'd like them to support additional scrollbar customization. We've reached out ourselves but your voices can go a lot further.

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen Registered Users Posts: 10,013 Major grins

    @leftquark said:
    Keep in mind that Firefox does not support the standard scrollbar CSS and its options are very limited (for example you can specify only that you want a "thin" scrollbar). Not much room to tweak that other than reach out to Firefox and let them know you'd like them to support additional scrollbar customization. We've reached out ourselves but your voices can go a lot further.

    Thanks. I guess I can live with it but the problem is visitors have no clue.

    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.