When I get out of work, I’ll see which element you need to target to change the title color. Could you use the HTML font tag for changing the color?
Could you use the markdown card with the font HTML tag for that, instead of using the header?
You mean use the markdown card, and get rid of the title of the card?
Can you give an example? for the html font tag?
type: markdown
content: <font color="red">Hi</font>
Put it as the first card in the stack, try googling “HTML font tag” to learn more.
thanks for your suggestion @KTibow. really appreciate it.
However, I dont use themes file. just using the system dark theme. any idea how can I do it in my scenario? cheers.
Something like:
style: |
ha-card {
--grid-card-gap: 500px;
}
this doesn’t seem to be doing anything. any further ideas? thanks in advance.
Can you create a temporary theme, which is a copy of your theme, but with grid-card-gap set? Then set just that card to use that theme, using the theme config var.
Thx its working , size and stuff too
Only thing is that the color isnt exactly the same
I used “var(–primary-color)” but its slightly different, any idea? that var primary color is rgb(26, 115, 232)
i tried the rgb but it didnt work
i read this : Color of text in either hexadecimal (ie: #RRGGBB format) or named color (ie: black, red, white)
Edit: got it ! thx
Hi,
I’ve posted this in the layout card thread, but since I’m looking to modify some CSS, perhaps someone here might have a suggestion.
I’m currently trying to use the layout card to create a sidebar on my frontend. I’ve however run into a snag. There are margins between the cards that I would like to get rid of. Best explained with a screenshot where I’ve already identified the culprit thanks to the developer tools of my browser:
Unticking that CSS property does get rid of the margins (in orange in the screenshot), however I’ve not been able to figure out what code would need to go where in order to remove those margins.
My basic config (reduced it so it’s readable):
title: Dev
views:
- title: Dev
icon: 'mdi:github'
panel: true
badges: []
path: dev
cards:
- type: 'custom:layout-card'
layout: grid
gridrows: auto
gridcols: 23% 77%
gridgap: 0px
gridplace: stretch
cards:
- !include frontend/sidebar_dev.yaml
- type: 'custom:config-template-card'
gridrow: 1 / 1
gridcol: 2 / 2
entities:
- ...
card:
type: 'custom:swipe-card'
parameters:
effect: 'cube'
cubeEffect:
shadow: false
slideShadows: false
cards:
- !include frontend/dev_rez.yaml
- !include frontend/dev_1er.yaml
I’ve also tried many different combinations combined with a mod-card in which I then configure the above layout-card, but no dice.
As far as my understanding of CSS goes, the correct properties should be inserted somewhere here and not within the included yaml files. Should I be wrong, I’ll gladly post their content as well.
Thanks for any help!
Use mod-card to wrap the layout-card, then use shadow-root styling to get inside of mod-card’s wrapper and apply the styling.
Thanks for the tip. I’ve tried many combinations, I can’t seem to modify that CSS property. Don’t know if I’m using shadow-root styling wrong or if it’s something else. Here’s an excerpt of the various properties I applied to my mod-card:
style: |
"div#staging.grid":
$: |
.cards > * {
margin-top: 0px !important;
}
.grid > * {
margin-top: 0px !important;
}
.cards > *, .grid > * {
margin-top: 0px !important;
}
"hui-picture-elements-card":
$: |
.cards > * {
margin: 0px !important;
}
.grid > * {
margin: 0px !important;
}
"config-template-card":
$: |
.cards > *, .grid > * {
margin-top: 0px !important;
}
You need to go into the shadow-root of hui-layout-card first, then everything else. BTW new syntax:
style: |
hui-layout-card$div#staging.grid$: |
yourstuff
Thanks for the updated syntax. Since I don’t have a hui-layout-card but a simple layout-car, I’m assuming the latter would be the one to use, correct?
However, I can’t seem to get it to work. My browser dev tools show me a hui-picture-elements-card and a config-template-card which both have the attributes .cards > *, .grid >* set to some margin (the one I want to override).
I’ve tried .cards, .cards >, .cards > *, same with grid, the combination of both, hui-picture-elements.cards > * and all combinations thereof and none seem to get rid of this margin 
Nope it is hui-layout-card. Can you provide a full reproducible config?
Sure.
ui-lovelace.yaml:
title: Dev
views:
- title: Dev
icon: 'mdi:github'
panel: true
badges: []
path: dev
cards:
- type: 'custom:mod-card'
style: |
hui-layout-card$div#staging.grid$: |
.cards > *, .grid > * {
margin-top: 0px !important;
}
card:
type: 'custom:layout-card'
layout: grid
gridrows: auto
gridcols: 23% 77%
gridgap: 0px
gridplace: stretch
cards:
- !include frontend/sidebar_dev.yaml
- type: 'custom:config-template-card'
gridrow: 1 / 1
gridcol: 2 / 2
entities:
- ...
card:
type: 'custom:swipe-card'
parameters:
effect: 'cube'
cubeEffect:
shadow: false
slideShadows: false
cards:
- !include frontend/dev_rez.yaml
- !include frontend/dev_1er.yaml
sidebar_dev.yaml:
type: picture-elements
image: /local/ui/sidebar/sidebarBG2.png
gridrow: 1 / 1
gridcol: 1 / 2
style: |
ha-card {
padding: 0 !important;
overflow: hidden;
background: none !important;
width: 100%;
}
button-card.element {
top: 0px !important;
left: 0px !important;
}
elements:
- ...
dev_rez.yaml / dev_1er.yaml (both are the same, only pictures and entities change):
type: picture-elements
image: /local/ui/floorplan/Rez_nuit.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- ...
I truncated the elements of the picture-elements cards, this post would have been way too long. Hope this is what you were looking for. If you require everything, I’ll gladly send it to you via PM.
This works for me:
style:
layout-card$: |
.grid > * {
margin: 0px !important;
}
2 Likes
Amazing, thank you!!!
Why doesn’t background transparency for cards work on mobile? It shows perfectly fine on the web UI.
This is my card layout:
content: |
# Lights
style: |
ha-card {
border-color: transparent;
background: transparent;
box-shadow: none;
margin: 20px 0px 5px 0px;
}
type: markdown
cleared cache on mobile?