service portal - modify widget title color

maronis
Mega Guru

Hi guys,

I am working on the Service Portal widgets.

I can customize and change the color of the icon shopping bag below to whatever color I want but I am unsuccessful with the title ('commander'). I'd like to change it to white for example.

find_real_file.png

In the page editor > widget icon > commander (my customized widget)

I have inserted the following CSS to no avail.

'title' is not the right definition of the widget title therefore it cannot work I guess.

find_real_file.png

Do you have any idea?

Thanks in advance for your help.

Maron

1 ACCEPTED SOLUTION

Naresh27
Tera Guru

Hi Maron,



This is quite simple to find out if you can inspect on a web page.



However let me see if I can take you their, Looks like you are using top icon widget here. So their should be a CSS like this in your widget



a.top_icon h3 {


  font-weight: 400;


  padding: 0;


  margin: 0 0 10px 0;


  color: white/give any color;


}



Let me know if this doesn't work


View solution in original post

6 REPLIES 6

Niklas Peterson
Mega Sage
Mega Sage

Hi,



There is a "bootstrap color" option for the widget that controls the color of both the icon and the text.



find_real_file.png



The choices in the dropdown is mapped to the colors of your theme.



Regards,


Niklas


Hi Niklas,



I tried the bootstrap color, the problem is that only a few colours are available by default. I can possibly add some other colours to the drop down list but I want to modify the CSS for this particular widget instance.



Thank you for your help,


Stephen Whitney
Kilo Expert

Maron,



These may be different, but on our Project Status report widgets I set the "panel heading" colors through the CSS on the actual widget:



.panel-heading {


  /*position: relative;*/


  background-color: #782f40;


  color: #fdfcfc;


  /*border-bottom: 1px solid;*/


}


Hi Stephen,



As suggested I tried .panel-heading or even .panel_heading, but did not work out.



Thank you very much.



Maron