Never mistake your production, staging and local environments with Craft CMS

Have you ever acci­den­tal­ly changed some­thing in your stag­ing envi­ron­ment when you meant to make the change in pro­duc­tion? Let’s make sure that nev­er hap­pens again. 

In this post, I’ll share how I use Con­trol Pan­el CSS, a free Craft 5 plu­g­in, and some gar­ish design choic­es to make it bla­tant­ly obvi­ous which Craft CMS envi­ron­ment I am work­ing in.

Just how dis­tress­ing can these designs be? Take a look at the screen­shots below.

The mag­ic 🌈 behind these hard-to-miss designs is the Con­trol Pan­el CSS plu­g­in, com­bined with some straight­for­ward CSS files and a cou­ple of images.

I’ve cho­sen elec­tric 🟢 green for my local dev envi­ron­ment and a shock­ing 🔴 red for the stag­ing envi­ron­ment. Sta­t­ic images also water­mark each screen.

The pro­duc­tion envi­ron­ment remains unchanged. Clients will see the clean and refined con­trol pan­el that ships with Craft. 

How to set this up

Down­load the files from my GitHub repo. The essen­tial CSS and image files are in the static direc­to­ry.

Save the static direc­to­ry to your pub­lic files direc­to­ry, typ­i­cal­ly the web direc­to­ry.

/static
├── css
|  ├── cp_dev.css
|  └── cp_staging.css
├── local_id.png
└── staging_id.png

In your local .env file, add a vari­able point­ing to the devel­op­er site’s CSS file:

CP_CSS_PATH=/static/css/cp_dev.css

In your stag­ing .env file do the same update.

CP_CSS_PATH=/static/css/cp_staging.css

Because we don’t intend to alter the pro­duc­tion site, leave your pro­duc­tion .env file unchanged.

Next, install Con­trol Pan­el CSS. In the plug­in’s set­tings page, set the CSS File path to the $CP_CSS_PATH you cre­at­ed above.

Push the updat­ed files to your stag­ing and pro­duc­tion envi­ron­ments, and you’re done.

Can it get any worse? I hope so!

If you cus­tomize your local and stag­ing envi­ron­ments to be even more flashy, please post them on Threads and tag me. I’d love to see your designs!