šŸ”¹ Card-mod - Add css styles to any lovelace card

Right, thanks :slight_smile:

So Iā€™m a little confusedā€¦ I use a few different themes. (Downloaded via HACS and I use an input select with an automation to change theme)

Some of the themes seem display different icons with different coloursā€¦ So far as I cam tell,

paper-item-icon-color: 
state-icon-color: 

seem to be the main culprits. So Iā€™d like some global way of mapping paper-item-color to state-icon-colorā€¦ now I know I can do that with card mod on a card and I could also just edit the offending themes but that makes it hard when the theme maker updates a theme.

This is an example of what I mean.
With Google Dark Theme:
image
With ios-dark-mode-blue-red
image

Google Dark Mode

  paper-item-icon-color: rgb(169, 177, 188)
  paper-item-icon-active-color: rgb(138, 180, 248)
  state-icon-color: rgb(138, 180, 248)
  state-icon-active-color: rgb(169, 177, 188)

iOS Dark Blue Red

  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)
  paper-item-icon-active-color: rgba(255, 214, 10, 1) 
  paper-item-icon-color: "#333333" 

So Iā€™d like to be able to set a global style that maps paper-item-icon to the state-icon-color etc overiding the theme. Is that something this card-mod can do?

For me it has no effect on the color.

Would you care to share an example of a theme-file that has these class definitions?
This feature will make styling much easier!

Thanks :star:

I posted an example here last week:

1 Like

Great thanks, that got me started.

IĀ“m having som problem reaching markdown

This is what IĀ“m trying to convert.

content: |
  # Doors
style:
  .: |
    ha-card {
      padding-left: 20px !important;
      background-color: var(--primary-background-color);
      border-radius: 15px;
      margin: 10px;
      box-shadow: none;
    }
  ha-markdown:
    $: |
      h1 {
        font-size: 20px !important;
        font-weight: 500 !important;
        padding: 0px 0px 0px 8px !important;
        border-left: 3px solid #ffcc00;
        color: var(--card-header-text-color);
      }
type: markdown

image

