Change the Service Portal Widget Back ground Color

SNOW46 · ‎07-05-2018

Hi All,

I want to change the widget header color in Service Portal.

can anyone suggest me on the same.

The one above marked in red I want to change the color of the background.

Manan Raval · ‎07-05-2018

Hi,

With the step provided and is OOB, you can make the color either red(Danger), blue(Primary), orange(Warning), green(Success), Light blue(Info).

OR you can add panel-heading class in the CSS of the widget instance as shown in the screenshot.

If you want things other than these, you need to clone the widget, provide some id to the div tag holding the header and provide CSS to it according to your needs. And by doing so, you will be cloning each and every widget of this type you are using in your portal which will be a little hectic.

Regards,

Manan

View solution in original post

Manan Raval · ‎02-22-2019

Hi Das,

This widget is your custom widget. Are you using this widget in multiple pages and is your requirement to change the color in every page or on a Specific page? Follow the below steps for respective scenarios:

1)Multiple Page: In OOB widget, there is a tag in class selector 'list-group-item>a' written at the end in CSS Section. If you have cloned this widget, you also will have this. If so, add color property there. This will be reflected in every instance of this widget.

2)Specific Instance: Create an option schema for the widget and use it in your script with the help of angularJS. I am not sure about this way to work.

Thanks,

Manan Raval

SNOW46 · ‎02-22-2019

Hi,

I want it to get reflected on a single page that is home page only.

Please help me out.

Manan Raval · ‎02-25-2019

Hi Das, I am not sure about how to do for a specific page, but you can try using below steps:

1)Open your widget in Widget Editor.

2)On the Right top corner, Click on the hamburger icon. You will see "Edit option Schema". Click on it a modal page will open.

3)Click on icon.

4)Provide the details to be used and keep the type as string.

5)Use this in HTML Template with the help of ng-style="color:option.name" attribute.

6)In the Page designer, provide the #code in this option.

Please note I am not sure about whether this way will work or not. This is just a workaround.

Thanks,

Manan Raval