Breadcrumb styling

pideja · 2018-10-05 01:31:58

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

rod barbee · 2018-10-05 02:43:12

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

pideja · 2018-10-05 04:29:01

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.

Daniel Leu · 2018-10-05 05:21:06

How about

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

rod barbee · 2018-10-05 05:44:07

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

pideja · 2018-10-05 06:19:33

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.

Daniel Leu · 2018-10-05 06:34:30

pideja · 2019-09-22 01:31:44

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)

rod barbee · 2019-09-22 02:23:31

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

pideja · 2019-09-22 02:53:06

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

pideja · 2019-09-22 03:05:42

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;
}

Daniel Leu · 2019-09-22 03:41:27

It is breadcrumbs and not breadcrumb!

This works for me:

ul.breadcrumbs li {
    color: blue;
}

pideja · 2019-09-22 05:44:26

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.

rod barbee · 2019-09-22 08:14:33

The hex codes need a hashtag in front of them:

color: #FFF6D0;

pideja · 2019-09-22 23:57:13

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

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

pideja · 2019-09-24 00:33:10

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?

rod barbee · 2019-09-24 01:02:32

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

pideja · 2019-09-24 22:53:05

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.

Daniel Leu · 2019-09-24 23:41:27

Which gallery are you talking about now?

pideja · 2019-09-25 00:03:54

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)

rod barbee · 2019-09-25 00:17:01

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

pideja · 2019-09-25 02:17:12

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

Community @ The Turning Gate

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

Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

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

Re: Breadcrumb styling

Board footer