AdminOnSteroids css helper to show its a dev site

[benbyf]

Thought I'd share this quickly as it helps me get to grips with whether I'm looking at the dev site or live site when working on any client project. Dev site only has AdminOnSteroids module. I add the below to sites/templates/admin/admin.css and add that url the admin css field in the module.

Currently only works with default adminTheme.

#masthead{
    background: rgb(153, 12, 94) !important;
}
#logo:before{
    content: 'DEV ';
    color: white;
    margin-right: 1em;
    vertical-align: middle;
    display: inline-block;
    font-size: 1em;
    letter-spacing: 0.05em;
    margin: -15px 0.6em 0em 0;
}

Simply adds a DEV string and changes the header color so I can see I'm on Dev not live. I guess you could do the opposite if you wanted adding content: "LIVE" instead in the CSS.

[dragan]

You can do something similar for the frontend:

body.dev::before {
	content: 'DEV';
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	color: white;
	background-color: red;
	padding: 3px;
	font-size: 2rem;
	z-index: 99999;
}

(If you add a body class .dev when in dev mode)

similarly, you could add a few breakpoints, and display stuff like "sm", "m", "l", "xl" so you always know on which viewport you are, while debugging your frontend...

[szabesz]

Thanks for the tips! Note that @adrian's Tracy Debugger has similar options – in the case that one is installed too –, just look for: Indicator type and Custom Indicator CSS in settings.

[BitPoet]

  On 4/23/2019 at 9:54 AM, benbyf said:

I add the below to sites/templates/admin/admin.css and add that url the admin css field in the module.

Expand  

Thanks for posting that little trick. I took some inspiration there and made a small module that does the same without AOS. Should work with Default, Reno and Uikit themes. You can enable dev mode in the module's settings or by setting $config->devMode to true in site/config.php. Text and colors can be adapted in module settings.

  Reveal hidden contents

<?php

/**
 * Admin Dev Mode Colors
 *
 * ProcessWire CMS module
 *
 * Changes the top bar color and injects a configurable string next to / instead of
 * the PW logo on development machines.
 *
 * The colors and text can be set in the module's configuration.
 *
 * You can enable development mode in two ways:
 *	- in the module's configuration
 *	- by setting $config->devMode to a truthy value in site/config.php
 *
 * Currently supported admin themes:
 *	- AdminThemeDefault
 *	- AdminThemeReno
 *	- AdminThemeUikit
 *
 * This module is released under the WTFPL. No warranties, no restrictions.
 *
 **/

class AdminDevModeColors extends WireData implements Module, ConfigurableModule {
	
	public static function getModuleInfo() {
		return [
			"title"		=>	"Admin DEV Mode Colors",
			"summary"	=>	"Enable distinct color scheme for development installs of PW",
			"version"	=>	"0.0.1",
			"autoload"	=>	true
		];
	}
	
	public function init() {
		$this->addHookAfter("AdminTheme::getExtraMarkup", $this, "getColorMarkup");
	}
	
	public function getColorMarkup(HookEvent $event) {
		$parts = $event->return;
		
		if($this->config->devMode || $this->devMode) {
			$parts["head"] .= $this->getStyle();
		}
		
		$event->return = $parts;
	}
	
	protected function getStyle() {
		$bgcolor = $this->bgColor;
		if(! $bgcolor) $bgcolor = 'rgb(153, 12, 94)';
		$fgcolor = $this->fgColor;
		if(! $fgcolor) $fgcolor = 'rgb(255, 255, 255)';
		$devstring = $this->devString;
		if(! $devstring) $devstring = "DEV";

		$style = "<style>
		/* Top bar coloring */
		#masthead, #branding, #pw-masthead, #pw-masthead-mobile, body.AdminThemeReno a.main-nav-toggle { background-color: $bgcolor !important; }
		body.AdminThemeReno #masthead #topnav > li > a { color: rgb(201, 207, 222) !imoprtant; }
		
		/* Admin theme default */
		body.AdminThemeDefault #logo:before,
		body.AdminThemeDefault li.collapse-topnav-menu:after {
			content: '$devstring';
			color: $fgcolor;
			font-size: 2em;
			font-weight: bold;
			vertical-align: top;
			margin-right: 1em;
		}
		body.AdminThemeDefault #logo img {
			display: none;
		}
		
