as a matter of fact, I can not even get it to turn green:
paper-tab[label="Alarm"] {
color: green;
}
while I am here, could anyone point me to some explanation on device dependent settings? case: I want my header to show at the top on mobile and title at the bottom, and vice versa on desktop.
right now I cant get anything to happen to the menubar/title at all. All I see is this:
compact-header:
header-height: 48px ## cant get anything to happen here....# Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
.: |
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-color);
color: var(--text-primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: black;
}
paper-tab[aria-selected=true] {
color: gold;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
paper-tab[label="Alarm"] {
color: green;
}
hope this isnt too extravagant
thanks for having a look!
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: black !important;
}
paper-tab[aria-selected=true] {
color: gold !important;
}
the same mod uses
paper-tab[label="Alarm"] {
color: green !important;
}
I know this is an older bit of code, but must have read this thread for 4 times now, and cant find a new way of doing itā¦ Id simply like my view title to be displayed.
not sure if that is even possible, but at least browser mod gives us path which I guess we could unslugify and capitalize using {{state_attr('sensor.browsermod_id','path').split('/')[1].replace('_',' ').capitalize}}
took me a while, but finally I understood how to hide several option menu items (additional to hiding the Help)ā¦ sharing because I didnt find any reference to it before:
After some trial i was finally able to change the color of the icons globally but is there a way to color each icon individually with card-mod? Any help is greatly appreciated. Other things i want to change is to get rid of the right menu (three-dotted-menu) and i want to change the box shadow. Normally i do it with:
I have what I hope is a simple question. I have a view that, depending on the width of the browser, can be either 1 or 2 columns. The main set of cards is always in the first column and includes many custom button cards for mainly device control. The column is resizeable using custom:grid-layout
This works great on my phone, and when there is only a single column in my browser. As I widen the screen, the fonts all get progressively larger. However, when the browser screen is wide enough to start a 2nd column, it no longer works because the queries are based on the screen width and not the column width. I have not been able to figure out how to do this. I have tried several things as follows but none of them work. Hopefully, it is just a syntax issue. Any help would be greatly appreciated.
personally I dont use those domain settings in card-mod-theme, because it only changes that in the frontend, and eg not in more-info or logbook unfortunately.
need either backend logic, core HA frontend logic, or, ofc, custom-ui
having said that, I can not imagine we shouldnāt be able to change those tab icons using card-mod-theme somehow. Just havent found it yet. I hope.
Custom Header was truly unique and I miss it on a daily base.
Iām now using card mod, but if i use this, i still sometimes see a black bar above, and then when i refresh page, the bar is goneā¦ how can i fix this? thnx in advance , appreciated
I have just noticed I have the same issue. Did you find out how to get it to work again?
I use very similar code to you (probably copied from the same place).
Both latest versions generate a loop of errors in browser console.
I found the below error in browser console:
card-mod.js:1 Uncaught (in promise) TypeError: this._requestUpdate is not a function
at HTMLElement.set (card-mod.js:1)
at styles.ts:365
at Array.forEach (<anonymous>)
at HTMLElement.value (styles.ts:365)
at HTMLElement.value (home-assistant.ts:66)
at HTMLElement._$AE (styles.ts:365)
at HTMLElement.performUpdate (styles.ts:365)
at HTMLElement.scheduleUpdate (styles.ts:365)
at HTMLElement._$EC (styles.ts:365)
Is it just me? Iām using all latest versions of addon and Home assistant.
trick is to set the 3 dots color to transparent, and set a separate color And visible to the (template) text.
As you can see it even works based on a boolean, so we can change the layout in the frontend, via the frontend ofc, that can be anything.
I got it NOT to wrap by setting the width and making the position absolute, both were cribbed from the card mod themes wiki (and the original code we all used). Lots of trail and error as I donāt know what I am doing really.
Thanks again for getting me back to where I was a few weeks ago.
