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

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.

image

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

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

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…

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"'

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

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.

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.