Skip to content

lizevons/quarto-website-breadcrumb-color-with-custom-title-block-banner

Repository files navigation

Problem

I am creating a website using Quarto. The website uses sidebar navigation with breadcrumbs. On some pages I would like to apply custom colours to the title block. I set these up in the yml header of the specific page where I would like the colours applied:

page.qmd

---
title: "Page with title-block-banner custom background"
title-block-banner: "#4097C2"
title-block-banner-color: white
---

The background colour is also applied to the breadcrumb section, however, the foreground (text colour) is not. I am not sure which css is applied to the breadcrumb text, but it seems to be the same as the body text, which is a dark colour on a light background. If you use a bright or dark banner background the breadcrumbs can be difficult to read. Is it possible to either:

  • Change the background of the breadcrumb to match the navbar
  • Or change the text colour of the breadcrumb to match the title block banner text colour (title-block-banner-color)

The second would be my preferred option. Here is how it renders:

image

The example page is page.qmd.

My environment info is in quarto-check.qmd

About

A reproducible example for quarto-dev question

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages