Setting color on block quotes, figure captions, and outlines

[kortdriessen]

Hello,
Thanks for all of the fantastic work here, quarto is great.

I have two closely related questions:

1. Is there a way to manually set the text color for figure captions and quotes separately without changing the 'fontcolor' html format option within the quarto yaml options? It seems that this text color defaults to some transformation on the main fontcolor specification, but I'd like to set them independently of that if possible, just haven't been able to figure out where.

2. I cannot figure out any way at all to change the color for the TOC 'outline bar' or the quote outline marking... I cannot find anything in the html format options on quarto, or any way to change my scss theme, or any sass variable to let me manually set these colors, which seem to be specified as the same (I think). I've attached an image detailing exactly what I'm referring to if this doesn't make sense.

Thanks again for the great stuff, let me know if I can clarify!

[dragonstyle]

1. For captions, the scss variable $body-secondary is used.

2. The active TOC element is colored using the scss variable $link-color.

You do also have the option to make CSS rules that target the various elements (e.g. .figure-caption { } or .sidebar nav[role=doc-toc] ul>li>a.active {})

[kortdriessen]

Thank you for this! Number-1 is exactly what I was looking for, but number-2 I think I wasn't clear so you picked the wrong variable... I'm not wondering about the sliding toc bar that is green in my picture (which IS defined by the $link-color variable you sent), but the line along which that bar slides - this is white in the image I sent, which means you can't see it! This seems to be defined by the same thing that the line markings which are directly to the left of a block quote are (also white in my picture, one to the left of each block quote)... If you just glance at it, it looks like the arrows are pointing to nothing, but that is just because these elements are white.

If you know which variable controls these that would be much appreciated, but more importantly - what is the best reference source for answering questions like this... e.g. if I wanted to figure out that the $body-secondary variable controls figure captions, where would you recommend I go to look this up?

Thanks again!

[dragonstyle]

Regarding the toc border (I see it now!) - that is currently always set to the color $gray-200 (which isn't really ideal - it would be great if we created a variable that you could use for that). I'll transfer this discussion to any issue to track that change.

Regarding the reference of variables and their impact - there isn't currently good enough documentation for this. We have some basic variables documented here https://quarto.org/docs/output-formats/html-themes.html but for very specific item I often find myself working backwards from the CSS using the browser's 'inspector' and finding which rule is applying the style and then looking at our implementation of that rule. Not ideal... The documentation on the theming and customization is something we'd like to improve in the future for sure!

[friendly]

This question has NOT been answered concretely, perhaps because it was too diffuse.

In my case, I want to change the font color of just block quotes, as shown by the arrows in the initial example. I have a basic styles.scss file that looks like this, changing only the color of headings:

/*-- scss:defaults --*/

/*
$h2-font-size:          1.6rem !default;
$headings-font-weight:  500 !default;
*/

/*-- scss:rules --*/

h1, h2, h3 {
    color: #0000FF; /* Blue color */
  }

What is the tag or scss variable for quotes? I don't find any mention of quotations or block quotes in https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss

@dragonstyle : The documentation for theme variables could be enhanced considerably with a few specific examples for high-level markdown like quote blocks. If you have to "work backwards" using the browser's inspector, you can imagine how hard this is for mere mortals.

[mcanouil]

There are no variables for this either in Bootstrap or Quarto.

• https://quarto.org/docs/output-formats/html-themes.html#sass-variables

Block quotes are an HTML tag blockquote and a class blockquote.

The documentation for theme variables could be enhanced considerably with a few specific examples for high-level markdown like quote blocks. If you have to "work backwards" using the browser's inspector, you can imagine how hard this is for mere mortals.

The process is the same for everything. No examples will be enough.
"If you have to "work backwards" using the browser's inspector" is the HTML/CSS approach. There are no alternative beside looking at the documentation pages that list the Quarto specific variables added on top of Bootstrap's ones. In the end, you cannot control everything using SASS variables.

[friendly]

@mcanouil Thanks for the follow-up. Based on what you said, I tried using in my styles.scss the following, but it has NO EFFECT. Blockquotes are still printed in medium grey.

blockquote {
    color: #0000FF; /* Blue color */
}

My blockquotes all use simple (>) markdown, as in

No examples will be enough.

But on this, even a few, like how to solve this problem, would be extremely useful.

[mcanouil]

Because default bootstrap has .blockquote with already the color defined.
This can be seen via the developer mode of any browser.

So you need to use !important to override (not recommended) or target the right element to change the property.

---
title: "Reproducible Quarto Document"
format:
  html:
    include-in-header:
      - text: |
          <style>
          .blockquote {
            color: #b22222;
          }
          </style>
---

> This is a Quarto document. You can include R code chunks like the one below.

About the how to solve, it's always the same: "inspect" then look at the HTML and matching CSS.
Go back to Quarto/Bootstrap documentation to see if there are SASS variables or come with a new (S)CSS rule.

[friendly]

I think in your example, you are trying to use firebrick, #b22222 for the blockquote, but that didn't seem to work.

But, looking at the HTML is a good suggestion. I see, for one example:

<blockquote class="blockquote">
<p>In statistics and data visualization <em>all</em> methods can be classified by the number of dimensions contemplated, on a scale of <strong>ONE</strong>, <strong>TWO</strong>, <strong>MANY</strong>.</p>
</blockquote>

So this tells me to modify the CSS for the blockquote class, which I did in my styles.scss as

.blockquote {
    color: #0000FF; /* Blue color */
}

And this WORKED!

Again, I really appreciate the help of the Quarto team on such problems. Now, I can get back to working on the substance!

[mcanouil]

It does work:

The screenshot showed the inspect before changing and how I came to change the CSS class rather than setting the color property for blockquote tag.