Callout blocks coloring doesn't fit well with some Bootstrap themes.

[sasja-san]

I'm very new to rendering to html, so I'm sorry if I get a lot of the terminology wrong. I'll try to make this example as small as possible.

Here's the a qmd as small as felt comfrortable making it (the colored boxes makes the issue stand out).

Code for reproducing

---
format:
  html:
    theme:
      dark:   [ slate, dark-monospace-style.scss ]
    code-annotations: true
---

::: {.callout-note title="**TL;DR**"}
The remainder of this chapter is hand-holding through baby's first gdb session.
If you don't think you need this experience, just skip to the next chapter.
:::


## Trying out `gdb`

For the final setup we'll use `lldb` but for now let's stick with normal `gdb`. Install it for your system, if you haven't already.

::::::{.column-margin}
:::{.callout-tip}
Scroll down to the list of numbers.
There you can click the numbers and have the corresponding annotated line get highlighted.
:::
::::::

```{.default code-line-numbers="false"}
sasja@ed800:~/rust-proj$ gdb # <1>
(gdb) file target/debug/rust-proj # <2>
(gdb) l # <3>
(gdb) b 2 # <4>
(gdb) run # <5>
Enable debuginfod for this session? (y or [n]) # <6>
(gdb) c # <7>
(gdb) exit # <8>
sasja@ed800:~/rust-proj$
```
1. Start `gdb`, without any arguments.
2. Point to your binary.
3. `l` is for `list`. Gives you all the code, making it possible for you to know what the actual line numbers are.
4. `b` for `breakpoint`, sets a breakpoint on line 2, given the numbering shown above.
5. Start the program.
6. Just press ENTER to make this question go away.
7. The execution has reached a breakpoint. Using `c` will make the program resume execution.
8. Kill `gdb`.

Here's the associated file dark-monospace-style.scss which fixes the white boxes around monospace words which is otherwise there as default.

$code-color:  #e83e8c;
$code-bg:     #3a3f44;   

$code-block-bg:           #3a3f44;
$code-block-border-left:  #DDDDC8;

Desired output

I wish that maybe the style of the cards, as seen to the left in this picture, would be used for the callout blocks.

edit: this picture was taken earlier, the code block background color will be different if you chose to reproduce this

The current coloring, especially for the title text background in .callout-note looks really bad. Maybe this is due to my selection of the slate theme?

Current version of Quarto

Checked out main branch yesterday.

sasja@ed800:~/.quarto/quarto-cli$ git show -s --format="%as %H"
2024-08-12 22af0f2f78c2e1b2e966d2bbf9bb71863aa1fc8f

[mcanouil]

I converted your issue as a discussion because this is clearly a question about how to customise HTML, and I don't see any actual bug.

Callouts are no cards. You need to understand SCSS/CSS and get to know Bootstrap.

See:

• https://quarto.org/docs/output-formats/html-themes.html
• https://quarto.org/docs/output-formats/html-themes-more.html

For more advanced customisation, you need to learn how to use your favourite browser inspect/developer mode to target the proper elements and add the necessary (S)CSS rules.

[sasja-san]

I don't understand. Callouts are not cards. Those are two very different things.

I'm asking if, for the sake of coherent color theming (provided by bootswatch), wouldn't it look better if Quarto on the HTML side rendered callouts in terms of cards, instead of doing its own thing?

I understand that I'll probably need to create my own card wrapper/div somehow, but my question is to you and your sense of aesthetics.

edit: Here, I did some HTML trickery to see how it turned out:

[mcanouil]

wouldn't it look better if Quarto on the HTML side rendered callouts in terms of cards, instead of doing its own thing?

As with any stylistic elements, this is really a matter of taste/opinions.
And here you are focussing on a subset of the use case of callouts.

[tomhanna-uh]

It's interesting, because I know at least one other person had this same question - me - and my Google search led me here in mys earch for an actual answer that wouldn't require learning a whole new language as I (like the original poster) am an end user. I looked at the site I was visiting and really don't expect to see a top response being the typical StackOverflow "everybody should be hardcore full stack developer or not bother using the product at all" response.

I converted your issue as a discussion because this is clearly a question about how to customise HTML, and I don't see any actual bug.

Callouts are no cards. You need to understand SCSS/CSS and get to know Bootstrap.

See:

• https://quarto.org/docs/output-formats/html-themes.html
• https://quarto.org/docs/output-formats/html-themes-more.html

For more advanced customisation, you need to learn how to use your favourite browser inspect/developer mode to target the proper elements and add the necessary (S)CSS rules.

[tomhanna-uh]

mostly inherits from the parents

This is the bug. The inherits are not being handled properly. Given that OP is using a stock theme and stock code for the callouts and the two stock features don't play well together. This is a bug.

[tomhanna-uh]

Callouts are not cards.

OP did not say that they are. OP wanted to know how to get coloring similar to the cards. It was an example or analogy. "Similar to," not "the same as."