Mngsps
January 27, 2025, 8:16am
8077
Good morning!
In this code:
- type: entity-filter
show_empty: false
entities:
- entity: sensor.washing_machine_verbleibende_zeit
state_filter:
- operator: '>'
value: 0
name: Waschmaschine
icon: mdi:washing-machine
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer {
color: black;
font-weight: bold;
}
state-badge {
color: grey !important;
}
the line
font-weight: bold;
is no more effective since a few weeks. Any idea to makes this working again (bold font)?
All the best, many thanks, and kind regards!
VietNgoc
(Ngoc John)
January 27, 2025, 5:43pm
8078
did you reload themes? The padding should apply for ha-dialog content, wich is include browser popupā¦
platini761
(Platini76)
January 27, 2025, 7:56pm
8079
hello, someone can help me?
Already told where to find answers:
Styling tabbed-card:
main card-mod thread ā 1st post ā link at the bottom titled āfantasticā ā tabbed-card
Styling picture elements:
same path ā picture-elements
yeah I even did a full restart of the system just incase.
Your suggestion was actually already in there essentially, as its the Matt8707 config. not sure why its not working. From memory it was changed around the browser mod 2.0 changes, I fixed the browser mod issues but never the padding
My only assumption is that Iām missing some other piece in terms of an custom addon or something is out of date. I updated all the card mod/browser mod/system up to current and this still didnt fix the issue.
to clarify, is the popup specifically for the āmore infoā cards? or does it apply to generic popups? (I donāt know if they are different)
my main UI button that does the pop is:
- type: custom:button-card
entity: climate.aquariumthermostat
name: Aquareef
tap_action:
!include popup/aquariumthermostat.yaml
EDIT:
Well interestingly I have found the issue, it seems to be a firefox issue specifically. Your change on Chrome works, but not firefox. it shows different paddding.
I assumed this was a cache issue but ctrl+f5 and even clearing browser cache didnt fix it. My only assumption is its something to do with the order things are loaded of FF vs chrome? though probably cant be fixed via HA config anyway so I guess it doesnt matter
To start you need to define the action:
correctly
tap_action:
action:
There is an action
inside the !include? the popup itself works,
popup/aquariumthermostat.yaml
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
...
My bad thought it was supposed to be tap_action: !include popup//aquariumthermostat.yaml
all in one line.
1 Like
Hi,
Just bumping this in case anyoneās got a solution.
Thanks.
why donāt you set it on the entity itself, in stead of in the entities card?
the answer is in the link of the first post of this thread at the bottom,
click that and find the Post on entities card there.
arganto
January 28, 2025, 2:01pm
8087
How is this all related to card-mod?
Why are you asking me? I didnāt pose the question.
arganto
January 28, 2025, 2:49pm
8089
But you answered. I only took the last reply to this ot sub-thread.
Can someone help me? Iām unable to change the custom:bom-weather-card with card_mod. I would like to change e few things, but nothing happens. This is my code:
type: custom:vertical-stack-in-card
cards:
- type: custom:gap-card
height: 40
- type: custom:vertical-stack-in-card
cards:
- type: custom:bom-weather-card
entity_current_conditions: sensor.condition
entity_temperature: sensor.temperature
entity_forecast_high_temp_1: sensor.temperature_1d
entity_forecast_high_temp_2: sensor.temperature_2d
entity_forecast_high_temp_3: sensor.temperature_3d
entity_forecast_high_temp_4: sensor.temperature_4d
entity_forecast_high_temp_5: sensor.temperature_5d
entity_forecast_icon_1: sensor.condition_1d
entity_forecast_icon_2: sensor.condition_2d
entity_forecast_icon_3: sensor.condition_3d
entity_forecast_icon_4: sensor.condition_4d
entity_forecast_icon_5: sensor.condition_5d
entity_forecast_low_temp_1: sensor.minimum_temperature_1d
entity_forecast_low_temp_2: sensor.minimum_temperature_2d
entity_forecast_low_temp_3: sensor.minimum_temperature_3d
entity_forecast_low_temp_4: sensor.minimum_temperature_4d
entity_forecast_low_temp_5: sensor.minimum_temperature_5d
entity_possible_today: sensor.minimum_rain_5d
entity_pop_1: sensor.sunchance_1d
entity_pop_2: sensor.sunchance_2d
entity_pop_3: sensor.sunchance_3d
entity_pop_4: sensor.sunchance_4d
entity_pop_5: sensor.sunchance_5d
entity_pos_1: sensor.rain_1d
entity_pos_2: sensor.rain_2d
entity_pos_3: sensor.rain_3d
entity_pos_4: sensor.rain_4d
entity_pos_5: sensor.rain_5d
entity_apparent_temp: sensor.feel_temperature
entity_sun: sun.sun
temp_font_weight: 600
temp_font_size: 65px
locale: nl
card_mod:
style: |
ha-card {
height: 280px;
box-shadow: 0px 15px 32px 3px rgba(0,0,0,0.45);
background-color: rgba(118,118,118,0.1);
border-color: transparent;
width: 70%;
padding-top: 0px !important;
margin-bottom: 90px !important;
}
ha-card .dayname {
color: #5b79a0 !important; /* Soft pastel blue-gray */
}
ha-card .variations {
display: none;
}
ha-card .forecast {
margin-top: 80px
}
view_layout:
column: 3
card_mod:
style: |
ha-card {
width: 100%;
height: 720px;
border-color: transparent;
border: 30px;
display: flex;
align-items: start;
justify-content: center;
background-color: rgba(20, 20, 20, 1);
}
vertical-stack-in-card {
background: transparent;
border-radius: 10px !important;
border: transparent;
height: 400px;
width: 400px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 15px 32px 3px rgba(0, 0, 0, 0.45) !important;
}
could you minimize to the smallest non-working section? this is a huge card config you cant expect us to check completely.
be precise in what is not working for you
btw, why the nested custom stack cards? the only make things complex, where you could that with all core crds
Hi, I need the nested vertical cards to show a nice tablet view with 3 colums of information. Within these columns I want to vertical group things for a nice overview.
The part that isnāt working for me is customizing the bom-weather-card at all.
I thought the best way was to show it including these vertical-stack cards, but below you can see a more reduced version:
- type: custom:bom-weather-card
card_mod:
style: |
ha-card {
height: 280px;
box-shadow: 0px 15px 32px 3px rgba(0,0,0,0.45);
background-color: rgba(118,118,118,0.1);
border-color: transparent;
width: 70%;
padding-top: 0px !important;
margin-bottom: 90px !important;
}
ha-card .dayname {
color: #5b79a0 !important; /* Soft pastel blue-gray */
}
ha-card .variations {
display: none;
}
ha-card .forecast {
margin-top: 80px
}
and this is new, or has it always been working and did something change?
which card_mod version, and ha version?
VietNgoc
(Ngoc John)
January 28, 2025, 10:13pm
8096
If you want to applying css styles for element, for a single popup dialog, then use card_mod in service call data. like thisā¦
style use for setting css var properties, like --ha-card-background-color etcā¦
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Entities
style: >
--popup-min-width: 800px;
card_mod:
style:
.: |
:host([card]) .content .container {
padding: 0px !important;
}
content:
type: entities
entities:
- input_number.cover_position
some card with tap action trigger.
- type: custom:button-card
entity: input_number.cover_position
template: rect_button
tap_action: !include ./popup/entities-popup.yaml