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

thomasloven · July 10, 2019, 7:35pm

Ok…

First of all, if you show me a screenshot of a message, I’ll assume your question is related to the message. I am not a mind reader.
Second, if your question is about why your code does not work, post the code, not a picture of a small piece of the code.
Third, again, I am not a mind reader, but - just guessing from the single screenshot and nothing else you’ve provided - I’ll assume your “problem” is because you have configured the background to be green when the light is turned on, and to not change when it’s turned off - and your light is currently turned off.

mclaudiopt · July 10, 2019, 7:39pm

thomas, i am sorry for beeing a noob…
so i will try to focus one question at the time…
my 1st goal would be to change
this

background: 'radial-gradient(lightgray, green)'
entities:
  - entity: sensor.planta_conductivity
    name: Condutividade
  - entity: sensor.planta_moisture
    name: Humidade
  - entity: sensor.planta_temperature
    name: Temperatura
  - entity: sensor.planta_light_intensity
    name: Luz
heading: "\U0001F33F Ficus Benjamina"
link: /lovelace/bathroom
panel: true
row_size: 4
type: 'custom:banner-card'

into red text if for example sensor.planta_conductivity is <400

thomasloven · July 10, 2019, 7:49pm

First you need to find the css and/or js path of the part you wish to modify. The element inspector of your browser can help with this, but you also need to know your way around HTML, javascript and CSS.
I don’t use banner-card myself, so I can’t help, unfortunately, but just scanning the code for it on github, I’d think you’d end up with something like:

something something .overlay-strip .entities .entity_state:n-th-of-type(1) .entity-value

Similar to the advanced example in the readme.

Then you need a template for the color, something like
color: [[ if(sensor.planta_conductivity < 1000, "red", "black") ]]
should do it. Play around, and start with a simpler example - like the button you tried first.

amulyawan · July 11, 2019, 11:02pm

Hi,
Need help for:

$document.querySelector(“body > home-assistant”).shadowRoot.querySelector(“home-assistant-main”).shadowRoot.querySelector(“app-drawer-layout > partial-panel-resolver > ha-panel-lovelace”).shadowRoot.querySelector(“hui-root”).shadowRoot.querySelector("#view > hui-view").shadowRoot.querySelector("#columns > div:nth-child(2) > hui-vertical-stack-card").shadowRoot.querySelector("#root > hui-vertical-stack-card:nth-child(2)").shadowRoot.querySelector("#root > hui-horizontal-stack-card:nth-child(2)")

I try with:

              - type: horizontal-stack
                style: |
                  "#states div":
                    hui-vertical-stack-card:
                      $: 
                        hui-horizontal-stack-card:
                          $: |
                            #root {
                              display: none;
                            }

It is not working.

cjsimmons · July 12, 2019, 11:20am

Hmm, I like the idea of this card, but it’s too confusing… The old card-modder worked great.

Ok, so trying to hide a box-shadow on a custom:vertical-stack-in-card. I’m not sure if I got things right or not. Any help would be appreciated. This is what I have copied from the GUI card editor.

  - type: 'custom:vertical-stack-in-card'
    style:
      .: ''
      '#states div:nth-child(1)':
        $: |
          vertical-stack-in-card: {
            box-shadow: none;
          }

This is the selector:

#states > div:nth-child(1) > vertical-stack-in-card

I don’t understand what’s going on.

benm7 · July 12, 2019, 12:14pm

Is there a way to increase the size of the icons/entity picture of a person entity in an entities card? I have two entities as below however I would like the pictures to be larger if possible. I added a regular entity with an icon and was able to enlarge that using card modder but id didn’t enlarge the person pictures for some reason…

KoenChiau · July 18, 2019, 1:09pm

Friends,

I am trying to change the header of a fold-entity-row from normal to bold font-weight.

This fold-entity-row is populated through an auto-entities custom-card.

I have tried inspecting the element in my browser, attempted many different ways to get this done through Card-Mod, but do not succeed.

My yaml code:

        - type: custom:auto-entities
          filter:
            include:
              - entity_id: "cover.gelijkvloers_bureau*"
          show-empty: false
          card:
            type: custom:fold-entity-row
            head:
              type: section
              label: Bureau
#         style:  ?????????

A desperate guy looking for some guidance, a solution, …

horacecar · July 18, 2019, 1:34pm

I am sorry, i have the same question… i still do not understand what this mean…how can i use if and else?

@keyframes blink {
50% {
background: [[ if(states.binary_sensor.meteoalarm.attributes.severity == “Moderate”, “yellow”, “”) else if (states.binary_sensor.meteoalarm.attributes.severity == “High”, “red”, “”)]];
}
}
ha-card {
animation: blink 10s linear infinite;
}

