I'm a beginner at Quarto, and need to set up a custom theme. No matter what I put in my custom.scss theme file, Quarto puts a gray underline in the Header 2 style and sets the opacity to 90%.
I made a mini example, hopefully someone can re-create it. For the purpose of this example, I'm trying to make the underline red and 6 pixels thick.
custom.scss:
/*-- scss:defaults --*/
h2, .h2 {
font-style: italic;
opacity: 1;
border-bottom: 6px solid red;
padding-bottom:0.15rem
}
My .qmd file:
---
format: html
output:
html_document
theme: custom.scss
execute:
echo: false
---
## Header 2
Result: 'Header 2' in gray italic text, with a thin gray underline Obviously my theme file is somewhat working, because the text is in italic as I specified, but it's still got 90% opacity and a thin gray underline instead of a thick red one.
Does anyone know why my theme file can't override those specific properties?
One workaround I've found is inserting a CSS code block at the top of the document, and that works just fine (corrects both the opacity and the underline), but it's ugly and annoying - I feel like I must be missing something.
I looked through the generated files and found that bootstrap.min.css does include my theme file at the top, but then overrides it later. Here's a snippet of the bootstrap.min.css that Quarto generates:
h2,.h2{font-style:italic;opacity:1;border-bottom:6px solid red;padding-bottom:.15rem}/*!
* Bootstrap v5.1.3 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--bs-blue: #0d6efd; ...
...
h1,.h1,h2,.h2{opacity:.9;margin-top:2rem;margin-bottom:1rem;font-weight:600}h1.title,.title.h1{margin-top:0}h2,.h2{border-bottom:1px solid #dee2e6;padding-bottom:.5rem} ...
...
Why would it generate that way?
I am rendering with RStudio version 2023.06.2 on Windows 10 Pro.
Here's the output when I run quarto check
:
A new release of Deno is available: 1.28.2 → 1.37.2 Run `deno upgrade` to install it.
[>] Checking versions of quarto binary dependencies...
Pandoc version 3.1.1: OK
Dart Sass version 1.55.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
Version: 1.3.450
Path: C:\Users\[name]\AppData\Local\Programs\Quarto\bin
CodePage: 1252
[>] Checking basic markdown render....OK
[>] Checking Python 3 installation....OK
Version: 3.12.0
Path: C:/Users/[name]/AppData/Local/Programs/Python/Python312/python.exe
Jupyter: 5.4.0
Kernels: python3
(|) Checking Jupyter engine render....0.02s - Debugger warning: It seems that frozen modules are being used, wh
ich may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
0.02s - Debugger warning: It seems that frozen modules are being used, which may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
[>] Checking Jupyter engine render....OK
[>] Checking R installation...........OK
Version: 4.3.1
Path: C:/PROGRA~1/R/R-43~1.1
LibPaths:
- C:/Users/[name]/AppData/Local/R/win-library/4.3
- C:/Program Files/R/R-4.3.1/library
knitr: 1.43
rmarkdown: 2.24
[>] Checking Knitr engine render......OK
Does this, using
!important
, work for you?