Rounded bars and text color help

[manjotsc (Manjot Singh)]

Hi,

I need help with makes these bars rounded and make text color different on yellow, pink and blue.

type: 'custom:bar-card'
rows: 4
entities:
  - entity: sensor.printer_ink_cyan
    color: cyan
  - entity: sensor.printer_ink_black
    color: black
  - entity: sensor.printer_ink_magenta
    color: magenta
  - entity: sensor.printer_ink_yellow
    color: yellow

[pedolsky]

Using CSS requires card-mod.

[manjotsc (Manjot Singh)]

I installed the card-mod, but how would I make these entities bars rounded and the overlay text color to black.

entities:
  - entity: sensor.printer_ink_cyan
    color: cyan
    border: 
  - entity: sensor.printer_ink_black
    color: black
  - entity: sensor.printer_ink_magenta
    color: magenta
  - entity: sensor.printer_ink_yellow
    color: yellow

[manjotsc (Manjot Singh)]

Lovelace: Bar Card

Hi, Need some help with border-radius, please look at picture below: [image] i want the border also below to be like above. how can it be done? This is my code: - type: custom:bar-card style: |- bar-card-current, bar-card-backgroundbar { border-radius: 15px; } direction: up height: 200px stack: horizontal …

Lovelace: Bar Card

Replace bar-card-current with bar-card-currentbar if you are using a theme you can add this line in the theme you’re using: bar-card-border-radius: "15px"