Elegance [Deleted]

I've added a possible solution that seems to work. There are too many changes to post, so I'll just send you updated files.
 
How to make rounded avatar like this? In default xenforo theme it works but not in your theme:
online-indicator2-gif.79868


In your theme:
032f0fb115f5c14d9c5f5a9f754f7a33.gif


I follow totorial in this resource/thread:
https://xenforo.com/community/resou...cator-looks-best-on-rounded-avatars-1-1.3464/
and
https://xenforo.com/community/threads/rounded-avatar.50396/

thanks
 
For Elegance 1: style properties -> general. Check option "enable rounded avatars"

For Elegance 2: style properties -> message layout -> avatar. Set border radius to 50%. Then add this to extra.css
Code:
.avatar img, .avatar .img, .avatarCropper { border-radius: 50%; }
I'll add an option for rounded avatars for next version.
 
Thank you :)

Here is the result:
6cb51fa0d0935b7723a3fe742532f514.gif


But in the Avatar editor the rounded style is not so good. How to fixed it?

679dc5a6eaa10b18c2075ae84b64f3f2.png
 
Code is a bit more complex, so while that should be enough for now, I recommend to wait for next update.

In upcoming version I've added option for rounded avatars and option for animated online indicator. Online indicator code is based on that tutorial, but with many changes. Code uses style's color palette instead of predefined colors, automatically adjusts location based on avatar size and radius, you can put online indicator in any corner (top/left, top/right, bottom/left, bottom/right), it also changes position for mobile devices and horizontal profile layout option.
 
Code is a bit more complex, so while that should be enough for now, I recommend to wait for next update.

In upcoming version I've added option for rounded avatars and option for animated online indicator. Online indicator code is based on that tutorial, but with many changes. Code uses style's color palette instead of predefined colors, automatically adjusts location based on avatar size and radius, you can put online indicator in any corner (top/left, top/right, bottom/left, bottom/right), it also changes position for mobile devices and horizontal profile layout option.
Thank you :)
 
Arty updated Elegance with a new update entry:

Rounded avatars, animated online indicator, bug fixes

Both Elegance v1 and Elegance v2 have been updated.

Changes for Elegance 2:
  • New option: rounded avatars. You can find it in style properties -> message layout.
  • New option: animated online indicator. You can find it in style properties -> message layout. You can configure where to display it relative to avatar: top left, top right, bottom left or bottom right. It works well with rounded avatars.
  • Several new options for alternative navigation layout.
  • Many small bug fixes....

Read the rest of this update entry...
 
It seems like the position placement is still an issue with the new update. I'll PM you a link to my forum so that you can see what's happening.
 
Looks fine to me.

Problem is it isn't safe to move navigation until entire page has loaded, so before everything has loaded script won't move navigation. On that page there are several large images and youtube script that cause loading delay. Wait 2-3 seconds until page loaded.
 
Arty updated Elegance with a new update entry:

Update for GFN Classifieds, AMS and XenPorta2, XenAtendo2 add-ons support

Changes:
  • Support for latest version of GFN Classifieds add-on
  • Support for latest version of Article Management System add-on
  • Support for latest versions of XenPorta2 Pro and XenAtendo 2 Pro add-ons
If you are not using any of those add-ons, no need to update style.

To update style from previous version import new XML file. Other files were not changed.

Read the rest of this update entry...
 
Hi @Arty - Lovely theme.
But I always like my themes to have the navigation bar stretch to the whole page width, what one may call a top covered style. Can that be achieved with this theme or any of your themes. Thanks
 
Hi @Arty - Lovely theme.
But I always like my themes to have the navigation bar stretch to the whole page width, what one may call a top covered style. Can that be achieved with this theme or any of your themes. Thanks
Yes, there is an option for that in Elegance 2. But in Elegance 1 there is no such option.

To enable it in Elegance 2, first you need to switch to standard navigation: style properties -> alternative navigation -> enable alternative navigation (uncheck it)

Then you need to enable option to stretch navigation: style properties -> header and navigation -> scale navigation from left to right side of window (check it)

However now that I've re-checked that option to make sure it works, I've noticed minor bug with it - background outside of pageWidth area doesn't include gradient. To fix that minor error add this to extra.css
Code:
  .primaryNavigationWrapper
   {
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
   }
I'll fix that properly in next update.
 
  • Like
Reactions: vij
Yes, there is an option for that in Elegance 2. But in Elegance 1 there is no such option.

To enable it in Elegance 2, first you need to switch to standard navigation: style properties -> alternative navigation -> enable alternative navigation (uncheck it)

Then you need to enable option to stretch navigation: style properties -> header and navigation -> scale navigation from left to right side of window (check it)

However now that I've re-checked that option to make sure it works, I've noticed minor bug with it - background outside of pageWidth area doesn't include gradient. To fix that minor error add this to extra.css
Code:
  .primaryNavigationWrapper
   {
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
   }
I'll fix that properly in next update.
That does it. I am buying this!
 
Top Bottom