Customization and branding

Slides

 Open slides in new window  Download PDF of slides

Exercises

Themes

  1. Go to bootswatch.com and explore the different themes there (use the top navigation bar).
  2. Preview your site, then try changing different Bootswatch themes in _quarto.yml.

CSS and Sass

  1. Preview your site
  2. Use the browser inspector to select a heading
  3. Create a CSS style that targets that heading and makes it
    • red (color) and
    • italic (font-style) and
    • 30px (font-size)
  4. Bonus: Those in-browser edits will disappear if you refresh the page. See if you can figure out how to put them in your website. (Hint!)

Create a SCSS file and make a bunch of rules!

Branding

  1. There is a file named urban_institute.yml. Make a copy of it, rename it to _brand.yml, and rerender your site. What changes?

  2. Modify some of the variables in the _brand.yml file and rerender to see how your site changes. Explore the brand.yml documentation and see what other settings you can adjust.

    You can reset the file by copying and pasting it from here.

  1. In the first code chunk of 01-exercise.qmd, replace theme_minimal() with theme_brand_ggplot2(). You will need to supply a brand file path ("_brand.yml").

  2. Re-render and see what changes.

  3. Change the foreground and background colors in _brand.yml and rerun the code to create the plot. What changes?

  1. In 01-exercise.qmd, read in _brand.yml with read_brand_yml() from the {brand.yml} package. Store it as a variable named brand.

  2. Change the color of the points to the brand’s blue color and the line to the brand’s magenta color. You’ll use code that looks something like this:

    geom_line(color = brand$color$palette$black)

  3. Bonus task! Map a variable from the dataset to the color aesthetic and change the legend to use colors from the brand.

Create a brand file for yourself, your project, or your organization.

Don’t try to do this from scratch! Use these resources: