Hi Márcio,

You can use one container hidden or not regarding the highest grade with the image of the crown and use css to make this container stay where you want to using"position: absolute" and then playing with the margins. 

Hope this helps !

Hi Marcio,

You can use "the little crown" in a container in the position that you want and, in the Container display property define when that appears:

Something like this example.

Hope this can help.

Regards,

Ricardo

Consider the following layout:

• A container widget with CSS class "PictureContainer" that inside has:
  • an image widget (for the profile picture) and,
  • another container widget with CSS class "Crown" that inside has:
    • another image widget (for the crown).

Adding to what has been said before:

1. first you need to be able to calculate what's the highest grade, of course (you can make use of the Max() aggregation function)
2. In order to decide when to display the crown you can:
   1. use an If widget around the crown container widget, with a condition that checks whether the user has the highest grade or not;
   2. fill the Display property of the "Crown" container with a checks on whether the user has the highest grade or not;
3. you will need to use CSS to specify where to display it:
   • on class .PictureContainer specify the following properties:
     • position: relative;
   • on class .Crown specify the following properties:
     • position: absolute;
     • top: YY;
     • left: XX;

where YY and XX are in pixels and represent the position relative to the top-left corner of the PictureContainer container and will need to be determined by trial-and-error to place the crown image at the right place.

You can see more information about CSS positioning here, here or here (a quick search on google will find plenty more)

Thanks a lot! You were very helpful.