Skip to main content
Question

Change logo in new UI (Event Monitor)

  • April 8, 2025
  • 1 reply
  • 70 views
D
Do Gooder (Customer)
Forum|alt.badge.img+7
  • DuncanK
  • Do Gooder (Customer)
  • 21 replies

Hello. I am looking for information on how to change the default logo on the new Event Monitor UI to our company logo. I have tried making this change using the stylings form in assyst similar to how we have changed to logo on our assystNet and assystWeb pages, but either I have not been able to identify the correct element to apply the CSS to, or this is configured differently. 

This is what we want to change:

 

 

I have not been able to find any information on this in the wiki. 

Thank you. 

assyst Version: 24R2 SU2
Build: 12943 Date built: Mar 18, 2025 1:39:00 AM

1 reply

S
Hero (Customer)
Forum|alt.badge.img+12
  • Steve Miller
  • Hero (Customer)
  • 145 replies
  • April 25, 2025

They have used a variable in the CSS pointing to :root. You cannot overwrite this variable because it is also set inline at the html level.

So you have two options:

Option 1: Directly overwrite the CSS rule with a hardcoded image url

.headerLogoContainer {
	background-image: url("/assystimages/logo.png") !important;
}

Option 2: Overwrite the CSS rule to point to a custom variable in your own :root for reusability.

:root {
    --corporate-logo: url("/assystimages/company_logo.png");
}

.headerLogoContainer {
	background-image: var(--corporate-logo) !important;
}

Whichever you use, don't forget the !important to overwrite the any cascaded values inherited from the html in-line styling. I haven't managed to get it to work without this.


Terms & ConditionsCookie settingsAccessibility statement