Breadcrumb sizing

Backlight Customization
#1

the breadcrumbs are rather small, so i created a css file called breadcrumb.css with the following:
ul.breadcrumbs {
font-size: 2rem;
margin : 60px 16px;
padding: 15px 0 15px;
text-align: left;
}

it seems to do nothing. how do i just make them larger? change the color would be nice, but it can’t seem to get that to work. i search through the archives but it isn’t very clear.
thanks,
john
(my website is www.joliverbrooks.com)

#2

Your theme uses custom-sample.css and not breadcrumbs.css. Your css code looks fine.

#3

The breadcrumb hyperlink color is the same as what you choose in the page template in Colors > Accent. This applies to all text hyperlinks on the page.
You can control the hyperlink :hover color in the Typography section.

If you want the breadcrumb colors to be different than the other hyperlinks, then you can do that with custom css:

ul.breadcrumbs li a {
	color: red;
}

ul.breadcrumbs li a:hover {
	color: green;
}
#4

thanks. i did specify the wrong file. :slightly_smiling_face:
i fixed that and put it in custom-sample.css. however the code below still doesn’t seem to change the breadcrumbs. (i put in 5rem to see if it is noticeable, but other values don’t change it).
ul.breadcrumbs {
font-size: 5rem;
margin : 60px 16px;
padding: 15px 0 15px;
text-align: left;
}
ul.breadcrumbs li a:hover {
color: blue;
}

#5

The color is because of the other css in the custom-sample.css file you’re using. Delete or comment out that first rule:

body, body * {
	color: #f00 !important;
}

It’s making all text red and the !important added to it makes it so nothing can override it.

#6

For that first rule dealing with sizing, try using ul.breadcrumbs li for the selector:

ul.breadcrumbs li {
font-size:1.5rem;
margin : 60px 16px;
padding: 15px 0 15px;
text-align: left;
}

you may want to adjust the margin and padding settings

#7

i commented that out, (though nothing was red) and then just removed it. the breadcrumbs are still small and do not change hover color

#8

you just forgot to add the li to the end of the selector of your sizing rule.

you have:

ul.breadcrumbs {
  font-size: 5rem;
    margin : 60px 16px;
    padding: 15px 0 15px;
    text-align: left;
}

It should be

ul.breadcrumbs li {
  font-size: 5rem;
    margin : 60px 16px;
    padding: 15px 0 15px;
    text-align: left;
}
#9

they change. it is a safari caching issue. sorry.