Gallery Button Customisation

Emrys

Hello!

I need to add the text 'DOWNLOAD ALL' and 'SLIDESHOW' to the buttons that appear up the top of a gallery on a desktop computer.

Also, I would very much like to add colour and text to the size and download buttons that appear once you have selected an individual photo in a gallery.

Any ideas how to do any of this would be marvelous! Thanks 🙂

Hikin' Mike

@Emrys said:
I need to add the text 'DOWNLOAD ALL' and 'SLIDESHOW' to the buttons that appear up the top of a gallery on a desktop computer.

This should work. Add it to your theme's custom CSS section.

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

  .sm-user-ui .sm-gallery-cover-buttons .sm-gallery-cover-download-button,
  .sm-user-ui .sm-gallery-cover-buttons .sm-gallery-cover-slideshow-button {width:auto;}

  .sm-gallery-cover-download-button:before {content:'DOWNLOAD ALL';}

  .sm-gallery-cover-slideshow-button:before {content:'SLIDESHOW';}

  .sm-gallery-cover-buy-button:before {content:'.';visibility:hidden;}

}

If this doesn't work, I need a link to a working/visible Gallery.

Emrys

Hello again Hikin' Mike!

Thank you, your code worked very well. I have a few tweaks that you may be able to help me with.

As you can see the Slideshow and Download All button seem to not be entirely centred. The text and icon are too far right. Any idea how to centre them?

To make it easier you can access the gallery titles "Rickard" with the password 'Jack'.

The other thing is...
On mobile devices (and can be seen from screen responsiveness test websites) when you select an image you can see the buy button (with blue background) and the download icon next to it on the left. My goal is to make the download button stand out more. So far, I have managed to give it a green background and added the text 'download' next to it in small screens. As you will see, the text looks completely horrible. Basically I need to increase the width of this particular mobile download button. Any ideas?

Thanks for all your help

Hikin' Mike

Well first off, I noticed you have this in your theme's custom CSS section: <font color="white">Dream Street Portrait!</font>. That is not CSS. It's HTML and needs to be removed.

You can add margin-right: 10px; on each of those added text. As an example:

.sm-gallery-cover-download-button:after {
  content:'DOWNLOAD ALL';
  margin-right: 10px;
}

I saw the other issue. Unfortunately the buttons disappear in a few seconds and I can't make them show again.

Emrys

Thanks! I know, the fact they disappear once the screen is inactive is frustrating. They should reappear once the user clicks anywhere on the screen.
This is the CSS I have added to that button so far... I Just need to make the button longer so the text can fit. As it is the text 'DOWNLOAD' mostly falls behind the 'BUY' button.

/* Add background colour to download button on small devices */
@media only screen and (max-width: 1200px){
.sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button {
background-color: #59FF66;}

/* Add the word "Download" after the download button */
@media only screen and (max-width: 1200px){
.sm-button.sm-button-image-download:after {
content: " Download" !important;
font-size: 95%;
padding-left: 2px;
}

Allen

You are missing a closing } on both @media rules.