identifying items to tinker with

erik64

I'm wondering how to identify the various elements that can be tweaked with CSS (I've been CSSing about a week now). I've tried the development tool with Chrome, but I don't know how find what I'm looking for. Specifically, I want to be able to change the color of the navigation controls ( <, >, ll, X ) separately for the lightbox and the slideshow (one is white, the other black). Also, is there a way to force the lightbox and and slideshow into full-screen mode? The slideshow is fullscreen in Chrome but not in IE. If not, is there a way to reliably show an "expand" button. I see one for the lightbox in Firefox, but nowhere else for either. Thanks.

http://erik64.smugmug.com/

Ferguson

The short answer to identifying items is that the easiest and simplest way is look through some of the customizations that experienced users have done, and the pinned topics, and see the common names they are using.

I am not aware of any good documentation from SM that says "here are the things we expect you to fiddle with, and not these". So just looking at a page and at names can be tough, as many things are nested quite deep in various levels of containers. It is often hard to tell which container or the item itself is the appropriate one to use (especially for things like display=none where you want the whole thing to disappear, and might or might not want its position to disappear). But that's the other alternative is just browse the page in the development tool, using the pointer to pick an item, look at its nesting on the source display, etc. One thing that you need to do though is look closely at (depending on the tool) the computed values to see which nested CSS item is actually having an impact - in most cases there will be multiple settings affecting any given item coming from different sources. Changing one that is superseded is an exercise in frustration.

But once you do all that -- it is hard to know sometimes whether the change you make has a side effect, e.g. does a change to the gallery page perhaps also affect a folder of galleries. Sometimes the name helps by looking very specific, but there's no thorough way to know other than testing.

My best luck for very small changes is the developer tools.

My best look for more pervasive changes has been to find a similar change someone has done, and has gone through several iterations of people using it (i.e. it's tested widely) and take it as a starting point and example.

erik64

Thanks for the helpful info, I was hoping there might be a master list somewhere of commonly adjusted items. I've been able to find some and figure out others by searching through all the mods that people have posted but haven't yet figured out the nav buttons. Could someone please help me out with the code to change the color of the lightbox and slideshow nav buttons ( <,>,X,ll ) as a group? Thanks.

Hikin' Mike

The first one is the default color and the second is the hover color.

/**
* Lightbox/Slideshow Icon (Font) Colors 
*/
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon {
    color: #f00 !important;
    }
    /* Hover Color */
.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default:hover .sm-fonticon {
    color: #00f !important;
    }

erik64

Thanks Hikin' Mike.!
Most helpful.


Sent from my iPhone using Tapatalk