Padding is working
What are you trying to achieve? This card is pretty heavily sectioned off internally .
These are the different sections within the card and they are also grouped in larger sections as well.
What you are showing is not the weather-forecast card (from HA), but the custom:clock-weather-card (HACS).
The weather-forecast card looks like this (here in forecast-only mode, and in German):
My bad, Alto started with clock weather card and I didn’t notice he changed to the weather-forecast card. Let me take a look for you…
1 Like
Thanks, I’ve tried but was unsuccessful. Do I just extract card-mod.js from the source code
and overwrite current file/restart or do I need to uninstall first, manually create folder under www/community and “add ressource” ?
Thx
Padding just needed !important.
Awesome….that works…thanks a ton!
1 Like
Thanks for the heads up the different weather card. I completely missed that after working hard on the clock weather card just prior to that post. 
Okay so for my bus time table cards I figured out that the element that I can set the height for to fix my issue is ha-card inside hui-entities-card, but I’m having trouble targeting it.
The DOM looks like this:
and the style I applied is below, but it doesn’t work.
card_mod:
style:
hui-entities-card:
$: |
ha-card {
color: red !important;
height: 100px !important;
}
There might be a problem or this can be related to the mssing context (auto-entity card)*, but in general it is now 3 times in your last 3 topics, that you missed that the path is starting with the ha-card-element. Not before/above. Compare to always the same solutions to your questions above.
*Ofc only why you put your card_mod at the item/card-level (what cannot be seen in your screenshot).
what I always do is have a folder ‘resources’ in my www folder (/local/), and add manually installed resources there.
Do not overwrite the ‘official’ HACS community files.
then add the link to that resource so I can swap quickly, simply by commenting either line:
# https://github.com/custom-cards/decluttering-card
# - url: /local/resources/decluttering-card/decluttering-card.js?v=0.6.3+fix
- url: /hacsfiles/decluttering-card/decluttering-card.js
type: module
ofc this is YAML mode, if you are using the GUI to load you resources, I suppose you need to take out the HACS, and add the manual. Then later on reverse the process if you want to go back to the HACS release cycle
then again, card_mod is a special card, and loaded via frontend, but there too you can keep both folders:
frontend:
extra_module_url:
# - /hacsfiles/lovelace-card-mod/card-mod.js #3.4.1
- /local/resources/lovelace-card-mod/card-mod.js
1 Like
Ah sorry, I was working on this a bit too early in the morning.
I see what you mean about the ha-card styling to be applied directly, but how do I do that when the full card mod actually is this:
card_mod:
style:
hui-entities-card:
$: |
ha-card {
color: red !important;
height: 100px !important;
}
hui-sensor-entity-row:
$: |
.text-content {
width: 60px;
}
.: |
.icon {
padding-right: 0px;
}
.card-header {
padding-bottom: 15px;
}
#states > * {
height: 20px;
width: 50px;
}
.card-content {
width: 85%;
height: 50px !important;
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 0 0 100%;
}
ha-card.type-entities div#states.card-content div {
margin: 3px 0px;
}
Thanks, and I simply use the card-mod.js file from the source code right?
In such cases, you have three options 
a. Scroll up in this thread and find the same quesion over and over again with corresponsing answers.
b. Scroll through this thread and have a look at examples from others ans see how they did it in the same situation.
c. Move to first post, click link to examples from Ildar, go through his categorized topics and directly find a topic called “Combining “$:” styles and “not $:” styles”.
Right yes only that
1 Like
Hi, I am trying to add a custom padding on the hui-card-preview, but nothing worked for me.
Did anyone have an Idea?
This is one of my countless style attempts
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 58% 22% 20%
grid-template-areas: |
"l m r"
cards:
- type: custom:mushroom-light-card
entity: light.wohnzimmer_zha_group_0x0002
name: Wohnzimmer
icon: hue:room-living
tap_action:
action: navigate
navigation_path: wohnzimmer
double_tap_action:
action: toggle
view_layout:
grid-area: l
- type: custom:mushroom-template-card
primary: Dach Rollo
secondary: >-
{% if is_state('cover.velux_external_cover_roller_shutter', 'closed')%}
Öffnen {% else %} Schließen {% endif %}
icon: ''
entity: cover.velux_external_cover_roller_shutter
tap_action:
action: call-service
service: cover.toggle
target:
entity_id: cover.velux_external_cover_roller_shutter
hold_action:
action: none
double_tap_action:
action: more-info
view_layout:
grid-area: m
card_mod:
style: |
{% if is_state('input_select.info_fenster_sp', 'Card')%}
ha-card{
{% if is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_8', 'on') or is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_9', 'on') or is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_7', 'on')%}
border: solid 2px rgba(43,104,217,1);
padding: 9px !important;
{% endif %}
{% elif is_state('input_select.info_fenster_sp', 'Icon')%}
ha-state-icon{
{% if is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_8', 'on') or is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_9', 'on') or is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_7', 'on')%}
border: solid 2px rgba(43,104,217,1);
border-radius: 40px;
padding: 9px !important;
{% endif %}
}
{% endif %}
- type: custom:mushroom-template-card
primary: '{{states(''sensor.lumi_lumi_weather_temperature_2'')}}℃'
secondary: '{{states(''sensor.lumi_lumi_weather_humidity_2'')}}%'
icon: ''
layout: vertical
view_layout:
grid-area: r
card_mod:
style:
.:
hui-card-preview: |
.content hui-card-preview{
padding: 0px !important;
}
I know there’s a way to center the text inside of the card when there is no toggle but is there a way to center everything or make everything even when there is a toggle? So how would I either get the top two entities to shift to the left or the bottom two to shift to the right so they are in an even straight row?
Are you able to post your code? I think your input buttons are different sizes and that is causing the displacement. 2 characters for ºF vs only 1 for %
I actually tried that. It’s actually being caused by the length of the name on the left. You can see in the screenshot below that as I change the length of the name the position of it changes. I’m trying to find a way to justify just the middle to the right or something similar.
Can you share your code or an example?
Yeah. Here it is.
- type: entities
entities:
- type: section
label: Mode Settings
card_mod:
style: |
.label {
color: rgb(187, 187, 187) !important;
font-size: 20px !important;
}
.divider {
background-color: rgb(187, 187, 187) !important;
height: .5px !important;
}
- type: custom:gap-card
height: 5
- type: custom:numberbox-card
icon: false
entity: >-
number.[[dec_var_tent_and_port_entity_001]]_temperature_high_trigger
name: Temperature HighHigh Trigger
high: 194
toggle_entity: >-
switch.[[dec_var_tent_and_port_entity_001]]_temperature_high_trigger_enabled
card_mod:
style: |
.body .cur-num {
color: tomato;
}
- type: custom:numberbox-card
icon: false
entity: >-
number.[[dec_var_tent_and_port_entity_001]]_temperature_low_trigger
name: Temperature Low Trigger
low: 32
toggle_entity: >-
switch.[[dec_var_tent_and_port_entity_001]]_temperature_low_trigger_enabled
card_mod:
style: |
.body .cur-num {
color: lightblue;
}
- type: custom:numberbox-card
icon: false
unit: %
entity: >-
number.[[dec_var_tent_and_port_entity_001]]_humidity_high_trigger
name: Humidity High Trigger
toggle_entity: >-
switch.[[dec_var_tent_and_port_entity_001]]_humidity_high_trigger_enabled
card_mod:
style: |
.body .cur-num {
color: tomato;
}
- type: custom:numberbox-card
icon: false
unit: %
entity: >-
number.[[dec_var_tent_and_port_entity_001]]_humidity_low_trigger
name: Humidity Trigger
toggle_entity: >-
switch.[[dec_var_tent_and_port_entity_001]]_humidity_low_trigger_enabled
card_mod:
style: |
.body .cur-num {
color: lightblue;
}
.body .cur-unit {
color: lightgrey;
opacity: 1;
}
show_header_toggle: false