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

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!

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

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:

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