Never mistake your production, staging and local environments with Craft CMS
This narration of this post was created with Bespoken plugin for Craft CMS.
Have you ever accidentally changed something in your staging environment when you meant to make the change in production? Let's make sure that never happens again.
In this post, I'll share how I use Control Panel CSS, a free Craft 5 plugin, and some garish design choices to make it blatantly obvious which Craft CMS environment I am working in.
Just how distressing can these designs be? Take a look at the screenshots below.
The magic 🌈 behind these hard-to-miss designs is the Control Panel CSS plugin, combined with some straightforward CSS files and a couple of images.
I've chosen electric 🟢 green for my local dev environment and a shocking 🔴 red for the staging environment. Static images also watermark each screen.
The production environment remains unchanged. Clients will see the clean and refined control panel that ships with Craft.
How to set this up
Download the files from my GitHub repo. The essential CSS and image files are in the static
directory.
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 a variable pointing to the developer site's CSS file:
CP_CSS_PATH=/static/css/cp_dev.css
In your staging .env
file do the same update.
CP_CSS_PATH=/static/css/cp_staging.css
Because we don't intend to alter the production site, leave your production .env
file unchanged.
Next, install Control Panel CSS. In the plugin's settings page, set the CSS File path to the $CP_CSS_PATH
you created above.
Push the updated files to your staging and production 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 flashy, please post them on Threads and tag me. I'd love to see your designs!