Community @ The Turning Gate

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.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2020-03-17 01:11:32

Kubicixfactor
Member
From: Shropshire, UK
Registered: 2015-08-19
Posts: 74

Gallery image - change background

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

#2 2020-03-17 01:25:48

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,624
Website

Re: Gallery image - change background

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

#3 2020-03-17 04:15:47

Kubicixfactor
Member
From: Shropshire, UK
Registered: 2015-08-19
Posts: 74

Re: Gallery image - change background

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

#4 2020-03-17 05:10:05

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

Re: Gallery image - change background

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

#5 2020-03-17 05:10:50

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

Re: Gallery image - change background

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

#6 2020-03-17 05:46:55

Kubicixfactor
Member
From: Shropshire, UK
Registered: 2015-08-19
Posts: 74

Re: Gallery image - change background

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

#7 2020-03-17 06:31:36

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

Re: Gallery image - change background

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

#8 2020-03-17 06:59:52

Kubicixfactor
Member
From: Shropshire, UK
Registered: 2015-08-19
Posts: 74

Re: Gallery image - change background

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

#9 2020-03-17 07:46:41

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

Re: Gallery image - change background

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

#10 2020-03-17 07:50:02

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

Re: Gallery image - change background

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

#11 2020-03-17 08:07:49

Kubicixfactor
Member
From: Shropshire, UK
Registered: 2015-08-19
Posts: 74

Re: Gallery image - change background

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

#12 2020-03-17 08:41:18

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

Re: Gallery image - change background

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

#13 2020-03-17 16:39:03

Kubicixfactor
Member
From: Shropshire, UK
Registered: 2015-08-19
Posts: 74

Re: Gallery image - change background

Really useful, I'll have a dig around. Thanks again for sharing this Rod.

Steve

Offline

Board footer

Powered by FluxBB