card-mod-theme: clear
  card-mod-card: |

    ha-card.header-card {
      padding-left: 20px !important;
      background-color: var(--primary-background-color);
      border-radius: 15px;
      margin: 10px;
      box-shadow: none;
    }

    ha-card.header-card ha-markdown {
      $: |
        h1 {
          font-size: 20px !important;
          font-weight: 500 !important;
          padding: 0px 0px 0px 8px !important;
          border-left: 3px solid #ffcc00;
          color: var(--card-header-text-color);

        }

image

But I canĀ“t get the correct syntax for the markdown bit, any suggestions ?

I canā€™t seem to locate the/a example for animated icons moving across what is presumably a picture entities card like in the OP example. Link to ā€˜more examplesā€™ is dead via Github. Could someone please point me in the right direction?

Iā€™m interested in using this to draw bounding boxes (or at least ā€œpositioning iconsā€) for image processing/object detection.

Thanks plus maybe sorry if Iā€™ve missed something obviousā€¦

Iā€™m pulling my hair out here. How do I get buttons within a horizontal-stack to align to the left side of the screen with defined space between them? I figured out how to set a uniform size for the button in ha.card.type-button but canā€™t figure out the alignment. Right now they evenly space across the screen. Iā€™ve tried setting margin and padding everywhere I can think of but Iā€™m at a loss. Surely others have done this?

Also, is there a cheatsheet somewhere for where to format the stack title and icon and friendly name within a button? Iā€™ve tried using the Inspector in Chrome but to no avail.

Hi, Iā€™m looking for some help on how to style a certain element within the shadow-dom. Despite the various examples in this thread Iā€™m still failing to write the proper syntax.

I want to style the items of a shopping list card.

The DOM tree for these items is (class/id added when element has that property too):

ha-card > div (.addRow) > paper-input (.addBox) > $ > paper-input-container (#container) > iron-input (.input-element) > $ > input

ha-card > div (.editRow) > paper-input > $ > paper-input-container (#container) > iron-input (.input-element) > $ > input

Following the examples in this thread this should do the trick to style both elements:

style: 
  paper-input:
    $: 
      iron-input:
        $: |
          input {
            color: red !important;
          }

but it doesnā€™t. Iā€™ve already tried via the classnames or idā€™s as well or adding all tree elements that you should be able to skip in the selector.

I also have enabled debug_cardmod: true but donā€™t see any feedback in the console.

To be complete: the shopping list card is itself daughter of a stack-in card, but I donā€™t think thatā€™s an issue. Styling shopping-card elements that are not inside a shadowroot works fine.

Could someone help me figure out on which element I should be adjusting the margin/padding to get rid of the space between these buttons in a horizontal stack? Iā€™ve tried seemingly everywhereā€¦modifying ha-card with a style tag under the button definition doesnā€™t seem to do it. The orange space is what Iā€™m trying to eliminate. This is what Inspector shows when I click on this button card element.

Screen Shot 2020-08-30 at 5.08.21 PM

Edit:

I figured it out within the style: tag with much experimentation, but how do I now convert this into the themes.yaml so it is applied everywhere? I have the basic structure with card-mod-card:, etc.

              style: 
                hui-horizontal-stack-card:
                  $: 
                    "#root": |
                      hui-button-card {
                        width: 130px !important;
                        max-width: 130px !important;
                      }

Hi,

I am trying to use a layout-card grid layout. When I do that, I get something like this:
Capture

Except that I manually edited the style for the div tag in my browser to set height:100%.

And that is my question:
I would think it would be more sensible if the div tag was 100% by default. The <layout-card> does have the height I want, but the div tag sizes after its content instead of after the <layout-card>.
Anyway, I can not figure out to use card-mod to set the height of the div tag to 100%. Can anybody help.

Sorry if the above is to terse, just let me know if I should add more code and screen samples :slight_smile:

Thanks this is kind of what I was looking for too. I was trying to use entity filter on the badge to hide when not active. I found out mod-card is needed for this but this only works with cards not badges.

Then realised your template hides the badge when not on as well which is awesome! The only problem is when loading the page the badge displays for a second then hides. Is there another way to do this without this effect? Did you find a more elegant solution @Tomahawk?

Hi, first, thanks a lot for this module !
I have found most example and use it in my lovelace.
Today, i donā€™t find example so i ask here my question :

I would like to reduce margin/padding of ā€˜time-picker-timeā€™.
I try to enter in shadow-root but i canā€™t do it.

I have this :

i use :

style: |
  ha-card{
   background-color: rgba(0,0,0,0);
  }
  .time-picker-content{
    background-color: red;
  }
  time-unit{
        background-color: blue;  
      }

and i got : image

but i would like to go into shadow-root at time-unit class and i canā€™t do it :

style: |
  ha-card{
   background-color: rgba(0,0,0,0);
  }
  .time-picker-content{
    background-color: red;
  }
  $: |
    .time-unit{
      background-color: green !important;  
    }

i got : image

Can you help me ?
Thanks.

Feature request:
On some dialogs the more-info styles donā€™t apply. Would it be possible to style stuff like the conversation dialog or the reboot confirmation dialog?

Try this out:

style:
  .: |
    ha-card {
     background-color: rgba(0,0,0,0);
    }
    .time-picker-content{
      background-color: red;
    }
  $: |
    .time-unit{
      background-color: green !important;  
    }

Thank you for helping me.

Unfortunately it does not work.

The result is the same as the last imageā€¦

:question:

Sorry, thought you could figure it out from there. This should work:

style: |
  ha-card {
    background-color: rgba(0,0,0,0);
  }
  .time-picker-content {
    background-color: red;
  }
  time-unit:
    $: |
      .time-unit {
        background-color: green !important;  
      }

Thanks for your answer.

it still doesnā€™t work.

I understand the tree structure of your code.

Thatā€™s why I donā€™t understand why it doesnā€™t work :

Does the style show in the styles tab? I donā€™t see card-mod, so maybe try saving and trying again.

this ? :