doublesecretagency/craft-cpcss

Add custom CSS to your Control Panel.

Maintainers

👁 lindseydiloreto

Package info

github.com/doublesecretagency/craft-cpcss

Documentation

Type:craft-plugin

pkg:composer/doublesecretagency/craft-cpcss

Statistics

Installs: 462 555

Dependents: 5

Suggesters: 0

Stars: 117

Open Issues: 3

3.0.0 2024-02-21 03:01 UTC

Requires

Requires (Dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

None

MIT 36ecacb6eed97a452e52d6b321834ed6c0a59522

csscmsCraftcraftcmscraft-plugincp-css

This package is auto-updated.

Last update: 2026-06-11 21:52:51 UTC


README

👁 Plugin icon

Control Panel CSS plugin for Craft CMS

Add custom CSS to your Control Panel.

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

👁 Image

After installing the plugin, go to:

  • Settings > Control Panel CSS

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

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

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

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

File Hashing

To ensure you get the freshest version of your CSS, a cache-busting hash is appended to the end of each file reference.

This can be disabled by setting cacheBusting to false in the PHP config file...

// Disable hash-based cache busting
'cacheBusting' => false

See config file for usage instructions.

Anything else?

We've got other plugins too!

Check out the full catalog at plugins.doublesecretagency.com

On behalf of Double Secret Agency, thanks for checking out our plugin! 🍺

👁 Logo for Double Secret Agency