Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
In CE4 it was possible to set a:hover colors for thumbnail backgrounds and title/description text on the auto-index page. I used this on my CE4 site, http://www.etchedinlight.com so the page displayed clean thumbs which were then highlighted with displayed text on hover. It seems that the Backlight album set does not contain these selectors. I'd like to add custom css to implement this. With custom css enabled and the Backlight css selected for loading I presume that the style could simply be added to the empty Backlight sheet. Correct?
I'd use the element styling ".class a:hover{background-color:new; color:new;}"
I'm a bit perplexed re the class selector as the best class has white space e.g "albums albums-masonry clearfix". How does one select these classes with white space?
I suppose that one might use the class "album_set" and, if that were to affect other pages, create a bespoke custom css file for the single album set template.
Bob
Offline
For album sets, try following:
.the__albumSet figure:hover {
background-color: red;
}There a global body classes that you can use to target a particular page, or pages using the same template, if needed.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
And to help identify needed selectors in the future, you can use the browser's inspector.
http://ttg-tips-and-tricks.barbeephoto. … ustom-css/
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thanks all for your help. I have found a fix.
Rod, I have always used the browser inspector to identify selectors (and your tutorial is a first rate guide). My issue was that what seemed the most appropriate selectors had white space in the class names and I do not know how to deal with that.
Daniel, Your suggestion almost worked but it appears that the element "figcaption" has styling more specific than "figure". Your script changed the color of the figure but the background of the figcaption remained unchanged. Use of "figcaption:hover" changes both but the hover area is restricted to the area of the figcaption element. The solution was to add an ".item:hover" line which does change the background of the figcaption. Styling the rather general selector ".item" doesn't seem to cause problems elsewhere but if any arise I'll just create a bespoke page template and custom css targeting only that page.
BTW Is there a way of linking more than one custom css file to a page template?
Offline
There's actually no white space in class names. There are underscores, and often double underscores.
Any white space you see is not part of a class name but part of the cascade.
You could link more custom css files to a page template by adding the needed code in the <head> tag using phplugins. Use the ttg_head hook, just like in the old CE days. Here's the documentation on that, just don't use the hook used in the old docs:
http://ce4.theturninggate.net/docs/doku … custom_css
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thanks again (particularly for politely suffering a fool). I was misled by the Safari inspector's display of elements as class = "terms separated by white space". I overlooked the fact that in the right sidebar the terms were displayed as cascading elements.
I do appreciate the supremely helpful assistance and instruction.
Bob
Offline
Pages: 1