Skip to content

Add Site Styling

Jump to bottom
Tiffany Forkner edited this page Feb 28, 2025 · 3 revisions

Important

All of the files in this section should be created in the gh-pages branch.

Create Directory _includes

Create a directory at the root level of the branch called _includes.

Allow Custom CSS

Create _includes/head.html and add the following code to allow for custom css to be included using a variable called custom_css.

<head>
  <!-- this section is standard to the minima theme -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {%- seo -%}
  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
  {%- feed_meta -%}
  {%- if jekyll.environment == 'production' and site.google_analytics -%}
    {%- include google-analytics.html -%}
  {%- endif -%}
  <!-- end standard header -->

  <!-- this section will loop through the values set in custom_css and add those spreadsheets to the headers -->
  {% if page.custom_css %}
    <!-- if the page includes a front matter definition for custom_css -->
    {% for stylesheet in page.custom_css %}
      <!-- loop through all of the custom_css values -->
      <!-- capture creates a link using the values in the variables -->
      {% capture link %}/assets/css/{{ stylesheet }}.css{% endcapture %}
      <!-- Liquid provides a helper method that will create the link relative to the baseurl set in _config.yml -->
      <link rel="stylesheet" href="{{ link | relative_url }}">
    {% endfor %}
  {% endif %}
</head>

Add Custom CSS File

Create directories assets/css. Create a custom CSS file for styling your pages and add it to the new directory. This is an example of what we are using.

Tip

assets/css/site.css

.post-content h2 {
   margin-top: 3rem;
}

.post-content h3 {
   margin-bottom: 0;
}

.branch-header {
   margin-top: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: end;
}

.branch-header h3 {
   margin: 0;
}

.main-reports h3 {
   margin-top: 2.5rem;
}

.branch-reports {
   margin-top: 3rem;
}

Add Styling to Configurations

Open _config.yml and add the following configs to set the styling for specific pages.

#... previous configs

defaults:
  -
    scope:
      path: ""
      type: "pages"
    values:
      layout: "page"
  -
    scope:
      path: "index.markdown"
    values:
      custom_css: [site] # should match the css filename created above

Home

Instructions

Jekyll Code

GitHub Configuration

GitHub Actions

In gh-pages

In main

Additional Resources

Clone this wiki locally