I want to target this specific div element and the p inside it, the other elements should not be affected. Is this even possible? I want to add to the div element
o that is nice indeed. Im always fighting with those rgba colors when Im using theme variablesā¦ didnt know this functionality existed at all, never saw it in HA .
can we also use that with color names or hex values?
rgb(from green r g b / 1)
or
rgb(from '#98878f' r g b / 1)
? up to now, Iāve always added a dedicated variable primary-rgb color to the themes
primary-rgb: 152,135,143
so I can use that in the rgba() syntax. this function now is much prettier!
edit
yes we canā¦ wow
@keyframes resizing_outline {
0% {outline-offset: 0;outline-color: rgb(from '#98878f' r g b / 1);}
25% {outline-offset: 5px}
50% {outline-offset: 10px}
75% {outline-offset: 15px}
100% {outline-offset: 20px;outline-color: rgb(from red r g b / 0.5);}
}
it does require the spaces between r g b, I tested rgb but that simply returns the border color.
o man this css is really so cool, the effects are simply amazing, adding the transparency on the border-color makes it even more attractive:
@keyframes resizing_outline {
0% {outline-offset: 0;outline-color: rgb(from var(--warning-color) r g b / 1);}
25% {outline-offset: 5px}
50% {outline-offset: 10px}
75% {outline-offset: 15px}
100% {outline-offset: 20px;outline-color: rgb(from var(--alert-color) r g b / 0.5);border-color: transparent;}
}
The result of this code is, that the button is always white. Where am I going wrong ?
Also I want a little border around when it is whiteā¦ How do I achieve this ?
this is the part you need debugging ? if yes, please post only the relevant bit, and not let us find your code for youā¦
for example, what card is this? Mushroom? ok, which, etc etc
also, show the card, and the output this template has in dev tools
Posted this in the front end category but was directed here instead. Iām new to HA and understand enough to copy/paste and make modifications to suite my needs.
Iām using card-mod to make a card transparent, without a border, and to change text colors. Any card I edit in the first dashboard in card position 1 (first card on first dashboard), will not keep the css styles applied to it. I can edit the card, add the css styles, and then save it and it works, but as soon as I refresh my browser, or close the android HA app and re-open, the card goes back to its default settings and ignores the css styles. Iāve cleared the cache, tried different browsers, and deleted/re-installed the HA app and the issue still persists across multiple devices. This is the example of the card Iām using and the css mods added to it.
This only happens to the first card on my first dashboard, any other position or dashboard and all the styles work correctly. Any help is greatly appreciated!
Can you provide any help with what the variables should be, or how they should be formatted if improper? Iām trying to learn more about CSS but very slow going. I copied the style code from another post, but canāt remember where. Iām just trying to get some basic styles going until I really have time to learn more.
Some examples are provided & can be used as a āstarting pointā: 1st post of this thread ā link at the bottom titled āfantasticā ā scroll down for weather card.
That does simplify it, I really appreciate it. Hopefully I can figure out why the styling doesnāt work for me in that first dashboard position. I really like the theme Iām getting together so far, and the transparency really ties it together.
Note that a stock weather card can change itās class dynamically (ānarrowā etc) dependently on a view, this might (just a guess) cause issues on some browsersā¦
Iāll try to find a card that isnāt dynamic and see if that has any effect. So far Iāve tried the default weather card, custom expander card, and default thermostat card and have the same issue in that first card slot. Iāll try some other cards and see if I can find one that doesnāt lose its styling. Thanks for the help. I would assume that most cards are going to be dynamic (or have some kind of scaling) when using the HA companion app?
No idea. Only a few stock cards (weather, markdown, ???) have dynamic classes added. Other cards have dynamic sizes (as expected) (and letās not talk about sectionsā¦).
Iāve been playing around trying to customise some climate tiles for a wall display dashboard to primarily control a heat pump
Unfortunately I have been unable to locate examples to understand how to achieve what I want - any assistance with the following appreciated
See below photos - I was hoping to be able to customise inactive and active colours for the HVAC mode and fan speed buttons on the climate tile card
I was also hoping to replace the icons with text āHeatā āCoolā etc
Any help with how to reference the buttons and achieve the above would be appreciated
Cheers
Waz
I have been struggling with this for 2 days, and I need to know if it is even possible (so I can stop if it isnāt)ā¦ I have really tried to avoid asking someone to think for me, but I have failedā¦ Please help, I need to sleep!
I have a default sections dashboard with a couple of tabs (calendar and shopping list). Iāve tried to show the code with as little as possible whilst showing enoughā¦
I am successfully placing an image from my template in the background of the custom:week-planner-card (as shown with the first card_mod), but I want the image in the background behind that (and the other) cards, basically the background of the dashboardās tab.
I have tried so many versions of the second card_mod shown below to get the image behind the card (in ha-sortable or hui-view or hui-view-container, I canāt get anything in the card_mod slot of those)ā¦
I would like the text and the icon to turn red when the window is open and green when it is closed. Unfortunately, my code is not working. Could someone please help me?
