🔹 Card-mod - Add css styles to any lovelace card

maxym · December 29, 2020, 9:34am

Unfortunately, not even after fixing syntax error you made
But at the end I’ve made it after lot of trial&errors

style:
  layout-card: '{background-color: red !important}'

Still however don’t understand why it doesn’t work this way:

style:
  ha-card:
    layout-card: '{background-color: red !important}'

IMO it should. since layout-card is child of ha-card (and ha-card alone is accessible), see the DOM tree:

Anyway, this little success led me to final solution:

style:
  layout-card:
    $: |
      div#columns {margin: 15px !important}
      div.column {overflow-x: visible !important}

KTibow · December 29, 2020, 5:25pm

Because card-mod was designed with a different syntax.

Macke · January 1, 2021, 11:19am

How can I change the font size of the “secondary info”? Tried for hours now without any luck.

  - cards:
      - card:
          type: entities
          style: |
            ha-card {
                 border-radius: 0px;
                 border: solid 0px rgba(255, 255, 255, 0.15);
                 font-size: 20px;
                 font-weight: bold;
                 background-color: rgba(207, 212, 199, 0.1);           
               } 
        filter:
          include:
            - entity_id: '*rorelselarm*'
              options:
                secondary_info: last-changed
            - entity_id: '*motion*'
              options:
                secondary_info: last-changed
        sort:
          count: 10
          method: last_changed
        type: 'custom:auto-entities'
    type: horizontal-stack

Ildar_Gabdullin · January 1, 2021, 11:26am

Try searching here.

To change a style for all secondary_info’s - use this:

Macke · January 1, 2021, 11:54am

Many many thanx…worked perfectly!!

olum · January 3, 2021, 1:26pm

Thank you for that hint. Sometimes it is too easy.

alnavasa · January 4, 2021, 1:15pm

Great post again, what about changing the padding/margin above and below an icon on this glances card?

Ildar_Gabdullin · January 4, 2021, 3:20pm

This is a margin.

Removing margin:

type: horizontal-stack
cards:
  - type: glance
    title: Margin
    entities:
      - entity: sun.sun
      - entity: sun.sun
  - type: glance
    title: No margin
    style:
      .entities .entity:
        $: |
          state-badge {
            margin-top: 0px;
            margin-bottom: 0px;
          }
    entities:
      - entity: sun.sun
      - entity: sun.sun

alnavasa · January 4, 2021, 10:01pm

I really need to learn this things! THANKS AGAIN!

fra · January 4, 2021, 11:14pm

Hi at all!
Could i use only Card-mod to hide the three vertical dot on the upper right corner on my HA dashboard??
(i wanna hide the vertical menu with customize and help links on the right)

thanks a lot.

KTibow · January 5, 2021, 2:12am

Sure. Do you have themes set up?

fra · January 5, 2021, 2:58am

Yes, i’ve a dark theme installed.

frontend:
  themes: !include_dir_merge_named themes/

Please, could you point me to the right direction to solve??

Thanks a lot.

KTibow · January 5, 2021, 3:02pm

Post your dark theme’s YAML file, I’ll edit it, paste it back in, restart HA, and it should be gone.

fra · January 5, 2021, 4:29pm

This is my theme.
Thanks a lot.

noctis:  

  # Fonts
  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  # Text
  text-color: '#ffffff' 
  primary-text-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'
  secondary-text-color: "#BAC0C6"
  text-medium-light-color: '#A0A2A8'
  text-medium-color: '#80828A'
  disabled-text-color: '#626569'
  primary-color: 'var(--accent-color)'
  
  # Main Colors
  app-header-background-color: '#242e42'
  accent-color: '#1A89F5'
  accent-medium-color: 'var(--accent-color)'

  # Background
  background-color: '#242e42'
  primary-background-color: 'var(--background-color)'
  background-color-2: '#20293c' 
  secondary-background-color: 'none'
  markdown-code-background-color: 'var(--background-color)'
  
  # Card
  card-background-color: 'var(--ha-card-background)'
  ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
  ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
  ha-card-border-radius: "5px"
  border-color: 'none'

  # Icons
  paper-item-icon-color: '#EBEBEB'
  paper-item-icon-active-color: 'var(--accent-color)'
  
  # Sidebar
  sidebar-background-color: 'var(--background-color)'
  sidebar-icon-color: '#98a7b9'
  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--text-color)'
  paper-listbox-background-color: 'var(--sidebar-background-color)'
  divider-color: 'var(--background-color)'
  light-primary-color: 'var(--ha-card-background)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--background-color-2)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--background-color-2)'

  # Toggle:
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  mdc-theme-primary: 'var(--accent-color)'

  # Switch
  switch-unchecked-color: '#70889e'
  switch-checked-button-color: 'var(--accent-color)'
  switch-unchecked-track-color: 'var(--background-color-2)'
  switch-checked-track-color: 'var(--background-color-2)'

  # Radio Button
  paper-radio-button-checked-color: 'var(--accent-color)'

  # Popups
  more-info-header-background: 'var(--secondary-background-color)'
  paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'

  # Tables
  table-row-background-color: 'var(--background-color)'
  table-row-alternative-background-color: 'var(--ha-card-background)'

  # Badges
  label-badge-background-color: 'var(--background-color)'
  label-badge-text-color: 'var(--text-primary-color)'
  label-badge-red: 'rgba(73,85,108,1)'
  label-badge-blue: 'rgba(26,137,245,1)'
  label-badge-green: 'rgba(0,202,139,1)'
  label-badge-yellow: 'rgba(222,176,107,1)'

  paper-input-container-focus-color: 'var(--accent-color)'
  
  # Custom Header
  ch-background: 'var(--background-color)'
  ch-active-tab-color: 'var(--accent-color)'
  ch-notification-dot-color: 'var(--accent-color)'
  ch-all-tabs-color: 'var(--sidebar-icon-color)'
  ch-tab-indicator-color: 'var(--accent-color)'

  # Mini Mediaplayer
  mini-media-player-base-color: 'var(--text-color)'
  mini-media-player-accent-color: 'var(--accent-color)'

