Resizing the Slideshow/Buy buttons in Galleries

avman

I have searched the forum for an answer and I might have missed it. So, is there site wide CSS that will a) Resize the Slideshow and the buy buttons at the top of the galleries? b) Change the color? (I would like it to match my menu buttons) c) Change the color when hovering over them? Thank you for your assistance....Respectfully.....Tom

Hikin' Mike

.sm-user-ui .sm-gallery-header .sm-button-skin-default,
.sm-user-ui .sm-gallery-header .sm-button-skin-accent {
    padding: .75rem 1.5rem;
    font-size: 1rem;
    margin:0 5px;
    border: 1px solid yellow;
    background-color: orange;
    color: yellow;
    }   

.sm-user-ui .sm-gallery-header .sm-button-skin-default:hover,
.sm-user-ui .sm-gallery-header .sm-button-skin-accent:hover {
    border-color: blue;
    background-color: red;
    color: blue;
    }

avman

Thank you. This works somewhat in my galleries. However, there is an excessive amount of padding and, the buttons do not change when I hover over them. Any suggestions? Thank you ......Tom

Hikin' Mike

@avman said:
Thank you. This works somewhat in my galleries. However, there is an excessive amount of padding and, the buttons do not change when I hover over them. Any suggestions? Thank you ......Tom

You have some much code that it's over-riding the code I posted. That said, find and remove this:

.sm-user-ui .sm-gallery-header .sm-button-skin-default,
.sm-user-ui .sm-gallery-header .sm-button-skin-accent {
    padding: .75rem 1.5rem;
    font-size: 1rem;
    margin:0 5px;
    border: 1px solid yellow;
    background-color: orange;
    color: yellow;
    }   

.sm-user-ui .sm-gallery-header .sm-button-skin-default:hover,
.sm-user-ui .sm-gallery-header .sm-button-skin-accent:hover {
    border-color: blue;
    background-color: red;
    color: blue;
    }


/* Make the slideshow, download and buy buttons smaller */
.sm-gallery-cover .sm-button-size-large {
   font-family:verdana,georgia,times,arial!important;
   font-size:12px!important;  
   color: #FFFF00!important;
   background-color: #FD5F00;
   padding: 1px!important;
   border: 3px solid!important;
   border-color: #FFFF00!important;
}

Add this instead

/* Make the slideshow, download and buy buttons smaller */
.sm-user-ui .sm-gallery-cover .sm-button-size-large {
    font-family: verdana,georgia,times,arial;
    font-size: 12px;  
    color: #FFFF00;
    background-color: #FD5F00;
    padding: 1px;
    border: 3px solid #FFFF00;
    border-radius: 6px;   
    }

    .sm-user-ui .sm-gallery-cover .sm-button-size-large:hover {
        background-color: #000080;
        border-color:#FF0000;
        }

I would say 98% of the time, you DO NOT NEED to add the !important tag. Just put .sm-user-ui before the code like this:

.sm-user-ui .sm-gallery-header .sm-button-skin-default {

}

avman

Thank you Mike. It is working. No border is visible though. Thank you again.....Tom

avman

I got it Mike! Thank You! Thank You! Thank You! inserting .sm-user-ui made the code operational as I has envisioned. Thank You! You must have the patience of a saint to deal with the cross section of people on a daily basis....Tom

Hikin' Mike

@avman said:
I got it Mike! Thank You! Thank You! Thank You! inserting .sm-user-ui made the code operational as I has envisioned. Thank You! You must have the patience of a saint to deal with the cross section of people on a daily basis....Tom

My wife got a kick out the "...patience of a saint" part. I'm really not in real life, but I play one online...lol!

Sorry, I forgot to add that to the code I posted above. I edited the code.

avman

Thanks for putting it there, I was able to figure it out.....Thanks again....You have to have patience dealing with all of us posers and assisting us when we venture where we shouldn't go....Tom

Hikin' Mike

@avman said:
You have to have patience dealing with all of us posers and assisting us when we venture where we shouldn't go....Tom

Everybody has to start as a beginner.

Kentinada

Hi, I tried adding a CSS block to the end of my homepage with the code from above but it doesn't make my slideshow smaller. I must be missing something. Can you help with a little more info on how to do this? Thanks!

Hikin' Mike

@Kentinada said:
Hi, I tried adding a CSS block to the end of my homepage with the code from above but it doesn't make my slideshow smaller. I must be missing something. Can you help with a little more info on how to do this? Thanks!

Two things.

First - It would be better if you created a NEW thread.
Second - It would be helpful if you post your site.

Kentinada

Sorry Mike. I thought it was appropriate to add to this thread since I was interested in the same topic. I'll start a new one. I did find where to add the CSS code but I still have another question so I'll start a new thread. Thanks.