Resizing the Slideshow/Buy buttons in Galleries

avmanavman Registered Users Posts: 60 Big grins

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

I really don't have anything nifty to say so I will remain quiet and observe!

Tom

http://avman.smugmug.com/

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    .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;
        }
    
  • avmanavman Registered Users Posts: 60 Big grins

    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

    I really don't have anything nifty to say so I will remain quiet and observe!

    Tom

    http://avman.smugmug.com/
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited July 18, 2017

    @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 {
    
    }
    
  • avmanavman Registered Users Posts: 60 Big grins

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

    I really don't have anything nifty to say so I will remain quiet and observe!

    Tom

    http://avman.smugmug.com/
  • avmanavman Registered Users Posts: 60 Big grins

    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

    I really don't have anything nifty to say so I will remain quiet and observe!

    Tom

    http://avman.smugmug.com/
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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.

  • avmanavman Registered Users Posts: 60 Big grins

    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

    I really don't have anything nifty to say so I will remain quiet and observe!

    Tom

    http://avman.smugmug.com/
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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. B)

  • KentinadaKentinada Registered Users Posts: 54 Big grins

    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!

    web: www.adahighlanderphotography.com
    FB: www.facebook.com/adahighlanderphotography.com
    blog: blog.adahighlanderphotography.com

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 28, 2017

    @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.

  • KentinadaKentinada Registered Users Posts: 54 Big grins

    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.

    web: www.adahighlanderphotography.com
    FB: www.facebook.com/adahighlanderphotography.com
    blog: blog.adahighlanderphotography.com

Sign In or Register to comment.