How to change the color of sc_cat_item page in Service Portal

[shaik_irfan]

Hello,

How to change the color of Page: sc_cat_item in Service Portal.

[Josh Virelli · Accepted solution]

Hi Shaik,

That is actually the SC Catalog Item widget. There are two ways you could change the color.

1) Clone the widget and add a new class, then set the background-color CSS property of that class

2) Use a unique selector and editing the CSS with that. For example, on this page, the top most div has an id of "catItemTop", within that is the div with the background color we'd like to change. That div has a class of panel-default that sets the color. So we'll change that color by inserting this into the Page specific CSS on the sc_cat_item sp_page record, or by clicking the Page icon on the top right of the Page Designer:

#catItemTop .panel-default {
background-color: red;
}

Just set background-color to whatever you'd like. Not sure if your classes will be the same, I'm on London in this case. How I found this is by using Google Chrome's Inspect. Just right-click where you want to select and click Inspect. You can see all the HTML / CSS in that case. Here's what mine looks like:

If this was helpful, or solved your question, please mark my answer as helpful/correct. Thanks!

Josh

Thanks,

Josh

[shaik_irfan]

Sorry to trouble you Josh,

I unable to understand the 2 point what you mention to Change by openign the Page Designer. I opened the Page Designer but unable to change the color 😞

when i open the Page Designer i see below page

[Josh Virelli]

Click "Edit Page Properties" at the top and insert the CSS in the "Page Specific CSS" Field

[Shashwat Saxen]

If it is a custom widget you can set the property background color in css panel

or it is OOTB clone the widget and then set the property.