Design + Coding > Single Gallery Thumbnail Nav Padding override
steven,
Yes, the problem is that those styles are all coded inline, which gives them a very high priority. One way to deal with them is to ignore them and code something else that neutralizes their effect. For example, giving each of the images a negative right margin of 14px:
#gallery-image-navigation-inner img { margin-right: -14px; } /* counterbalance thumbnail padding */
This is a little bit of a hack, but it seems to work OK.
Better Solution:
Aha! After posting my response I had another thought, and found that this also works:
#gallery-image-navigation-inner div { padding-right: 0!important; }
This approach is cleaner, since it actually does override the offending padding style.
--Chris
Chris Loosley
Hey Chris!
Perfection!
Of course, after playing with it I'm going with 2px for the padding (for now), but your suggestion was spot on:
#gallery-image-navigation-inner div { padding-right: 1px !important; }
A new issue, however... the scroll navigation remained even though the thumbnails no longer go beyond content width. A quick fix worked (with a modulePage id):
.picture-gallery-thumbnail-scroll-right {display:none !important;}
Is this the best fix? Interestingly, I also noticed the last two thumbs, which were beyond the content width before, no longer fade when hovering. Thoughts?
Thanks again!
steven
steven
steven,
Regarding the scroll navigation, I guess you'll just have to remember to make it visible again if you add more images to the gallery.
Regarding the hover effect, Firebug tells me that an opactity setting of 0.8 is present. I think that is being added by a script, but I can't tell why the last two images do not have it set. My guess is that the script is calculating which images are visible, and of course, it does not know we have changed the padding to squeeze in two extra images.
In any case, CSS statements like these should do the same thing:
#gallery-image-navigation-inner a:hover { filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; }
You have to specify opacity in multiple ways to satisfy different browsers -- for more details, see CSS Transparency Settings for All Browsers.
--Chris
Chris Loosley
Chris!
Great fix; issue solved! I figured it was a script concern but didn't think CSS could override the hover opacity in this case. I'll just add the scroll nav again if needed down the line, and take it out on a case by case basis for future galleries. Perfect!
Cheers,
steven
steven
Hi All,
Looking for a little help with a specific element within the Single Gallery!
Example Gallery
1. Thumbnail navigation: Is there a way using custom CSS to override the padding-right 14px to 0px for a flush "running thumbnails" look? The padding-right in question is under a div id tag for each individual thumbnail ("picture-top-1234567"); I'm looking for a way to override this for all thumbnails without having to call them individually in the CSS.
Thanks in advance!
steven