Cannot change style of title

[woobenjamin]

All, I've tried (at least what I think) is every iteration of trying to change the style of the title with no success! What I'm trying to do Change the look of the title (card-header) What I've tried I know that I have to do something with the styling, but no matter what I try (please see my config after the picture), it won't change the styling The only thing that works is if I define --ha-card-header-font-size: 12px; but that only changes the font size, and I want to do quite a bit more to the title.

type: custom:bar-card
title: Brother MFC-L6540DW
... removed to save space ...
entities:
  - entity: sensor.brother_mfc_j6540dw_c
    name: C
    color: cyan
... removed to save space ...
style: |-
  .card-header {
    font-size: 12px;
  }
  bar-card-card {
    margin: 0px;
    border-radius: 12px;
  }
  bar-card-name {
    font-size: 14px;
    font-weight: normal;
  }
  bar-card-value {
    font-size: 12px;
    font-weight: bold;
  }

I've also tried:

card_mod:
  style: |
    .card-header {
      font-size: 12px;
      font-weight: bold;
    }

Thanks in advance!

ben

[alexruffell]

Have you found a solution? I have your same issue... the title doesn't change even though the styling should make it smaller.

type: custom:bar-card
card_mod:
  style: |
    .card-header {
      font-size: 18px;
      padding: 2px 15px 2px 15px
    }
entities:
  - entity: sensor.hp_color_laserjet_mfp_m277dw_black_cartridge_hp_cf400x
    direction: right
    color: Black
    width: 86%
    height: 25px
    name: CF400X
  - entity: sensor.hp_color_laserjet_mfp_m277dw_cyan_cartridge_hp_cf401x
    direction: right
    color: Cyan
    width: 86%
    height: 25px
    name: CF401X
  - entity: sensor.hp_color_laserjet_mfp_m277dw_yellow_cartridge_hp_cf402x
    direction: right
    color: Yellow
    width: 86%
    height: 25px
    name: CF402X
  - entity: sensor.hp_color_laserjet_mfp_m277dw_magenta_cartridge_hp_cf403x
    direction: right
    color: Magenta
    width: 86%
    height: 25px
    name: CF403X
max: '100'
min: '0'
unit_of_measurement: '%'
stack: vertical
title: Printer Toner Levels
positions:
  value: inside
  name: outside
  indicator: 'off'
  minmax: 'off'
  icon: 'off'

[alexruffell]

@thisisbenwoo - This is what ended up working:

type: custom:bar-card
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 18px;
    }
    bar-card-currentbar {
      border-radius: 5px;
    }
    bar-card-backgroundbar {
      border-radius: 5px;
    }
entities:
  - entity: sensor.hp_color_laserjet_mfp_m277dw_black_cartridge_hp_cf400x
    direction: right
    color: Black
    width: 86%
    height: 25px
    name: CF400X
  - entity: sensor.hp_color_laserjet_mfp_m277dw_cyan_cartridge_hp_cf401x
    direction: right
    color: Cyan
    width: 86%
    height: 25px
    name: CF401X
  - entity: sensor.hp_color_laserjet_mfp_m277dw_yellow_cartridge_hp_cf402x
    direction: right
    color: Yellow
    width: 86%
    height: 25px
    name: CF402X
  - entity: sensor.hp_color_laserjet_mfp_m277dw_magenta_cartridge_hp_cf403x
    direction: right
    color: Magenta
    width: 86%
    height: 25px
    name: CF403X
max: '100'
min: '0'
unit_of_measurement: '%'
stack: vertical
title: Printer Toner Levels
positions:
  value: inside
  name: outside
  indicator: 'off'
  minmax: 'off'
  icon: 'off'

I also rounded the corners of the bars while I was at it.

[woobenjamin]

Can you put a screenshot please?

[KosieKramer]

I have some info. If you have card-mod 3.1.5 installed, it works correctly. With 3.2.2, you lose the ability to style the title of the bar. Something in card-mod has changed the behaviour of bar-card.

With card-mod 3.1.5:

With card-mod 3.2.2:

[shzlww]

@thisisbenwoo I don't know what these codes mean，but they work very well. 😄

- type: custom:bar-card
  direction: right
  decimal: 2
  height: 24px
  #width: 150px
  positions:
    icon: inside
    indicator: inside
    name: inside
    value: inside
  style:
    .: |
      #states {
         padding: 5px 5px 5px;
      }
      bar-card-value, bar-card-name {
        margin-left: -10px;
      }
      bar-card-value {
        margin-left: 3px;
        margin-bottom: 0px;
        margin-top: auto;
        font-size: 12px;
      }
      bar-card-name {
        margin-right: auto;
        margin-left: 0px;
        font-size: 12px;
      }
      bar-card-currentbar, bar-card-backgroundbar {
        border-radius: 12px;
      }
      bar-card-divider {
        display: none;
      }
    $: |
      .card-header {
        text-align: left;
        font-size: 20px !important;
        font-weight: bold !important;
        line-height: 28px !important;
        padding: 5px 5px 5px !important;
      }
  entities:
      .......