Custom buttons lightbox

Galorbe

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

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

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

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

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

Hikin' Mike

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

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

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

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

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

Hikin' Mike

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

Galorbe

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

Hikin' Mike

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

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

Hikin' Mike

Glad to help!

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

Galorbe

thank you very much :-)

ko04

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

Thank you for your comment Ko.

corpuzrob

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

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

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

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

Hikin' Mike

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

corpuzrob

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

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

Also, I'm still using XP...

corpuzrob

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

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

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

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.