per item dynamic (templated) styling and notifications #163
Replies: 8 comments 75 replies
-
|
Hi @Mariusthvdb, For the colors, indeed, at the moment they need to be added to the general styles and target the individual items by Regards |
Beta Was this translation helpful? Give feedback.
-
Haha yes, you made me do it.... went all out today: 
|
Beta Was this translation helpful? Give feedback.
-
100% personalised 👍
Do you still have issues with those overrides?, I can try with mine and give you a working selector to override the styles. |
Beta Was this translation helpful? Give feedback.
-
|
Yes and could not fix it. If you can, please share! |
Beta Was this translation helpful? Give feedback.
-
Here you go, an example with the HACS item: card-mod-sidebar-yaml: |
.: |
paper-listbox a[data-panel="hacs"] paper-icon-item > .notification-badge:not(.notification-badge-collapsed) {
left: calc(var(--app-drawer-width, 248px) - 60px);
transform: translateX(-50%);
}As you can see, the the card-mod theme styles override the plugin styles: 
|
Beta Was this translation helpful? Give feedback.
-
|
Nice! let me try that |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
@elchininet if you check the yaml in my Gist, there is a huge amount of identical yaml for each and every menu item styling. Ive tried to decrease that by using things like anchors, but that won’t work. would you know if and if yes how to do that. I would appreciate any suggestion you could throw at me |
Beta Was this translation helpful? Give feedback.
-
You are already defining some variables at the beginning and use them later in the code, nothing stops you to do the same with CSS blocks. Check if that works, it is a valid syntax but I don't know if it works with card-mod themes: {% set ccs_block %}
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 24px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
text-align: center;
{% endset %}
.test_1 {
{{- ccs_block -}}
}
.test_2 {
{{- ccs_block -}}
} |
Beta Was this translation helpful? Give feedback.
-
|
beautiful!!! and insert with: and does the magic all over. really very nice, and makes it so much more maintainable. I can even override it where needed with: |
Beta Was this translation helpful? Give feedback.
-
|
can even nest these code blocks now: |
Beta Was this translation helpful? Give feedback.
-
Yep, that will also work :) |
Beta Was this translation helpful? Give feedback.
-
|
seems the last object we might want to add a dynamic notification to is the actual menu icon itself. coloring the icon itself is easy but overlaying it with a notification badge is not obvious yet: Would you know the way to do that? |
Beta Was this translation helpful? Give feedback.
-
Add also a Also, first try with a fixed content (a string) and when it works change to a dynamic template. If the dynamic template has an error the pseudo-element will not render. |
Beta Was this translation helpful? Give feedback.
-
|
this works 
but I already found out that the templates dont work.... which makes it useless of course.. unless... let me try... yes: 
we cant use multiline like I tried at first, but this works nice! |
Beta Was this translation helpful? Give feedback.
-
Are you adding those styles in a card-mod theme or in the styles of |
Beta Was this translation helpful? Give feedback.
-
|
sorry, in card-mod theme. My next move would be to see what I can migrate to |
Beta Was this translation helpful? Give feedback.
-
Keep it in the Try to check in the developer panel that template and debug where the error is. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Mariusthvdb, |
Beta Was this translation helpful? Give feedback.
-
|
The first one Add the color as a string (not with a template) to the - item: ui-test
match: data-panel
notification_color: darkgoldenrodAnd then go to the anchor of that item and verify if this style is there: 
|
Beta Was this translation helpful? Give feedback.
-
|
@Mariusthvdb, |
Beta Was this translation helpful? Give feedback.
-
|
Yep, this is buggy in Safari, I need to search alternatives:
|
Beta Was this translation helpful? Give feedback.
-
|
Hi @Mariusthvdb, |
Beta Was this translation helpful? Give feedback.
-
|
thats better: 
the font size in the badge seems a tad smaller than the core font size, but all in all most settings seem to work. The background behind the Menu title is suddenly no longer using my theme color, but much darker. Did you set that in any way? 
notification_text_color does not work either in fixed or in template. Safari or Chrome...... could you wrap a long info text? shows 
Would be nice if we could show longer texts there, (thinking of longer dynamic result strings from templates) |
Beta Was this translation helpful? Give feedback.
-
Yes, it is, but it should be the same for all the badges (even the core one).
Yes, this the order of backgrounds for that element (I need to double check if I am using the same order as core)
The first two ones are from the plugin, the last ones are from core
I see, it seems that it got broken, it works in the global setting but not in the item settings, I need to check.
That would make the block to get misaligned with the item block (there are various styles to make them perfectly aligned when there is an info text). As someone will want two lines and other will want four, it is better that you override the styles and personalise it at your needs in every case. I'll check this afternoon that notification color. |
Beta Was this translation helpful? Give feedback.
-
|
It is already merged the fix in Home Assistant. I will revert my change in some moment because it will be available also natively. |
Beta Was this translation helpful? Give feedback.
-
no it is as simple as I never like to do that, so maybe there still is another way of setting it directly. for now this suffices. |
Beta Was this translation helpful? Give feedback.
-
|
In CSS, there is something that is called specificity (you mentioned that it sounded like abracadabra to you before). Basically more specific CSS rules rule over the lesser specific ones. So: .title {}will be overridden by: .menu .title {}And this last one will be overridden by: :host .menu .title {}If you want to override the previous one you need to make a more specific rule or use https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity |
Beta Was this translation helpful? Give feedback.
-
|
sure. I mean, I've already set a specific css rule (by means of card-mod theme), and do Not set anything in the plugin, so I expect the plugin to Not interfere with my system settings in that case. |
Beta Was this translation helpful? Give feedback.
-
Yes, it explains it. I have set up rules with a higher specificity, more specific than the ones in core, so the plugin CSS rules prevail
You have set rules with less specificity than the rules in the plugin. Even if you don't set any option in the plugin, you are loading and executing the plugin and the plugin creates CSS rules when it is loaded. The plugin overrides the core rules with something like this: .a-rule-more-specific-than-core {
var(--variable-from-plugin, var(--variable-from-core))
}If you define an option, then Just inspect the code and you will see the rules that the plugin creates, even if you don't set any option in the plugin. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Mariusthvdb, |
Beta Was this translation helpful? Give feedback.
-
|
Hey @Mariusthvdb, partials:
example: >
const name = "Mariusthvdb";If you do this: icon: >
[[[ @partial example
return name; ]]]It will become: icon: >
[[[ const name = "Mariusthvdb";
return name; ]]]So, in your case you can move all the conditions to the partials: partials:
netto: |
const minNetto = states('sensor.netto_verbruik') < 0;
const icon = minNetto
? 'mdi:home-lightning-bolt'
: 'mdi:home-lightning-bolt-outline';
const name = minNetto
? 'Energie: Levering'
: 'Energie: Verbruik';And then you can use the variables directly in your templates and keep them cleaner: icon: |
[[[ @partial netto
return icon; ]]]
name: |
[[[ @partial netto
return name; ]]] |
Beta Was this translation helpful? Give feedback.
-
|
ok thanks, I've got throw working now: and for an item icon , I use I prefer to create a 'repository' of variables, and then use those variables inside the item. it's personal preference I find tidier. Also, I can re-use these variables in other combinations and fields without blowing ups the partials ;-) considering the card-mod variables I use in: this would translate to a partials repo of: (need to find the correct JS templates for all of them,, but this is a beginning) would that be most efficient, or can we make that even tighter? why not simply declare a set of variables like: and inject those vars in templates with: one could even add additional variables in an item template and still use the variables. construction? (it's what button-card uses, and, essentially the same as the variables in script/automations we can use in backend Home assistant) |
Beta Was this translation helpful? Give feedback.
-
I don't recommend to do that if you care about performance. As it is mentioned in the Partials section: Any entity used in them will make the template in which the partial is inserted to be reevaluated when the entity changes its state. Thar means that if you have a single partial with all those entities, it will be inserted in every template in which you use it. That means all your templates will be reevaluated on every change of all those entities. The template for
More efficient and tighter are two totally different things in code 🙂. Shorter code doesn't always mean faster code, it could be totally the opposite. Sometimes one can sacrifice performance in favour of readability depending on how much performance and how much readability one will gain or lose, but I would recommend you in a Home Assistant instance like yours (with a high level of personalizations and custom components) to keep things performant. My recommendation to make it more efficient and readable at the same time:
Partials is an object of strings instead of a single string for the reason that I explained before: to avoid revaluating everything when every one of the entities used in them change. This is not a section to store variables for a single button or for a single card. It stores code for the whole sidebar and due to the amount of things that can be templated in |
Beta Was this translation helpful? Give feedback.
-
|
nice, let me try that: using the js_variables and partials defined in: shows as 
so none of the colors is set. as you can see the color string is ok, as it is the info text and returns something else... with the above js_variables and partials, we can no longer use this: where the 'netto' is set. those templates dont render correctly, and the sidebar is empty on the items that use that 'netto' Apparently, those conflict. maybe that would be a bug? local variables should not be broken because of the js_variables ? |
Beta Was this translation helpful? Give feedback.
-
Where is
It is not a bug, it is just how 
I have noticed something in your variables, take into account that this will not work in |
Beta Was this translation helpful? Give feedback.
-
|
It would be great if hide could also be defined as a template. Then you could switch dynamically between two or more menu trees: one with the settings (scripts, automation, etc.) and one with the normal dashboards. These can be hidden by default and also defined via this addon. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @rr19-hub, When the sidebar is rendered, not only the order is changed, you will notice that if you press your arrow keys or your tab key you can navigate among the sidebar items in the correct visual order as in the native sidebar maintaining its accessibility (something that the previous |
Beta Was this translation helpful? Give feedback.
-
|
I would like to close this, as the discussion here has been completely resolved. |
Beta Was this translation helpful? Give feedback.
-
since you do support some Styling on the sidebar as a whole, maybe you are also interested to develop styling to be available on individual items?
I have an extensive card-mod theme to do so, resulting in below display. Currently I do use several features of your card besides the order: a menu title, the editability of the menu, and templated name for the Energy item. Which is great.
All others are made in card-mod theming (see below).
this is the yaml for the theme mods, maybe you can use some of it to add as features to your custom resource. It would be great if we could style the colors of the individual items (icon/background/name/notification) and have a builtin away to add the notifications, for which I now have to calculate the place and width individually, causing a lot of repetetive yaml.
Beta Was this translation helpful? Give feedback.
All reactions