Stale Tag Overlay

Nathan_Moore · August 21, 2025, 7:50am

I wanted a user selectable project wide option for hiding/showing the overlay and I have accomplished it, so thought I’d include it here for anyone else who stubles across this.

Note: It requires a :has() css selector. Most modern browsers have it but you can check here for compatibility: :has() CSS relational pseudo-class | Can I use... Support tables for HTML5, CSS3, etc

Add a custom session parameter called BadQualityIndicator (or whatever you prefer).

At the root of one of your views that will always be on your page (a docked view that you never change works best) add a binding to the style > classes

{
  "type": "property",
  "config": {
    "path": "session.custom.BadQualityIndicator"
  },
  "transforms": [
    {
      "fallback": "",
      "inputType": "scalar",
      "mappings": [
        {
          "input": "Full",
          "output": ""
        },
        {
          "input": "Minimal",
          "output": "minimal-cfo"
        },
        {
          "input": "None",
          "output": "hide-cfo"
        }
      ],
      "outputType": "scalar",
      "type": "map"
    }
  ]
}

Anywhere in your project you can create a dropdown with a bi-directional binding to your custom session parameter and have the options be Full, Minimal, None.

Lastly in your advanced stylesheet or theme.css add the following:

body:has(.psc-hide-cfo) .cfo-parent {
    display: none;
}


body:has(.psc-minimal-cfo) .cfo-parent.cqfo-error {
    border: none;
}

This is a sample to get you going, but if you’re familar with css you can adjust to your needs, create additional options etc.