Skip to content

Modifying Theme CSS

Jump to bottom
Maddy Hodges edited this page Feb 19, 2020 · 26 revisions

Customizing CSS

To change the CSS which defines the look and feel of the Jekyll site you can edit the colors and fonts defined in the main css file theme.css. The theme.css file is located in /css/theme.css. You should not edit the bootstrap.min.css or syntax.css files.

Basic changes can be handled by simply editing the css variables that are located at the top of the theme.css file. For information about css variables please see refer to the MDN web doc Using CSS custom properties (variables)

We have provided information and resources for changing the theme's font, colors, and code syntax styling. If you would like to make any additional changes but, do not have any prior experience with CSS we recommend consulting the MDN Web Doc Debugging CSS

Changing Fonts

There are two fonts in use in the Jekyll site they both occur in the theme.css file.

.navbar {
  font-family: "Gentium Basic",serif; /* defines navbar  font */
}

:root {
  --theme-textfont: 'Open Sans',serif; /* text and headings font */
  ...
}

If you are unfamiliar with adjusting the font-family used in a CSS file please refer to this w3school documentation

Changing Colors

All theme colors are defined as CSS variables at the top of the file. If you would like to edit the colors used in the site, you can edit the hex code which defines the color directly at the top so you do not need to find all uses of the variable.

The colors are defined using the UPenn style guide colors. The main colors used in the file are denoted by '-primary' in the variable name.

Here is an example of what the top of the theme.css file could look like:

:root {
  --theme-textfont: 'Open Sans',serif;
  --theme-blue-primary: #01256e;
  --theme-red-primary: #95001a;
  --theme-yellow-primary: #f2c100;
  --theme-orange-primary: #c35a00;
}

When choosing theme color is it important to consider color contrast ratios (see:WebAIM Color Contrast Checker).

Changing Syntax Styling

The css file syntax.css defines the syntax styling of code blocks in the Jekyll site. We are using a WCAG AA compliant colorful.css theme. To view demos of other WCAG AA compliant syntax style sheets and access their source code please refer to: https://maxchadwick.xyz/pygments-high-contrast-stylesheets/.

TODO:

  • Explain how to figure out to change CSS for a specific element
  • Font section
  • syntax.css

Web Accessibility tools

Resources

Clone this wiki locally