Putting a background behind the new Lightbox title and making the "buy" button less obtrusive

camner

I've managed to figure out how to make the "Buy Photo" button less obtrusive in the new Lightbox with this CSS:

/*****************************************************
   Customize the Buy button in the Lightbox */
    /*Omit the label */
    .sm-lightbox-v2-photo-buttons .sm-lightbox-buy-button .sm-button-label {
    display: none;
}
   /*shrink the button size and decrease opacity */
.sm-user-ui .sm-lightbox-v2-photo-buttons .sm-lightbox-buy-button {
    min-width: 30px;
    width: 0px;
    padding: 3px;
    min-height: 30px;
    height: 0px;
    opacity: .7;
}

The only problem with this is that the "Buy" button is now justified at the top of its container, so it is no longer even with the Title. I can't figure out how to vertically center (or align with the baseline, either would do).

A second mod I would like to make is to put a background behind the Title so it stands out better against the photo itself, but I can't figure out how to address that element. I don't just want to address the Title text itself with a background color because I want to be able to control the opacity of the background separately from the Title text itself.

Hikin' Mike

Looks like you figured it out?

Also, Please add your website to your signature so others don't have to search for your website.

camner

No, not really. @Lille Ulven kindly suggested this:

/* Put background behind title in Lightbox */
.sm-user-ui .sm-lightbox-v2-photo-title {
  background-color: black !important; 
  opacity: .7;
}

But this also makes the Title more transparent. I'd prefer more transparency to the background and less to the Title, if I could. An opacity of .7 is a reasonable compromise if there's not a good way to address via CSS the background separately from the text of the Title

Hikin' Mike

Use this instead. Adjust the 0.7 (70% opacity) to suit.

/* Put background behind title in Lightbox */
.sm-user-ui .sm-button.sm-button-nochrome.sm-lightbox-v2-photo-title {
  background-color: rgba( 0, 0, 0, 0.7 );
}

Allen

Added a few tweaks. Shrunk background to better fit and added a radius to background.

/* Added background behind overlay of photo title in Lightbox */
.sm-user-ui .sm-button.sm-button-nochrome.sm-lightbox-v2-photo-title {
  background-color: rgba( 0, 0, 0, 0.3 );
  height:30px; 
  border-radius: 8px;
}

camner

@Hikin' Mike said:

Use this instead. Adjust the 0.7 (70% opacity) to suit.

/* Put background behind title in Lightbox */
.sm-user-ui .sm-button.sm-button-nochrome.sm-lightbox-v2-photo-title {
  background-color: rgba( 0, 0, 0, 0.7 );
}

I’ll give it a whirl; thanks.

In my haste to reply last evening, I forgot to mention that my “solution” to repositioning the shrunken “Buy” button in the Lightbox was a kludge that is far less than ideal.

I added position: relative; top:18px; to the CSS, which pushed the button down. That’s not a good solution because as the size of the screen changes (either due to being viewed on different size screens or the user changing the window size), the fixed 18px moves the buy box off the baseline. What I really need (but can’t figure out because I’m not adept enough at CSS3) is how to put the box along along the baseline so that regardless of how the screen appears, the box stays bottom aligned. And, to be honest, I’m not 100% sure that’s a great solution, either. As I changed the size and aspect ratio of the window, I noticed that SM does all kinds of adaptive tweaks...the size of the Title shrinks, and if the window gets small enough, the Title pops out of being on top of the photo and jumps below the photo (the Buy button doesn’t exhibit the same behavior, but I haven’t tested yet whether that’s because of my mods or is part of SM’s plan...)

The challenge in addressing these great adaptations (to screen sizes) that SM makes is that both the HTML and the CSS selectors SM uses change, as well. For example, in my first attempt at deleting the text from the Buy button at certain window sizes the label text reappeared in a larger button and I had to figure out what was constant about the selectors across the various different adaptations. I haven’t yet tried seeing what this will look like on my iPhone...

camner

@Hikin' Mike said:
Use this instead. Adjust the 0.7 (70% opacity) to suit.

/* Put background behind title in Lightbox */
.sm-user-ui .sm-button.sm-button-nochrome.sm-lightbox-v2-photo-title {
  background-color: rgba( 0, 0, 0, 0.7 );
}

Do you know what the .sm-button-nochrome is intended for? Is that a reference to the browser, or is that another use of the word “chrome”? I was wondering if that selector is intended to make things work better for non-Chrome browsers or has some other purpose.

Hikin' Mike

@camner said:
Do you know what the .sm-button-nochrome is intended for? Is that a reference to the browser, or is that another use of the word “chrome”? I was wondering if that selector is intended to make things work better for non-Chrome browsers or has some other purpose.

Getting VERY familiar with the types of buttons lately The .sm-button-nochrome is a transparent background for things like icons. Going to guess the "chrome" refers to a physical background button, like your Buy button. NoChrome refers to buttons with no background.

camner

@Allen said:
Added a few tweaks. Shrunk background to better fit and added a radius to background.

/* Added background behind overlay of photo title in Lightbox */
.sm-user-ui .sm-button.sm-button-nochrome.sm-lightbox-v2-photo-title {
  background-color: rgba( 0, 0, 0, 0.3 );
  height:30px; 
  border-radius: 8px;
}

I like it! Thanks for passing this on!

Does the fixed height of 30px work well as one changes the size of the viewport? I wonder if changing the height to be in ems or % might work well.

camner

I just realized that using a fixed height of 30px for the Title background makes things look funky when the image displayed also has a caption. I changed that line to padding: 5px 5px 0px 5px; which put the darkened background behind the Title + Caption combination.