Any change you can share your code, for me it not seems to work. Thx
Probably because the code is wrong from the beginning.
card-mod-root-yaml: |
.: | ----------- this !!!!
app-header {
display: none;
}
At least these types of errors you may do:
- wrong value is selected for a property (like ācolor: 12pxā);
- correct value for a property is not set - ā!importantā is needed;
- wrong attribute is selected (like ācolr: redā);
- wrong element is selected;
- wrong path is specified - so none element is selected;
- smth else.
And use Code Inspector to check a possible reason.
Like i said it works fine in all the 3 ways i tested. If i switch the boolean on the header/toolbar dissapear but the margin donāt changes so it leaves a empry space at the top of the pageā¦
Remove everything from you theme file and leave this only:
card-mod-root-yaml: |
.: |
app-header {
display: none;
}
Does it work?
Next step - check with input_boolean.
1 Like
Sorry for the question, Iām a bit newbieā¦Where should I put this code?
I have created a new theme āleft_sidebar.yamlā in themes folder:
Left_sidebar:
card-mod-view-yaml: |
hui-sidebar-view $: |
.container {
flex-direction: row-reverse;
}
I can see the new theme āleft_sidebarā when I edit my dashboard view, I select it but nothing happens (of course I have Card-mod installed)
Thank you in advance!
Try this:
Left_sidebar:
card-mod-theme: Left_sidebar
card-mod-view-yaml: |
...
Now yes! Thank you so much
Is there any way with adjusting of themes to style the scrollbars from chrome as well. Tried already several positions in view and root, but until now without success.
e.g.
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
here and in other places in HA.
Since the remodelling of more-info in 2022.9, some of the card-mod-tricks to hide elements doesnāt work.
I can see that the structure has changed since ballobās new more-info merge, but I think the structure is quite confusing so I would appreciate some help.
What I want to hide (2022.9): Hide-History ā ImgBB
Example that worked pre-2022.8 (thanks to MariustHvdB): Hide-History-pre-2022-9 ā ImgBB / hatebin
Result: Hide-History-with-switch ā ImgBB
Suggestions?
This way with 2022.9
card-mod-more-info-yaml: |
ha-more-info-info:
$:
ha-more-info-history:
$: |
.header > a, a:visited {
color: var(--secondary-text-color) !important;
font-size: 12px;
}
ha-more-info-logbook:
$: |
.header > a, a:visited {
color: var(--secondary-text-color) !important;
font-size: 12px;
}
Saw your question after I posted my update for my usecase above. You should find youre problem there as well. It is only another new parent element above. Check my change-example.
1 Like
With the changes to more-info dialogs in 2022.9 release, the more-info popups now are located at the top of the page. Is there a code to add to the theme.yaml using card-mod to center these popups, like they were before? Kinda like the card-mod codes for themes that remove the header for example (which still work thankfully).
Get it back centered.
card-mod-more-info-yaml: |
.: |
ha-dialog {
--vertial-align-dialog: center !important;
}
4 Likes
Thanks, works great!
Is there a way to modify things in the Developer Tools, Settings, HACS page, etc? Iāve tried many variations on card-mod-developer-tools, card-mod-settings, card-mod-config-dashboard, etc., but havenāt had any luck targeting these pages. Any modifications Iāve put into card-mod-root donāt seem to carry over into these pages, which isnāt surprising. Any clarification would be appreciated.
Never saw it managed. Would lie to have it as well, but it isnāt in the form, Thomas in ingesting his code. Currently.
1 Like
Hereās a preview of the theme Iām working on that card-mod has enabled me to create. My take on a Star Trek LCARS theme!
Being able to target other pages like Developer Tools, HACS, and Settings will help me make this theme a total-conversion!
9 Likes
This feels like a long shot, but Iām wondering if card-mod has a method of targeting nested cards. Or if anyone has creative solutions. Specifically Iām applying a backdrop filter and semi-transparent background color to all ha-cards, but where I have stack-in-cards, each layer of nesting adds to the opacity and filter.
With lightDOM that would be fixed with just a
ha-card ha-card { // overrides here }
Obviously with shadowDOM inheritance goes out the windowā¦
My solutions so far are to either:
- Set default card background to transparent, then apply a class to top level cards and assign the backdrop filter and background color to that class, or
- Create an override class that receives my overrides and add that to all nested cards.
Am I correct in assuming itās outside the scope of card-mod to target a card nested an arbitrary number of levels inside another card? This feels like itād probably be best solved by customizing stack-in-card to add a class to nested cards or something, but I figured Iād ask.
I donāt believe that would be possible, however, I think you could manually set up classes and assign them and it wouldnāt be that arduous. Example:
ha-card.level1 {
opacity: 0.1;
}
ha-card.level2 {
opacity: 0.2;
}
ha-card.level3 {
opacity: 0.3;
}
etc.
You would just need to keep track of where the cards are in the hierarchy when assigning
card_mod:
class: level1
card_mod:
class: level2
etc.
ā¦but I would assume that is not something you would need to adjust often, making the effect worth the setup time.