Perspective Component Overlay Translation

Hello everyone,

I am looking to translate overlay labels such as "ERROR" or "UNKOWN", and I can't seem to figure out a way to do it. Same term gets translated successfully when written in a label component.


image

System:

  • Windows Server 2019
  • Ignition Gateway v8.1.44
  • Designer

Hi, I'm looking for the same solution. Did you ever manage to find a way to translate overlays?

Hey, this might work if you add it into the advanced stylesheet:

.ia_qualityOverlay__footer--error span{
	display: none;
}

.ia_qualityOverlay__footer--error::after{
	content: 'THIS WAS A MISTAKE!!!';
	display: block;
}

Obviously, replace the text with the translation you want :slight_smile:

This is only for the error overlay, but there are equivalents for the other overlays.

1 Like

It doesn't seem to be supported natively (yet?). We kept it in english for now.

this may be a dumb question but how do you drill down to find how to reference components like ‘.ia_qualityOverlay__footer--error span’ is there a naming convention for every component or a list? or do you just have to be a wizard? (im dumb and really sleepy this morning i realize it’s just using inspect element and inspecting the CSS)

Load the page in the browser, hit F12 for Developer Tools, hit the Inspect button (usually on top left of Dev Tools) and select the item you want to inspect.

It should then display the HTML in one pane where you can see the style classes and the CSS in another pane where you can see the style definitions.

1 Like

Thanks!
I’ve posted a feature request in here, since I didn’t find existing one:
Perspective: Overlay translation | Voters | Inductive Automation
If anyone else is interested in this, feel free to give it a thumbs up so we can hopefully get it implemented sooner :smiley: