How can I change the color of widget's title based on color of the record?

Shane J · ‎10-04-2018

I have a custom widget I copied from the Simple List Widget. I am trying to have the color of the title change dynamically based on a color field (hex) on the record being shown. Right now the widget is referring to the Instance Options, but simply replacing that hasn't worked as I expected (I'm not that familiar with Angular).

I believe this is what is driving the color right now:

<div ng-if="data.isRequest && c.data.count > 0">
<div class="panel panel-{{::c.options.color}} b" ng-if="c.data.isValid && (c.options.always_show || c.data.filterText || c.data.list.length)">
  <div class="panel-heading" ng-if="::!c.options.hide_header">
    <h2 class="h4 panel-title">
      <span ng-if="c.options.glyph">
        <fa name="{{::c.options.glyph}}" />

BLAH BLAH THE REST OF IT

I can get the background to change (by using ng-style="{background: item.color}" in the appropriate spot, but I can't get the title to change (about all I've been able to do is make it transparent, not by choice...). I would prefer the title to change in color vs the background of the body in this case.

Chris Stoll-SN · ‎10-04-2018

Sorry, that is my fault in the ng-style code. The CSS attribute needs to be wrapped in ( ' ) quotes.

Also, move it down to the panel-heading DIV ... if you leave it in the panel DIV it changes the background color of the bottom section.

<div class="panel-heading" ng-style="{'background-color': c.data.color}">

Also, you might want to use the following so the bottom border of the panel to be the same color.

<div class="panel-heading" ng-style="{'background-color': c.data.color, 'border-bottom-color': c.data.color}">

View solution in original post

Shane J · ‎10-04-2018

Thank Chris, this is working now!