OTTR Website Style
Customizing Colors & Style

Download cheatsheet

Last updated: September 11, 2026

Websites look and are configured differently from courses. Use this cheat sheet for an OTTR website; course style instructions are not interchangeable.

Website Style Files

An OTTR website has one color configuration file: assets/style_config_default.css. Unlike an OTTR course, it does not have style_config_custom.css.

Use style_config_default.css to customize website color variables. Commit the change on a new branch and check the pull request preview.

Customize Website Colors

Open assets/style_config_default.css and update the variables you want to change:

:root {
  --banner-color: #your-color-here;
  --button-color: #your-color-here;
}

• Open assets/style_config_default.css in your repository.
• Update the color variables you want to change.
• Commit the change on a new branch and check the pull request preview.

Change the Navigation Bar

In _quarto.yml, change the website title to update the text shown in the navigation bar:

website:
  title: "My Website"

Change the Overall Theme

In _quarto.yml, set the HTML theme to change the website’s overall color scheme and fonts:

format:
  html:
    theme: cosmo

See the Quarto HTML themes for available theme options.

Change the Favicon

1. Create a favicon, for example with favicon.io.
2. Replace resources/images/favicon.ico with your new file.
3. Check the rendered preview and your browser tab.

Helpful Color Tools

1. Venngage Color Accessibility Tool
2. ColorBuddy

Authors: Padmashri Saravanan from BioData Sage created the cheatsheet content. Katherine Cox structured OTTR’s color customizations. Carrie Wright reviewed the material. Kate Isaac created the original styling, Carrie Wright did the CSS styling, and Carrie Wright and Candace Savonen did the publishing engineering for the cheatsheet. OTTR was created and or is maintained by the following team: Candace Savonen, Carrie Wright, Kate Isaac, Ava Hoffman, Adam Coffman, Katherine Cox, Federick Tan, John Muschelli, Howard Baek, and Jeffrey Leek.