Customizing SC Categories Widget

Thais
Kilo Contributor

Hi everyone!

I would like to know how can I customize this dropdown box on the SC Categories. 

It's been cloned, but I can't find in the code what should I change to do it.

I would like to remove this dark border and change the background color, how could I do it?

I appreciate if anyone could help.

 

find_real_file.png

1 ACCEPTED SOLUTION

Maik Skoddow
Tera Patron
Tera Patron

Hi @Thaís 

basically you can achieve this without customization (Widget cloning) and just by configuration as ServiceNow offers different places to inject additional CSS.

For a better maintenance, I recommend adding the CSS at the Service Portal record:

find_real_file.png

The only difficult thing is to find a CSS elector which is able to override all the OOTB Boostrap and Service Portal CSS.

After playing around, the above CSS code works for me: 

.category-widget .category-list a.select2-choice {
   border: 0 !important;
   background-color: LightGoldenRodYellow !important; 
}

 

The result is as follows:

find_real_file.png

 

Let me know if you have any further questions.

Kind regards
Maik

View solution in original post

2 REPLIES 2

Maik Skoddow
Tera Patron
Tera Patron

Hi @Thaís 

basically you can achieve this without customization (Widget cloning) and just by configuration as ServiceNow offers different places to inject additional CSS.

For a better maintenance, I recommend adding the CSS at the Service Portal record:

find_real_file.png

The only difficult thing is to find a CSS elector which is able to override all the OOTB Boostrap and Service Portal CSS.

After playing around, the above CSS code works for me: 

.category-widget .category-list a.select2-choice {
   border: 0 !important;
   background-color: LightGoldenRodYellow !important; 
}

 

The result is as follows:

find_real_file.png

 

Let me know if you have any further questions.

Kind regards
Maik

Thais
Kilo Contributor

@Maik Skoddow thank you so much! 

The best I could do before was include "$input-border: #fff;" on the theme CSS variables, but now that does the full job.

I appreciate it.