Service Portal - Hover property

Nuno Oliveira · ‎10-28-2022

Hi there,

Anyone knows how to change the css hover property from the menu on the Portal header to a more dynamic way?

Best regards

Nuno Oliveira · ‎11-11-2022

So, I just achieve this by cloning the Stock widget and added the follow:

CSS

:root {

--hover-color: #1fff8f;

}

.nav > li > a:hover {

color: var(--hover-color);

}

Server

var gr = new GlideRecord('table');

if (gr.get(id)) {

data.hover_color = gr.getDisplayValue("u_menu_hover_color");

}

Link function

var r = document.querySelector(':root');

r.style.setProperty('--hover-color', scope.data.hover_color);

RaghavSh · ‎10-28-2022

what does more dynamic way means?

Raghav
MVP 2023
LinkedIn

Nuno Oliveira · ‎10-28-2022

Like, if I have a condition fulfilled the hover color changes, something like that.

RaghavSh · ‎10-28-2022

Condition based color change will require code change and widget clone.

Its not best practise to clone widgets for just color changes.

Raghav
MVP 2023
LinkedIn

Nuno Oliveira · ‎10-31-2022

Hi Raghav,

Yes, I know, but you know how I can achieve this? I already tried a lot of different approaches and nothing.