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
Thinking back to my old CE4 site, when there was a mouseover in a gallery the thumbnail's background border used to change (to a lighter colour). I remember mentioning this some time ago and Rod suggested this could be implemented via CSS.
Has anyone done this in Backlight? How should I go about it please?
Steve
Offline
It has been done with custom css. I think this is what you are looking for: http://community.theturninggate.net/vie … 539#p48539. Or at least it should help you to get there.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Thanks Daniel,
So I’ve added to my custom css:
.albums figure a:hover {
background-color: green;
}
works perfectly for the albums, but not for the image thumbnails ( so when I click on an album to open it, the thumbnails don’t change on hover). Any advice on what to add to get the thumbnails to change would be great!
Steve
Last edited by Kubicixfactor (2020-03-17 04:16:53)
Offline
the rule above should work in album sets for those thumbnails.
for the thumbnails in the albums try:
.gallery figure:hover {
background-color: green;
}Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
And I suppose if you want the same for both albums sets and albums you could try:
figure:hover {
color: green;
}Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Perfect, thanks Rod!
.gallery figure:hover did the job.
One more question, a lot of my albums have up to 15 pages. What's the css to highlight the page number please?
Steve
Offline
you mean the breadcrumbs? How do you want them highlighted. The numbers already change colors for the active page
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 Rod, i’m sure in CE4 for a multi page gallery the numbers shown across the top (and bottom) were highlighted to show the active page number? That’s what I need to replicate.
Steve
Offline
By default, the number colors are controlled by the hyperlink color you've set in the page template (for the clickable numbers) and the main text color (for the active page number).
for the hyperlink color, look in the page template under Color > Accent
for the main text color, it's the Contrast color
Did you want something different or do you want to control this from the page template settings?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
if you want to make the active page number different from the rest of the text on your site, this is the selector:
li.pagenumber.current
you can use the color property to control the number color and the background-color property to control the background of the breadcrumb.
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 Rod, I’ll give these a try, I think using the page template will work ok. I shot an event last weekend and this was the first time I’ve put a live gallery up under backlight, so looking at fine tuning following customer feedback.
All of the css properties are a bit of a mystery at the moment, is there a list of them anywhere? Because of cancelled jobs (for the next three months by the look of it) I’ve got plenty of free time to get my head around this.
Steve
Offline
If you want to be able to fine tune your site, the best thing to do is learn how to use the browser inspector. That can tell you exactly what selectors need to be used, though it takes a bit of practice to narrow some of them down.
I've got some tips here: https://ttg-tips-and-tricks.barbeephoto … ustom-css/
As for css properties, well there are a lot. take a look here: https://www.w3schools.com/css/default.asp
for a look at the classes Matt is using in Backlight css, you can look at your page's source code (right click on any page and choose "View page source") and somewhere around line 46 or so, look for a line that looks similar to this:
<link rel="stylesheet" type="text/css" media="all" href="/backlight/publisher/gallery/stylesheet/style/6" /> and click on it.
That will take you to a page with all the 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
Really useful, I'll have a dig around. Thanks again for sharing this Rod.
Steve
Offline
Pages: 1