Jump to content

AdminOnSteroids css helper to show its a dev site

benbyf

By benbyf,
in General Support

 Share

Recommended Posts

benbyf Hero Member

benbyf

Posted
Posted

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 8
Link to comment
Share on other sites
dragan Hero Member

dragan

Posted
Posted

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 4
Link to comment
Share on other sites
BitPoet Hero Member

BitPoet

Posted
Posted
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
Link to comment
Share on other sites
benbyf Hero Member

benbyf

Posted
  • Author
Posted
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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...