You also added class: elevated, which is includes it’s own box shadow and is overwriting the box shadow from style. You have to remove that. You could also try changing the selector to :host(.elevated) and adding !important after none - making it more specific may allow it to overwrite the elevated card styles.
1 Like
Perfect! Thank you for all of your help with this. I am able to get the cards looking how I want now.
One more question: Is there anyway to add similar styling to a badge? From what I have read is that card_mod is not useable in the badges section.
card_mod:
style: |
:host {
--ha-card-box-shadow: none !important;
--ha-card-background: #eeeaed !important;
}
AFAIK no. That’s a question for the card-mod thread, outside of the scope of this theme.
Card Mod v4 supports styling badges.
1 Like
I discovered this really nice theme, I’m configuring it as default on my HA environment.
I have one question, I customized my previous theme to change the colors of the different tariff in the energy dashboard to be aligned with the Tempo option from French’s supplier EDF, splitting the consumption in 6 shifts with high/low cost on “blue, white, red” days. I used these lines in my custom theme:
# Energy Dashboard Tempo
energy-grid-consumption-color-0: "#009cff"
energy-grid-consumption-color-1: "#0053ff"
energy-grid-consumption-color-2: "#c9c9c9"
energy-grid-consumption-color-3: "#a0a0a0"
energy-grid-consumption-color-4: "#ff4949"
energy-grid-consumption-color-5: "#FF0000"
Is there a way to apply this again to your theme without having to modify the files? Maybe by using your modding tool with CSS?
Thanks for your help
This part of the README describes how to use separate CSS files to define custom properties. Create a CSS file with the following contents in the /config/www/ folder and then reference it using the CSS Path/URL option in the companion module. To reference locally hosted files in that folder use the URL path /local/filename.css.
:host, html, body {
--energy-grid-consumption-color-0: #009cff;
--energy-grid-consumption-color-1: #0053ff;
--energy-grid-consumption-color-2: #c9c9c9;
--energy-grid-consumption-color-3: #a0a0a0;
--energy-grid-consumption-color-4: #ff4949;
--energy-grid-consumption-color-5: #FF0000;
}
Yes, I figured this while looking at other discussions on GitHub. The readme could be a little bit clearer with a short example and mentioning the file path should be /local/my_filename.css to point to the file being physically in /config/www/my_filename.css
Other question, is it possible to either move the sidebar button and dots menu from top to bottom of the screen with the navigation bar or to move the navigation bar back on top?
There is wasted space on top of my screen now, reducing the useful area for my cards.
No, the header and footer cannot be moved. You can hide them using the options in the companion module.
Big fan of your work, much thanks from me.
Just wondering what the latest state of play was with using Material You Theme and Utilities with card_mod theme-level classes and styling. Is it unadvised? Unsupported? Expected to produce unpredictable results?
Thought I’d check before I go too far down this path.
Glad you like my work!
It should be fully supported, as card-mod styles should load after Material You Utilities styles. You may have to add !important to CSS properties to overwrite Material You and default styles. The companion module actually uses card-mod classes for setting alternate card variants at the card level.
1 Like