want to change the background color of widgets in service portal

[chinna]

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.

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

Regards,

Chinna

[Azim Kazi]

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

[Azim Kazi]

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 · Accepted solution]

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;
}

result:

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

[Hamza Berouil]

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

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)