Skip to content
Snippets Groups Projects
Select Git revision
  • main default protected
1 result
Blame Permalink
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
advanced_theme.md 2.37 KiB

Advanced theme options

theme.yml includes some advanced theme options to make it easy to customize the look and standard colors. Additionally, see "color-theme.md" for information about automatic theming Bootstrap color classes for buttons, text, and backgrounds.

Navbar colors

By modifying navbar-color and navbar-background the basic colors of the navigation elements can be switched following Bootstrap theme colors (see Bootstrap navbar docs).

  • navbar-color: either navbar-light" for use with light background colors, or "navbar-dark" for dark background colors
  • navbar-background: choose from standard Bootstrap color utilities, bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, or bg-white

Bootswatch themes

To play with more Bootstrap theme-ing, try swapping out a Bootswatch favor. This will remove default Bootstrap CSS for the Bootswatch version (from a CDN), swiftly changing the entire look. Choose from: cerulean; cosmo; cyborg; darkly; flatly; journal; litera; lumen; lux; materia; minty; pulse; sandstone; simplex; sketchy; slate; solar; spacelab; superhero; united; yeti.

This is mainly just a fun way to demonstrate the power of CSS and frameworks to transform look and feel.

Theme fonts

To tweak the default font and text colors check the "Theme fonts" section. These setting will be passed to /assets/css/cb.scss which in turn passes the values to the _sass to build out the final CSS.

  • base-font-size we set font size a bit bigger than Bootstrap default, which can be tweaked here.
  • text-color we set the base color to a darker black.
  • link-color by default set to match Bootstrap "info". This is an easy way to add a distinctive brand color to your site.
  • base-font-family sets the font-family for body, overriding Bootstrap. It will be necessary to use font-cdn or manually add loading the font in the head element (_includes/head/head.html).
  • font-cdn will add a font stylesheet, such as from Google Fonts, to the head element. Use valid markup, e.g. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">. Keep in mind, these CDN expose your users to a 3rd party service and trackers.

Theme icons

See "docs/icons.md" for details.