horacecar · July 18, 2019, 1:50pm

Actually i wanna 3 color , when battery lower then 40 yello, lower then 20 red, then normal is black.

thomasloven · July 21, 2019, 12:15pm

You mean pretty much exactly like the example in the documentation?

thomasloven · July 21, 2019, 12:17pm

auto-entities is not a card and has no ha-card component.
You’ll have to apply the styles from the entities card.

KoenChiau · July 21, 2019, 2:03pm

Thanks for the feedback, Thomas.

Does this mean that what I want to achieve cannot be done ?

Dino-Tech · July 21, 2019, 3:45pm

Here is how I style my lovelace-fold-entity-row's to get this:

                - type: custom:card-modder
                  <<: *darrentintstyles
                  card:
                    type: entities
                    entities:
                      - type: custom:fold-entity-row
                        head: 
                          type: section
                          label: Areas
                        padding: 0px
                        items:
                          - type: 'custom:hui-glance-card'
                            ...

and the anchor with the styles:

  darren_tint_styles: &darrentintstyles
    style:
      background: rgba(0,0,0,0.35)
      border-radius: 15px
      "--primary-text-color": "#f2f2f2"
      "--paper-card-background-color": 'rgba(0, 0, 0,0.65)'
      font-weight: bold
      font-size: 1.55em
      text-transform: capitalize
      font-variant: small-caps
      text-shadow: "1px 1px 2px black, 0 0 25px green, 0 0 5px darkgreen"
      "--paper-item-icon-color": lime
      "--iron-icon-stroke-color": green
      "--iron-icon-height": 41px
      "--iron-icon-width": 41px

thomasloven · July 21, 2019, 7:23pm

No. It means

I.e.

type: entities
style:
  STYLES GO HERE
entities:
  - whatever
     NOT HERE

Use the object inspector in your browser to find the correct path for the styling, starting from the <hui-entities-card> tag.

LbDab · July 21, 2019, 7:58pm

Trying to hide part of more-info-card but IDK if it’s even possible.

This is more-info-card of climate entity, I’m trying to hide graph part:

In Chrome>Inspect if I add display: none to state-history-charts it works but when adding to HA config it is not hiding, my config:

  - type: custom:more-info-card
    entity: climate.ac
    style: |
      state-history-charts {
        display: none;
        height: 0px;
      }

also tried with state-history-chart-line and ha-chart-base and another options found in Chrome>Inspect without success

Is it possible?

hekm77 · July 22, 2019, 10:52am

@thomasloven,
I’m trying to change the color of the header.
Where is my mistake?
Thanks.

("#states > div:nth-child(1) > fold-entity-row").shadowRoot.querySelector("#head > entity-row-maker > hui-section-row").shadowRoot.querySelector("div.label")

- type: entities
  style:
    .: |
    "#states div":
      fold-entity-row:
        $: |
          "#head":
            $:
              entity-row-maker:
                $:
                  hui-section-row:
                    $: |
                      .label {
                        color: var(--accent-color);
                      }
  entities:
    - type: custom:fold-entity-row
      head:
        type: section
        label: Test

thomasloven · July 22, 2019, 4:55pm

#head doesn’t have a shadowroot, so there should’t be a $ there.

thomasloven · July 22, 2019, 4:56pm

There are shadowroots in your way. Look at the post below yours. That’s a great example on how to dissect a selector path.

hekm77 · July 22, 2019, 8:22pm

@thomasloven
I still do not understand.
Could you help me?
I deleted $ from #head, but nothing has changed, I can’t get to .label

- title: Test Card Mod
  cards:
    - type: entities
      style:
        .: |
          ha-card {
            border-radius: 10px;
          }
        "#states div":
          fold-entity-row:
            $: |
              "#head":
                entity-row-maker:
                  hui-section-row:
                    $: |
                      .label {
                        color: #FFFFFF;
                      }
      entities:
        - type: custom:fold-entity-row
          head:
            type: section
            label: Test
          items:
            - light.bedroom
            - light.kitchen
            - light.hall

thomasloven · July 22, 2019, 10:38pm

I can’t really say what’s wrong, but I can give you a tip for finding the problem.

Try one step at a time, i.e. start with

style:
  "#states div": |
    whatever {
      color: red;
    }

Then open up the object inspector and make sure the following is added inside the correct <div> tag.

<style class="card-mod-style">whatever {
  color: red;
}
</style>

Then you move on to

style:
  "#states div": 
    fold-entity-row: |
      whatever {
        color: red;
      }

and so on…