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 
Hey all,
Novice trying to learn and need a little help. I am working with a Custom weather card and trying to use card_mod change the color a little tiny line when I inspect with browser debug its called div.bar-block-left and right. I donāt know how to target this to add an element of border-color: black. I am adding screenshot as well.
Thanks
Wayne B.
It is simply border-color: black; I added border:none to show that you can remove the border altogether.
type: custom:hourly-weather
entity: weather.forecast_home
card_mod:
style: |
ha-card {
background: none!important;
border-color: black;
border: none;
}
Itās general practice to post your code using the community standards. See #11
Thanks for the response.
So what I am actually trying to change the color of is a little tiny line above the time. See new screenshot. When I put the actual card in my dashboard the default color of grey makes it almost invisible. I only said the border-color because I used by inspect mode in my browser and navigated to the div.bar-block-left and added an element of border-color to see what I needed to add.
Wayne.
Missed that. Let me take another look. Can you post your code?
divider-color: is what you need to change the color of those slashes.
type: custom:hourly-weather
entity: weather.forecast_home
card_mod:
style: |
ha-card {
background: none!important;
border-color: black;
border: none;
--divider-color: red;
}
1 Like
That is exactly what I needed! Thanks I did not know where to find that setting at.
I just looked directly in the JS
Thanks this is my mobile dashboard project. Just though I would post SS of it. Its always a work in progress. Thanks again for the helpā¦
Uas
2 Likes
It coming along great! Colors flow well. I am happy I was able to assist.
My boards are always a work in progress too. I prefer the darker look. Here is one of my latest creations.
2 Likes
I like the textures. I never though of adding textures.
Just wanted to bump this if anyone knew if this was possible
@image969 Assuming youāre talking about displaying a card via browser_mod.popupā¦ thereās no special card-mod configuration. The easiest way Iāve found is to create the card you want to āpop upā in a test dashboard via normal means. Get your card-mod setup and whatever else exactly how you want it, and then copy the yaml into your browser_mod.popup service call under your firedom event. If you copy/paste correctly, the popup will look exactly like the card in your test dashboard.
Hi, thanks for the reply. I have the card working fine in the pop-up. Itās just a drop-down menu when you click on it. The pop-up dimensions arenāt big enough so it crops it. I want to know if the overflow in card mod can be used so it extends past the pop-up.
Canāt help much if you donāt post your current code, but you can definitely increase the height of the popup card which could solve your issue.
Hereās a screenshot of the code I was referring to. I would rather not change the height of the pop-up card, because then there would be a ton of blank space showing when Iām not using the drop-down menu. I have no problem with this overflow line anywhere else it just doesnāt seem to work Inside the pop-up card
I donāt think you can do that. The popup card has a defined size. You can change the size via card-mod etc, but itās a defined size nonetheless. You canāt declare anything outside the size of the popup card as there just isnāt any space there. Itās possible to add scrollbars, but thatās going to let you scroll the whole card. I suppose itās possible to add scrollbars to only the dropdown, but you would have to experiment with card-mod and it will depend on the specific card your trying to use and how itās constructed. I could very easily be wrong, but Iād be surprised if you can accomplish this with card-mod alone, at least as long as youāre talking about it being a popup card. In any case, if you donāt post your code properly formatted, then no one can help, as no one can copy and paste your code from a screenshot to try things and give you direction.