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

[aperture1988 (Craig)]

Hey Guys,

Would anyone be able to assist me in styling the divider lines highlighted in my screenshot below. Im really struggling to give this bit to work. The research I have done so far would suggest divider line colour is set by --secondary-text-color: however it doesn’t seem to change the colour, I have set this at both the card style level and in my theme but neither seem to be taking effect.

        - type: 'custom:home-feed-card'
          style: |
            ha-card {
            margin-top: 0px;
            margin-bottom: 20px;
            margin-left: 35px;
            margin-right: 35px;
            background-color: none;
            border: 0px;
            background: none;
            box-shadow: none;
            line-height: 18px;
            color: #8e9393;
            font-size: 12px;
            --secondary-text-color: #8e9393;
            }
          card_id: main_feed
          show_empty: false
          id_filter: ^event*
          more_info_on_tap: false
          state_color: false
          show_icons: false
          more_info_on_tap: false
          entities:

[boheme61]

is that code-snippet from ur card ? ( no specified color for divider as far as i can see), how does i look like in ur Theme ?

have you tried

• type: divider( or section) ? in ur card ?

[aperture1988 (Craig)]

@aperture1988

            --secondary-text-color: #8e9393;

Previous posts above suggest that the following should be used to set the colour, but this code doesn’t seem to make any difference in either the card or theme. Colour is defaulting to white in this card.

Interesting though I’ve just checked other dividers used in the entity card and they appear to be picking up the correct colour (see image below), I am assuming the theme is therefore working and perhaps the dividing lines in the feed card are referencing something else?

            --secondary-text-color: #8e9393;

[boheme61]

