Styling Standard Widgets

Add-ons UIs
1

Hi,
I am trying to use the standard label card as an on/off switch.

component: oh-label-card
config:
  item: Gordan_Power
  action: toggle
  actionItem: Gordan_Power
  actionCommand: ON
  actionCommandAlt: OFF
  background: "=(items[\"Gordan_Power\"].state == 'ON') ? 'Yellow' : 'White'"
  title: Gordan
  fontColor: white
  fontSize: 12px
slots: null

I would like to be able to style the title text / header text on the oh-label-card to change the font size.
Can I override these properties?

If not does anyone have a custom widget similar to the label card I can start editing?

Thanks

2

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

2 Likes