want to change the background color of widgets in service portal

chinna
Mega Guru

Hi Team,

actually my requirement is i want to change the background of widget .

i tried with the following script in CSS 

.panel-heading {
color: #fff;
background-color: #0060FF;
border-color: #0060FF;
}

but the issue it only changing the heading part , i want to change the full background.

find_real_file.png

In the above screenshot i want to change the approve button background color also , can anyone help on this.

 

Regards,

Chinna

1 ACCEPTED SOLUTION

Harsh Vardhan
Giga Patron

CTRL + Right Click >> "Instance In Page Editor" >> use below css in css field to change the background color. 

 

.padder-b-none {
color: #fff;
background-color: #0060FF;
border-color: #0060FF;
}

.btn-block {
background-color: bisque;
}

.btn[name="approve"] {
background-color: red;
}

 

 

find_real_file.png

 

 

 

result:

 

find_real_file.png

 

 

If my answer helped you, kindly mark it as correct and helpful.

 

 

 

 

View solution in original post

5 REPLIES 5

Azim Kazi
Giga Guru

Hi Chinna,

have look at this script::

<div class="bg-primary custom-button">
<i class="fa fa-bomb"></i>
<h1>IT</h1>
</div>

 

Hope this will help you!!

If my response helps you then kindly mark my answer helpful šŸ‘and correct āœ”otherwise if any query šŸ¤” feel free to ask further.

 

Thanks,

Ajim

 

I used the "bg-primary" class, as this will automatically apply a background color, but you could use the "custom-button" class to apply any custom CSS.

Harsh Vardhan
Giga Patron

CTRL + Right Click >> "Instance In Page Editor" >> use below css in css field to change the background color. 

 

.padder-b-none {
color: #fff;
background-color: #0060FF;
border-color: #0060FF;
}

.btn-block {
background-color: bisque;
}

.btn[name="approve"] {
background-color: red;
}

 

 

find_real_file.png

 

 

 

result:

 

find_real_file.png

 

 

If my answer helped you, kindly mark it as correct and helpful.

 

 

 

 

Hamza Berouil
Kilo Contributor

You can also update the Style Sheet "sp-theme-la-jolla.css" (in the Table sp_css) instead of overriding single pages :

 

find_real_file.png

 

for example, I replaced $btn-success-bg, $btn-success-color and $btn-success-border  by $btn-primary-bg, $btn-primary-color and $btn-primary-border.

 

These value are defined in the Portal Theme 'LaJolla' (table sp_theme)