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:
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
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.
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.
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.
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:
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.
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:
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.
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.