Never mistake your production, staging and local environments with Craft CMS
Have you ever accidentally changed something in your staging environment when you meant to do it on production? If not, you’re a better developer than I am!
I wanted to share how I use Control Panel CSS, a free Craft 5 plugin, and some distressing design choices to keep my Craft CMS environments straight.
Just how distressing can these designs be? Take a look.
![Sample of local control panel](https://static.supergeekery.com/site-assets/sample-of-local-control-panel.png)
![Sample of staging control panel](https://static.supergeekery.com/site-assets/sample-of-staging-control-panel.png)
![Sample of production control panel](https://static.supergeekery.com/site-assets/sample-of-production-control-panel.png)
Screenshots of local, staging, and production Craft CMS control panels.
The magic 🌈 behind these questionable designs is the Control Panel CSS plugin, combined with some straightforward CSS files and a couple of images.
I’ve gone with electric 🟢 green for my local dev environment and bright 🔴 red for the staging environment. There are static images watermarking each screen as well.
The production environment remains unchanged. Clients will see the clean and refined control panel that ships with Craft. Whew!
How to #
Download the files at https://github.com/johnfmorton/never— update— the— wrong— craftcms— environment— again.
Save the static
directory to your public files directory, typically the web
directory.
/static
├── css
| ├── cp_dev.css
| └── cp_staging.css
├── local_id.png
└── staging_id.png
In your local .env
file add:
CP_CSS_PATH=/static/css/cp_dev.css
In your staging .env
file add:
CP_CSS_PATH=/static/css/cp_staging.css
Leave your production .env
file unchanged.
Install Control Panel CSS and then in its settings page, set the CSS File path to $CP_CSS_PATH
.
![The Control Panel CSS settings screen](https://static.supergeekery.com/site-assets/2024-06-12_10-30-31.png)
Customize the Control Panel CSS settings to use your .env variable.
Get these changes pushed to your various environments and you’re done.
Can it get any worse? I hope so! #
If you customize your local and staging environments to be even more garish, please post them on Threads and tag me. I’d love to see your awful designs!