alnavasa · January 5, 2021, 8:39pm

Is it possible to remove an element from part of an inserted website
EG:
Top bar:

Bottom bar:

not that I don’t want to give them credit, is just that I am planing to make it even smaller, and the bar takes a lot of space.

KTibow · January 5, 2021, 8:45pm

No website, Home Assistant, or otherwise, can go inside an iframe.

KTibow · January 5, 2021, 8:52pm

noctis:  

  # Fonts
  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  # Text
  text-color: '#ffffff' 
  primary-text-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'
  secondary-text-color: "#BAC0C6"
  text-medium-light-color: '#A0A2A8'
  text-medium-color: '#80828A'
  disabled-text-color: '#626569'
  primary-color: 'var(--accent-color)'
  
  # Main Colors
  app-header-background-color: '#242e42'
  accent-color: '#1A89F5'
  accent-medium-color: 'var(--accent-color)'

  # Background
  background-color: '#242e42'
  primary-background-color: 'var(--background-color)'
  background-color-2: '#20293c' 
  secondary-background-color: 'none'
  markdown-code-background-color: 'var(--background-color)'
  
  # Card
  card-background-color: 'var(--ha-card-background)'
  ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
  ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
  ha-card-border-radius: "5px"
  border-color: 'none'

  # Icons
  paper-item-icon-color: '#EBEBEB'
  paper-item-icon-active-color: 'var(--accent-color)'
  
  # Sidebar
  sidebar-background-color: 'var(--background-color)'
  sidebar-icon-color: '#98a7b9'
  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--text-color)'
  paper-listbox-background-color: 'var(--sidebar-background-color)'
  divider-color: 'var(--background-color)'
  light-primary-color: 'var(--ha-card-background)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--background-color-2)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--background-color-2)'

  # Toggle:
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  mdc-theme-primary: 'var(--accent-color)'

  # Switch
  switch-unchecked-color: '#70889e'
  switch-checked-button-color: 'var(--accent-color)'
  switch-unchecked-track-color: 'var(--background-color-2)'
  switch-checked-track-color: 'var(--background-color-2)'

  # Radio Button
  paper-radio-button-checked-color: 'var(--accent-color)'

  # Popups
  more-info-header-background: 'var(--secondary-background-color)'
  paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'

  # Tables
  table-row-background-color: 'var(--background-color)'
  table-row-alternative-background-color: 'var(--ha-card-background)'

  # Badges
  label-badge-background-color: 'var(--background-color)'
  label-badge-text-color: 'var(--text-primary-color)'
  label-badge-red: 'rgba(73,85,108,1)'
  label-badge-blue: 'rgba(26,137,245,1)'
  label-badge-green: 'rgba(0,202,139,1)'
  label-badge-yellow: 'rgba(222,176,107,1)'

  paper-input-container-focus-color: 'var(--accent-color)'
  
  # Custom Header
  ch-background: 'var(--background-color)'
  ch-active-tab-color: 'var(--accent-color)'
  ch-notification-dot-color: 'var(--accent-color)'
  ch-all-tabs-color: 'var(--sidebar-icon-color)'
  ch-tab-indicator-color: 'var(--accent-color)'

  # Mini Mediaplayer
  mini-media-player-base-color: 'var(--text-color)'
  mini-media-player-accent-color: 'var(--accent-color)'

  # Card-mod Theming
  card-mod-theme: "noctis"
  card-mod-root: |
    mwc-icon-button[slot="trigger"] > ha-svg-icon {
      display: none;
    }

fra · January 5, 2021, 9:24pm

Thanks a lot man!
It works like a charm !!!

KoenChiau · January 6, 2021, 2:00pm

Dear friends,

I would appreciate any help with styling a glance card (within an auto-entities card).
I need to get rid of the margin of the “state-badge” within the “entity” class of a glance card.
Please see the screenshot for a more detailed indication.

My CSS navigation knowledge must be insufficient, as my attempts so far have been not successful. Please see the screenshot for my attempts.

Is anyone willing to help me out ?

Thank you in advance !!

Screenshot 2021-01-06 at 14.47.54|690x445

Screenshot 2021-01-06 at 14.50.01

KTibow · January 6, 2021, 2:46pm

Please paste code; I won’t rewrite all of that from your screenshot.