Paris Service Portal: Change :hover color on primary button?

[C_K_1]

Hi, 

I am a bit lost and maybe someone is able to point me into the right direction. I want to customize .btn-primary in the Service Portal. I am able to do this for example with the branding editor, by editing the Variables in the Portal page or by creating my own theme. 

But I am not able to get the :hover color to change. It's always #1f8476 (the default). I am able to see my own changes in the sp-bootstrap.scss file but these are overriden by the other value i mentioned above. 

Am I missing something?

Regards
Chris

[Will Carper · Accepted solution]

Howdy Chris,

This seems to be an error in ServiceNow. I am able to reproduce your issue by requesting a free developer instance and modifying the primary color in Brand Editor. Once hovered over (in Theme Preview), the default primary color is displayed instead. 

To see if issue was isolated to Paris, I checked another developer instance with Orlando and the issue did not reproduce. I didn't see it in the known error list, so I reported the issue to HI.

https://hi.service-now.com/kb_view.do?sysparm_article=KB0597477

I'll let you know if they communicate a work around 🙂

[C_K_1]

Hi Will, 

thanks for that Info. I also figured this out in the meantime. 

[Kris Keerthipad]

Hi,

I ran into the same issue after the Paris upgrade, but found a workaround to fix it.

Open the portal theme(in my case La Jolla) and open your style sheet under the related list "sp-theme-la-jolla.css" and add the below code with your choice of branding colors. 

.btn-primary:hover {
color: #ffffff;
background-color: #007bac;
border-color: #006188;
box-shadow: none;
}

.btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:focus {
background-color: #009fdf;
border-color: #008dc6;
}

After saving, clear the cache before testing.

[bjb]

Thanks for looking into this Kris.

I think the workaround provided by SN may be better in case you ever want to update the primary brand color in the future without having to worry about where you have specifically set it in a stylesheet.

Service Portal "Primary" button on branding editor not working properly when hover over:
https://hi.service-now.com/kb_view.do?sysparm_article=KB0861839.

Strange this was not fixed in any of the Paris patches to date (current available now is Paris Patch 4) given this would affect all users of Service Portal who have a non OOTB primary brand colour for their portal.