Show a Staging Banner in the Joomla Administrator

A staging copy and the live site share the same template, the same content and the same login screen. With both open in browser tabs, sooner or later someone edits the live site thinking it's the copy, or the other way round. You can give the staging admin a red bar across the top and a tag in the tab title with one HTML snippet in Code Snippets.

The snippet code

The snippet adds a thin red bar above the administrator header and puts the same word in front of the page title, so the browser tab reads "[STAGING] Articles". It only does so on the hostnames you list. That check matters: snippets live in the database, so when you copy the staging database to the live site the snippet comes along, and the hostname check is what keeps the bar off the live site.

<style>
  .tcs-staging {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 5px 0;
    background: #c0392b;
    color: #fff;
    font: 700 13px/1.2 system-ui, sans-serif;
    letter-spacing: .12em;
    text-align: center;
    pointer-events: none;
  }
  body.tcs-staging-on { padding-top: 26px; }
  body.tcs-staging-on #header { top: 26px; }
</style>
<div class="tcs-staging" hidden></div>
<script>
(function () {
  // The hostnames where this is the staging site. The banner only shows there,
  // so it stays away when the database is copied to the live site.
  var hosts = ['staging.example.com'];

  // The text of the banner and of the browser tab.
  var label = 'STAGING';

  // Do not edit below.
  if (hosts.indexOf(location.hostname) === -1)
  {
    return;
  }

  var bar = document.querySelector('.tcs-staging');

  bar.textContent = label;
  bar.hidden = false;
  document.body.classList.add('tcs-staging-on');
  document.title = '[' + label + '] ' + document.title;
})();
</script>

Put your staging site's hostname in hosts, without https://, and add more in the same list if you have several. Change the word in label to taste, and the color in the background line of the style block.

How to add this snippet

1. Install Code Snippets if it isn't installed already.
2. Log into your Joomla backend.
3. Go to Components → Tassos Code Snippets.
4. Click New.
5. Enter a title, for example Staging banner.
6. Set Code Type to HTML.
7. Set Insertion Method to Auto-Insert Locations.
8. Set Location to Admin Body.
9. Paste the code above into the editor.
10. Click Save & Close.

Admin locations are part of Code Snippets Pro.

Check that it works

1. Reload any administrator page on the staging site.
2. Look at the top of the page and at the browser tab.

A red STAGING bar sits above the header, and the tab title starts with [STAGING]. The bar shows on the login screen too, so you know where you are before you sign in. Open the live site's administrator and both are gone.

To learn more about how HTML snippets work, read the HTML snippet docs.