Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2018-01-12 06:58:59

drbobhesse
Member
Registered: 2013-02-12
Posts: 8

Album Set Template Change Item Styling

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

#2 2018-01-12 07:25:20

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 789
Website

Re: Album Set Template Change Item Styling

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

Offline

#3 2018-01-12 08:03:38

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,750
Website

Re: Album Set Template Change Item Styling

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 1.1.1 test site, Pangolin test site

Offline

#4 2018-01-13 01:38:52

drbobhesse
Member
Registered: 2013-02-12
Posts: 8

Re: Album Set Template Change Item Styling

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

#5 2018-01-13 02:39:17

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,750
Website

Re: Album Set Template Change Item Styling

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 1.1.1 test site, Pangolin test site

Offline

#6 2018-01-13 03:34:32

drbobhesse
Member
Registered: 2013-02-12
Posts: 8

Re: Album Set Template Change Item Styling

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

Board footer

Powered by FluxBB