I actually have the same issue, but I’m not using layout-card or card-modder. I am using compact-custom-header though, but that seems to be the only resemblance.
My issue is actually with conditional and button-card (so conditionally showing certain button-cards based on the state of a light group, which doesn’t seem to be related to any of @thomasloven’s plugins.
Really nice setup btw @mcfrojd.
– EDIT –
When i tried it in a incognito browser it WORKS with that new Layout Card.
I guess i had cache problems in normal browser.
– EDIT –
That card dont show up in custom updater, but i manually updated it and there is no positive change.
This is why I sometimes wait an hour or two to answer some questions…
Glad it worked!
Nice setup! Do you mind sharing your full setup for that view?
What are you using to control TiVo? Is it a Harmony remote?
I will publish this soon on my github, i need a couple of tweek more before im happy 
Im using the TCP component to control my tivo.
You will find all info in this thread:
Interesting, i guess i can do a spin-off from the short example you posted above
@thomasloven or any lovelace / css guru.
Is it possible to have the “active” button on the top row with another background?
When i click the top “TIVO” button the “tivo” card is displayed, and so on, but how to have the navigation buttons to know that its active?
Is there som kind of state_filer?
Lovelace code:
---
icon: mdi:remote
cards:
- type: custom:compact-custom-header
###############################################################################################################
## Navigation Buttons
###############################################################################################################
- type: horizontal-stack
cards:
- type: custom:card-modder
card:
type: entity-button
icon: hide
name: TIVO
entity: input_boolean.shield_dummy
hold_action: none
tap_action:
action: call-service
service: input_select.set_options
service_data:
entity_id: input_select.remote
options: "TIVO"
style:
background-color: rgba(56,60,69,1)
border-radius: 20px
border: solid 3px rgba(255, 125, 125,1)
box-shadow: 3px 3px rgba(0,0,0,0.4)
- type: custom:card-modder
card:
type: entity-button
icon: hide
name: SHIELD
entity: input_boolean.shield_dummy
hold_action: none
tap_action:
action: call-service
service: input_select.set_options
service_data:
entity_id: input_select.remote
options: "SHIELD"
style:
background-color: rgba(56,60,69,1)
border-radius: 20px
border: solid 3px rgba(255, 125, 125,1)
box-shadow: 3px 3px rgba(0,0,0,0.4)
- type: custom:card-modder
card:
type: entity-button
icon: hide
name: TV KANALER
entity: input_boolean.shield_dummy
hold_action: none
tap_action:
action: call-service
service: input_select.set_options
service_data:
entity_id: input_select.remote
options: "CHANNELS"
style:
background-color: rgba(56,60,69,1)
border-radius: 20px
border: solid 3px rgba(255, 125, 125,1)
box-shadow: 3px 3px rgba(0,0,0,0.4)
- type: custom:card-modder
card:
type: entity-button
icon: hide
name: RADIO
entity: input_boolean.shield_dummy
hold_action: none
tap_action:
action: call-service
service: input_select.set_options
service_data:
entity_id: input_select.remote
options: "RADIO"
style:
background-color: rgba(56,60,69,1)
border-radius: 20px
border: solid 3px rgba(255, 125, 125,1)
box-shadow: 3px 3px rgba(0,0,0,0.4)
- type: custom:state-switch
entity: input_select.remote
states:
TIVO:
###############################################################################################################
## TIVO - SONOS CONTROLLER
###############################################################################################################
type: entities
entities:
- entity: input_boolean.shield_dummy
name: TIVO
SHIELD:
###############################################################################################################
## SHIELD CONTROLLER
###############################################################################################################
type: entities
entities:
- entity: input_boolean.shield_dummy
name: SHIELD
CHANNELS:
###############################################################################################################
## Favotite Channels
###############################################################################################################
type: entities
entities:
- entity: input_boolean.shield_dummy
name: TV Channels
RADIO:
###############################################################################################################
## Radio Channels
###############################################################################################################
type: entities
entities:
- entity: input_boolean.shield_dummy
name: RADIOI really wanted to avoid adding any programming to card-modder, but you may just have convinced me…
It can be done now by adding a template sensor for each button which has as its value the color the background should be and then doing background-color: [[ sensor.shield_button_color ]] or whatever…
I’ll see what I can do…
@thomasloven After update layout-card to version 616f74 when I open HA hamburger menu I have error in log:
https://_redacted_/local/lovelace/layout-card.js?v=616f74:68:48 Uncaught TypeError: Cannot read property 'clientWidth' of null
Browser cache is cleaned.
My config:
- id: network
icon: mdi:ethernet
title: 'Sieć'
background: '#e5e5e5'
path: network
panel: true
cards:
- type: custom:layout-card
cards:
- ...
- ...
@thomasloven This is what I was referring to on Discord. https://pastebin.com/HL54c57w
The latest ver#ab81587, displays this:
Should be fixed now.
I just pushed a workaround for vertical-stack-in-card to github for card-modder. Try the new version c7fa10.
useful-markdown-card has been remade from the ground up. It should now work more like the original markdown card, but also has some new features (see below).
card-tools has been upgraded with more advanced templating options which means that…
card-modder now can e.g. apply different styles based on the state of an entity.
background-color: [[ if(light.my_lamp == "on", "yellow", "blue") ]]
A full description of the new template features is available at the github page for useful-markdown-card, which can also make full use of them.
See the post above this one. You should now be able to do
type: custom:card-modder
card:
type: entity-button
name: TIVO
... etc ...
style:
background-color: [[ if(input_select.remote == "TIVO", "blue", "rgba(56, 60, 69, 1)") ]]
... etc ...
Requires upgrading card-tools (but not card-modder, technically. Though you should probably do that anyway…)
Had a lot to edit, update and test.
Now i’m getting
2019-02-16 02:20:04 ERROR (MainThread) [frontend.js.latest.201902150] http://192.168.1.123:8123/customcards/card-modder.js:74:54 SyntaxError: missing ) after condition
@VDRainer i have this:
https://xxxx.org/local/lovelace/tomas_loven_cards/lovelace-card-modder/card-modder.js?v=30:74:55 Uncaught SyntaxError: Unexpected token {
Thanks @iantrich, works now.
I also had to revert card-tools to 297fcc, because i wondered about the secondaryinfo-entity-row
The first showed fine, the second not???
- entity: sensor.e3dc_house_power
name: Haus
icon: mdi:home-outline
type: "custom:secondaryinfo-entity-row"
secondary_info: "[[ sensor.daily_house_energy.state ]] kWh"
- entity: sensor.e3dc_net_power
name: Netz
icon: mdi:transmission-tower
type: "custom:secondaryinfo-entity-row"
secondary_info: "Bezug: [[ sensor.daily_from_net_energy.state ]] kWh, Einsp.: [[ sensor.daily_to_net_energy.state ]] kWh"
I get this error when i try this:
2019-02-16 11:05:12 ERROR (SyncWorker_5) [homeassistant.util.yaml] while parsing a flow sequence in "/config/lovelace/views/13_test.yaml", line 28, column 30 expected ',' or ']', but got '<scalar>' in "/config/lovelace/views/13_test.yaml", line 28, column 95
But your example code on “useful-markdown-card” github page works fine with the new “if” states