8. Customizing

Colors

CSS Custom Properties

You can override any of the CSS custom properties in a <your_site>/assets/custom.css file or whatever file you set custom_css to in params.toml.

If you want to change your whole theme's primary color in one go, set a --color-primary property to your chosen color.

Example global property override:

/* Light AND dark theme override */
:root, [data-theme="dark"] {
    --color-primary: green;
}
/* Separate overrides for light and dark */
:root {
    --color-primary: green;
}
[data-theme="dark"] {
    --color-primary: red;
}

CSS Class Overrides

For individual elements that don't have a property, find their class in the source code or browser and override that.

For example, the homepage hero buttons have classes .btn-primary and .btn-secondary and are children of .hero-info.

You would override just those buttons with something like this:

.hero-info .btn-primary {
    background-color: green;
    border-color: green;
}

.hero-info .btn-secondary {
    color: green;
    border-color: green;
}

Icons

Icons use --color-primary for their fill property (CSS color won't change SVG color unfortunately so you'll have to override the SVG layout templates if you want them to differ from your --color-primary property).

Fonts

Only font sizes are exposed as custom properties currently. This is because the theme uses local fonts and doesn't load them from a CDN which makes the process a little more difficult. This may be improved in a future release.

You can however customize fonts by adding the files to <your_site>/static/fonts/<font_name>/* or similar, then creating @font-face declarations for them (see themes/hugo-liftoff/assets/scss/base/_fonts.scss to see how it's done for the default font.

Example; in practice you'd have 1 declaration for each font style:

@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Thin'),
      url('/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

Then in your custom.css, add an override for the body font:

body {
    font: normal 125%/1.4 "Montserrat", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

Layouts

As is standard with Hugo, you can override any layout by creating a same-named file that matches its exact location relative to the theme. This is helpful as a temporary workaround while a feature gets fixed/added or if you want to add significant customizations to a template not offered by the theme.

Markdown

Image Styles

You can add CSS classes to images in markdown with URL fragments in the markdown image URL. This is processed via the image markdown render hook in hugo-liftoff/layouts/_default/_markup/render-image.html.

![alt text](image.png#class)

Then in assets/custom.css in your project:

.class {
    width: 50%;
}

Alternatively you could customize the global style (.single-post-image) in your custom.css file or use a figure shortcode and add a style or class attribute from there.