Hi guys.
I have been customizing the NavigationBar to our needs and got stuck in a style I would like to apply to the User Avatar. For statuses purposes, I need to have a thick border to the PictureBox with a different color. So, I went to the NavigationBar.mixin.theme and tweaked the “user-avatar” “styles”.
This is the original code:
"user-avatar": {
"states": {
"default": {
"styles": {
"radius": 40,
"width": "1;",
"color": "#DCE3E3",
"backgroundColor": "#DCE3E3"
}
}
}
},
This is what I changed:
"user-avatar": {
"states": {
"default": {
"styles": {
"radius": 50,
"width": "4",
"color": "#ef7a85",
"backgroundColor": "#DCE3E3"
}
}
},
And attached is what I got as a result.
Would anyone have a hint of how I could get a full circle with a border that I could change the color programatically?
Thanks in advance.
Ivan
I changed width to 5 and color to “red”, see attached screenshot. Shows a round red border 5px wide. You don’t need to recompile the extension, just copy the NavigationBar.mixin.theme in your project in /Themes and edit it:
"user-avatar": { "states": { "default": { "styles": { "radius": 40, "width": 5, "color": "red", "backgroundColor": "#DCE3E3" } } } },
To change it programmatically you can either modify the extension to a property or alter the theme in code:
Application.Theme.Appearances["navbar"].components["user-avatar"].states.@default.styles.color = "green";
However this will change the cached theme for all users. To create an individual custom theme you can clone the theme, change it, and assign it back.
Thank you so much Luca. I was keeping the width value between quotation marks… 🙁
Please login first to submit.