How do I change <h1> color for just one page in my website?

[baarthur]

Description

Hello there,

I've set up my website using Quarto and now I've also included a blog. I am using flatly and darkly themes, but I have a problem with the first one: the <h1> in the blog's entries is too dark to be read!

My first attempt was to create a _quarto.yml file inside my /posts folder, specifying a custom .scss with the following:

#title-block-header.quarto-title-block.default .quarto-title h1.title {
    color: white;
};

However, as I found out here, I cannot specify a custom .scss for a single page (in that case, for my blog page). But if I change it globally (i.e. in my _quarto-english.yml and _quarto-portuguese.yml files in the main folder), it'll change the <h1> in the main page, which is in a white background!

How the blog post looks like:

https://baarthur.github.io/posts/2023-06-20-basedosdados/

What happens if I change the <h1> globally: Can't read my name on the homepage.

[mcanouil]

Use spans, see https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans.

## [something]{.my-custom-class style="color:dodgerblue;"}

You can also be more accurate in your (S)CSS rule to target the h1 title on the dark background which is actually define by CSS.

[baarthur]

Thanks for the reply! But as the title is set at the YAML, I'm afraid that won't work :/

---
title: "Acessando a Base dos Dados no R"
description: "É mais fácil do que parece!"
author:
(...)

[baarthur]

Hi @mcanouil, I am sorry if I sounded rude ---I always try to follow the best bug reporting/Q&A guidelines, but yesterday I was really tired and answered before I tried. However, tried it now and just to confirm it didn't work.

---
title: "Acessando a Base dos Dados no R" {.title style="color:white;"}
(...)
---

Resulst in

ERROR: YAMLError: can not read an implicit mapping pair; a colon is missed at line 2, column 71:
     ... R" {.title style="color:white;"}
                                                           ^

YAMLError: can not read an implicit mapping pair; a colon is missed at line 2, column 71:
     ... R" {.title style="color:white;"}
                                                           ^
    at generateError (file:///Applications/quarto/bin/quarto.js:10486:12)
    at throwError (file:///Applications/quarto/bin/quarto.js:10489:11)
    at readBlockMapping (file:///Applications/quarto/bin/quarto.js:11106:28)
    at composeNode (file:///Applications/quarto/bin/quarto.js:11305:84)
    at readDocument (file:///Applications/quarto/bin/quarto.js:11419:5)
    at loadDocuments (file:///Applications/quarto/bin/quarto.js:11454:9)
    at load (file:///Applications/quarto/bin/quarto.js:11459:23)
    at parse3 (file:///Applications/quarto/bin/quarto.js:11469:12)
    at parseWithNiceErrors (file:///Applications/quarto/bin/quarto.js:19646:16)
    at readYamlFromMarkdown (file:///Applications/quarto/bin/quarto.js:19577:17)

And if I insert the colon as requested:

[1/2] posts/2023-06-20-basedosdados/index.qmd
ERROR: YAMLException: bad indentation of a mapping entry (index.qmd, 2:42)
1: ---
2: title: "Acessando a Base dos Dados no R" {.title style="color:white;"}:
                                           ~~
3: description: "É mais fácil do que parece!"

[cderv]

@baarthur look at the syntax for Span at https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans already linked above. You are missing some brackets in your try above. I let you check

[mcanouil]

Hi @mcanouil, I am sorry if I sounded rude

@baarthur Not at all! No worries ;)

To note, you did not respect the syntax I provided and described in the link to the documentation I provided, thus you getting invalid yaml, see below:

---
title: '[Acessando a Base dos Dados no R]{style="color:white;"}'
---

title from the YAML will already have the CSS class .title unless you use custom template/partials.

[baarthur]

Thank you, guys. I am still new to this, I have recently just learned to use spans on divs, and I was not understanding that it should be inside the title quotes.

I tried it now and it worked, but if I change that, it also changes the post's <h1> color on the blog's main page. Example: here are two posts, the red one uses this option and the white one uses the include-in-header approach:

[mcanouil]

Check because it colours the title no matter where it is.

[baptiste]

I think for that one page you could inject CSS in the header to overwrite the defaults,

---
title: "Untitled"
format: 
   html:
     include-in-header: 
        text: |
          <style>
          h1 {
          color: rgb(255, 1, 1);
          }
          </style>
---

[mcanouil]

Indeed, but a more precise CSS rule would avoid unwanted side effects.

Something like (untested but the classes are correct):

#title-block-header > h1 .title {
  color: dodgerblue;
}

[baarthur]

I think for that one page you could inject CSS in the header to overwrite the defaults,

---
title: "Untitled"
format: 
   html:
     include-in-header: 
        text: |
          <style>
          h1 {
          color: rgb(255, 1, 1);
          }
          </style>
---

It did work, thanks!

[baarthur]

I think for that one page you could inject CSS in the header to overwrite the defaults,

---
title: "Untitled"
format: 
   html:
     include-in-header: 
        text: |
          <style>
          h1 {
          color: rgb(255, 1, 1);
          }
          </style>
---

title-block-header > h1 .title {
  color: dodgerblue;
}

I am really new to CSS, HTML and everything.

I tried this:

format: 
  html:
     include-in-header: 
        text: |
          title-block-header > h1 .title {
            color: white;
          }

And this:

format: 
  html:
     include-in-header: 
        text: |
          #title-block-header.quarto-title-block.default .quarto-title h1.title {
            color: white;
          };

But then it looks like:

Am I doing something wrong?

[cderv]

You are missing the important part which is <style> - look at the example that was given to you. Including text content needs to be valid HTML. So you need to use the tag to include CSS in html body.

[baarthur]

got it. I just replaced everything, while it should still be inside <style></style>. Thanks!

[baarthur]

All in all: thank you guys for the help. Maybe a feature suggestion could be changing the <h1> color on flatly when conflicts with the banner? Or allowing for custom scss pages.

Although this worked, it is kind of a workaround, because it needs to be specified in each post's YAML.