Customising the default Jekyll theme (with minimal fuss)
You can use Jekylls "inheritance" feature to avoid messing around with the Minima theme’s files.
Jeykll is supposed to be simple, right? This site uses it, and I chose it because I wanted a static site that I could add content to with minimal friction. I think I chose well, but one thing kinda bothered me - why isn’t it more obvious how to make minor style changes?
Jekyll’s default theme, Minima, is very nice. I wanted to keep 99% of it, but make some basic style changes like colours and fonts. Advice on the internet might lead you down the path of extracting layout files from the Minima gem, or even including a copy of the entire gem within your own repository. This felt a bit heavy handed and overly fussy to me.
Because Jekyll supports inheritance with its layouts, you can leave the Minima theme files entirely intact (and tucked away in the gem they are now in, since version 3.2). The trick is to inherit and extend Minima’s three default layouts, which are home, page and post. Here’s how:
Add a layouts folder and some custom layouts
Add a folder called _layouts to the base of your project folder. If you’re running Jekyll prior to version 3.2, this may already exist. Then add three layout files to this new folder: home_with_custom_styling.html, page_with_custom_styling.html and post_with_custom_styling.html. Here’s one of mine:
---
layout: page
---
{% include custom_styling.html %}
{{ content }}Pretty simple: this new layout just inherits from the default page layout, but uses Jekyll’s include functionality to add some additional HTML to the top of the page.
Add an includes folder and an HTML file with custom styling
Now create an _includes folder in the base of your project folder, if it doesn’t exist, and create a file called custom_styling.html. In this file, we’ll use <style> and <link> HTML elements to append CSS and load custom fonts over top of the default Minima theme. This site’s custom_styling.html looks like this:
<!-- Load favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<!-- Load the "Hedvig+Letters+Serif" font from Google Fonts for body text -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif&display=swap" rel="stylesheet">
<!-- Override some of the default Minima theme's styling -->
<style>
/* Include the Labours font for titles, etc. Used under a paid licence from Fontspring */
/* https://www.fontspring.com/fonts/akufadhl/labours */
@font-face {
font-family: 'labours-regular';
src: url('/assets/labours-regular-webfont.woff2') format('woff2'),
url('/assets/labours-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Add a background colour and use the Hedvig Letters Serif font for the body text */
body {
background-color: #f7f5f4;
font-family: 'Hedvig Letters Serif', sans-serif;
}
/* Increase the line spacing on body text a bit */
p {
line-height: 1.7;
}
/* Override the default blue links color to a brown */
a,
a:visited {
color: #312c27;
}
/* Fix the vertical alignment of the top nav links */
a.page-link {
position: relative;
top: 1rem;
}
/* Use "Labours" as the title font throughout the site */
h1,
h2,
h3 {
font-family: 'labours-regular';
color: #e05236;
}
/* For lesser headings, like post subtitles, subdue the coloring a bit */
.post-content h4,
.post-content h5,
.post-content h6 {
font-weight: bold;
}
.post-content h4 {
font-size: 1.75rem;
}
.post-content h5 {
font-size: 1.5rem;
}
.post-content h6 {
font-size: 1.25rem;
}
a.site-title,
nav.site-nav {
line-height: 3;
position: relative;
left: -0.5rem;
font-family: 'labours-regular';
text-decoration: none;
}
@media only screen and (max-width: 600px) {
a.site-title {
font-size: 1rem;
}
nav.site-nav {
font-size: 0.75rem;
}
a.page-link {
position: relative;
top: 0.25rem;
}
}
/* Add the dinner bell logo to the left of the site title */
a.site-title::before {
content: '';
background: url('/assets/Dinner-Bell-Designs-Logo-Bell-Only.png');
background-size: cover;
display: inline-block;
width: 3em;
height: 3em;
margin-right: 0.5rem;
vertical-align: bottom;
}
/* Adjust the content and styling of the default footer */
.footer-col-1 {
width: -webkit-calc(25% - (30px / 2));
width: calc(25% - (30px / 2));
}
.footer-col-2 {
width: -webkit-calc(75% - (30px / 2));
width: calc(75% - (30px / 2));
position: relative;
top: 1.7rem;
}
li.p-name {
display: none;
}
svg.svg-icon {
position: relative;
top: 0.25rem;
}
@media only screen and (max-width: 600px) {
.footer-col-1 {
width: 10rem;
margin: auto;
}
.footer-col-2 {
width: 100%;
}
.footer-col-2 ul.social-media-list {
text-align: center;
}
}
/* Better background color for code snippets */
pre,
code {
background-color: #ffffff;
max-height: 20rem;
}
/* Video Styling */
div.video-container {
position: relative;
width: 33%;
overflow: hidden;
float: left;
top: 0.5rem;
margin-right: 2rem;
margin-bottom: 1rem;
border: 1rem solid white;
box-sizing: border-box;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
/* Add this line for drop shadow */
/* transform: rotate(-2deg); */
}
div.video-cropper {
position: relative;
width: 100%;
aspect-ratio: 1/1;
overflow: hidden;
}
@media only screen and (max-width: 600px) {
div.video-container {
width: 100%;
top: 0;
margin-right: 0rem;
/* transform: none; */
}
}
div.video-cropper video {
width: 100%;
height: 100%;
object-fit: cover;
}
div.video-info {
position: relative;
top: .4rem;
padding-bottom: 0.4rem;
}
div.video-info .title {
font-family: 'labours-regular';
font-size: 1rem;
color: #e34444;
margin-bottom: 0;
}
div.video-info .caption {
font-size: .8rem;
color: rgb(130, 130, 130);
margin-bottom: 0;
}
div.paid-download-container {
text-align: center;
border: 1rem white solid;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin-bottom: 2rem;
position: relative;
overflow: hidden;
}
div.paid-download-container span.side-ribbon {
position: absolute;
left: 0;
top: 0;
z-index: 100;
color: white;
font-size: 0.8rem;
transform: rotate(-45deg) translate(-30%, -40%);
min-width: 200px;
font-weight: bold;
box-shadow: 0px 2px 2px 1px #1209096e;
background-color: #e34444;
}
</style>Use your new layouts in any new posts or pages
Don’t forget to use your new layouts when you make a new post or page! For example, the file for this post starts with these lines:
---
layout: post_with_custom_styling
title: "Customising the default Jekyll theme (with minimal fuss)"
date: 2023-11-21 13:39:32 -0500
---Presto, chango, you’ve got a lightly restyled site, while maintaining the integrity of the default Minima theme. No fuss neccesary!