Adding [Download Photo] button next to [Buy Photo] button.

DreamStreetPortraits

Hello!

After clicking and expanding an image in a gallery you see the standard options to the top left (expand, slideshow, photo details, share, comments, download, and tools). These options are all displayed as icons. Towards the bottom left of this page a button [Buy Photo] is displayed.
I would like to create a [Download Photo] button to the left of the [Buy Photo] button for both desktop and mobile.

How is this possible and how can I customize it afterward?

I could try using my very limited CSS and HTML skills, but honestly, I don't know where to start.
Here is a link to the page in question https://www.dreamstreetportraits.com/Example/i-SzrmkrJ/A

Also, is there a way to add background and hover colours to the [Download] and [Info] buttons below the main image on the main gallery pages? Here is a link https://www.dreamstreetportraits.com/Example

Many thanks :)
Emrys.

Hikin' Mike

It is not possible to add a Download Photo button.

For your second question, yes it's possible. You need to remove the non-CSS that you placed in your Theme's Custom CSS Section: <font color="white">Dream Street Portrait!</font>. Once you've done this, add this:

/* Adds a Background Color to Info and Download Bottons */
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-image-info,
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome.sm-button-image-download {
  background: #5463F0;
  margin: 5px;
}

DreamStreetPortraits

Thank you Hikin' Mike!

It works great. Another quick question for you... How can I adjust the code to add a hover color?

Hikin' Mike

@DreamStreetPortraits said:
Thank you Hikin' Mike!

It works great. Another quick question for you... How can I adjust the code to add a hover color?

Add this:

/* Adds Hover for Buttons */
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-image-info:hover,
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome.sm-button-image-download:hover {background: #f00;}

DreamStreetPortraits

Thanks again, Mike!

With your help, I've managed to get everything the way I like it. Except there is one thing I can't figure out.

Basically, I would like the download all button to always display 'DOWNLOAD ALL' on all screen sizes without overlapping or looking strange.

Can you help? :smiley:

Hikin' Mike

Please remove the wrong/non-CSS code I asked for earlier.

This is NOT CSS and will break: <font color="white">Dream Street Portrait!</font>

DreamStreetPortraits

It has been removed properly this time. Thank you.

Hikin' Mike

@DreamStreetPortraits said:
Basically, I would like the download all button to always display 'DOWNLOAD ALL' on all screen sizes without overlapping or looking strange.

Add this to your Theme's Custom CSS Section.

/* Force 'Download All' button to display always */
.sm-user-ui .sm-gallery-cover-download-button:after {content: 'DOWNLOAD ALL';}

.sm-user-ui .sm-gallery-cover-download-button.sm-button-size-large.sm-button-square {width: 165px;}

DreamStreetPortraits

Great My hat off to you, sir!