Custom Styling of a Distill Website

Some Examples of CSS Tweaks I made to the Distill Theme

Custom Styling

I really love the Distill framework but have opted to make some custom styling changes. The process of adding custom styling (CSS) to your website is described in detail in their documentation.

In my own words the steps were as follows:

R Studio

• Create a new theme:

  distill::create_theme()
  

• Add the custom css file to your website:
  • Open _site.yml
  • Change the output format to (keep the tab indents!):

  output:
    distill::distill_article:
      theme: theme.css

• Update the theme.css file as desired (see example changes below)

Adjustments

If you also want to make the adjustments shown below, add the displayed CSS code to the theme.css file.

Reduce the spacing between bullet-points

Before

After

CSS

/* Decrease spacing between elements of bullet lists */
/* 0.1em creates a small space between lines of text dependent on the font-size*/
d-article li, d-article ul, di-article ol {
  margin-bottom: 0.1em;
}