I will. But you are right, I should have the new versions up and running to give not only 90% gut feeling proposals but 100% proved ones.
1 Like
Dear all,
I have some difficulty to tweak an entity of type ātextā, that seems to create a kind of edit box, in which there is a small label/title. This text edit box by itself is 56px height which is quite huge (and if you add paddings and different margins, itās an object of almost 100px height for just displaying a floatā¦
Anyhow, it looks like this:
for a code like that
cards:
- type: entities
entities:
- entity: text.veolia_daily_threshold_alert
The original non-card-mod tweaked by myself display is:
I understood through the inspector that changing .mdc-text-fieldāfilled can help a bit, but still, there is huge margins around āDaily Thershold alertā and huge vertical margins everywhere
Imā pretty sure it will still look beautiful even if I reduce the total height of 2 times up to 3 times
Does someone already tweaked this kind of entity?
For some reason my logbook card background transparency stopped working. Is there something that I need to do to fix it?
style: |
ha-logbook {
height: calc(100vh - var(--header-height) - 32px) !important;
}
ha-card {
background: transparent;
border: solid 1px;
}Have the same problem after installing version Card-mod 3.4.4 Today
/Nis
I also have problems with the latest update of card_mod and home assistant.
card_mod:
style: |
ha-card {
border-width: 0px;
}
is not working anymore on the ultra vehicle card. Canāt seem to find another element to style the border on. Somebody figured this out?
Also the styling of the multiple-entity-card broke down:
card_mod:
style: |
:host {
--card-mod-icon-color: black;
}
#states > * {
margin: -5px 0px !important;
}
ha-card {
border: 0px;
margin-top: -23px
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
margin-bottom:-10px;
}
Did somebody already found a way to fix this?
After the card_mod update the card_mod code seems to have stopped working on my mushroom chips, before the update these were scrollable and there was a scrollbar in a row of 3 but now that doesnāt work anymore.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: binary_sensor.aurora_visibility_visibility_alert
state: "on"
chip:
type: entity
entity: binary_sensor.aurora_visibility_visibility_alert
tap_action:
action: navigate
navigation_path: "#weather"
double_tap_action:
action: none
content_info: state
- type: conditional
conditions:
- condition: state
entity: binary_sensor.aurora_visibility_visibility_alert
state: "on"
chip:
type: entity
entity: sensor.aurora_visibility_visibility
tap_action:
action: navigate
navigation_path: "#weather"
double_tap_action:
action: none
content_info: state
- type: weather
entity: weather.forecast_home
tap_action:
action: navigate
navigation_path: "#weather"
hold_action:
action: more-info
double_tap_action:
action: none
show_conditions: true
show_temperature: true
- type: conditional
conditions:
- condition: state
entity: sun.sun
state: below_horizon
chip:
type: entity
entity: sensor.sun_next_rising
icon: mdi:weather-sunset-up
icon_color: orange
use_entity_picture: false
tap_action:
action: navigate
navigation_path: "#weather"
- type: conditional
conditions:
- condition: state
entity: sun.sun
state: above_horizon
chip:
type: entity
entity: sensor.sun_next_setting
icon: mdi:weather-sunset-down
icon_color: deep-orange
tap_action:
action: navigate
navigation_path: "#weather"
- type: entity
entity: sensor.vaughan_humidity
icon_color: cyan
icon: mdi:water-opacity
tap_action:
action: navigate
navigation_path: "#weather"
- type: conditional
conditions:
- condition: state
entity: sensor.vaughan_chance_of_precipitation
state_not: unknown
chip:
type: entity
entity: sensor.vaughan_chance_of_precipitation
tap_action:
action: navigate
navigation_path: "#weather"
icon: mdi:weather-rainy
icon_color: light-blue
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.vaughan_wind_speed
above: 0
chip:
type: template
entity: sensor.vaughan_wind_speed
icon: mdi:weather-windy
icon_color: grey
content: "{{ states('sensor.vaughan_wind_speed') }}km/h"
tap_action:
action: navigate
navigation_path: "#weather"
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.vaughan_aqhi
above: 4
chip:
type: template
entity: sensor.vaughan_aqhi
icon: mdi:air-filter
icon_color: |-
{% set aqhi = states('sensor.vaughan_aqhi') | int %}
{% if aqhi >= 8 %}
red
{% elif aqhi >= 6 %}
orange
{% elif aqhi > 3 %}
amber
{% else %}
green
{% endif %}
content: |-
{% set aqhi = states('sensor.vaughan_aqhi') | int %}
{% if aqhi >= 8 %}
AQHI Very High
{% elif aqhi >= 6 %}
AQHI High
{% elif aqhi > 3 %}
AQHI Moderate
{% else %}
AQHI Low
{% endif %}
({{ states('sensor.vaughan_aqhi') }})
tap_action:
action: navigate
navigation_path: "#weather"
- type: conditional
conditions:
- condition: state
entity: sun.sun
state: above_horizon
- condition: numeric_state
entity: sensor.vaughan_uv_index
above: 4
chip:
type: template
entity: sensor.vaughan_uv_index
icon: mdi:sun-wireless
tap_action:
action: navigate
navigation_path: "#weather"
icon_color: |-
{% set uv_index = states('sensor.vaughan_uv_index') | int %}
{% if uv_index >= 8 %}
red
{% elif uv_index > 6 %}
orange
{% elif uv_index > 3 %}
amber
{% else %}
green
{% endif %}
content: |-
{% set uv_index = states('sensor.vaughan_uv_index') | int %}
{% if uv_index >= 8 %}
UV Very High
{% elif uv_index > 6 %}
UV High
{% elif uv_index > 3 %}
UV Moderate
{% else %}
UV Low
{% endif %}
({{ states('sensor.vaughan_uv_index') }})
alignment: left
view_layout:
grid-area: 1
card_mod:
style: |
ha-card {
animation: slideInLeft 0.6s ease-out forwards;
animation-iteration-count: 1 !important;
-webkit-animation-iteration-count: 1 !important;
margin: 10px 0px 10px;
--chip-border-width: 0;
--chip-box-shadow: 0;
--chip-background: #9E9E9E20;
}
ha-card > .chip-container {
flex-wrap: nowrap;
overflow-x: auto; /* Enable horizontal scrolling */
scroll-behavior: smooth; /* Smooth scrolling */
}
ha-card > .chip-container::-webkit-scrollbar {
height: 1px; /* Customize the scrollbar height */
}
ha-card > .chip-container::-webkit-scrollbar-thumb {
background-color: var(--google-grey); /* Color of the scrollbar thumb */
border-radius: 10px; /* Round the scrollbar edges */
}
ha-card > .chip-container::-webkit-scrollbar-thumb:hover {
background-color: var(--google-violet); /* Darker on hover */
}
ha-card > .chip-container > * {
flex-shrink: 0;
}
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
add max-width for the scroll
ha-card {
max-width: 350px !important;
}
edit the ha-card, not the chip containerā¦
card_mod:
style: |
ha-card {
animation: slideInLeft 0.6s ease-out forwards;
animation-iteration-count: 1 !important;
-webkit-animation-iteration-count: 1 !important;
margin: 10px 0px 10px;
--chip-border-width: 0;
--chip-box-shadow: 0;
--chip-background: #9E9E9E20;
max-width: 350px !important;
overflow-x: auto;
}
ha-card > .chip-container {
flex-wrap: nowrap;
margin-bottom: 10px;
}
ha-card::-webkit-scrollbar {
height: 3px; /* Customize the scrollbar height */
}
ha-card::-webkit-scrollbar-thumb {
background-color: red; /* Color of the scrollbar thumb */
border-radius: 10px; /* Round the scrollbar edges */
}
ha-card::-webkit-scrollbar-thumb:hover {
background-color: green; /* Darker on hover */
}
1 Like
I tried adding this to the old code and it didnāt fix it unfortunately, worked fine before update.
Thanks for writing the new code but that also didnāt fix it, unfortunately. Iām on card_mod 3.5.0, whats weird is the new update really only broke my mushroom chips card-mod code but everything else seems fine.
the latest is 3.4.4ā¦ u should redownload and clear cacheā¦
and the code should works
1 Like
i figured it out!
card_mod:
style:
hui-card-features:
$:
hui-card-feature:
$:
hui-climate-swing-modes-card-feature:
$:
ha-control-select:
$: |
div#option-vertical {
--control-select-color: red !important
}
Ok I had to redownload and change to 3.4.4 and it works now! Thanks 
Hi folksā¦ there is a line of html in the thermostat card <div role="option" id="option-speed 2" class="option" aria-selected="false" aria-label="speed 2" title="speed 2>" that I donāt know how to access in card mod as there is a space in the id name ā¦ as normally would access it by div#option-speed 2 but the space is screwing it upā¦ any ideas please?
āStopped workingā means that this particular logbook card is not transparent anymore like it used to be. All other cards are still transparent but not logbook card. 
EDIT: ohā¦downgrading to 3.4.4 fixed it.
Other issue that I have is that state-icon has changed from round to square.
- type: state-icon
entity: camera.192_168_86_90
style:
top: 58%
left: 53%
Is there something that I can do with the card-mod?
My code does not seem to affect my heading card:
type: heading
heading: Info
heading_style: title
icon: mdi:information
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.afvalwijzer_next_type
- type: entity
show_state: true
show_icon: false
entity: sensor.afvalwijzer_next_date
card_mod:
style:
.: |
ha-card {
background-color: red;
opacity: 80%;
}
I have also tried:
card_mod:
style: |
ha-card {
background-color: red;
opacity: 80%;
}
This code works fine on other cards. Can you give me a hint?
(deleted post) nevermind that post, it was wrong, sorry
edit
this works fine:
- type: heading
heading: Hoera! š ā”ā” š° š feest! š š° ā”ā” š
heading_style: title
card_mod:
class: class-section-heading-no-color
style: |
ha-card {
background: var(--background-color-off) !important;
}
.content {
color: orange !important;
/*font-size: 60px !important;*/
}
as does this:
- type: heading
heading: Pollen in de lucht
heading_style: title
card_mod:
class: class-section-heading-no-color
style: |
.container {
background: transparent;
--ha-heading-card-title-color: var(--primary-color) !important;
}
check the Dom in inspector for the correct elements
shows that
style: |
ha-card {
background: {{states('sensor.weer_alarm_kleur')}} !important;
--ha-heading-card-title-color: #103773 !important;
}
will work too
1 Like
Thanks @Mariusthvdb for your suggestions.
I got it working. The missing link was the !important flag. It seems some other style settings were taking precendence.
heading: Info
heading_style: title
icon: mdi:information
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.afvalwijzer_next_type
- type: entity
show_state: true
show_icon: false
entity: sensor.afvalwijzer_next_date
card_mod:
style: |
ha-card {
background: var(--card-background-color) !important;
opacity: 80%;
}
ha, that is actually a cool idea!
Iāve added that to my card now. literally the first change since years (well, other than the move to a new collector)
Only need to adapt that icon to reflect the trash type
1 Like
card_mod:
style:
hui-card-features:
$:
hui-card-feature:
$:
hui-climate-fan-modes-card-feature:
$:
ha-control-select:
$:
div:nth-child(2) ha-attribute-icon:
$:
ha-icon:
$:
ha-svg-icon:
$: |
path {
d: path("M12 20V4L9 7") !important;
stroke: #292929 !important;
stroke-width: 3.5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.
div:nth-child(3) ha-attribute-icon:
$:
ha-icon:
$:
ha-svg-icon:
$: |
path {
d: path("M8 8C8 6.97631 8.39052 5.95262 9.17157 5.17157C10.7337 3.60947 13.2663 3.60947 14.8284 5.17157C16.3905 6.73366 16.3905 9.26632 14.8284 10.8284L9.17157 16.4853C8.42143 17.2354 8 18.2528 8 19.3137L8 20L16 20") !important;
stroke: #292929 !important;
stroke-width: 3.5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}}
.: |
.option.selected {color: black! important}
Regarding the sections headings:
I used the following code in the headings card and it works. But how can I apply it globally through my theme - only for the heading cards? I canāt get my head around the code in the theme yamlā¦
type: heading
icon: ""
heading: Schnellzugriff
heading_style: title
grid_options:
columns: full
rows: 1
tap_action:
action: none
card_mod:
class: class-section-heading-no-color
style: |
.container {
background: transparent;
margin-bottom: 20px !important;
--ha-heading-card-title-color: #fafafa !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: bold !important;
--ha-heading-card-title-letter-spacing: -0.05vw !important;
--ha-heading-card-subtitle-color: #efefef !important;
--ha-heading-card-subtitle-font-size: 10px !important;
}