could be so, entities card have a HA-element, have no idea of feed-card, then try to use - type:divider ( thou i think this is special also, but -type:section , hmmm might also only work i card like entities.
what the “purpose” of feed-card ?

PS: I dont think you can use Card-Mod on this card, it seems “Deprecated” … try template

edit2: and remember all the “trivial” stuff, like clear ur browser, check in other browsers , when ur working with this card

[aperture1988 (Craig)]

Where are you seeing reference that it is Deprecated?

[boheme61]

not this card in particular, but in below link, you find another ink to “custom-updater” , … and in regards to the problems people had/have i see in " Lovelace: Home Feed Card" … i made my own “assumption” , i would never start to use it , sorry but that’s my opinion … when was the Last Update from developer of this Card ? , that’s a part of my Assumption
PS: Sorry i mixed up the 2 cards in regards to “updates” , but still don’t find any “options” for divider.
But i do see that it uses “entities” , and it should in this case be there, if possible

entities:
  - entity: your.entity
    name:
    something:else
  - type: section
    * i dont know which options CSS there are for defining the "section"
but there is - type: devider  
which have more options, maybe your Theme vil apply what you already have, as it's within "entities"

[boheme61]

Entities Card

Divider in entities-card

[loeffelpan]

I tried that thing with those anchors and it worked wonderful. Thanks for that.
But saving some changes with editor in UI seems to evaluate those anchors and paste the code instead of my anchors.
Next time I would like to change something I have to do that again many times!

[cyn]

@Ildar_Gabdullin thank you so much for all the examples you have provided in this post. I have spent many hours learning from your examples.

With the changes made in 2022.3 I have found that all my input (select, date, numbers) references have boxes around them now. For input_select I have eliminated the boxes using the code I’ve listed below, but after i select a new item in the dropdown box the gray box reappears until I click anywhere else on the screen.

I noticed this problem before but it nevered bothered me because it didn’t involve the input_ fields. Now it just looks ugly. Looking for help in eliminating this box, thanks

type: vertical-stack
in_card: true
cards:
  - type: markdown
    style: |
      ha-card { margin-top: -.8em;
                margin-bottom: .5em; }
    content: >
      ## {{ states('sensor.todays_date') }}

  - type: entities
    style: |
      ha-card { margin-top: -2em;
                margin-bottom: .8em;
                --mdc-select-fill-color: white;
              }
    show_header_toggle: false
    entities:
      - input_select.calendar_selection

[Mariusthvdb (Marius)]

Sorry but I dont use the UI editors, and use YAML mode.

do believen those editors strip all comments too, so these anchors might not be recognize either? As said, I wouldn’t really know, but just to be sure, do keep copies of the yaml files you make before saving in the editor

[boheme61]

they do seems to strip commends also , and anchors, maybe i end up using yalm-mode eventually … everything else i do in notepad++

[Ildar_Gabdullin]

@cyn

in 2022.3 I have found that all my input (select, date, numbers) references have boxes around them now

@cyn
Thanks a lot for good words!
These elements were changed in the 2022.3 and some styling for them need to be changed too.
I will prepare updated posts for these elements - a bit later (I very very hope).
Our crazy president is about to start a WW III, so I have some other jobs to do (((

[boheme61]

stay safe

[loeffelpan]

I use yaml mode, too.
But with that UI-integrated one. Not via ssh in external editor like Notepad++.
Well, seem that I have to change my behavior.

[cyn]

Stay Safe, crazy times we are living in.

[Timaelly]

Morning,

so since I updated somethings stopped working. I remember reading they were going to depricate something but I just can’t find the thread anymore. I’m pretty sure they wanted to depricate the paper item or something but what I’m kinda confused about is that that is still working, that’s not working is “.info” I want to hide this part here:

it was working just fine with this:

    - type: entities
      entities:
        - input_text.documentation_content
      title: Weitere Dokumentation (optional)
      card_mod:
        style:
          '#states div':
            hui-input-text-entity-row$:
              hui-generic-entity-row$: |
                .info {
                 display: none;
                    }
                state-badge {
                 display: none;
                }
              paper-input$: |
                paper-input-container iron-input {
                  --paper-input-container-shared-input-style_-_width: 55vw;
                }

.info {display: none; } doesn’t work anymore, i tried digging deep into the css but nothing I’ve tried worked so far.

from the hui-generic-entity-row.ts

static get styles(): CSSResultGroup {
    return css`
      :host {
        display: flex;
        align-items: center;
        flex-direction: row;
      }
      .info {
        margin-left: 16px;
        margin-right: 8px;
        flex: 1 1 30%;
      }
      .info,
      .info > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .flex ::slotted(*) {
        margin-left: 8px;
        min-width: 0;
      }
      .flex ::slotted([slot="secondary"]) {
        margin-left: 0;
      }
      .secondary,
      ha-relative-time {
        color: var(--secondary-text-color);
      }
      state-badge {
        flex: 0 0 40px;
      }
      :host([rtl]) .flex {
        margin-left: 0;
        margin-right: 16px;
      }
      :host([rtl]) .flex ::slotted(*) {
        margin-left: 0;
        margin-right: 8px;
      }
      .pointer {
        cursor: pointer;
      }
    `;
  }
}

Any idea what I missed? Any hint would be appreciated.

[Mariusthvdb (Marius)]

fyi, adding the player to an entities card makes a difference. Perfectly aligned with the other cards, and exact height of a regular card-header (in my config):

  - type: entities
    entities:
      - type: custom:browser-player
        card_mod:
          style: |
            ha-card {
              height: 48px;
              box-shadow: none;
              margin: -16px;
            }
            .card-content {
              padding-left: 8px;
              padding-top: 0px;
              justify-content: space-between;
            }
            .device-id {
              padding-left: 20px;
              position: absolute;
              left: 0%;
              bottom: -5%;
            }

adding:

        .placeholder {
          display: none;
        }

widens the slider a bit, by taking out an empty placeholder, though still not as much as could be.

[boheme61]

@Timaelly

    - type: entities
      entities:
        - input_text.documentation_content

tried

 show_name: false

?

[Timaelly]

Where would it go? Since I don’t think this is an option for the configuration of Entitites and it’s not working as style option either.

Edit:

Thank you for the hint though, I made my life a lot easier and just used name

        name: ' '

not the prettiest but it does the trick!

[boheme61]

lol, was just about to suggest it, but coun’t find where i saw that
… every “tweak” counts … as long as it work