How to Change Widget Title Background Color?

AndresGT1
Giga Expert

Hello Everyone,

I'm trying to modify the title background color of the Announcements Widget. It doesn't have the OOB "Presentation" section of the widgets which you can set the background color as Success, Error, etc..

I'm looking to leave it the same as the success color, to achieve this how would I need to modify the widget, any help will be much appreciated.

Leaving a visual aid image below.

find_real_file.png

 

Regards.

1 ACCEPTED SOLUTION

Allen Andreas
Administrator
Administrator

Hi,

Ultimately, it would have been nice to have a visual aid of the exact widget you're talking about, haha.

But..I assume you're talking about this one?

find_real_file.png

If so...then you'd want to go to your widget editor and clone this widget.

Then, in the cloned widget CSS section, you would add code like this:

.panel-heading {
  background-color: coral;
}

And then you'd want to save...and then add this new cloned widget to the respective portal page (using designer) and then of course remove your old announcements widget.

So in the end, it would look like:

find_real_file.png

And for Brand theme'd "Success" color specifically, you can use:

.panel-heading {
  background-color: $brand-success;
}

Which for me in an OOB personal developer instance, would look like:

find_real_file.png

Please mark reply as Helpful/Correct, if applicable. Thanks!


Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!

View solution in original post

6 REPLIES 6

You mentioned in the above thread..."add this new cloned widget to the respective portal page (using designer) and then of course remove your old announcements widget."

I am looking to know how I can make the cloned widget active and disable the OOB one with out deleting it? 

When you disable it (click the trashcan icon on the widget within designer), you aren't "deleting" it, you're merely just removing it from the "page". Which is why I said "remove" 🙂 not deleting.


Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!