Change colour of the value in oh-label-item widget

[hafniumzinc (T)]

I have the following label-item widget:

component: oh-label-item
config:
  action: popup
  actionModal: page:OutdoorTemps
  icon: f7:thermometer
  item: nOutdoorTemperature
  title: Outdoor
  style:
    backgroundColor: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ?
      "#757500" : items.MetOfficeWeatherWarning_Colour.state=="AMBER" ?
      "#754C00" : items.MetOfficeWeatherWarning_Colour.state=="RED" ?
      "#750000":"#1c1c1d"'
    color: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ? "black" : "white"'

I was hoping that the color parameter would change the font colour of the widget, and it does, except the value on the right hand side - that one always stays light grey.

Can I access and change the colour of the value on the right-hand-side at all?

[JustinG]

It’s not something that there’s a setting for. See this brief discussion:

Styling Standard Widgets

Not directly. The properties built-in to the card widget config are applied to the label itself (it being a label card, it makes sense that the label is the priority). The only way, then, to change the styling on the title would be to use the stylesheet property to directly inject some css into that widget. component: oh-label-card config: title: Title item: ServerDummySwitch stylesheet: > .card-header { color: green; background: yellow; } [image]

You have look at the vue page or inspect the widget html to figure out what will be the best css selected for the element you want to impact and then use the stylesheet property.

[hafniumzinc (T)]

@JustinG

You have look at the vue page or inspect the widget html to figure out what will be the best css selected for the element you want to impact and then use the stylesheet property.

Great! That gets me part way there

component: oh-label-item
config:
  action: popup
  actionModal: page:OutdoorTemps
  icon: f7:thermometer
  item: nOutdoorTemperature
  title: Outdoor
  style:
    backgroundColor: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ?
      "#757500" : items.MetOfficeWeatherWarning_Colour.state=="AMBER" ?
      "#754C00" : items.MetOfficeWeatherWarning_Colour.state=="RED" ?
      "#750000":"#1c1c1d"'
    color: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ? "black" : "white"'
  stylesheet: |
    .item-after {
      color: white;
    }

Is there a way to conditionally set the color within the stylesheet, as with the main color of the widget? I tried putting the string after the main color into the stylesheet color, but that gets ignored and the value shows as grey again…

[JustinG]

@hafniumzinc

Is there a way to conditionally set the color within the stylesheet,

Sorry, I should have taken into account that you wanted a conditional setting the first time. No, there’s no way to do that with the stylesheet. The css string is not run through the expression parser. So you’ll have to use the secondary method here, modify the f7 variable, which you can do right in the style config where you can use expresions. The relevant variable in this case is f7-list-item-after-text-color so you’d be looking at something like:

  style:
    backgroundColor: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ?
      "#757500" : items.MetOfficeWeatherWarning_Colour.state=="AMBER" ?
      "#754C00" : items.MetOfficeWeatherWarning_Colour.state=="RED" ?
      "#750000":"#1c1c1d"'
    color: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ? "black" : "white"'
    --f7-list-item-after-text-color: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ? "black" : "white"'

[hafniumzinc (T)]

@JustinG

Sorry, I should have taken into account that you wanted a conditional setting the first time.

I didn’t make that clear, to be fair - no worries!

@JustinG

--f7-list-item-after-text-color: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ? "black" : "white"'

This is fantastic - thanks very much!

For completeness, the entire widget is now (black font also required for amber colour!):

component: oh-label-item
config:
  action: popup
  actionModal: page:OutdoorTemps
  icon: f7:thermometer
  item: nOutdoorTemperature
  title: Outdoor
  style:
    backgroundColor: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ?
      "#FFFF00" : items.MetOfficeWeatherWarning_Colour.state=="AMBER" ?
      "#FFBF00" : items.MetOfficeWeatherWarning_Colour.state=="RED" ?
      "#FF0000":"#1c1c1d"'
    color: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW" ? "black" :
      items.MetOfficeWeatherWarning_Colour.state=="AMBER" ? "black" : "white"'
    --f7-list-item-after-text-color: '=items.MetOfficeWeatherWarning_Colour.state=="YELLOW"
      ? "black" : items.MetOfficeWeatherWarning_Colour.state=="AMBER" ? "black"
      : "white"'

which I use together with this setup to show active local weather warnings within the UI.