Add labels to the icon-buttons in the lightbox

thenickdude · August 20, 2013

Hey all,

I've now posted a guide on adding labels to all those cryptic icon-buttons in the lightbox view, including the image download button, please check it out:

http://www.sherlockphotography.org/Customisations/Large-photo-download-buttons/

BigRed · August 20, 2013

Lamah wrote: »

Hey all,

I've now posted a guide on adding labels to all those cryptic icon-buttons in the lightbox view, including the image download button, please check it out:

http://www.sherlockphotography.org/Customisations/Large-photo-download-buttons/

Thank you for another excellent customization, Lamah.

tenebs · October 8, 2013

How to do the same with the globe map this icon
Do you know what they named the map this globe icon? I'm trying to customize it as well but I don't know the keyword such as ".sm-button-image-info" for the image info button.
I want to changed the color of the globe icon like I did for the info icon like this:

/*Change color of image info Button to dark Blue*/
.sm-user-ui .sm-button-image-info .sm-fonticon {
color:#447799;
}

leftquark · October 8, 2013

tenebs wrote: »

Do you know what they named the map this globe icon? I'm trying to customize it as well but I don't know the keyword such as ".sm-button-image-info" for the image info button.
I want to changed the color of the globe icon like I did for the info icon like this:

/*Change color of image info Button to dark Blue*/
.sm-user-ui .sm-button-image-info .sm-fonticon {
color:#447799;
}

You can touch the map icon here:

/* Remove the map icon / button */
.sm-button-image-map {
[COLOR="Red"]  PUT YOUR CSS CUSTOMIZATIONS HERE![/COLOR]
}

tenebs · October 8, 2013

Map Icon

leftquark wrote: »

You can touch the map icon here:

/* Remove the map icon / button */
.sm-button-image-map {
[COLOR=Red]  PUT YOUR CSS CUSTOMIZATIONS HERE![/COLOR]
}

Thanks, That is exactly what I was looking for. Is there a reference source available for finding out these structure names that smugmug uses?

leftquark · October 8, 2013

tenebs wrote: »

Thanks, That is exactly what I was looking for. Is there a reference source available for finding out these structure names that smugmug uses?

Nobody has put together a complete list but I have a stickied thread with a number of customizations here (http://www.dgrin.com/showthread.php?t=237930), Lamah has a website (http://www.sherlockphotography.org/Customisations), and there's the Smugocity website as well (http://www.smugocity.com/).

The easiest way, and the way that most of us figure these out, is by using the developer tools in Chrome, Safari, or Firefox. I've found Chrome's developer tools to be the more useful.

Basically the gist of it: you right click on the part of the page you are trying to change and click on "Inspect Element". The browser window splits in half and the bottom half shows the source code for the webpage. It automatically jumps to the code for the area where you right clicked. As you mouse over the code, Chrome highlights that area on the webpage. It's pretty handy to see how each line of code is displayed on the page, since it highlights that area. Once I've found the right area, I just look at the code to see what 'class="WHATEVER_NAME"' to find the name.

Chrome also lets you test out your CSS customizations. There's a little "+" icon in that code window that lets you add CSS code. It does't actually save it to the website, it just temporary changes the way the page is displayed. If you refresh the page, the temporary code is gone.

miseryshusband · October 9, 2013

leftquark wrote: »

Nobody has put together a complete list but I have a stickied thread with a number of customizations here (http://www.dgrin.com/showthread.php?t=237930), Lamah has a website (http://www.sherlockphotography.org/Customisations), and there's the Smugocity website as well (http://www.smugocity.com/).

The easiest way, and the way that most of us figure these out, is by using the developer tools in Chrome, Safari, or Firefox. I've found Chrome's developer tools to be the more useful.

Basically the gist of it: you right click on the part of the page you are trying to change and click on "Inspect Element". The browser window splits in half and the bottom half shows the source code for the webpage. It automatically jumps to the code for the area where you right clicked. As you mouse over the code, Chrome highlights that area on the webpage. It's pretty handy to see how each line of code is displayed on the page, since it highlights that area. Once I've found the right area, I just look at the code to see what 'class="WHATEVER_NAME"' to find the name.

Chrome also lets you test out your CSS customizations. There's a little "+" icon in that code window that lets you add CSS code. It does't actually save it to the website, it just temporary changes the way the page is displayed. If you refresh the page, the temporary code is gone.

Thanks for the information. Maybe now I will be able to fix my own stuff instead of asking you and Lamah. Thanks again to both of you.

starrynight · October 9, 2013

Thanks! This worked for me.

I was confused by the "lightbox", but that looks like it's the same as "Smugmug" and "Gallery" (i.e. main picture + thumbnails?).

leftquark · October 9, 2013

starrynight wrote: »

Thanks! This worked for me.

I was confused by the "lightbox", but that looks like it's the same as "Smugmug" and "Gallery" (i.e. main picture + thumbnails?).

The lightbox is the screen that comes up when you click on an image. It overlays on top of the gallery ... shows only the image ... is very large ... usually has a completely black'ish grey background, looks like this: http://www.aaronmphotography.com/Customizations/Gallery/Lightbox-Close-Text

Add labels to the icon-buttons in the lightbox

Comments