Styling tabbed-card:
main card-mod thread → 1st post → link at the bottom titled “fantastic” → tabbed-card
Styling picture elements:
same path → picture-elements
Suggest to ask all card-mod related questions in the main card-mod thread.
You have a Picture-elements card inside a tabbed card.
And you want to style them both.
That is why I told where to find tutorials/examples for both cards.
but is I am a noob I do not understand guides… I ask for a solution… maybe someone like you have solution in 1 minute… I am working since 12 days… and after that time I ask help… repeting… sorry… really for disturb but I need a solution not a guide…
OK, then I would suggest you these:
- Find out what parts are not working.
- Minimize the code to the absolute minimal volume which allows to reproduce the issue by other people. (also, there is a huge probability that you will find a reason of your problem by yourself). Make it simpler to avoid forcing people to play this game.
BTW, no need to use “config-template-card” to set an icon dynamically, use a “–card-mod-icon” in card-mod:
type: picture-elements
elements:
- type: state-icon
entity: input_boolean.test_boolean
tap_action:
action: toggle
style:
top: 50%
left: 50%
card_mod:
style: |
:host {
{% if is_state(config.entity,'on') -%}
--card-mod-icon: mdi:account;
{%- else -%}
--card-mod-icon: mdi:card;
{%- endif %}
}
image: /local/images/test/orange.jpg
I know very well what is the part not working as I said before…
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
box-shadow: none !important;
--slot_0_color: {% if is_state_attr('sensor.a1_ams1_slot_1', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_1', 'color') }}; {% endif %}
--slot_1_color: {% if is_state_attr('sensor.a1_ams1_slot_2', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_2', 'color') }}; {% endif %}
--slot_2_color: {% if is_state_attr('sensor.a1_ams1_slot_3', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_3', 'color') }}; {% endif %}
--slot_3_color: {% if is_state_attr('sensor.a1_ams1_slot_4', 'color', '#00000000') %} rgb(255, 255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_4', 'color') }}; {% endif %}
--slot_0_bg: {% if is_state_attr('sensor.a1_ams1_slot_1', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
--slot_1_bg: {% if is_state_attr('sensor.a1_ams1_slot_2', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
--slot_2_bg: {% if is_state_attr('sensor.a1_ams1_slot_3', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
--slot_3_bg: {% if is_state_attr('sensor.a1_ams1_slot_4', 'in_use', true) %} rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %}
}
this is the part nit working
if you see photo compared you can find differences
Have you tested these templates in Dev tools → Template?
Can you test with a simple ONE tab inside tabbed-card, containing one Picture-elements with ONE icon and w/o these templates?
Sure, but people here are mainly not interested in finding differences, this is YOUR work to present a task in a clear form.
And this a short example which you may use:
type: custom:mod-card
card_mod:
style: |
ha-card {
background: cyan;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
type: picture-elements
elements:
- type: state-icon
entity: sun.sun
style:
top: 50%
left: 50%
"--card-mod-icon-color": var(--some-var)
image: /local/images/test/orange.jpg
card_mod:
style: |
ha-card {
--some-var: red;
}
attributes:
label: xxx
Just provide your own simple background image.
following your instuction and try to apply them with my poor knoledge I generate this code… (don’t know if it is good)
type: custom:mod-card
card_mod:
style: >
ha-card { background: none !important; border: none !important; box-shadow:
none !important; --slot_1_color: {% if
is_state_attr('sensor.a1_ams1_slot_1', 'color', '#00000000') %} rgb(255,
255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_1', 'color') }}; {%
endif %} --slot_2_color: {% if is_state_attr('sensor.a1_ams1_slot_2',
'color', '#00000000') %} rgb(255, 255, 255); {% else %}
{{state_attr('sensor.a1_ams1_slot_2', 'color') }}; {% endif %}
--slot_3_color: {% if is_state_attr('sensor.a1_ams1_slot_3', 'color',
'#00000000') %} rgb(255, 255, 255); {% else %}
{{state_attr('sensor.a1_ams1_slot_3', 'color') }}; {% endif %}
--slot_4_color: {% if is_state_attr('sensor.a1_ams1_slot_4', 'color',
'#00000000') %} rgb(255, 255, 255); {% else %}
{{state_attr('sensor.a1_ams1_slot_4', 'color') }}; {% endif %} --slot_1_bg:
{% if is_state_attr('sensor.a1_ams1_slot_1', 'active', true) %} rgba(255,
255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %} --slot_2_bg: {% if
is_state_attr('sensor.a1_ams1_slot_2', 'active', true) %} rgba(255, 255,
126, 0.5); {% else %} rgba(0,0,0,0); {% endif %} --slot_3_bg: {% if
is_state_attr('sensor.a1_ams1_slot_3', 'active', true) %} rgba(255, 255,
126, 0.5); {% else %} rgba(0,0,0,0); {% endif %} --slot_4_bg: {% if
is_state_attr('sensor.a1_ams1_slot_4', 'active', true) %} rgba(255, 255,
126, 0.5); {% else %} rgba(0,0,0,0); {% endif %} --slot_vt_color:
{{state_attr('sensor.a1_externalspool_bobina_esterna','color') }};
--slot_vt_bg: {% if
is_state_attr('sensor.a1_externalspool_bobina_esterna','in_use', true) %}
rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0.5); {%endif %} }
card:
type: custom:tabbed-card
tabs:
- card:
type: picture-elements
elements:
- type: conditional
conditions:
- condition: state
state_not: unavailable
entity: sensor.a1_ams1_id
- condition: state
state_not: unknown
entity: sensor.a1_ams1_id
elements:
- type: state-label
entity: sensor.a1_ams1_id
tap_action:
action: none
style:
top: 77%
left: 30%
text-align: center
font-size: 0.8em
background-color: rgba(0,0,0,0)
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0)
border-radius: 10px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_1
element:
type: state-icon
entity: sensor.a1_ams1_slot_1
icon: >-
${states['sensor.a1_ams1_slot_1'].state.toLowerCase() !=
'empty'? 'fapro:filament-1' : 'mdi:tray' }
style:
top: 27%
left: 45%
"--paper-item-icon-color": var(--slot_1_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_1_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_1
attribute: type
tap_action:
action: none
style:
top: 40%
left: 45%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_1_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_2
element:
type: state-icon
entity: sensor.a1_ams1_slot_2
icon: >-
${states['sensor.a1_ams1_slot_2'].state.toLowerCase() !=
'empty'? 'fapro:filament-1' : 'mdi:tray' }
style:
top: 62%
left: 12%
"--paper-item-icon-color": var(--slot_2_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_2_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_2
attribute: type
tap_action:
action: none
style:
top: 77%
left: 12%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_2_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_3
element:
type: state-icon
entity: sensor.a1_ams1_slot_3
icon: >-
${states['sensor.a1_ams1_slot_3'].state.toLowerCase() !=
'empty'? 'fapro:filament-1' : 'mdi:tray' }
style:
top: 63%
left: 63%
"--paper-item-icon-color": var(--slot_3_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_3_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_3
attribute: type
tap_action:
action: none
style:
top: 77%
left: 63%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_3_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_4
element:
type: state-icon
entity: sensor.a1_ams1_slot_4
icon: >-
${states['sensor.a1_ams1_slot_4'].state.toLowerCase() !=
'empty'? 'fapro:filament-1' : 'mdi:tray' }
style:
top: 27%
left: 88%
"--paper-item-icon-color": var(--slot_4_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_4_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_4
attribute: type
tap_action:
action: none
style:
top: 41%
left: 88%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_4_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
image: /local/media/bambuprinter/ams_lite.png
attributes:
label: AMS
- card:
type: picture-elements
elements:
- type: custom:config-template-card
entities:
- sensor.a1_externalspool_bobina_esterna
element:
type: state-icon
entity: sensor.a1_externalspool_bobina_esterna
icon: >-
${states['sensor.a1_externalspool_bobina_esterna'].state.toLowerCase()
!= 'empty' ? 'fapro:filament-1' : 'mdi:tray' }
style:
top: 50%
left: 50%
transform: translate(-50%, -50%) scale(200%)
"--paper-item-icon-color": var(--slot_vt_color)
background-color: rgba(0,0,0,0.5)
box-shadow: 0 0 5px 5px var(--slot_vt_bg)
border-radius: 50px
"--mdc-icon-size": 1.8em
- type: state-label
entity: sensor.a1_externalspool_bobina_esterna
attribute: type
tap_action:
action: none
style:
top: 50%
left: 85%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.4)
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.4)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
- entity: button.bambu_a1_clear_external_spool
icon: mdi:delete
service: button.press
style:
top: 40%
color: rgb(180,33,50)
"--mdc-icon-size": 3.5em
left: 2%
transform: initial
tap_action:
action: call-service
service: button.press
target:
entity_id: button.bambu_a1_clear_external_spool
type: icon
image: /local/media/bambuprinter/spool.png
attributes:
label: External
seems all is working except background none… maybe I put in wrong place?
Already suggested you to simplify a task for people.
don’t know what to say more simple than “only background: none” is not working…
sorry but as said english is not my language, if you can see on picture there is a backgroud grey… but the code is
style: >
ha-card { background: none !important; border: none !important; box-shadow:
none !important;
The thing is that in difficult cases we have to take YOUR code & then paste to OUR setup. This will not be easy since other people do not have your sensors, your images.
Besides, a complex logic, lots of unrelated things are a distraction.
That is why I suggested you to take my example & start playing with it.
I thank you and your example help me to reach 90% of the result… now only background… that I think is simple to reproduce…and someone can help (hope)
Take this example:
type: vertical-stack
cards:
- type: entities
entities:
- input_boolean.test_boolean
- type: custom:tabbed-card
options: {}
tabs:
- card:
type: picture-elements
elements:
- type: state-icon
entity: sun.sun
style:
top: 50%
left: 50%
--card-mod-icon-color: var(--slot_0_color)
background-color: var(--slot_0_bg)
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') -%}
--card-mod-icon: mdi:car;
{%- else -%}
--card-mod-icon: mdi:account;
{%- endif %}
}
image: /local/images/test/orange.jpg
card_mod:
style: |
ha-card {
--slot_0_color: {% if is_state('input_boolean.test_boolean','on') %} cyan; {% else %} red; {% endif %}
--slot_0_bg: {% if is_state('input_boolean.test_boolean','on') %} lightgreen; {% else %} yellow; {% endif %}
}
attributes:
label: xxx
And which background you wish to change?
Tell me about your background image, is it a transparent png?
I mean - these complex things on a picture are surrounded by a transparent background, right?
yes this is the original photo
See, this code removes a background from a picture-elements card:
type: picture-elements
elements:
- type: state-icon
entity: sun.sun
style:
top: 10%
left: 10%
image: /local/images/test/car.png
card_mod:
style: |
ha-card {
background: none;
border: none;
}
And no tabbed-card here, it does not change a behaviour of the picture-elements card.
This I is why I told that you need to simplify a code as much as possible to be easy analysed.
without tabbed card it works also to me… my problem is inside tabbed card
Inside tabbed card:
type: vertical-stack
cards:
- type: entities
entities:
- input_boolean.test_boolean
- type: custom:tabbed-card
options: {}
tabs:
- card:
type: picture-elements
elements:
- type: state-icon
entity: sun.sun
style:
top: 80%
left: 80%
"--card-mod-icon-color": var(--slot_0_color)
background-color: var(--slot_0_bg)
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') -%}
--card-mod-icon: mdi:car;
{%- else -%}
--card-mod-icon: mdi:account;
{%- endif %}
}
image: /local/test_file_io/1test.png
card_mod:
style: |
ha-card {
--slot_0_color: {% if is_state('input_boolean.test_boolean','on') %} cyan; {% else %} red; {% endif %}
--slot_0_bg: {% if is_state('input_boolean.test_boolean','on') %} lightgreen; {% else %} yellow; {% endif %}
background: none;
border: none;
}
attributes:
label: xxx
Have you placed your tabbed card onto another card?
nothing to me this is impossible maybe I am too noob…
This is my bare-bones code
type: custom:mod-card
card_mod:
style: >
ha-card { background: none !important; border: none !important; box-shadow:
none !important; --slot_1_color: {% if
is_state_attr('sensor.a1_ams1_slot_1', 'color', '#00000000') %} rgb(255,
255, 255); {% else %} {{state_attr('sensor.a1_ams1_slot_1', 'color') }}; {%
endif %} --slot_2_color: {% if is_state_attr('sensor.a1_ams1_slot_2',
'color', '#00000000') %} rgb(255, 255, 255); {% else %}
{{state_attr('sensor.a1_ams1_slot_2', 'color') }}; {% endif %}
--slot_3_color: {% if is_state_attr('sensor.a1_ams1_slot_3', 'color',
'#00000000') %} rgb(255, 255, 255); {% else %}
{{state_attr('sensor.a1_ams1_slot_3', 'color') }}; {% endif %}
--slot_4_color: {% if is_state_attr('sensor.a1_ams1_slot_4', 'color',
'#00000000') %} rgb(255, 255, 255); {% else %}
{{state_attr('sensor.a1_ams1_slot_4', 'color') }}; {% endif %} --slot_1_bg:
{% if is_state_attr('sensor.a1_ams1_slot_1', 'active', true) %} rgba(255,
255, 126, 0.5); {% else %} rgba(0,0,0,0); {% endif %} --slot_2_bg: {% if
is_state_attr('sensor.a1_ams1_slot_2', 'active', true) %} rgba(255, 255,
126, 0.5); {% else %} rgba(0,0,0,0); {% endif %} --slot_3_bg: {% if
is_state_attr('sensor.a1_ams1_slot_3', 'active', true) %} rgba(255, 255,
126, 0.5); {% else %} rgba(0,0,0,0); {% endif %} --slot_4_bg: {% if
is_state_attr('sensor.a1_ams1_slot_4', 'active', true) %} rgba(255, 255,
126, 0.5); {% else %} rgba(0,0,0,0); {% endif %} --slot_vt_color:
{{state_attr('sensor.a1_externalspool_bobina_esterna','color') }};
--slot_vt_bg: {% if
is_state_attr('sensor.a1_externalspool_bobina_esterna','in_use', true) %}
rgba(255, 255, 126, 0.5); {% else %} rgba(0,0,0,0.5); {%endif %} }
card:
type: custom:tabbed-card
tabs:
- card:
type: picture-elements
elements:
- type: conditional
conditions:
- condition: state
state_not: unavailable
entity: sensor.a1_ams1_id
- condition: state
state_not: unknown
entity: sensor.a1_ams1_id
elements:
- type: state-label
entity: sensor.a1_ams1_id
tap_action:
action: none
style:
top: 77%
left: 30%
text-align: center
font-size: 0.8em
background-color: rgba(0,0,0,0)
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0)
border-radius: 10px
pointer-events: none
color: "#FFFFFF"
- type: custom:config-template-card
entities:
- sensor.a1_ams1_slot_1
element:
type: state-icon
entity: sensor.a1_ams1_slot_1
icon: >-
${states['sensor.a1_ams1_slot_1'].state.toLowerCase() !=
'empty'? 'fapro:filament-1' : 'mdi:tray' }
style:
top: 27%
left: 45%
"--paper-item-icon-color": var(--slot_1_color)
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_1_bg)
border-radius: 50px
"--mdc-icon-size": 2.4em
- type: state-label
entity: sensor.a1_ams1_slot_1
attribute: type
tap_action:
action: none
style:
top: 40%
left: 45%
text-align: center
font-size: 1em
background-color: rgba(0,0,0,0.5)
padding: 7px
border: 2px solid rgba(255,255,255,0.6)
box-shadow: 0 0 5px 5px var(--slot_1_bg)
border-radius: 50px
pointer-events: none
color: "#FFFFFF"
image: /local/media/bambuprinter/ams_lite.png
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
box-shadow: none !important;
}
attributes:
label: AMS
but result still this:
