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 
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