Styling your reports

Jadey Ryan // June 21, 2024
Intermediate Quarto // Cascadia R Conf

HTML

Bootswatch themes

Choose from or customize one of 25 Bootswatch themes.

Set the theme in the YAML under the html key:

format:
  html:
    theme: flatly

Customize a theme by including a custom .scss file under the theme key:

format:
  html:
    theme: [flatly, theme.scss]

HTML theming Quarto docs

SCSS files

SCSS files have the following form:

/*-- scss:defaults --*/
$h2-font-size:          1.6rem !default;
$headings-font-weight:  500 !default;
$body-color:            $gray-700 !default;

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}

Define SASS variables in the defaults section.

Declare CSS rules in the rules section.

Bootstrap docs

Default Bootstrap variables

Browser developer tools

MS Word

Reference document

Create and modify a reference document, which is a special kind of template.

1. Run the following in the Terminal to create the reference doc:

Terminal

quarto pandoc -o word-template.docx --print-default-data-file reference.docx

2. Open word-template.docx and modify the styles.

3. Set this template in the YAML under the reference-doc: key:

format:
  docx:
    reference-doc: word-template.docx

MS Word template Quarto docs

MS documentation on modifying styles

Need your report as a PDF?

Format in MS Word and then convert .docx to .pdf with Adobe Acrobat.

or…

• Learn how to format PDFs in the Quarto docs: PDF basics & PDF options.

• Try Typst, an open-source markup-based typesetting system, new in Quarto 1.4.

💪🏼 Exercise

Play around with the HTML and MS Word styling of a report of your choosing.

1. Open a new .qmd or choose one from a previous exercise.
2. Add a Bootswatch theme to the YAML and re-render.
3. Create a MS Word reference doc, modify a style, add it to the YAML, and re-render.

# Run in the Terminal

quarto pandoc -o word-template.docx --print-default-data-file reference.docx

07:00