Coloring buttons/widgets

henkadahenkada Registered Users Posts: 12 Big grins
I am a new Smug now and have the following question:

I want to color buttons in the Lightbox :) , I mean the Slide arrow, left below the Lightbox and the buttons left below the Lightbox
They are white now and that’s why they are elegible on an offwhite panel.
Do you have any idea to fix this , a code maybe?

Henk

Comments

  • henkadahenkada Registered Users Posts: 12 Big grins
    Hi Mike,
    I get this reaction when I post my URL:
    You have to be around for a little while longer before you can post links.
    Hope it helps if you Google henktermaten photography com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    You have this in your CSS:

    .sm-lightbox-panel{
        background-color: #fffbeb !important;
        }
    

    Remove it.

  • henkadahenkada Registered Users Posts: 12 Big grins
    Thanks for your advice.
    But then I get a black Lightbox, I do want that color that you saw.
    I want to have darker color customized.
    Is that possible?
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    Then you need this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Customizing-the-Lightbox

    Then you have to REMOVE this in your current CSS:

    .sm-lightbox-title {
        font-size: 26px!important;
        color: #000!important
    }
    
    .sm-lightbox-caption {
        font-size: 14px!important;
        color: #9c8d73!important
    }
    
    .sm-lightbox-panel {
        background-color: #fffbeb!important
    }
    
  • henkadahenkada Registered Users Posts: 12 Big grins
    Sorry, but I don't see any change in my background- color #fffbeb of my lightbox-panel. AND that's what I want, this color with darker fonts/widgets/buttons..

    If I do a copy/paste of your customizing everything stays the same black background of the lightbox, when I change the color in your lightbox configuration from #111 to #fffbeb nothing happens, however I deleted my customizing.
  • henkadahenkada Registered Users Posts: 12 Big grins
    Maybe there is a misunderstanding, due to my English and the tech. language. But as I said before, look at my site at Portugal>Batalha and click on the first photo.
    What you see is a black background color of the lightbox and a offwhite color #fffbeb for the Light panel, with dark texts and that's OK so far for me.
    I only ask for a code for the left and right buttons: Slide, Share, Tools, Download and Size.
    Can you give me that.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @henkada said:
    Maybe there is a misunderstanding, due to my English and the tech. language.

    Could be.

    But as I said before, look at my site at Portugal>Batalha and click on the first photo.

    What you see is a black background color of the lightbox and a offwhite color #fffbeb for the Light panel, with dark texts and that's OK so far for me.

    I only ask for a code for the left and right buttons: Slide, Share, Tools, Download and Size.

    Can you give me that.

    That helps. Try adding this. If this isn't what you're looking for, I'll need screenshots.

    .sm-user-ui .sm-lightbox-info-expand .sm-fonticon,  
    .sm-user-ui .sm-fonticon-Tags,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-PlayerPlay,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Action,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Comment,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Sizes {
        color: #333;
            /* Transitions */
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
        }
    
            /* Hover Color */
        .sm-user-ui .sm-lightbox-info-expand:hover .sm-fonticon,
        .sm-user-ui .sm-fonticon-Tags:hover,    
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-PlayerPlay,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Action,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Comment,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Sizes {
            color: #000;
            }
    

    If you don't want the transitions, you can remove them.

  • henkadahenkada Registered Users Posts: 12 Big grins

    Hi Mike, thanks for your effort.
    I send what you ask for. Your code gives not the color of the Light PANEL.

    The image of the first one shows the background and text color of the Light BOX, which I think it's OK.
    The second image shows a black Panel with white text, due to** your code**.
    The third, my code, one shows a off white Panel with correct text colors for me. But without dark color of the Buttons as i wrote before.Which I want.

    . First one
    . Second one
    . Third one

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 12, 2018

    The first two examples are not the Lightbox and they look the same. The third on IS the lightbox.

    Is this what you want? If it is, I've already posted the code.

    This is the code again:

    .sm-user-ui .sm-lightbox-info-expand .sm-fonticon,  
    .sm-user-ui .sm-fonticon-Tags,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-PlayerPlay,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Action,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Comment,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Sizes {
        color: #333;
            /* Transitions */
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
        }
    
            /* Hover Color */
        .sm-user-ui .sm-lightbox-info-expand:hover .sm-fonticon,
        .sm-user-ui .sm-fonticon-Tags:hover,    
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-PlayerPlay,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Action,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Comment,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Sizes {
            color: #000;
            }
    
  • henkadahenkada Registered Users Posts: 12 Big grins

    Indeed, that's the image I want!
    But the code you send twice does not give that result.
    Again, it gives me a black background and white text. See the attachment.

    Are we both stupid, I don't think so Mike. Also after bringing in another color code did not help.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 14, 2018

    I'm having a tough time believing that adding the code I posted will remove code that has nothing to do with the background. You shouldn't have to add the !important tag, bit I included it this time. Add this to your CSS. Do NOT remove anything in your CSS, just add:

    .sm-user-ui .sm-lightbox-info-expand .sm-fonticon,  
    .sm-user-ui .sm-fonticon-Tags,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-PlayerPlay,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Action,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Comment,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Sizes {
        color: #333 !important;
            /* Transitions */
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
        }
    
            /* Hover Color */
        .sm-user-ui .sm-lightbox-info-expand:hover .sm-fonticon,
        .sm-user-ui .sm-fonticon-Tags:hover,    
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-PlayerPlay,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Action,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Comment,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Sizes {
            color: #000 !important;
            }
    

    If this DOESN'T work you must leave the code in place so I can see it.

  • henkadahenkada Registered Users Posts: 12 Big grins

    Mike,
    DONE. Finally it WORKS!!!!
    Many thanks for all your effort. GREAT.
    One more thing: what do you mean with the word transition in your code?

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator

    @henkada said:
    what do you mean with the word transition in your code?

    Take a look at this - https://www.w3schools.com/css/css3_transitions.asp.

  • henkadahenkada Registered Users Posts: 12 Big grins

    This is what I asked for. Thank you so much.

  • henkadahenkada Registered Users Posts: 12 Big grins

    Hi Mike,
    Again. Sorry. The Info button don't show up in the color black. The others do, which by the way you arranged. I think the Info button is not in your code.
    Please can you fix this?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @henkada said:
    Hi Mike,
    Again. Sorry. The Info button don't show up in the color black. The others do, which by the way you arranged. I think the Info button is not in your code.
    Please can you fix this?

    You said:

    @henkada said:
    I only ask for a code for the left and right buttons: Slide, Share, Tools, Download and Size.

    Can you give me that.

    I added the Info:

    .sm-user-ui .sm-lightbox-info-expand .sm-fonticon,  
    .sm-user-ui .sm-fonticon-Tags,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-InfoEncircled,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-PlayerPlay,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Action,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Comment,
    .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon.sm-fonticon-Sizes {
        color: #333 !important;
            /* Transitions */
        -webkit-transition: all 0.4s ease-in-out;
           -moz-transition: all 0.4s ease-in-out;
             -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
        }
    
            /* Hover Color */
        .sm-user-ui .sm-lightbox-info-expand:hover .sm-fonticon,
        .sm-user-ui .sm-fonticon-Tags:hover,  
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-InfoEncircled,    
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-PlayerPlay,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Action,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Comment,
        .sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon.sm-fonticon-Sizes {
            color: #000 !important;
            }
    
  • henkadahenkada Registered Users Posts: 12 Big grins

    It looks so simple, but for me it is Not.

    It works. Thanks for your effort and Yes that's what I asked for at the first time.

    You are GREAT.

  • henkadahenkada Registered Users Posts: 12 Big grins

    Hi Mike,
    Is there a possibility to copy and paste other lettertypes/fonts from, for instance a Word doc. to a Text block in my SmugMug website?
    If yes, how to do it?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @henkada said:
    Hi Mike,
    Is there a possibility to copy and paste other lettertypes/fonts from, for instance a Word doc. to a Text block in my SmugMug website?
    If yes, how to do it?

    Not using a Text Block. You will need a HTML/CSS block, but you just can't just copy/paste from a Word Doc. If you are adding more fonts, there are two ways of doing it. If you are using Google Fonts read here: https://www.aaronmphotography.com/Customizations/Fonts-Links/Google-Fonts

    If you are using non-Google Fonts, read this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

    Regardless, you should NEVER use Word to code (HTML/CSS). Use a text editor like Notepad or what I use, Notepad++.

Sign In or Register to comment.