Custom buttons lightbox

Galorbe · September 26, 2013

Hello.
I am French, I speak very little English, but I'm optimistic :-)

Following your advice (thank you again), I managed to change the background color of my lightbox (white => dark). Only now, the "<" ">" "buttons Esc ..." out too. I would remove the bottom (gray) buttons to keep only the arrows or "esc".
How can I do this?
Thank you to you.

url : www.galorbe.com

("Bonjour.
Suite à vos conseils (merci encore), j'ai réussi à changer la couleur de fond de ma lightbox (blanc => sombre). Seulement maintenant, les boutons "<" ">" "Echap..." ressortent trop. J'aimerais supprimer le fond (gris) des boutons pour ne garder que les fleches ou "echap".
Comment puis je faire ceci ?
Merci à vous.")

Hikin' Mike · September 26, 2013

Here is what I'm using. Change the color to suit. You can remove the border of the button if you wish.

    /* Slideshow Button */
.sm-user-ui .sm-gallery-slideshow-button .sm-button-skin-default {
    background:#CFC1AD; 
    border:1px solid #9e948d;
    }
.sm-user-ui .sm-gallery-slideshow-button .sm-button-skin-default:hover {
    background:#DFD0BB; 
    border-color:#ada59d;
    color:#3B2728;
    }

Hikin' Mike · September 26, 2013

After reading your post again, I realized that changing the buttons wasn't what you wanted. I'm not sure I understand what you want.

Galorbe · September 26, 2013

Hello Mike.
Thank you for your help, unfortunately it does not work, there is no change. I'll try to explain what I want:
Currently, I see the navigation buttons like this:

And I'd like to see here:

I took pictures because my English is very bad, and google translation limits;-)

Ie only see the arrows, without the frame around.
Same for the exit button.
A big thank you again for your help.
(I use the new smugmug)

Galorbe · September 26, 2013

I want it to be exactly like your smugmug! (nice pictures!)

Hikin' Mike · September 26, 2013

I may be wrong, but I don't think you can change those buttons because it's "linked" to your lightbox background colors.

Hikin' Mike · September 26, 2013

Galorbe wrote: »

I want it to be exactly like your smugmug! (nice pictures!)

Thanks!

Try this to change the arrow background:

.sm-lightbox .sm-lightbox-nav .sm-button {
    background: #000;
    }

This changes the arrows:

.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
    color: white;
    }

Galorbe · September 26, 2013

Inspiring me with your css, I managed to remove the background around the arrow by it against me is a gray box that I can not delete.
I get depressed ....

Hikin' Mike · September 26, 2013

Galorbe wrote: »

Inspiring me with your css, I managed to remove the background around the arrow by it against me is a gray box that I can not delete.
I get depressed ....

I looked at your site and I don't see the gray border.

Galorbe · September 26, 2013

I think it's because I was only preview. Now it's online.

Hikin' Mike · September 26, 2013

Since you have your Right-Click protection on, I can't use the Firebug tool to help remove the gray areas.

Galorbe · September 26, 2013

Oh sorry, it's ok for http://www.galorbe.com/Categorie/Des-gens/Des-rencontres/Souvigneries

Hikin' Mike · September 26, 2013

Try this:

:root * > .sm-user-ui .sm-lightbox .sm-lightbox-panel, 
*:root * > .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button,
*:root * > .sm-user-ui .sm-lightbox .sm-lightbox-nav {
    background-color: rgba(0, 0, 0, 0);
	}

Galorbe · September 26, 2013

Yes!! That's it!
A huge thank you to you, actually, I could not find it myself!
merciiiiii !!!! :-)

Hikin' Mike · September 26, 2013

Glad to help!

I'm not a "people photographer", but you have some nice images on your site.

Galorbe · September 26, 2013

thank you very much :-)

ko04 · September 28, 2013

Sorry but I had to comment on how amazing your portraits are by the way, glad you were able to get your website figured out Mike is always a big help!

Galorbe · September 29, 2013

Thank you for your comment Ko.

corpuzrob · September 24, 2014

Ahhh, I was looking for this, thanks! @Hikin' Mike, is there a way to get rid of the shadow around the navigation arrow button when it's clicked on?

Hikin' Mike · September 24, 2014

corpuzrob wrote: »

Ahhh, I was looking for this, thanks! @Hikin' Mike, is there a way to get rid of the shadow around the navigation arrow button when it's clicked on?

I need a link to your site, or a link to your gallery. I'm not seeing a shadow on my site.

corpuzrob · September 25, 2014

Hi Mike, thank you so much for replying. Here's my site: http://www.robcorpuz.com/

