With custom CSS and JavaScript you can change pretty much anything in heyo appearance or functionality, and it’s pretty simple, too!

In config.toml, under [params], there are two fields: customCss and customJs, on those you can point to a file that will be imported when you build the site. This allows you to override the defaults and add your own functionality!

You can use remote files
If you want to use a remote file (from a CDN, for example), you can just put the URL there.

For example, if you set customJs = [‘https://cdnjs.cloudflare.com/ajax/libs/hi-sven/1.29.0/index.js’], you should see Hi Sven? in the DevTools’ (CTRL+SHIFT+I) console.
You’re not limited to a single file
You can have more than one custom file, just use a , to separate them, for example customCss = ['customCss/my-styles-1.css', 'customCss/my-styles-2.css']

CSS Example

Let’s say you want to change the default font, all you need to do is set customCss = ['customCss/my-font-family.css'] in config.toml and create a file at exampleSite/static/customCss/my-font-family.css with the following:

* {
    font-family: 'sans serif';
}

Your site should look something like this now:

exampleSite with a sans serif font

JavaSript Example

Let’s say you have the following in config.toml:

customJs = ['customJs/my-js.js', 'https://cdnjs.cloudflare.com/ajax/libs/hi-sven/1.29.0/index.js']

And you create a file at exampleSite/static/customJs/my-js.js with the following:

console.info("Hello from my-js.js");

You should see Hello from my-js.js and Hi Sven? in the DevTools’ (CTRL+SHIFT+I) console.