Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2018-10-05 01:31:58

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Breadcrumb styling

Is there a way to control the look & feel of the breadcrumbs? Font style, weight, rollover color, etc....


pideja.ca/tnm

Offline

#2 2018-10-05 02:43:12

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

Re: Breadcrumb styling

other than the controls in the Content Area of the page template, you'll have to use custom css.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Online

#3 2018-10-05 04:29:01

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

As a starting point, the breadcrumb appearing in the album set here:https://pideja.ca/tnm/galleries/ is much smaller than in the albums and galleries here: https://pideja.ca/tnm/galleries/saison- … 1-carnage/.

I already have some simple CSS :

.breadcrumbs a {
	font-weight: bold;
	font-size: 1.5em;
	color: FF2115;
}	
.breadcrumbs li a:hover {
              color: red;


} 

But it does not seem to apply to the album set page.

Offline

#4 2018-10-05 05:21:06

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

Re: Breadcrumb styling

How about

ul.breadcrumbs li {
    font-size: 1.75rem;
}

Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#5 2018-10-05 05:44:07

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

Re: Breadcrumb styling

a forum search came up with this: http://community.theturninggate.net/vie … hp?id=7930


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Online

#6 2018-10-05 06:19:33

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

Thank you, Daniel,

I set the ul.breadcrumbs at 1.20rem and the .breadcrumbs at 1.15rem with a hover color of white. Looks good.

Offline

#7 2018-10-05 06:34:30

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

Re: Breadcrumb styling

smile


Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#8 2019-09-22 01:31:44

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

For some reason, I can't change the breadcrumb colour with my CSS. Previously I had set the colour to red and the hover to white and it worked.
But now, I want to change the hover colour but nothing happens.
The CSS is written like this:

ul.breadcrumbs li {
    font-size: 1.20rem;
    padding: 60px 16px;
}
.breadcrumbs a {
	font-weight: bold;
	font-size: 1.15rem;
	color: FFFF00;
}
.breadcrumbs li a:hover {
     color: FFF6D0;

The only change is the hover colour. I've tried clearing the cache to no avail.

Last edited by pideja (2019-09-22 01:35:03)

Offline

#9 2019-09-22 02:23:31

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

Re: Breadcrumb styling

If .breadcrumbs a works for changing the color, then why not try .breadcrumbs a:hover for the hover color?

Also, you need the hashmark # before the hex code


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Online

#10 2019-09-22 02:53:06

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

I tried .breadcrumbs a as well as .breadcrumbs li a to no avail.

Offline

#11 2019-09-22 03:05:42

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

I've added a text-decoration and...it shows up, but not the colour which is still white!


/* Display list items side by side */

ul.breadcrumb li {
	display: inline-block;
    font-size: 1.20rem;
    padding: 60px 16px;
}
/* Add a color to all links inside the list */

.breadcrumb li a {
	font-weight: bold;
	font-size: 1.15rem;
	color: FFFF00;
}

/* Add a color on mouse-over */

.breadcrumb li a:hover {
     color: FFF6D0;
     text-decoration: underline;
}

Offline

#12 2019-09-22 03:41:27

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

Re: Breadcrumb styling

It is breadcrumbs and not breadcrumb!

This works for me:

ul.breadcrumbs li {
    color: blue;
}

Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#13 2019-09-22 05:44:26

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

Put back the "s" in breadcrumbs. Then, slightly changed the hover colour to FFF5D0 I tried changing the hover colour to black and...it worked! Is the colour I'm trying to use wrong somehow? Tried RGB(255,246,208) and it worked! Should I write the colour in RGB code rather than HEX?

Now to control the lead breadcrumb colour, still white.

Offline

#14 2019-09-22 08:14:33

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

Re: Breadcrumb styling

The hex codes need a hashtag in front of them:

color: #FFF6D0;


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Online

#15 2019-09-22 23:57:13

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

Think you for the # hint. It works fine now.

Last edited by pideja (2019-09-22 23:58:44)

Offline

#16 2019-09-24 00:33:10

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

I still have an issue with these breadcrumbs. I played around with different colours and even tried the underline font decoration. However, I returned to a simple font colour (red) and hover colour (beige)
I wrote the CSS accordingly:

/* Display list items side by side */

ul.breadcrumbs li {
	display: inline-block;
    font-size: 1.20rem;
    padding: 60px 16px;
}
/* Add a color to all links inside the list */

.breadcrumbs li a {
	font-weight: light;
	font-size: 1.20rem;
	color: #FF0001;
	font-weight: light;
}

/* Add a color on mouse-over */

.breadcrumbs li a:hover {
     color:#FF5D0 	;
     font-weight: light;    
 }

and yet, I still have that red/red underline combination. I cleared the Backlight cache and the browser cache, but no change. What else could I change?

Offline

#17 2019-09-24 01:02:32

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

Re: Breadcrumb styling

Your beige color has only five digits. Try fixing that first


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Online

#18 2019-09-24 22:53:05

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

Oops! forgot a digit! Fixed but still, the hover should be #FFF5D0 and it's still red-underlined.
Looking all over Backlight and checked the CSS and nothing seems to indicate red-underlined breadcrumbs hover.

Offline

#19 2019-09-24 23:41:27

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

Re: Breadcrumb styling

Which gallery are you talking about now?


Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#20 2019-09-25 00:03:54

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

I'm still here: pideja.ca and looking thru out the breadcrumbs in the Galeries section.

But wait!

The hover seems to be correct, except for the underline, but let's not quibble.

Last edited by pideja (2019-09-25 00:05:46)

Offline

#21 2019-09-25 00:17:01

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

Re: Breadcrumb styling

in the page template go to Typography > Base Font Properties > text-decoration:hover


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Online

#22 2019-09-25 02:17:12

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Breadcrumb styling

I guess I forgot about that. Thinking that all settings where CSS driven. Issue solved, thank you.

Offline

Board footer

Powered by FluxBB