Change "admin.css" to tweak a bit the CMS ui defaults

Netlify CMS
1

Hello, anyone knows how can I add a file admin.css on the CMS?
I want to change a bit the CSS from the CMS widgets.

I am using Gatsby and I don’t have any index.html to add the CSS and after importing it on the cms.js, I realized it just styles the <iframe> element of the window preview.

Thank you!

2

In the mean time I’ve found a solution.

Create the following file /src/cms/cms-utils.js and add the following code:

if (typeof window !== 'undefined') {

    // add admin.css
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = '/admin/admin.css'
    document.head.appendChild(link)

    if (process.env.NETLIFY_SITE_URL) {
        window.localStorage.setItem(
            'netlifySiteURL', process.env.NETLIFY_SITE_URL
        )
    }

    // Log netlifySiteURL if editing on localhost
    if (
        window.location.hostname === 'localhost' &&
        window.localStorage.getItem('netlifySiteURL')
    ) { 
        console.log(
            `%cnetlifySiteURL: ${window.localStorage.getItem('netlifySiteURL')}`,
            'color: hotpink; font-size: 15px'
        )
    }
}

Open the file cms.js and import the created file:
import './cms-utils'

Then, create a CSS file on /static/admin/admin.css and you are ready to go.

1 Like
3

Hi, @ositaka, I didn’t know the answer myself and want to thank you for taking the time to post your solution here.

I think this is a fantastic solution and I’m certain that someone else searching for a similar answer in the future will find this help.

If anyone else does find this helpful, please feel free to comment both to let @ositaka know. :smiley:

4

Hello @luke, thank you for the reply! :slight_smile: I don’t want take any credit on this, I got this code from a template. In the beginning of the year I’ve tried already to use this code, but it didn’t work on that time.

I had probablly messed something up.

1 Like
5

For those that do have access to index.html.

To clarify that you can add custom css as indicated in the docs.

Add <script>CMS.registerPreviewStyle("/admin/admin.css");</script> before the </body> in index.html as such:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
    <script>CMS.registerPreviewStyle("/admin/admin.css");</script>
  </body>
</html>

Then add your custom styling to admin.css. Here’s a start:

body {
  margin: 0;
  background-color: #faf9f9;
  color: #9d4e48;
}
.frame-content {
  margin: 1rem;
}
.frame-content > div > div + div {
  margin-top: 0.5rem;
  border-top: 1px dashed #dfdfe3;
  padding-top: 0.5rem;
}

Make sure that the admin.css is available in a static folder, mine is under /static/admin/admin.css for Nuxt.

2 Likes
6

Cheers for sharing this! People like you help make the Community great :grinning:

7

I am using gatsby CMS and this did not work - I have the cms-utils.js and have tried to make changes to static/admin/admin.css, but nothing changes in my deploy preview - I know my changes are being pushed, the site updates with .md file changes and I can see the admin.css file in the repo. Does anyone know why this might be?

8

hmm, is it possible you are seeing a cached version?