it works for me âŠ
Using the code on itâs own without adding .: | works for me also.
I tried removing the .: | from the end in the full code and it works now and is aligned to the bottom of the page.
Thanks!
*addition that I just noticed.
When I enter Edit Dashboard mode the tabs / icons seem to disappear. If I exit Edit Dashboard they appear again
When I inspect element it seems the icons/tabs are positioned below the edit menu. Any idea how to bring them back up?
Also noticing that the button to add cards is positioned below the edit menu on the right side
Iâd really like to be able to style vertical stack cards from a theme. Iâve tried a few things with limited success.
this seems to work intermittently, and I canât work out any rhyme or reason for when it does / doesnât
card-mod-view-yaml: |
grid-layout$hui-vertical-stack-card: |
hui-vertical-stack-card {
background-color: var(--ha-card-background);
border-radius: var(--ha-card-border-radius);
box-shadow: var(--ha-card-box-shadow);
}
This is based on something I saw posted here but doesnât work (for me) at all
card-mod-view-yaml: |
.: |
hui-vertical-stack-card$: |
#root {
background-color: var(--ha-card-background);
border-radius: var(--ha-card-border-radius);
box-shadow: var(--ha-card-box-shadow);
}
Any ideas?
Hi guys!
I am running mushroom cards and theme. I love it but i have used card mod to style it further. To make active cards easier to see and for the looks.
right now i am mostly adding the same piece of code to every card i add, and it gets old. Can i achieve the same result with my theme file? I have tested a bit and i try, but my coding skills are terrible.
Here is an example screenshot and card code snippet.
card_mod:
style: |
ha-card {
{% if is_state('light.living_room', 'on') %}
background: rgba(225, 225, 225, 1);
--primary-text-color: black;
{%- else -%}
{%- endif %}
}
ha-card {
{% if is_state('light.living_room', 'off') %}
background: rgba(150, 150, 150, 0.2);
--primary-text-color: white;
{%- else -%}
{%- endif %}
}
ha-card {
{% if is_state('light.living_room', 'unavailable') %}
background: rgba(150, 150, 150, 0.2);
--primary-text-color: white;
{%- else -%}
{%- endif %}
}
you should be able to, but Iâm afraid my brain is too fried to say how.
If you post what youâve tried in your theme file it would help us to help you.
Note: Question moved to:
đč Card-mod - Add css styles to any lovelace card - #3729 by SimplyGardner
_
Hey, I am having issues with an annoying strange flash upon initial load.
I have played around with this and appears to be prioritising the initial CSS/Styles first then overlaying the updated card-mod styling which cases the weird flash behaviour.
In my config.yaml file I also put the following to see if it would prioritise the load but it has not worked.
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
Anyone know what I can do to help fix this? Seems I am driving myself mad. I have added an issue here also.
Example:
Posted in incorrect place: Moved to đč Card-mod - Add css styles to any lovelace card - #3729 by SimplyGardner
Slowed down example:
This is not card-mod-them-related, is it? So I would suggest to put your question in the card-mod topic and not here.
And for the problem, I think, that you should search for transition in the css attributes and switch them off in your modding.
1 Like
Hi all,
Iâm newbie of this fantastic tool. Iâm struggling for days trying to center a div in the card.
Please find below the HTML code and my last test.
Any help on this will be very appreciated because this is driving me nuts. 
Many thanks in advance.
Roberto
type: custom:stack-in-card
card_mod:
style:
.: |
ha-card {
--ha-card-background: silver;
opacity: 0.8;
padding: 25px
}
mode: vertical
keep:
background: true
cards:
- type: custom:mod-card
card:
type: energy-date-selection
card_mod:
style: |
hui-energy-period-selector$: |
div.period {
justify-content: center;
}
Same as directly above: This is not card-mod-theme-related, is it? So I would suggest to put your question in the card-mod topic and not here.
Thanks a lot
Hey all, I am new to HA and am having trouble with creating a theme with a side panel. I finally figured out how to create a new theme and move the side bar to the left using card-mod-theme. Now I am trying to change the background of the sidebar to a gray color; or change the background of a vertical stack card using this theme to a gray color. Could anyone help me with this? I am sure Iâm missing something simple, but canât seem to find it on Google anywhere. Here is what I currently have for trying to turn the background of a vertical stack a new color,
Left_sidebar_test:
card-mod-theme: Left_sidebar_test
card-mod-card: |
hui-vertical-stack-card $: |
#root {
background-color: black;
border-radius: var(--ha-card-border-radius);
box-shadow: var(--ha-card-box-shadow);
}
card-mod-view-yaml: |
hui-sidebar-view $: |
.container {
flex-direction: row-reverse;
}
1 Like
I am trying to hide as much as I can from the new stats in more-info in version 2022.11.
Since you can click min/mean/max and show/hide the values,
could you force it to always only show mean (or state if there are no min/mean/max) ?
Like changing the default value from âshow all threeâ to âshow only meanâ.
And as a separate question, could we hide the <div class="chartLegend"> to get rid of the legend?
card-mod thread â 1st post â link at the bottom â styles for statistics card
Do not think this can be controlled by CSS.
You cannot hide some graph since it is a âcanvasâ element.
And you cannot simulate âswitched-offâ legendâs element too.
Another point is that âmean graphâ is NOT a âreal graphâ at all - it is absolutely wrong idea to show approximate data in more-info popup.
So, the right way is âshow a real history graph (like it was before 2022.11)â and (optionally, and only if available) âshow statistical graphâ (probably with min/max/mean).
Thanks, I didnât know about that other thread.
I really donât understand the change to statistics in more-info but balloob made it quite clear there will be no reverting to the old state graphs and there will be no options to use states. So until someone invents a replacement for all more-info, Iâll try to make the best of it.
I suppose you mean this https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3414.
I have tried to read up on how it works, but I just donât get it yet so I donât know how to use the example in my scenario (within more-info). I hide a lot of other elements, but thatâs thanks to you and Mariusthvdb and hours of trial and errorâŠ
Example of theme where I hide other more-info stuff: https://hatebin.com/hqqaomlwws
Once again a new HA release has changed how more-info popups show up. They for some reason changed the position yet again, while it alread was changed in september and it broke. Can someone pinpoint me what the correct code now is to center more-info dialogs?
.: |
ha-dialog {
--vertial-align-dialog: center !important;
}
Like anything else is done for more-info - like âhide logbookâ etc.
Sad if it is true.
A part of a trend âmake HA usable for inexperienced peopleâ like getting rid of yaml for integrations and moving everything to UI.
Nice commit. I suggested that in beta when I realised I wonât get the states back. No response then, but someone listened. Thanks!
Is it possible to use arribute of a device to drive card background color?
I am quite happy with my theme setup right now, with active cards having a highlighted color. However, my smart ovens only shows activity through attribute.
my code:
card-mod-card: |
ha-card {
background: {% if is_state(config.entity, 'on') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% elif is_state(config.entity, 'home') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% elif is_state(config.entity, 'open') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% elif is_state(config.entity, 'heating') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% elif is_state(config.entity, 'playing') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% endif %}
}
ha-card { background: {{ 'rgba(225, 225, 225, 1)' if
is_state_attr('config.entity', 'hvac_action',
'heating') }}; --primary-text-color: black;
}
Try achieving the same result (i.e. dependingly of your oven) by using card-mod WITHOUT a theme.
That works very fine, and i could continue doing that. I just want to have most of my settings in my theme to keep it simple.