Slideshow Background

softleydoesit

I'm trying to set a different background than the primary colour for the full screen slideshow when clicking out of a gallery -- either a different colour or picture -- is this possible, at least make it match the rest of the site (which is a picture of a vignette at the moment)? I found the Theme Primary Colour, but I don't want to change the look of the whole site. Thx.

denisegoldberg

Assuming you're asking about the slideshow started by clicking the slideshow button, try this to change the background color:

.sm-slideshow{
    background:#ccc;
    }

Change the background color as desired. If you're looking for hex codes for colors, this is a site that I often use - https://www.december.com/html/spec/color.html.

You can use the CSS background property to specify an image but I would stay away from using an image as a background for a slideshow. Here's a link to a CSS Backgrounds help page - https://www.w3schools.com/css/css_background.asp.

denisegoldberg

You can add CSS to your theme:

• Customize...
• Content and design...
• Click Theme (on the right)
• Click the Wrench icon
• Click the Advanced tab
• Scroll down to Custom CSS and click Edit

Or you can add a CSS content block to your site.

softleydoesit

Thanks, Denise. The image I have in mind is this (sorry the pic is so big)....

It's already the background to the rest of my site and I think it would focus the slideshow well. I'd like to try a bunch of different ones because the white primary colour is too stark.

I'm guessing below is what I'd use

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;

Questions: The 'img.tree.png', do I have to find this somewhere (it's one of the files in a gallery), and I'd like to have it cover the whole page, the 'right top' isn't appropriate, what would be... and, I already have some CSS in my theme, can I add more?

Hikin' Mike

@softleydoesit said:
Questions: The 'img.tree.png', do I have to find this somewhere (it's one of the files in a gallery), and I'd like to have it cover the whole page, the 'right top' isn't appropriate, what would be... and, I already have some CSS in my theme, can I add more?

If you want to use an image as a background on your slideshow, you need this:

.sm-slideshow {
  background: url('url-of -the-image-here') no-repeat;
}

You will need the url of the image. You can find it by clicking on the Share button. You can add as much CSS as your heart desires.

softleydoesit

Thanks to both of you for your time. I've tried this on the entire site theme and sub themes for the galleries and adding blocks, not getting a slideshow background. I also like to add the background to the lightbox when a picture is clicked.

This is how the slideshow looks with Mike's CSS above added to the themes https://www.matthewsoftley.com/

Hikin' Mike

I'm not seeing a slideshow on your home page.

If you want to edit the lightbox, take a look at this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Customizing-the-Lightbox. You can add the background image like this:

/* Lightbox Background Color */
.sm-user-ui .sm-lightbox { background: #111 url('url-of -the-image-here') no-repeat;}

softleydoesit

I think my unfamiliarity with terms might have clouded what I'm asking for. There is no slideshow on the home page, it's not the slideshow block background I'm trying to change. What I'm trying to achieve is a consistency of background between home page, gallery, enlarged picture when clicked in gallery and the slideshow activated from the gallery. At the moment I have my vignette on home and gallery and white background for the enlarged picture and gallery slideshow. When I added the CSS above, Mike, I get a black background (which is an improvement) but not the picture url I've loaded.

Edit: I've switched the background to grey, which is best solid colour so far, but would still like to try the picture.

Hikin' Mike

Your url of the image is wrong, that's why it isn't working. You need to use the 'Share' to get that.

Once you've done that the image should show up. You can make the Gallery transparent so it will show your vignette by adding this:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-center {background-color: transparent !important;}

softleydoesit

OK, we're getting there. Thanks so much. This is where I'm at with the enlarged picture and gallery slideshow...

Thanks for the transparency code, the white body on the gallery is intentional.

Hikin' Mike

Again, this is wrong:

/* Lightbox Background Color */
.sm-user-ui .sm-lightbox { background: #A3A3A3 url(https://www.matthewsoftley.com/Vignettes/i-vspWTnv) no-repeat;}

The url 'https://www.matthewsoftley.com/Vignettes/i-vspWTnv' is NOT a picture, it is a gallery. Look at the screen shot above again.

softleydoesit

OK, I see. I've tried again with this link, which is to a picture, and same as before. https://photos.smugmug.com/Vignettes/i-vspWTnv/1/1c124d0c/XL/9-XL.png

denisegoldberg

@softleydoesit said:
OK, I see. I've tried again with this link, which is to a picture, and same as before. https://photos.smugmug.com/Vignettes/i-vspWTnv/1/1c124d0c/XL/9-XL.png

An XL-sized photo is quite small - and a photo won't be stretched. I'd recommend that you set the gallery to allow showing of Original-sized photos and try using the Original.

@Hikin' Mike what do you think?

softleydoesit

Thanks, Denise, another step along. Bigger picture but not centering or dynamically resizing to fullscreen or smaller browser views, full screen below.

Edit: Actually, the screen grab above is from x3, the one below is original picture, not resizing either.

Hikin' Mike

@denisegoldberg said:

@softleydoesit said:

@Hikin' Mike what do you think?

For a background, yes. Allow the original.

softleydoesit

Thank you both for you patience with me on this, much appreciated. Is is possible to make the original or X3 copies of my background dynamically resize? Neither of those files are at the moment, they remain static whether full screen or resizing the browser window..

Hikin' Mike

Your background image on your website doesn't dynamically re-size depending on screen sizes.

Anyway, you could probably use a few media queries to display different background sizes depending on monitor size.

@media screen and (max-width:736px) {

  .sm-user-ui .sm-lightbox { background: #A3A3A3 url(background-image-small-screen-here) no-repeat;}

}

@media screen and (min-width:737px) and (max-width:1024) {

  .sm-user-ui .sm-lightbox { background: #A3A3A3 url(background-image-medium-screen-here) no-repeat;}

}

@media screen and (min-width:1025px) {

  .sm-user-ui .sm-lightbox { background: #A3A3A3 url(background-image-large-screen-here) no-repeat;}

}

softleydoesit

Your background image on your website doesn't dynamically re-size depending on screen sizes.

The background appears to resize or stretch/shrink on the home page and galleries, can this look not be applied to the enlarged picture and gallery slideshow?

Hikin' Mike

@softleydoesit said:

Your background image on your website doesn't dynamically re-size depending on screen sizes.

The background appears to resize or stretch/shrink on the home page and galleries, can this look not be applied to the enlarged picture and gallery slideshow?

I can see it now, but there is no way to do that (that I can see) in the lightbox/slideshow.

Allen

Can this be applied to the lightbox/slideshow somehow?

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Hikin' Mike

@Allen said:
Can this be applied to the lightbox/slideshow somehow?

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

It didn't work for me (using just the web tool). They this if a user has a image as a background:

.sm-tile-limit-width {
    max-width: 100.5%;
    position: absolute;
    left: 0;
    right: 0;
}

I tried to set the lightbox/slideshow as transparent, but it just showed white.

MickMJM

Hi Folks Firstly I'm a newbie to CSS but I'd like to achieve exactly what Denise described in her first answer using black:

.sm-slideshow{
background:#000000;
}

Dumb question, but where do I paste the code please?

Thanks

Mick

Hikin' Mike

@MickMJM said:
Hi Folks Firstly I'm a newbie to CSS but I'd like to achieve exactly what Denise described in her first answer using black:

.sm-slideshow{
background:#000000;
}

Dumb question, but where do I paste the code please?

Thanks

Mick

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website