I just realized that I only see the shadow in Chrome (not Firefox or Safari, and I haven't yet checked IE). Basically I would like to change the shape of the lightbox navigation, close, and full-screen buttons into circles (to match other buttons on my site), or at least keep the rounded edges, without the rectangular shadow popping up when a button is clicked. Or, alternatively, to keep the shadows but have them fit/match whatever shape I have set for the buttons. Here's a screenshot of how it looks in Chrome:

I also realized that some of the changes I tried to make to the lightbox don't appear at all in Firefox (customized shape, margins and regular/hover color of buttons, hover color for icons, and custom background, etc.) Is there some code I can add that will make these changes appear in Firefox?

Thanks again!

-Rob

Hikin' Mike · September 25, 2014

I'm not seeing that using Chrome either, sorry.

Hikin' Mike · September 25, 2014

I had to re-size my monitor to see this...

corpuzrob · September 25, 2014

Hi Mike,

Thanks for your reply! I'm not sure I understand what you mean by: "I had to re-size my monitor to see this..." Did you mean that the sizing of my site looks off on your screen?

I had just checked on another computer (Windows) in Chrome and also so the rectangular shadow when clicking on the navigation arrow, but it was blue rather than grey like on my laptop.

Thanks again, Mike)

Hikin' Mike · September 25, 2014

corpuzrob wrote: »

Hi Mike,

Thanks for your reply! I'm not sure I understand what you mean by: "I had to re-size my monitor to see this..." Did you mean that the sizing of my site looks off on your screen?

I had just checked on another computer (Windows) in Chrome and also so the rectangular shadow when clicking on the navigation arrow, but it was blue rather than grey like on my laptop.

Thanks again, Mike)

Yes, I have a smaller monitor than you.

Hikin' Mike · September 25, 2014

Also, I'm still using XP...

corpuzrob · September 25, 2014

For anyone who sees this thread and is curious, I did finally stumble upon a way to disable the shadow/outline that pops up when clicking on the navigation buttons in lightbox (I added a link to the site thread below). You can add the following:

.sm-lightbox .sm-lightbox-nav .sm-button:focus {
outline: none;
}

However, it appears that this outline is there in Chrome so that viewers that have disabilities and aren't able to use a mouse can use just the keyboard and tab to the button they need, so this is really not a great solution. I'm not sure how to change the focus so that it fits the shape of the button, so if anyone has any suggestions, I'll be happy to hear them :^) Here's the link to the site I got this info from:

http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

Thanks again Mike, your time is greatly appreciated and your suggestions have been a really great help to me. A couple of days ago I briefly checked what my site looked like on a computer that I think was using XP and I cringed, so I hope you won't judge me too harshly) I'm definitely finding it difficult to keep everything looking the way I'd like it to on the many variations of browsers and screen sizes!

-Rob

Hikin' Mike · September 25, 2014

corpuzrob wrote: »

For anyone who sees this thread and is curious, I did finally stumble upon a way to disable the shadow/outline that pops up when clicking on the navigation buttons in lightbox (I added a link to the site thread below). You can add the following:

.sm-lightbox .sm-lightbox-nav .sm-button:focus {
outline: none;
}

However, it appears that this outline is there in Chrome so that viewers that have disabilities and aren't able to use a mouse can use just the keyboard and tab to the button they need, so this is really not a great solution. I'm not sure how to change the focus so that it fits the shape of the button, so if anyone has any suggestions, I'll be happy to hear them :^) Here's the link to the site I got this info from:

http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

Thanks again Mike, your time is greatly appreciated and your suggestions have been a really great help to me. A couple of days ago I briefly checked what my site looked like on a computer that I think was using XP and I cringed, so I hope you won't judge me too harshly) I'm definitely finding it difficult to keep everything looking the way I'd like it to on the many variations of browsers and screen sizes!

-Rob

It could be a IE issue and not XP. I use XP with the latest FF, and I didn't see any issues as far as 'cringing'. I know older versions of IE are terrible.

corpuzrob · September 26, 2014

For anyone who comes across this thread, I read here that it's ok to get rid of the outlines if you do some styling for the focus to make it clear that the focused element is different. So I did get rid of the outline and added an opacity change. However, for some reason I wasn't able to change the color of the arrow or the background on focus, so if anybody has a suggestion about that, or can confirm that what I've done is or isn't a good move in terms of allowing those with accessibility issues to view the site properly (I'm assuming it would be in this case anyway, since the keyboard arrow keys can navigate between photos, but maybe I'm missing something), please do chime in. Thanks!

Also, I still haven't figured out why most the changes I was trying to do in the lightbox don't seem to show up at all in Firefox. Anyone have a suggestion?

Mike: True. Yeah, now that I think about it, it was probably an IE thing. Thank you again, Mike.

Darter02 · September 27, 2014

Hikin' Mike wrote: »

Glad to help!

I'm not a "people photographer", but you have some nice images on your site.

I agree. I left a comment on your site just now. I wish you'd allow your photos' exif information available to be read. I'd love to know what gear you used in some of the shots.

Custom buttons lightbox

Comments