https://github.com/doublesecretagency/craft-cpcss

Control Panel CSS plugin for Craft CMS
https://github.com/doublesecretagency/craft-cpcss

control-panel-css craft craftcms css

Last synced: 5 days ago
JSON representation

Control Panel CSS plugin for Craft CMS

• Host: GitHub
• URL: https://github.com/doublesecretagency/craft-cpcss
• Owner: doublesecretagency
• License: mit
• Created: 2014-05-13T08:38:36.000Z (almost 11 years ago)
• Default Branch: v3-dev
• Last Pushed: 2024-07-11T17:28:43.000Z (7 months ago)
• Last Synced: 2025-02-09T04:08:42.820Z (12 days ago)
• Topics: control-panel-css, craft, craftcms, css
• Language: PHP
• Size: 1.15 MB
• Stars: 117
• Watchers: 9
• Forks: 8
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


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

![](src/resources/img/example-cp.png)

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

![](src/resources/img/example-cssFile.png)

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

![](src/resources/img/example-additionalCss.png)

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

```css

/* 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...](https://gist.github.com/lindseydiloreto/37332424e0edaef54cabc50c324b0fab)

---

## 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](https://github.com/doublesecretagency/craft-cpcss/blob/v2/src/config.php)...

```php

// 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](https://plugins.doublesecretagency.com)

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