I donāt made any changes or setting with Card Mod, i only installed it.
And yes, i asked in the Custom Sidebar Page too!
Thanks!
having a go at some badge styling in New badges and card-mod customisation - #78 by Mariusthvdb with help from great modifier @VietNgoc I figured it would benefit the crowd if I posted this here too:
from top to bottom being all core cards (badges, entities with embedded tile cards, and below that regular entities) modified by card_mod only 
1 Like
seems far fetched that would immediately cause a change in the sidebarā¦
dont see it either, but I did set several in themes and card-mod theming, so maybe override the trouble you get in your config.
Ill follow along in the repo, to see what gives there
but where did you do that, I cant find it at GitHub Ā· Where software is built
I mean I asked in the forum group! Sorry Iām new to this stuff!!
Thanks for your help.
Hi,
Iām trying to change the text color for the first entity in this card (a conditional type entity) as well as make it āunclickableā. Hereās my attempt :
type: entities
entities:
- type: conditional
conditions:
- entity: input_boolean.loraswitchcheck
state: "off"
- entity: sensor.avlfiller
state: Online
row:
entity: switch.relay3
icon: mdi:light-switch
name: Relay
card_mod:
style:
hui-script-entity-row $: |
hui-generic-entity-row {
pointer-events: none;
color: red;
}
Hereās what Iām seeing:
Iām not sure what Iām doing wrong here.
Thanks.
PS: Iām no coder or have any experience in coding
Hello!
How can I remove some of the header space shown here?
Additionally, how can I increase this row of numbers to be the same size, or close?
This is what I have currently:
show_current: false
show_forecast: true
type: weather-forecast
entity: weather.home_2
forecast_type: daily
card_mod:
style: |
ha-card {
border-radius: 1px;
background-color: transparent;
border: 0px;
box-shadow: none;
font-size: 20pt;
font-weight: bold
}
font-size: 20pt;
font-weight: bold
}
ha-card div.forecast div.temp {
font-size: 55pt;
}
ha-card div.forecast div.forecast-image-icon svg {
--mdc-icon-size: 70px;
width: 70px;
height: 70px
}
You were right, I fixed it now. The problem was with the āwhite-spaceā style. I just changed it in my theme settings and now it works perfectly. Thanks.
Hi,
I am working on this since days without any succcess ā¦
Let me show you a screenshot first:
What you see is an overvie of different sensors my proxmox server offers. The bottom right card shows the status quo - the left shows what i want to achieve. On the upper left corner of the card I want to see the ID of the VM or Container. This is just the title of the card. I was able to shrink it and I was able to come close to my target this way:
card_mod:
style:
$: |
.card-header {
color: red !important;
font-size: 12px !important;
font-weight: bold !important;
height: 12px !important;
padding-top: 0px !important;
margin-top: 0px !important;
}
But I donāt find any solution how to push the red title closer to the top margin of the card. The rest of the content will follow (hopefully) and the layout will be perfect.
Any ideas how to fix this?
Thanks. Youre right that did work thats thats awesome. I guess i just need to figure out the options available for .container. Just trying to change the title to size 25 really. Previously I used " --title-font-size: 25px !important; " but this does not seem to work within .container. Thanks bud
EDIT - Figured it out
āha-heading-card-title-font-size: 29px !important;
Curious, is there a good resource for all of the options available to reference in the future? I found one specific to mushroom cards which is great but Im guessing there is a larger repository somewhere of the available options? Hopefully anyway. Thanks again!
I do not think there is a resource for available css vars. As for possible css properties - there are tons of sites.
Excuse my ignorance as I am just āfaking it till I make itā with this stuff but with āha-heading-card-title-font-sizeā I basically just started guessing the end part and saw it worked. Based on the name of that being ultra specific like that, I assumed it has to be written somewhere as a reference?
You can find the source code on the frontend repo, usually the files are named by their tag nameā¦ Somehow you will have a little idea how the compoment structure looks like. For example, in the case of heading card, look for the hui-heading-card file ā¦
Hi,
Hoping I can get some help, I am trying to edit a padding value, I believe the issue I am having is it inside a shadowroot.
I THINK I have followed the instructions on the docs but the result is incorrect, but i cant see what I have done wrong.
Only thing I can think is Iām trying to use div.XXX instead of the examples using ha-XXX, I donāt know enough about this stuff to know if thatās an issue, or why its not working? I couldnāt find any examples of targeting div.container so maybe thatās not how it should be done?
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Aquarium
card_mod:
style:
.: |
browser-mod-popup$: |
ha-dialog div.content div.container {
padding: 0px 0px 0px 0px !important;
}
here is the inspect element, If i edit the padding manually highlighted in RED, I get the correct behavior. Iām just not sure how to target this value with browser mod?
And this is the padding im wanting to override:
Appreciate if anyone can point out what Iām doing wrong.
And you want padding for all popups? If so, add style to your theme configā¦
card-mod-more-info-yaml: |
.: |
:host([card]) .content .container {
padding: 0px !important;
}
Thanks for the suggestion, I did want it for all the popup cards, though I would like to get a better understanding of how it works so if i need to apply a setting to a specific card, I can change it.
I tried your suggestion above, it didnāt seem to make any change?
Edit: also this is a popup card, not sure if its mentioned/makes a difference to how to solve the problem
You donāt need guessing. Jost open Dev-Tools in browser, look, what is used at the point, you want to change something and change exactly this.
Is it possible with card-mod to hide the state icon and move the rest of the card to the left to make better use of the space?
exactly this, always check the core frontend source file for dedicated theme variables,
If they exist, use them, if not, you have to find the right element in the dom to modify
given the extremely complex and cluttery organization in that repo, I have bookmarked frontend/src/panels/lovelace/cards at dev Ā· home-assistant/frontend Ā· GitHub so I can always find them quicklyā¦
btw, if you want those variables permanently set to another value, you donāt need card_mod at all, but you can simply set them in your themes.
That way they are supported in core, but more importantly, it is way faster, than modifying via card_mod.
from my themes configuration:
# https://github.com/home-assistant/frontend/blob/74814cc30563d5f5dbb19591ad43086013a0e743/src/panels/lovelace/cards/hui-heading-card.ts
# ha-heading-card-title-color: gold #var(--primary-text-color)
# ha-heading-card-title-font-size: 30px #16px
# ha-heading-card-title-font-weight: 400
# ha-heading-card-title-line-height: var(--ha-heading-card-title-font-size) # 24px
# letter-spacing: 0.1px
# mdc-icon-size: 18px
# ha-heading-card-subtitle-color: var(--secondary-text-color)
# ha-heading-card-subtitle-font-size: 14px
# ha-heading-card-subtitle-font-weight: 500
# ha-heading-card-subtitle-line-height: 20px
as you can see a lot of dedicated variables (Iāve added the defaults so its easier to check and adjust if required).
Just that single mdc-icon-size isnt dedicatedā¦ so I need to set it in card_modā¦letter-spacing is fine as is.
Got it:
card_mod:
style:
$: |
.card-header {
color: red !important;
font-size: 12px !important;
font-weight: 800 !important;
height: 1px !important;
padding-top: 0px !important;
margin-top: 0px !important;
line-height: 20px !important;
}
line-height was the critical element!
height sets the distance to the following elements
line-height sets the distance to the box
Thanks, and again excuse my ignorance as this is all new and Iām learning. I understand the idea of going to dev tools in the browser but any tips/tutorial on spotting exactly where I need to be looking to get this info? Thanks