Changing NavigationBar User Avatar style

Answered
0
0

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

 

 

Attachment
  • You must to post comments
Best Answer
0
0

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.

Attachment
  • You must to post comments
0
0

Thank you so much Luca. I was keeping the width value between quotation marks… 🙁

  • Luca (ITG)
    Yep, the extension theme mixin had the wrong value too.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.