		/* Admin theme Reno */
		body.AdminThemeReno #logo:after {
			content: '$devstring';
			color: $fgcolor;
			vertical-align: middle;
			font-size: 2em !important;
			letter-spacing: 0.05em;
			margin-right: 5em;
		}
		body.AdminThemeReno #branding #logo img { display: none; }
		body.AdminThemeReno #branding #logo img.sm {
			display: inline;
			margin: 0;
		}
		body.AdminThemeReno #branding #logo {
			margin-top: 0.2em;
		}
		
		/* Admin theme Uikit */
		div.uk-navbar-right > ul > li:first-child > a:before,
		#pw-masthead-mobile a:after {
			content: '$devstring';
			margin-right: 5em;
			font-size: 2em;
			font-weight: bold;
			color: $fgcolor;
			vertical-align: middle;
		}
		</style>" . PHP_EOL;
	
		return $style;
	}
	
	public static function getModuleConfigInputfields($data) {
		$inputfields = new InputfieldWrapper();
		
		$f = wire('modules')->get('InputfieldText');
		$f->attr('id+name', 'bgColor');
		$f->attr('value', isset($data["bgColor"]) ? $data["bgColor"] : 'rgb(153, 12, 94)');
		$f->label = wire()->_("Background Color");
		$f->description = wire()->_("Background color for masthead (top bar)");
		$inputfields->append($f);
		
		$f = wire('modules')->get('InputfieldText');
		$f->attr('id+name', 'fgColor');
		$f->attr('value', isset($data["fgColor"]) ? $data["fgColor"] : 'rgb(255, 255, 255)');
		$f->label = wire()->_("Foreground Color");
		$f->description = wire()->_("Background color for dev text (top bar)");
		$inputfields->append($f);
		
		$f = wire('modules')->get('InputfieldText');
		$f->attr('id+name', 'devString');
		$f->attr('value', isset($data["devString"]) ? $data["devString"] : 'DEV');
		$f->label = wire()->_("Prepend Text");
		$f->description = wire()->_("Text to inject into the top bar");
		$inputfields->append($f);
		
		$f = wire('modules')->get('InputfieldCheckbox');
		$f->attr('id+name', 'devMode');
		$f->attr('value', 1);
		if(isset($data["devMode"]) && $data["devMode"]) $f->attr('checked', 'checked');
		$f->label = wire()->_("Enable DEV mode");
		$f->description = wire()->_("Check this box to enable DEV mode colors");
		$f->notice = wire()->_('You can also set $config->devMode = true in site/ready.php instead');
		$inputfields->append($f);
		
		return $inputfields;
	}
	
}

 

 

[benbyf]

  On 4/25/2019 at 12:22 PM, BitPoet said:

Thanks for posting that little trick. I took some inspiration there and made a small module that does the same without AOS. Should work with Default, Reno and Uikit themes. You can enable dev mode in the module's settings or by setting $config->devMode to true in site/config.php. Text and colors can be adapted in module settings. 

  Reveal hidden contents

<?php

/**
 * Admin Dev Mode Colors
 *
 * ProcessWire CMS module
 *
 * Changes the top bar color and injects a configurable string next to / instead of
 * the PW logo on development machines.
 *
 * The colors and text can be set in the module's configuration.
 *
 * You can enable development mode in two ways:
 *	- in the module's configuration
 *	- by setting $config->devMode to a truthy value in site/config.php
 *
 * Currently supported admin themes:
 *	- AdminThemeDefault
 *	- AdminThemeReno
 *	- AdminThemeUikit
 *
 * This module is released under the WTFPL. No warranties, no restrictions.
 *
 **/

class AdminDevModeColors extends WireData implements Module, ConfigurableModule {
	
	public static function getModuleInfo() {
		return [
			"title"		=>	"Admin DEV Mode Colors",
			"summary"	=>	"Enable distinct color scheme for development installs of PW",
			"version"	=>	"0.0.1",
			"autoload"	=>	true
		];
	}
	
	public function init() {
		$this->addHookAfter("AdminTheme::getExtraMarkup", $this, "getColorMarkup");
	}
	
