card-mod-more-info-yaml: |
ha-more-info-info:
$:
ha-more-info-history:
$: |
.header {
display: none !important;
}
Thanks. I found the solution, but forgot to update here.
It works really well, now I can let house guests use HA without obvious access to things they shoudn’t see.
Most of it is Mariusthvdb’s work. I just tweaked a few things and updated to 2022.9
Also took the time to hide the search magnifying glass and edit dashboard, moved the more-info back to center and a few other things, so it suits me much better than default.
I’d also like the possibility to hide the entire ha-sidebar.
Or rather the hamburger menu button that opens the side bar.
Suggestions for that?
Hi guys, if I add following code to the particular card’s browser_mod > data:
card_mod:
style:
.: |
.content {
--ha-card-box-shadow: inset 0px 0px 0px 1px var(--border-color) !important;
It works, it works even fo another “not modified” cards 
Is there any way how to have it directly in the theme?
I tried to do:
card-mod-theme: wallpanel_dark
card-mod-root-yaml: |
.: |
.content {
ha-card-box-shadow: inset 0px 0px 0px 1px var(--border-color) !important;
}
But it does not work.
Any advice?
Pretty amazing job Jesse! I’m starting to work on something similar, but I’m no where as far away as you. Would you be able to start a GitHub repo with the source?
Thanks! Here’s my repo: GitHub - th3jesta/ha-lcars: LCARS theme for Home Assistant
Feel free to submit a PR if you have any improvements. I’m not a real web developer, I just pretend to be one, so I’m sure this can be improved on many times over.
1 Like
My solution ended up being much less complicated than I was imagining. For some reason it never occurred to me that there isn’t any special requirement for creating new CSS custom properties, since these variables do inherit through shadowDOM that offered a simple fix to target cards inside a stack-in-card card.
Here’s a simplified version of what I ended up with:
card-background-color: "rgba(255,255,255,0.25)"
card-backdrop-filter: "blur( 10px )"
ha-card-box-shadow: "0px 5px 5px rgba(0,0,0,0.3)"
card-mod-theme: my-theme
card-mod-card-yaml: |
.: |
ha-card {
backdrop-filter: var(--card-backdrop-filter);
}
ha-card.type-custom-stack-in-card hui-vertical-stack-card,
ha-card.type-custom-stack-in-card hui-horizontal-stack-card {
--card-backdrop-filter: none;
--card-background-color: transparent;
--ha-card-box-shadow: none;
}
1 Like
Thanks!! I’m working on a very basic LCARS theme for cards. I have a basic header done now, iI’m trying to get the full wrap around look on a card. Could you also post the YAML for the cards? I’m assuming the cards needs to be configured in a horizontal and vertical configuration to get it looking like your screenshot?
The usage instructions I posted at the bottom of the readme explain how the styling is applied to the cards: GitHub - th3jesta/ha-lcars: LCARS theme for Home Assistant. It’s using the card-mod class system. You just add the class to the cards you want to style a specific way. I found it easiest to manage the sections using vertical stacks; the first card in a vertical stack is a Markdown card with the title as an H1 and the header class, and the last card in the stack just gets the footer class. Any non-button cards gets the middle class.
A bit baffled and hoping someone can lend a hand.
Goal: Trying to move the menu bar to the bottom of my dashboard and center the icons in the middle.
I managed to get the menu bar to the bottom of my dashboard, the last step to center the icons isn’t working correctly.
Searching this thread led me to a post suggesting to add the below under card-mod-root-yaml:
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
Prior to me adding the above code my menu bar is appearing at the bottom however once I add it in, the menu bar goes back to the top and the other features like the highlighted active tab color goes away.
I suspect it may be a formatting error but after toying around with it awhile I can’t sort it out.
Appreciate any help 
Full code is below.
# Card Mod
card-mod-theme: Main
# Header
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
#selectionBar {
bottom: unset !important;
}
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
ha-app-layout$: |
/* This corrects top padding for the view. */
#contentContainer {
/* Change this to 0px if you want the header on the bottom */
padding-top: 0px !important;
}
ha-button-menu$mwc-menu$mwc-menu-surface$: |
.mdc-menu-surface {
margin: 10px;
box-shadow: var(--ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
}
.: |
/* This hides the unused portion of the header. */
app-toolbar {
height: 0;
}
/* This forces background-color and text-color. */
.edit-mode, app-header, app-toolbar {
background-color: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
}
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
hui-masonry-view {
padding-bottom: 60px !important;
}
/* This gives the header in edit mode a different look from the standard header. */
app-header.edit-mode {
border-bottom: 2px var(--primary-color) solid;
padding-bottom: 10px;
}
/* Make the color of the plus white instead of black. */
#add-view ha-svg-icon {
color: #EEE !important;
}
/* Bring voice button back down */
app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
top: 0;
right: calc(48px * 1);
z-index: 2;
position: absolute;
}
/* Bring help button back in */
a[href="https://www.home-assistant.io/lovelace/"] > mwc-icon-button {
right: calc(48px * 2);
position: absolute;
z-index: 2;
}
/* Bring close button back in */
mwc-icon-button[title="Close"] {
top: 0;
left: 0;
position: absolute;
z-index: 2;
}
/* Bring add view button back in */
mwc-icon-button#add-view {
position: fixed;
right: 48px;
}
/* Bring edit UI overflow menu back in */
ha-button-menu {
top: 0;
right: 0;
z-index: 2;
position: absolute;
/*Uncomment this out to hide the overflow menu
display: none;
*/
}
/* Hide the title */
app-toolbar > [main-title] {
display: none;
}
/* Hide buttons that are taking up space, but invisible */
menu-button[style="visibility: hidden;"] {
display: none;
}
/* Bring sidebar button back in */
ha-menu-button {
z-index: 2;
top: 24px;
}
/* Set margin on left to be smaller,
and set the bar color to be the primary color
instead of white */
paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
margin-left: 48px !important;
}
/* When not in edit mode, shrink the left margin */
app-toolbar:not(.edit-mode) > div > paper-tabs {
margin-left: 6px !important;
}
/* Color selected tabs */
paper-tab[aria-selected="true"] > ha-icon {
color: var(--primary-color) !important;
}
paper-tab[aria-selected="true"] {
color: var(--primary-color) !important;
}
/* Styles for mobile */
@media (orientation: portrait) {
/* Hide sidebar button and keep room for the overflow menu button */
paper-tabs {
margin-left: 5px !important;
margin-right: 48px !important;
}
/* Hide voice button */
mwc-icon-button[label="Start conversation"] {
display: none !important;
}
/* Hide sidebar button */
ha-menu-button {
display: none !important;
}
}
/* Make help button have contrast */
app-toolbar a {
color: var(--primary-text-color) !important;
}
card-mod-view-yaml: |
hui-masonry-view$: |
mwc-fab[title="Add Card"] {
bottom: 96px !important;
}
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