Control Panel CSS plugin for Craft CMS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Control Panel CSS plugin for Craft CMS

Easily overwrite the default Control Panel styles that ship with Craft.


This version is for Craft 3. To install it, visit the Plugin Store in your site's Control Panel.

For the Craft 2 version, see the v1 branch...


After you've installed the plugin, go to:

  • Settings > Plugins > Control Panel CSS

Your custom CSS can be saved in either (or both) of two places:

1) An external file in your public directory...

2) The "Additional CSS" field on the settings page...

You can now customize the CSS in any way you see fit!


Starter Code

Customizing your CSS is pretty easy. But to make it even easier, here's a snippet to get you started...

/* Sidebar background color */
#global-sidebar {
    background: #333f4d;
}

/* Header background color */
#main-container #main #header {
    background: #ebedef;
}

/* H1 tags */
h1 {
    color: #29323d;
}

/* Standard button color */
.btn.submit {
    background: #da5a47;
}
/* Hover button color */
.btn.submit:not(.disabled):not(.inactive):hover,
.btn.submit:not(.disabled):not(.inactive).hover {
    background: #bf503f;
}
/* Active button color */
.btn.submit:not(.disabled):not(.inactive):active,
.btn.submit:not(.disabled):not(.inactive).active {
    background: #8c3b2e;
}

And here's the same code as a Gist...


Environment-aware file path

If you'd like to set your CSS file path at the environment level, then you'll simply want to create a /config/cp-css.php file, and enter something like this...

return [
    '*' => [],
    'dev' => [
        'cssFile' => 'http://local.dev/path/to/cp.css',
    ],
    'production' => [
        'cssFile' => 'http://example.com/path/to/cp.css',
    ]
];

You can also keep the file path out of your repo entirely, by using .env variables to set the CSS file path...

return [
    'cssFile' => getenv('CP_CSS_FILE'),
];

With that in place, you can add this to your .env file...

# Path to CSS file for the Control Panel
CP_CSS_FILE="http://example.com/path/to/cp.css"

Anything else?

We've got other plugins too!

Check out the full catalog at doublesecretagency.com/plugins