Editing site styles with Netlify CMS

I’m using Eleventy and Netlify CMS for a site, I’ve seen around that it is possible to change css properties with the CMS. Is this done through markdown like any other data or is there an ulterior method?

I understand that it might be easier to explain this with an example use case so I’ll set that now:

  1. A simple modal by default has a display set to to none. In the CMS, there is a boolean to toggle between display: none and display: block

  2. Styles across the site are given a color property of a variable, in the CMS there is a color picker (using the color widget) to change the global property of text on the site.

Like I explained, I’m using Eleventy. So markdown and nunjucks/liquid would be the langs thats would best fit my examples.

Would appreciate any help!

Hey @tomrutgers you do some great work with NetlifyCMS. Could you give me a hand here?

My knowledge of eleventy etc is non-existent, but I’ll take a stab at it anyway. Here we go:

I’d set up a settings file collection with a nested styling file. I’d use yaml instead of markdown as you’re not actually going to render any markdown.

in confg.yml:

collections:
  - name: settings
    label: Settings
    editor:
      preview: false
    files: 
      - name: styling
        label: Styling settings
        file: _data/styling.yml
        fields: 
          - {name: modal, label: Modal toggle, widget: boolean, required: false}
          ....

I think you have to use js-yaml and enable it:

const yaml = require("js-yaml");

module.exports = eleventyConfig => {
  eleventyConfig.addDataExtension("yml", contents => yaml.safeLoad(contents));
};

To use the boolean for a modal, try something like this (untested, as I’m not familiar with eleventy or nunjucks, for that matter):

<div {% if styling.modal %} style="display: block;"{% endif %}>

If you want to use hex codes from the color picker, I think you’ll need to render a style attribute in your <head> which sets the color to the right properties… It might be easier to use classes (eg .red) and render them to the body tag.

Resources:

1 Like

Replying here for if other people are curious how I got this working in my project here:

As for customizing color themes via Netlify CMS I used a combination of things. Have you used gulp before? Part of the magic is there with compiling scss to css and consuming it there. The order of steps to get this working are as follows:

  1. I have a json storing the colors as a simple key to value pair. Having it store as a json makes it possible for CMS to generate it as well. We would simply just need a text field that saves the hex value of the colors or something as the simplest of solutions. I took it a step further though and as you mentioned in the post, have a color picker. That is where I brought in this guy’s module:
    netlify-cms-widget-colorpicker - npm

It is the same concept but it just allows for nicer UX/UI.

  1. Once that json is available (in my github project it is /stylevariables.json), we can then consume that by turning it into SASS variables. There is another module I use to leverage that:
    https://github.com/kleveland/personal-site-template/blob/main/gulpfile.js

You can see the jsonCss function that essentially takes that json file from step 1 and compiles the json into SASS variables that can then be imported into my other SASS files to assign my color theme as needed. You can see the compiled version of the json here:

and then an example of how I import the variables and overwrite styles from my design framework here:

  1. The last thing to point out is to have this working nicely in a dev environment and also for it to build appropriately required some additional steps. First you should modify your gulp file to watch for changes and kick off a compile to css:
    https://github.com/kleveland/personal-site-template/blob/main/gulpfile.js

This will compile to css whenever changes are made to your SCSS files and then they will output in your CSS folder. Eleventy will then detect the changes to your CSS files and then reload.

In addition your package.json should be changed to support these commands. You can reference my package.json in my github as well.

Hope that helps! Maybe I will write an article on it as while writing it it turns out be a lot lengthier then I thought.

3 Likes

Hey there, @kylesloper!

This is a great question! It goes beyond my expertise, but I have looped in another Netlifier and hope to have some thoughts on the matter for you next week.

1 Like

Hi all :wave:

I think the approach described by @tomrutgers is the one I’d choose.

The CMS lets you save data in your repo. What you do later with that data during the build process that’s completely up to you.

You could even use the Code widget and edit CSS directly in the CMS and read it later during the build to apply the styles.

1 Like