I tested shrinking and expanding the card and didnât see an issue.
Tested this as well
.secondary {
visibility: hidden;
color: grey !important;
left: 50px;
position: relative;
}
Do you have an example of when itâs not aligned.
@LiQuid_cOOled
The size of the card is not the problem. The problem is the default secondary info, which is hidden, but the space is preserved.
So now if that hidden text is, letâs say âOffâ or âOnâ the space used is different, so the text is not aligned right with one of those states. Which one depends which I use to calculate the right margin.
try this:
type: tile
entity: light.schalfzimmer_eltern
icon: mdi:bed-king
vertical: true
hide_state: false
name: Elternzimmer
tap_action:
action: navigate
navigation_path: /lovelace/master_bedroom
show_entity_picture: false
card_mod:
style:
ha-tile-info$: |
.secondary:before {
visibility: visible;
margin: 0px auto -20px auto;
content: "{{ states('sensor.sonoff_snzb_02d_schlafzimmer_eltern_temperature') }} °C";
}
.secondary {
visibility: hidden;
display: contents;
color: grey !important;
}
A bit hacky and would probably suggest using custom:button-card for this or some other card, where the secondary info can use templates.
hi. is there a way to split styles to different files ?
I mean i wont to have 3 or more files with different templates.
style: |
:host {
perspective: 900px;
}
ha-card:active {
transform: rotateY(20deg);
transition: 0s;
}
ha-card {
background: rgba(28, 28, 28, 0.7); /* Przezroczyste tĹo (szare) */
}
This is my full.yaml file and in other file of my dashboard i set:
card_mod:
!include ../../../style/razem.yaml
and it work like a charm. i can use it in many cards.
But is there a way to use more different styles from few files?
for example in bg.yaml use:
ha-card {
background: rgba(28, 28, 28, 0.7); /* Przezroczyste tĹo (szare) */
}
and for active use:
ha-card:active {
transform: rotateY(20deg);
transition: 0s;
}
And in dashboard use:
card_mod:
!include ../../../style/bg.yaml
!include ../../../style/active.yaml
Hello to all,
I am seeking for some help with Card Mod as i have made a card that acts like a sidebar. The card itself is inside a conditional card that uses the screen condition to appear only on desktop and also if a helper is âonâ. I positioned the card to the left of the screen and it currently looks like this:
For further understanding, here is the code of the card:
type: conditional
conditions:
- condition: screen
media_query: '(min-width: 1024px)'
- condition: state
entity: input_boolean.show_interface_options
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
@media (min-width:100px) {
ha-card {
background: linear-gradient(180deg, rgba(39, 39, 39, 1) 11.2%, rgba(32, 36, 32, 01) 100%);
border-radius: 10px;
position: fixed;
top: var(--header-height);
z-index: 9;
right: 0px;
width: 25%;
height: 100%;
padding: 5px;
}
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Interface Options
- type: entities
entities:
- input_boolean.dashboard_automations
- type: divider
- input_boolean.show_location
- input_boolean.show_person_card
- input_boolean.show_notifications
- input_boolean.show_plex_button
- input_boolean.show_battery_information
- input_boolean.phone_control
- type: divider
- switch.tapo_c210_41a4_privacy
- switch.tapo_c210_41a4_auto_track
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(180deg, rgba(39, 39, 39, 0.93) 11.2%, rgb(32, 36, 32) 100%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
entity: input_boolean.show_interface_options
name: Hide Interface Options
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(145deg, rgb(195, 67, 129) 11%, rgb(90, 43, 186) 83.4%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
This card has toggle helpers and based on them i can show/hide other cards on the dashboard.
As it is now, the card appears on top (overlaps) of the other cards of the dashboard. I would like some help with the CSS code to do one of the following:
I posted already this question to the đš Card-mod - Super-charge your themes! - #1674 by michaelkrtikos topic but i was re-directed here.
I would appreciate if someone has implemented something similar and can support.
Thank you very much in advance
Kind Regards
M
This is not about a card-mod.
This is about yaml.
You are supposed to use syntax like
list_or_dict: !include ...
i.e. I do not think that this is correct:
xxx:
!include ...
hello, i use this card too. (taken from this forum somewhere) works perfectly on my computer. But if I go to my smartphone, the card is just too small⌠could I also move the donut & the text a bit to the left in the card itself? So that it is just a little more visible? Here is my card & code
[image]
type: custom:apexcharts-card
chart_type: donut
apex_config:
fill:
type: gradient
gradient:
shade: dark
shadeIntensity: 0.1
opacityFrom: 0.9
opacityTo: 0.85
stops:
- 0
- 90
- 100
legend:
position: right
fontSize: 11px
fontWeight: 300
markers:
width: 16
height: 5
customHTML:
- |-
EVAL:() => {
return `<ha-icon icon="hass:robot" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:radiobox-blank" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:account" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:camera" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:lightbulb" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:flower" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:flash" style="--mdc-icon-size: 14px;"></ha-icon>`
}
- |-
EVAL:() => {
return `<ha-icon icon="hass:home-assistant" style="--mdc-icon-size: 14px;"></ha-icon>`
}
fillColors:
- none
- none
- none
- none
- none
- none
- none
- none
stroke:
show: true
width: 0.4
dataLabels:
enabled: false
style:
fontSize: 12px
fontWeight: 700
dropShadow:
enabled: true
top: 0
left: 0
blur: 3
color: black
opacity: 0.1
plotOptions:
pie:
startAngle: 0
endAngle: 360
expandOnClick: true
offsetX: 0
offsetY: 0
customScale: 1
dataLabels:
offset: 0
minAngleToShowLabel: 10
donut:
size: 65%
background: transparent
labels:
show: true
value:
fontSize: 42px
fontWeight: 700
offsetY: 16
total:
show: true
label: Entities
fontSize: 15px
fontWeight: 800
color: '#ffffff50'
series:
- entity: sensor.count_automations
name: Automations
- entity: sensor.count_binary_sensors
name: Binary Sensors
- entity: sensor.count_device_trackers
name: Device Trackers
- entity: sensor.count_cameras
name: Cameras
- entity: sensor.count_lights
name: Lights
- entity: sensor.count_plants
name: Plants
- entity: sensor.count_sensors
name: Sensors
- entity: sensor.count_switches
name: Switches
- entity: sensor.count_zones
name: Zones
- entity: sensor.count_scripts
name: Scripts
- entity: sensor.count_zwave
name: Z-Wave
- entity: sensor.count_lock
name: Locks
- entity: sensor.count_vacuum
name: Vacuum
- entity: sensor.count_media_players
name: Players
card_mod:
style: |
ha-card {
margin: 14px 20px 28px !important;
}
Answering my own question⌠I finally did this with the browser mod and card mod combination.
Now the sidebar has the required separation from the rest of the interface and in fact, it doesnât even need to have the condition with the helper to appear since now itâs a pop up and it follows the theme setup. I am sharing the code even if this is not a browser mod topic but maybe it will be helpful to someone:
type: conditional
conditions:
- condition: screen
media_query: '(min-width: 1024px)'
card:
type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: browser_mod.popup
target:
device_id: eeac3932651d91b87f281d9660a06d99
data:
dismissable: true
content:
type: custom:mod-card
card_mod:
style: |
@media (min-width:100px) {
ha-card {
background: linear-gradient(180deg, rgba(39, 39, 39, 1) 11.2%, rgba(32, 36, 32, 01) 100%);
border-radius: 10px;
position: fixed;
top: var(--header-height);
z-index: 9;
right: 0px;
width: 25%;
height: 100%;
padding: 5px;
box-shadow: -5px -5px 5px 5px rgba(0,0,0,0);
}
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Interface Options
- type: entities
entities:
- type: section
- input_boolean.dashboard_automations
- input_boolean.show_location
- input_boolean.show_person_card
- input_boolean.show_notifications
- input_boolean.show_plex_button
- input_boolean.show_battery_information
- input_boolean.phone_control
- type: section
- switch.tapo_c210_41a4_privacy
- switch.tapo_c210_41a4_auto_track
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(180deg, rgba(39, 39, 39, 0.93) 11.2%, rgb(32, 36, 32) 100%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
icon: mdi:cog
icon_height: 25px
name: Interface Options
Hope this helps
can you tell me how to use it?
How to use include? I have already described it in that post.
xxxx: !include ...
Hello. Looking for a way to add overflow. For a browser pop-up box. When using a drop down menu
I canât find anything specific to a fire-dom pop up menu on the card-mod link
Hi all, I am trying to figure out myself but I got lost in all the information there. I am tryting to change Title allignment (center) of simple glance card.
Could you help me out please? Seems I should mod h1 but how 
show_name: true
show_icon: false
show_state: true
type: glance
entities:
- entity: sun.sun
name: Today
- entity: sun.sun
name: Tomorrow
title: Title
This will work. Colored the text to also show the card_mod was working.
show_name: true
show_icon: false
show_state: true
type: glance
entities:
- entity: sun.sun
name: Today
- entity: sun.sun
name: Tomorrow
title: Title
card_mod:
style:
$: |
.card-header {
color: red !important;
text-align: center;
}
Awesome, thanks a lot!
I just updated my HA installation and now cardmod and mushroom doesn´t work as before. I read that there´s been some changes in the last couple of months but i can´t find what the changes are and how they can be fixed, can anyone point me in the right direction?
Can you please post the code for a card that is not working?
type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card$: |
.card-header {
font-size: 25px !important;
padding: 8px 16px 0px !important;
}
card:
type: vertical-stack
title: Bathroom
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperature_84
- type: entity
entity: sensor.humidity_83
- type: template
entity: binary_sensor.presence_sensor_fp2_dffb_presence_sensor_1
content_info: none
tap_action:
action: more-info
icon: >-
{{ 'mdi:motion-sensor' if is_state(entity, 'on') else
'mdi:motion-sensor-off' }}
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''white'' }}'
- type: template
entity: binary_sensor.water_29
content_info: none
tap_action:
action: more-info
icon: '{{ ''mdi:water'' if is_state(entity, ''on'') else ''mdi:water-off'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''white'' }}'
alignment: end
style: |
.chip-container {
padding-right: 4px;
margin-top: -46px
}
- type: custom:mushroom-light-card
entity: light.mugg
name: Ceiling
fill_container: false
show_brightness_control: true
layout: horizontal
icon_color: amber
Basicly, i want the âbathroomâ text to be in line with the mushroom sensors so the card gets more compacted. And this all worked before i upgraded.
style now requires this setup. You were missing the card_mod line.
card_mod:
style: |
type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card$: |
.card-header {
font-size: 25px !important;
padding: 8px 16px 0px !important;
}
card:
type: vertical-stack
title: Bathroom
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperature_84
- type: entity
entity: sensor.humidity_83
- type: template
entity: binary_sensor.presence_sensor_fp2_dffb_presence_sensor_1
content_info: none
tap_action:
action: more-info
icon: >-
{{ 'mdi:motion-sensor' if is_state(entity, 'on') else
'mdi:motion-sensor-off' }}
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''white'' }}'
- type: template
entity: binary_sensor.water_29
content_info: none
tap_action:
action: more-info
icon: '{{ ''mdi:water'' if is_state(entity, ''on'') else ''mdi:water-off'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''white'' }}'
alignment: end
card_mod:
style: |
.chip-container {
padding-right: 4px;
margin-top: -46px
}
- type: custom:mushroom-light-card
entity: light.mugg
name: Ceiling
fill_container: false
show_brightness_control: true
layout: horizontal
icon_color: amber
Thanks! I knew it was something small i missed 