quartobootswatch

How to edit the Simplex Theme for a Quarto Website?

I want to create a Website with Quarto, using the Bootswach theme "Simplex".

The theme is simple but elegant. I like the mix of white, black gray and red colors.

However, I come across three challenges:

(1) Including a logo is pretty easy by adding "logo: "/img/logo.png" in the _quarto.yml file. However, the logo is displayed in the header very small. How can I increase the size of the logo in the header?

(2) The title of the Website is printed in "black" color as one can see here in the Simplex Theme template (it is the third navigation bar in white). How can I change the color of the title to the red of the link color?

(3) Finally, the color of the links in the body is red. But the color of the links in the menu is gray. I want to display the links as well as the active menu-item in the navbar in red (i.e., the link color). How can I change that?

I know, that I must change the .scss and/or .css files or add another .scss and/or .css file to the _quarto.yml . But I did not manage to solve this issue.

Can anyone give me some hints how to solve these problems?

Solution

  • Is this what you are looking for?

    Concerning Q1 & Q2 (color):

    styles.css

    .navbar-dark .navbar-brand {
  background: url('https://upload.wikimedia.org/wikipedia/commons/e/ef/Stack_Overflow_icon.svg');
  background-size: contain;
  padding-right: 5px !important; 
  padding-left: 75px !important;
  background-repeat: no-repeat;
  color: #d9230f;
}

    Concerning Q3:

    simplex-theme.scss

    /*-- scss:defaults --*/
$navbar-hl: #d9230f;

    _quarto.yml

    project:
  type: website

website:
  title: "TEST Website"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: [simplex, simplex-theme.scss]
    css: styles.css

    Result:

    enter image description here