	public function getColorMarkup(HookEvent $event) {
		$parts = $event->return;
		
		if($this->config->devMode || $this->devMode) {
			$parts["head"] .= $this->getStyle();
		}
		
		$event->return = $parts;
	}
	
	protected function getStyle() {
		$bgcolor = $this->bgColor;
		if(! $bgcolor) $bgcolor = 'rgb(153, 12, 94)';
		$fgcolor = $this->fgColor;
		if(! $fgcolor) $fgcolor = 'rgb(255, 255, 255)';
		$devstring = $this->devString;
		if(! $devstring) $devstring = "DEV";

		$style = "<style>
		/* Top bar coloring */
		#masthead, #branding, #pw-masthead, #pw-masthead-mobile, body.AdminThemeReno a.main-nav-toggle { background-color: $bgcolor !important; }
		body.AdminThemeReno #masthead #topnav > li > a { color: rgb(201, 207, 222) !imoprtant; }
		
		/* Admin theme default */
		body.AdminThemeDefault #logo:before,
		body.AdminThemeDefault li.collapse-topnav-menu:after {
			content: '$devstring';
			color: $fgcolor;
			font-size: 2em;
			font-weight: bold;
			vertical-align: top;
			margin-right: 1em;
		}
		body.AdminThemeDefault #logo img {
			display: none;
		}
		
		/* Admin theme Reno */
		body.AdminThemeReno #logo:after {
			content: '$devstring';
			color: $fgcolor;
			vertical-align: middle;
			font-size: 2em !important;
			letter-spacing: 0.05em;
			margin-right: 5em;
		}
		body.AdminThemeReno #branding #logo img { display: none; }
		body.AdminThemeReno #branding #logo img.sm {
			display: inline;
			margin: 0;
		}
		body.AdminThemeReno #branding #logo {
			margin-top: 0.2em;
		}
		
		/* Admin theme Uikit */
		div.uk-navbar-right > ul > li:first-child > a:before,
		#pw-masthead-mobile a:after {
			content: '$devstring';
			margin-right: 5em;
			font-size: 2em;
			font-weight: bold;
			color: $fgcolor;
			vertical-align: middle;
		}
		</style>" . PHP_EOL;
	
		return $style;
	}
	
	public static function getModuleConfigInputfields($data) {
		$inputfields = new InputfieldWrapper();
		
		$f = wire('modules')->get('InputfieldText');
		$f->attr('id+name', 'bgColor');
		$f->attr('value', isset($data["bgColor"]) ? $data["bgColor"] : 'rgb(153, 12, 94)');
		$f->label = wire()->_("Background Color");
		$f->description = wire()->_("Background color for masthead (top bar)");
		$inputfields->append($f);
		
		$f = wire('modules')->get('InputfieldText');
		$f->attr('id+name', 'fgColor');
		$f->attr('value', isset($data["fgColor"]) ? $data["fgColor"] : 'rgb(255, 255, 255)');
		$f->label = wire()->_("Foreground Color");
		$f->description = wire()->_("Background color for dev text (top bar)");
		$inputfields->append($f);
		
		$f = wire('modules')->get('InputfieldText');
		$f->attr('id+name', 'devString');
		$f->attr('value', isset($data["devString"]) ? $data["devString"] : 'DEV');
		$f->label = wire()->_("Prepend Text");
		$f->description = wire()->_("Text to inject into the top bar");
		$inputfields->append($f);
		
		$f = wire('modules')->get('InputfieldCheckbox');
		$f->attr('id+name', 'devMode');
		$f->attr('value', 1);
		if(isset($data["devMode"]) && $data["devMode"]) $f->attr('checked', 'checked');
		$f->label = wire()->_("Enable DEV mode");
		$f->description = wire()->_("Check this box to enable DEV mode colors");
		$f->notice = wire()->_('You can also set $config->devMode = true in site/ready.php instead');
		$inputfields->append($f);
		
		return $inputfields;
	}
	
}

 

 

Expand  

Wicked! If you happen to stick it up on github I'll use it for sure!

[BitPoet]

  On 4/25/2019 at 12:28 PM, benbyf said:

Wicked! If you happen to stick it up on github I'll use it for sure!

Expand  

There you are ?

The github version adds touch-enabled color pickers.