Coloring buttons/widgets

henkada

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

Hikin' Mike

What is your website?

henkada

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' Mike

You have this in your CSS:

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

Remove it.

henkada

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' Mike

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
}

henkada

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.

henkada

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' Mike

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

henkada

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' Mike

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;
        }

henkada

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' Mike

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.

henkada

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?

denisegoldberg

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

henkada

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

henkada

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' Mike

@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;
        }

henkada

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.

henkada

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' Mike

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