No, RotateX gives glitches in my tests on iOS & Mac.
Iād like to affect the alignment (e.g. center, justify, start/left, end/right) of the Mushroom Template Cards in the bottom horizontal mode stack-in-card within this stack-in-card.
Iāve tried a few things, but here is the one Iām currently trying:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
align-items: justify;
}
Any suggestions?
Iām trying to change the font size of the value in a simple entity card, but I just canāt get it to work.
Setting the font-size only changes the padding, the text stays the same.
type: entity
entity: sensor.cpu_load
card_mod:
style: |
ha-card {
color: red;
font-size: 1000px;
}
Tried it this way as well, but nothing.
type: entity
entity: sensor.cpu_load
card_mod:
style: |
ha-card {
color: red;
}
.value {
color: teal;
font-size: 1000px;
}
What am I missing here?
You are missing 1st post ā link at the bottom
1 Like
Not sure if that was also meant for me, but I have tried to place it in the template card as suggested here
- type: custom:stack-in-card
mode: horizontal
cards:
# Lights
- type: custom:mushroom-template-card
entity: light.chair
card_mod:
style: |
ha-card {
align-items: justify;
}
The alignment of the bottom row remains as pictured above.
I would like to grow slider of input_number-entity in entities card a bit.
Found the right object but no setting of width oder max-width have any effect.
- entity: input_number.climater_temp
name: Temperatur
card_mod:
style:
hui-generic-entity-row: |
.flex ha-slider {
max-width: unset !important;
}
Can someone help?
1st post ā link at the bottom!!!
I know your posts and use them every time i do something with card-mod. Obviously I missed that part with sliders width. But know I found it.
Any way to grow it without setting width in px?
I use more devices with different resolutions, so percentage would be fine. But it was already set to width: 100% before using card-mod.
You are welcome, I added an example with width for you yesterday)
You may specify different cases fir different resolutions (google for mediaquery) - or probably by using a calc function dependingly on a viewportās sizes. As I heard it is always a headache for web-masters.
Thanks for adding. Iām happy that I didnāt miss that.
Setting width in px works, but does not match my case because of different resolutions. Mediaquery is a bit too much - so I will ask another thing.
ha-slider is at 100% and show with aprox. 100px (for example). The name div beside the slider ist far wider even using a short name. It is about 300px. Why is the slider div so small or the name div so wide. I canāt figure out the properties for that.
Did you ever find a solution to this? Iām having the same problem and canāt seem to track down whatās causing it:
Wondering if someone could assist me with traversing through these shadow roots so that I can style the svg? Iāve tried a few things but not having any luck, the below is what I have so far, which is working, just this one last element is being a little tricky.
style: |
::-webkit-scrollbar {
display: none;
}
ha-card{
height:663px !important;
border-radius: 10px;
font-weight: 300;
}
ha-card .event-leftCurrentDay {
color: #A8C7FA;
}
ha-card .daywrap {
border-top-color: #737373;
}
ha-card .cal-eventContainer {
font-size: 18px;
}
ha-card .eventBar .event-circle{
margin-left: -20px;
color: white !important;
}
ha-card .eventBar .event{
margin: -12px -6px 6px;
}
I am trying to center a popup card on the companion app for iOS horizontally and vertically, It seems like the card popup card sits on the bottom of the screen by default,
type: custom:mushroom-entity-card
entity: switch.group_air
secondary_info: none
name: Air
icon_color: green
layout: vertical
primary_info: name
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Air
card:
type: entities
entities:
- switch.fan
- switch.purifier
style: |
ha-dialog {
--mdc-dialog-min-width: 300px !important;
--mdc-dialog-max-width: 300px !important;
--mdc-dialog-min-height: 200px !important;
--mdc-dialog-max-height: 200px !important;
}
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 10vw;
right: 10vw;
height: 50vh;
margin-top: -25vh;
}
.content {
width: auto !important;
height: auto !important
}
target: {}
Hello. I have been using this for my kids lamps in their rooms so I know if they are not going to sleep at night:
type: grid
cards:
- type: entity
entity: sensor.kid1_lamp_power
state_color: true
name: Kid1
card_mod:
style: |
ha-card {
background-color: {{ '#00' if is_state('sensor.kid1_lamp_power', '0.0') else '#D0342C' }};
}
}
- type: entity
entity: sensor.kid2_lamp_power
state_color: true
name: Kid2
card_mod:
style: |
ha-card {
background-color: {{ '#00' if is_state('sensor.kid2_lamp_power', '0.0') else '#D0342C' }};
}
}
square: true
columns: 2
title: Girl's Lamp Status
Is there a way I can change the background image rather than color? I have tried a few things and nothing is working for me.
The current setup shows the default color is the lamp power registers at 0.0 and turns red if anything else.
I would love to have a photo of a light turn on when they turn it on, just becasue it would look cool haha.
I tried variations of this:
background-image: {{ url('/local/icons/girls/lamp_off.jpg') if is_state('sensor.khaleesis_lamp_power', '0.0') else url('/local/icons/girls/lamp_on.jpg') }};
I may have missed it, but donāt know how to change the āinactiveā part of a regular Gauge card to something other than white:
type: gauge
title: Basement
entity: sensor.basement_baseboards_temperature
name: Basement
min: 55
max: 85
background_color: rgba(7, 103, 215, 0.4)
segments:
- from: 55
color: rgb(50,100,255)
- from: 60
color: rgb(50,200,200)
- from: 66
color: rgb(0,200,0)
- from: 73
color: rgb(255,100,0)
- from: 75
color: rgb(255,0,0)
style: |
ha-card {
--primary-text-color: #FFFFFF;
--secondary-text-color: #FFFFFF;
background: rgba(7, 103, 215, 0.24);
}
Everything else works fine. Any ideas?
Details may be read here.
- In Storage mode:
Open āRaw configuration editorā, place this on the top:
decluttering_templates:
decl_XXXXX:
card:
....
- In yaml mode:
Declare a folder with templates in a dashboard file:
decluttering_templates: !include_dir_merge_named templates-decluttering/
views:
- !include page_1.yaml
- !include page_2.yaml
Place your templates in separate files (or all templates in one file, or several templates in one file, other templates in own files) in that ātemplates-declutteringā folder (paths must be specified properly):
An example of some yaml file for a decluttering template (contains 3 templates in this example):
decl_template_1:
default:
...
card:
...
decl_template_2:
default:
...
card:
...
decl_template_3:
default:
...
card:
...
Whenever a decluttering template is edited - reload it by editing the dashboard file (edit/undo/save) + refreshing the page.
Yeah the images work, if I set a static image it shows, so its not an issue with that.
The easiest way is to set the variable in host. With that you donāt have to go into the shadow roots
type: gauge
entity: sensor.thermometer_ausen_maximum
card_mod:
style: |
:host { --primary-background-color: red; }
1 Like