Home
Support Forums

Jekyll - How can I change my CSS in Netlify CMS?

Hi. I have a Jekyll-based static website. I just want to change its .css in CMS. But I dont know how.

I did something like this in /admin/config.yml:

- name: theme
    label: Theme
    editor:
      preview: false
    files:
      - file: style.css
        label: Styling
        name: styling
        fields:
          - { label: bg-color, name: title, widget: string }
          - { label: subtitle, name: subtitle, widget: string }
          - { label: button-text, name: button-text, widget: string }
          - { label: button-link, name: button-link, widget: string }

What should I do for this? Thanks

Hi @ubezdik,

To set custom CSS for preview, you need to use this:

https://www.netlifycms.org/docs/customization/#registerpreviewstyle

However if you’re asking something else altogether, kindly explain it further.

Sorry, what I mean is not the admin panel CSS. The CSS of my Jekyll site. Am I right?

So you wish to change CSS of your Jekyll site from CMS? I think a lot of that is going to be done side Jekyll.

Considering you’re saving the file as Markdown, you’d have to ask Jekyll to process the markdown file, and from its front matter set the styles. CMS won’t be able to generate a CSS file for you if that’s what you’re looking for.

Actually, I am not looking for generate a CSS. I just have a static style.css file and I want to change its variables like background-color: $variable

The way Ruby-based SSG’s like middleman and jekyll work, this should be possible. I’ve never done it, but I’d go at it like this:

Store your variables in a data file:

- name: theme
    label: Theme
    editor:
      preview: false
    files:
      - file: _data/theme.yml
        label: Styling
        name: styling
        fields:
          - { label: bgcolor, name: title, widget: string }
          - { label: subtitle, name: subtitle, widget: string }
          - { label: button-text, name: buttontext, widget: string }
          - { label: button-link, name: buttonlink, widget: string }

Rename your style.css to style.css.erb

Then load the variables:

body {
  background-color: <%= site.data.theme.bgcolor%>;
}

I’d avoid using dashes in your variable names altogether.

1 Like