Breadcrumb

[heatherbell]

Recently changing style of breadcrumb elements so sharing our changes here in case it helps others.
Standard breadcrumb shows:

breadcrumb1.png

Want to change the style of the last element in the breadcrumb so it stands out as the current page (i.e. "you are here")

Code: Select all

/* Change style of last breadcrumb item */
.breadcrumb li:last-child a {
  font-weight: bold;
}

Breadcrumb now shows:

breadcrumb2.png

Could not find the breadcrumb separator defined in core so changed the style of the separator.

Code: Select all

/* Change style of breadcrumb separator */
.breadcrumb li.breadcrumb-item:not(:first-child)::before{
  content: ">" !important;
}

Alternatively, this does the same thing:

Code: Select all

/* Change style of breadcrumb separator */
.breadcrumb li.breadcrumb-item+li.breadcrumb-item::before{
  content: ">" !important;
}

Breadcrumb now shows:

breadcrumb3.png

The code should be added to /templates/override/static/user.css

[heatherbell]

Using more recent versions, there have been slight changes to the breadcrumb.
For example, on default 1.0.9.9, this is displayed:

Screenshot 2025-01-24 065536.png

So if the CSS in the previous post above does not produce the desired result, remove the a from the selector, like this:

Code: Select all

/* Change style of last breadcrumb item */
.breadcrumb li:last-child {
  font-weight: bold;
}

This targets the last list item in the breadcrumb (which has a bootstrap class attribute name) and gives this:

Screenshot 2025-01-24 070049.png

Slightly annoying that the separator has now also changed so to change that back again use:

Code: Select all

 /* Reset last breadcrumb item separator */
.breadcrumb li:last-child::before {
  font-weight: normal;
}

This targets the separator before the last breadcrumb item in the list (which is added by Bootstrap 5 as a ::before pseudo-element) which then gives this:

Screenshot 2025-01-24 070531.png

The new bootstrap5 also underlines links by default.
They could be removed everywhere in the shop but that might be undesirable but, personally, prefer the breadcrumb items without so using:

Code: Select all

/* Remove underline of breadcrumb links */
.breadcrumb a {
  text-decoration: none;
}

This targets the links (a elements) in the breadcrumb (which has a bootstrap class attribute name) to give this:

Screenshot 2025-01-24 071249.png

We were also asked to have the default blue link font color removed so, just add another declaration to the rule above:

Code: Select all

/* Remove underline and blue font color of breadcrumb links */
.breadcrumb a {
  text-decoration: none;
  color: var(--bs-body-color);
}

This brings the font color back to the default font color used in the body on the shop to give this:

Screenshot 2025-01-24 073621.png

This is using the latest bootstrap5 template.
Note the use of a CSS variable as the Value for the color Property just as an example.
A CSS variable does not have to be used but Bootstrap 5 now uses them.
In Bootstrap 5, this variable is defined as:

Code: Select all

--bs-body-color: #212529;

So, once the variable is defined, if it is changed or overridden (for example, in user.css), the color will change everywhere that var(--bs-body-color) is used as a Value.
To achieve the same result, this could be used:

Code: Select all

/* Remove underline and blue font color of breadcrumb links */
.breadcrumb a {
  text-decoration: none;
  color: inherit;
}

So, the font color is inherited from the font color used in the body on the shop.