I was just about to edit my post with my first tryā¦ here it is, but itās not aligning the text to the right. Iām trying to move the āUpstairs Thermostatā text so it aligns to the rightā¦ just to the left of the carrot.
- type: custom:collapsable-cards
title: Upstairs Thermostat
buttonStyle: 'font-size: 14px;'
card_mod:
style: |
ha-card div { align-items:right; }
This is a real noob question, and I know I must be missing something really simple, but I am failing to get a background image to a card when using a local file.
Iāve tried using a url to an image on the web (eg. http://wwwā¦), and that works fine. So it must be something about my local path Iām getting wrong. Am running HA on a Raspberry Pi.
Here is my code, and also a screenshot of the file location
Any help would be greatā¦ am pulling my hair out on something I know must be staring me in the face!
card_mod:
style: |
ha-card {
background-repeat: no-repeat;
background-image: url('/config/images/calendar.png');
background-size: 100% 100%;
}
Wrong.
Place your āimagesā folder into āwwwā folder, then use ā/local/images/ā¦ā
Ofcourse! Thank you, Iāve been trying all sorts of things, and completely forgot about the www folder!
Thanks again, all working.
Hoping someone can point me in the right direction on this one, everything I try so far fails.
I want to have some buttons that show data from two sensors. Currently the only way I can see to do it is have two buttons in a vertical stack, and then somehow remove the border between them, making it visually look like one button.
Anyone got any thoughts on how this could be achieved? Basically, remove the gap between two cards in a vertical stack.
My current code:
square: true
columns: 4
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:water
entity: sensor.water_softener_salt_level
show_name: false
show_state: true
- type: custom:button-card
icon: mdi:water
entity: sensor.water_softener_water_used_today
show_name: false
show_state: true
show_icon: false
- type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:car-sports
entity: sensor.model_y_battery_sensor
show_name: false
show_state: true
- type: custom:button-card
entity: sensor.model_y_range_sensor
show_name: false
show_state: true
show_icon: false
- type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:car-estate
entity: sensor.model_y_battery_sensor
name: xx %
show_name: true
show_state: false
- type: custom:button-card
entity: sensor.model_y_range_sensor
name: xxx mi
show_name: true
show_state: false
show_icon: false
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.speedtest_download
show_name: false
show_state: true
- type: custom:button-card
entity: sensor.speedtest_upload
show_name: false
show_state: true
show_icon: false
Note: The third column is currently a holder for a future vehicle, hence the code as it is.
you could probably use a custom:button-card with a grid, to show those 2 values vertically on 1 button. Did you check the grid options in advanced styling?
it would make it a button-card question though 
so check that thread too
Have you looked at custom:stack-in-card? Should join it all together so there isnāt any space between buttons. You could have 4 of them where you join the top and bottom together in each one, or you can make one big seamless stack with no spaces in between.
Thanks both for the pointers! Will check out both options.
Iām trying to fit in my home assistant kiosk on a Hyperpixel 4.0 square screen so i need to lower the height of an entity row avoiding a vertical scrollbar. For some reason i canāt get this to work, what iām doing wrong?
My code:
- type: entities
entities:
- entity: cover.rolluiken_slaapkamer_3
name: Room 3
- entity: cover.rolluiken_slaapkamer_2
name: Room 2
- entity: cover.rolluiken_slaapkamer_1
name: Room 1
- entity: cover.rolluiken_slaapkamer_0
name: Room 0
- entity: cover.sunscreen_1
name: Sunscreen 1
- entity: cover.sunscreen_2
name: Sunscreen 2
- entity: cover.sunscreen_3
name: Sunscreen 3
card_mod:
style: |
hui-generic-entity-row {
height: 40px;
}another option:
- type: custom:mod-card
card_mod:
style: |
:host {
--grid-card-gap: 0px;
}
card:
type: grid
simply reduce the gap to 0
or set that to the row in button-card directly:
- type: custom:button-card
styles:
grid:
- row-gap: 0px
1st post ā link at the bottom
I would like to alter the look of the custom:weather-card fron Bram Kragten. I am an absolute beginner on this, and just start playing with the DOM Inspector after reading about this. I found the items i would like to change.
This is the card i want to change and below the card I changed via DOM inspector:
The changes are obvious in the header part of the card. This is the default code of the card:
type: custom:weather-card
entity: weather.home
number_of_forecasts: '5'
name: Het weer
I made an overview of the items i would like to change:
The items are .icon_bigger, .title, .temp and .tempc
But i doānt know how i put these with styles: in my card config.
I have the feeling i am almost there to understand how this worksā¦ But can anyone please tell me how i go further with this?
I found this in the Inspector:
You are doing it wrong!
card-mod.js?hacstag=190927524315:5 mod-card should NEVER be used with a card that already has a ha-card element, such as weather-card
OK, Does anyone knows how to change this Card? Perhaps @bramkragten the maker of this card?
Probably you tried to use mod-card with this weather card - which is wrong.
why dont you simply edit the card itself? You seem to know exactly what you want, go ahead and edit the resource file itself.
Hi @Mariusthvdb Marius,
You are right! I browsed the file weather-card.js and found the items to change. Success!
It was more the fear of the unknown; I have never done this before. AND I was hoping I could change this with the mod-card from Thomas Loven.
But it was actually quite simple. Looking back I feel myself a bit foolishā¦ 
Thanks for putting me in the direction.
Why do you use :host in this and other examples?
Most probably these are very old examplesā¦
In some cases I also used kind of āha-card some_elementā.
In most cases ā:hostā & āha-cardā will not harm - but they should be omitted, actually.
Ah o.k. Thought there is some magic š§āāļø behind. ha-card was/is fine. But :host is no html element/dom-path-selector, so most probably it was never necessary, but worked with it as well by chance.
Probably ā:hostā SHOULD be used only when it is the ONLY selector, like:
- entity: xxx
card_mod:
style: |
:host { ... }
BTW, ā:hostā as a selector may be seen in Code Inspector:
just to clarify what it represents.
Also, In my first posts I used to use this construction:
element:
$:
element:
$: |
element {...}
which will work but not optimal - see this.
Later I posted all styles with an optimized code (also, some old post were revised too).