Add custom HTML before div#pw-mastheads if in debug mode

[DrQuincy]

I have had a client say that because the dev and live hosts are so similar they get confused between the development and production CMSs. They have asked for a way to make it clearer which environment they're in.

Although it says “The site is in debug mode, suitable for sites in development” in yellow when you log in on the dev version I think they are wanting something more obvious.

An easy solution would be to add a message at the top of the page in debug mode. After messing around with Inspect element it seems if I could insert custom HTML before div#pw-mastheads that would do the trick.

Is there a hook for this? I could do it with custom JS but is there any way to tell from the DOM or an existing JS variable if it's in debug mode?

Thanks.

[DV-JF]

Hey @DrQuincy

in site/templates/admin.php you could do somthing like this:

<?php $wire->addHookAfter('AdminTheme::getExtraMarkup', function(HookEvent $event) {
   
    $parts = $event->return;
	$markup = '';
	
	if((wire('config')->debug) == true) $markup = '
        <div class="pw-container uk-container uk-container-expand">
            <div class="uk-alert uk-alert-danger">Your in Debug Mode!</>
        </div>';
    
    $parts['masthead'] .= $markup;
    $event->return = $parts;
  
});?>

Perhaps you could even check the $config->httpHosts if you want to.

I hope this'll help you ? Many greets!

[DrQuincy]

Wow, that is just what I needed! Thanks so much!

[MarkE]

My solution to this has been simply to add a warning in ready.php. The solution above looks neater though, and not dismissible (which may be a good or bad thing). 

[DrQuincy]

That's a nice simple solution. I'd probably use that for myself but in this instance the client wanted something more obvious.