Jump to content
benbyf

AdminOnSteroids css helper to show its a dev site

Recommended Posts

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.

1931868546_Screenshot2019-04-2310_48_43.thumb.png.2bf4887c9edade02c3b4fbb4c8be28bb.png

  • Like 7

Share this post


Link to post
Share on other sites

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...

  • Like 3

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites
On 4/23/2019 at 11: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.

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.

Spoiler

<?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;
	}
	
}

 

 

  • Like 3

Share this post


Link to post
Share on other sites
5 minutes ago, 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;
	}
	
}

 

 

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

Share this post


Link to post
Share on other sites
20 hours ago, benbyf said:

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

There you are 🙂

The github version adds touch-enabled color pickers.

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...