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 do it on pro­duc­tion? If not, you’re a bet­ter devel­op­er than I am! 

I want­ed to share how I use Con­trol Pan­el CSS, a free Craft 5 plu­g­in, and some dis­tress­ing design choic­es to keep my Craft CMS envi­ron­ments straight.

Just how dis­tress­ing can these designs be? Take a look.

Screenshots of local, staging, and production Craft CMS control panels.

The mag­ic 🌈 behind these ques­tion­able 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 gone with elec­tric 🟢 green for my local dev envi­ron­ment and bright 🔴 red for the stag­ing envi­ron­ment. There are sta­t­ic images water­mark­ing each screen as well.

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

How to #

Down­load the files at https://​github​.com/​j​o​h​n​f​m​o​r​t​o​n​/​n​e​v​e​r​— u​p​d​a​t​e​— t​h​e​— w​r​o​n​g​— c​r​a​f​t​c​m​s​— e​n​v​i​r​o​n​m​e​n​t​— again.

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:

CP_CSS_PATH=/static/css/cp_dev.css

In your stag­ing .env file add:

CP_CSS_PATH=/static/css/cp_staging.css

Leave your pro­duc­tion .env file unchanged.

Install Con­trol Pan­el CSS and then in its set­tings page, set the CSS File path to $CP_CSS_PATH.

Customize the Control Panel CSS settings to use your .env variable.

Get these changes pushed to your var­i­ous 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 gar­ish, please post them on Threads and tag me. I’d love to see your awful designs!