Status is located below the icon by default. If not - probably you played with styles.
No easy solution found."line-height" property = height of the "box":
type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
- entity: sun.sun
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style: |
.box .title {
line-height: 52px;
}
Nobody is after birth, people have to study it - even if it is required for HA onlyā¦
P.S. I am not a āCSS expertā. I think that our possibilities to customize elements on cards are limited - not only by our skills, by internal structure also.
tfmeier
April 27, 2021, 1:39pm
1805
Re the status (i.e. item 2 in my last post) the issue seems to be that the icons and the state (e.g. temp icon and state at 17.2) donāt seem to be connected. Increasing the size of the icon doesnāt move the state downwards but instead it starts to overlap the state. So Iām restricted in the size of the icon and size of text.
Anyway thanks for the input, @Ildar_Gabdullin . Was able to get it closer to what I wanted
Hello together,
But all of them have the problem, that for a few moment (1-2 sec) we see the design without the card-mod change and then it applies.
I tried it with Firefox, Opera, Edge all 3 Browsers have the same problem.
Kind of this:
type: picture-glance
title: title
image: /local/images/blue.jpg
entities:
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
show_state: true
- entity: sun.sun
style: |
ha-card .box .row .wrapper ha-icon-button {
--mdc-icon-button-size: 80px !important;
}
ha-card {
--mdc-icon-size: 80px;
}
ha-card .box {
height: 100px;
}
ha-card .box .title {
line-height: 100px;
}
ha-card .box .row .wrapper {
align-items: center !important;
}
ha-card .box .row div {
width: 100px !important;
}
P.S. Updated this post with new cases:
title - vertically aligned;
states for resized icons.
Ok so I added a conditional card yesterday but when it draws it it has padding and also a different background like here:
here is my code:
- type: entities
title: BOM Forecast
show_header_toggle: false
entities:
- sensor.bom_forecast_0
- sensor.bom_forecast_1
- sensor.bom_forecast_2
- sensor.bom_forecast_3
- sensor.bom_forecast_4
- sensor.bom_forecast_5
- type: 'custom:hui-element'
card_type: conditional
conditions:
- entity: sensor.bom_forecast_6
state_not: "unknownĀ°/unknownĀ°/unknown%"
card:
type: entities
entities:
- entity: sensor.bom_forecast_6
card_mod:
style: |
:host {
padding: 0;
background: none;
}
How to fix?
KTibow
April 28, 2021, 1:57am
1809
What theme are you using? Have you tested in the browser developer tools whether the styling is there at all?
The Google dark one from HACS. The element doesnāt have any styling show in chrome dev-tools.
- type: 'custom:hui-element'
card_type: conditional
conditions:
- entity: sensor.bom_forecast_6
state_not: "unknownĀ°/unknownĀ°/unknown%"
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
margin: -16px -16px -16px -16px;
}
entities:
- entity: sensor.bom_forecast_6
KTibow
April 28, 2021, 2:05am
1811
So do you no longer need an answer?
No I think Iām good unless there is an issue with the marginsā¦ I see some people post code with some of those as 0 and some -16 but it seems to look ok nowā¦
tfmeier
April 28, 2021, 12:11pm
1813
Thanks for your ongoing support here. Iām done with the exception of coloring the buttons on the right based on state but I have seen some examples from you on this and Iām sure I can get that going
Looks awesome!
1 Like
ParDonny
May 4, 2021, 7:26pm
1814
Hi Thomas, or anyone else able to help. Thanks for the great mod. Howeverm, pulling my hair out here hehe. All cards on the table, still a noob
- type: markdown
content: >
<table width="100%">
<tbody>
<tr>
<td> <img src="/local/header.jpg"></td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td width="40%">
<h2>Huize Beeld</h2>
<hr>
{{states('sensor.dashboard_greeting') }}, {{ user }}</br>
{{states('sensor.dashboard_weervoorspelling') }}</br>
Het is buiten op dit moment {{ state_attr('weather.beeldhouwersdijkje', 'temperature') }}Ā°C <br></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><h3>Wie is thuis?</h3></td>
</tr>
<tr>
<td align="center">
<img src="{{states('sensor.dashboard_occupancy')}}" width="280px">
</td>
</tr>
</tbody>
</table>
style:
.: |
ha-card {
color: black;
background-color: white;
}
ha-markdown:
$: |
h1 {
text-align: center;
font-size: 6em;
margin-bottom:12px;
margin-top: 12px;
}
hr {
border: 10px solid red;
}
Try this:
ha-markdown:
$: |
h1 {
text-align: center;
font-size: 6em;
margin-bottom:12px;
margin-top: 12px;
}
hr {
border: 10px solid red;
}
.: |
ha-card {
color: black;
background-color: white;
}
ParDonny
May 5, 2021, 4:30pm
1816
Yes! That works. Thank you very much!
Philou
May 5, 2021, 4:32pm
1817
Hi,
Is there a way to apply styles on a input select? For now it isnāt working, here my code:
cards:
- entity: media_player.spotify_phil_ou
type: media-control
card_mod:
style: |
ha-card {
color: white;
font-family: "Comfortaa";
}
- type: entities
entities:
- entity: input_select.chromecast_audio
- entity: script.spotify_start
card_mod:
style: |
:host {
color: white;
font-family: "Comfortaa";
}
show_header_toggle: false
type: vertical-stack
And the current result:
All comes with the right font but not for the input select, any help please?
There is a special post here dedicated to input_select, try to find it.
viciovb
May 6, 2021, 11:38am
1819
Hello everyone,
Iām trying to figure it out why my code doesnāt work. I just want to change the Title size
type: horizontal-stack
title: Motion sensor Occupancy
card_mod:
style: |
ha-card .card-header {
font-size: 35px;
color: red;
}
cards:
- type: entity
entity: binary_sensor.motion_sensor_outside_ias_zone
name: Outside
- type: entity
entity: binary_sensor.motion_sensor_kitchen_occupancy
icon: 'hass:walk'
name: Kitchen
- type: entity
entity: binary_sensor.motion_sensor_stairs_ias_zone
name: Stairs
- type: entity
entity: binary_sensor.motion_sensor_office_ias_zone
name: Office
- type: entity
entity: binary_sensor.motion_sensor_bedroom_occupancy
icon: 'hass:walk'
name: Bedroom
- type: entity
entity: binary_sensor.door_sensor_corridor_on_off
icon: 'mdi:door'
name: Corridor
Try using search in the topic.
Styling vertical-stack (horizontal-) card.
Styling a title:
[image]
Method #1:
type: 'custom:mod-card'
style: |
ha-card {
--ha-card-header-color: red;
--ha-card-header-font-size: 10px;
}
card:
type: vertical-stack
title: Changed font for title
cards:
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- type: entity
entity: sun.sun
Method #2:
type: 'custom:mod-card'
style:
hui-vertical-stack-card$: |
.card-header {
ā¦
KTibow
May 8, 2021, 5:08am
1821
You should set up a wiki page on the GitHub, a dedicated page with headers and a table of contents is better than a giant list of random text.
There is a link to the structured list of tutorials on the 1st post.
Thank you very much for all your examples, for me they are very valuable
Iām trying to style the markdown card itself and trying to style the elements in the card. Canāt seem to get this working. Any tips on what Iām doing wrong?