per item dynamic (templated) styling and notifications #163
Replies: 5 comments 55 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.
-
|
seems the only thing I would still need is the icon to support templates. I could migrate from card-mod theming to the full custom:sidebar configuration (well, except animations ) if that where to happen |
Beta Was this translation helpful? Give feedback.
-
It is weird, that should be happening since the beginning (I have not changed anything there). That is not an issue, that is expected, the styles of the plugin are very specific, so they will override any style that you have manually set up if they are not stronger. You either need to add |
Beta Was this translation helpful? Give feedback.
-
I was looking at the icon and it seems achievable (the plugin already changes the icons of the items that are already there if it is specified).
For that I would need some help from you in testing. It should be something that works for everyone not only for your set up. I'll let you know when I got something. |
Beta Was this translation helpful? Give feedback.
-
please see home-assistant/frontend#22481 and chime in if you can, Ive openend the issue |
Beta Was this translation helpful? Give feedback.
-
|
@Mariusthvdb, |
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