Service Portal Search Bar Highlight and Like/Reply Color

[Zach N]

Hello!

I've created a custom theme for the Service Portal based on my company's colors, and so far I've got everything looking the way I want except for the search bar highlight color and the comments like/reply buttons.

Does anyone know where these are being set? My theme is based on the OOB La Jolla theme, but for the life of me I can't seem to locate where they are at. I would hope there are just some CSS variables that I can add to the theme.

If anyone can asset, that would be much appreciated!

Thanks!

[Mike Patel]

Looks like you want to change the border color of the box.

If so then you need below. make sure to change #842826 to your color

[tabindex]:focus {
    border: 1px solid #84281f;
    box-shadow: 0px 0px 5px #842826;
}

[Zach N]

Hey Mike,

Unfortunately that's not quite what I was looking for either. Setting the border color doesn't change the highlight/focus color, so if I change the border color to red, it appears as pink as the highlight color is still blue.

However, your use of 'focus' helped me locate the correct variable in the theme:

$input-border-focus

Setting that variable appears to change the highlight/focus color for all search bars/boxes in the portal

[Zach N · Accepted solution]

I was able to locate the answer to my first question on my own. The highlight/focus color for search bars/boxes can be controlled via this CSS variable in your theme:

$input-border-focus

I was not able to find a solution to the Like/Reply button color however. This doesn't appear to be controlled by theme, and would likely require making a copy of the widget to change the CSS, which I don't want to have to do.