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);

View solution in original post

RaghavSh · ‎10-31-2022

ok, in the header widget client controller try below (using jquery to get element and add css)

if('your condition')

{

$('.class').css('color' , 'blue'); // get your element with class.

$('#id').css('color' , 'blue'); // get your element with id.

}

else if('your other condition')

{

}

Please mark the answer correct if this helps

Raghav
MVP 2023
LinkedIn

Nuno Oliveira · ‎10-31-2022

Thank you, but I already tried that and it didn't work

RaghavSh · ‎10-31-2022

In that case you need to share your code snipped.

Raghav
MVP 2023
LinkedIn

Nuno Oliveira · ‎10-31-2022

I don't think that is because of the code, I think it is because of the location 😞 Where do you think I should put this code to work? I tried on the stock header, but it didn't work.

RaghavSh · ‎10-31-2022

I dont think it will work anywhere else than the header because you need a client side script for this. Are you able to get your element with correct id or class

All themes , page specific css or css includes will not allow you to check if condition.

Raghav
MVP 2023
LinkedIn