To render user data we use our Content Plugin (docs at https://www.easy-profile.com/docs/26-plugin-content.html) on simple Custom HTML module*

to see avatar we use {user avatar_mini}
to see name {user name}
and last visit date {user lastvisitdate}

Plugin to render subscription status is provided by other subscription component

All buttons are simple links. Logout button has this link index.php?option=com_users&task=user.logout, normally this not work because Joomla check Tokens before do logout action, to do this we have edit a core Joomla file.

* To trigger content plugins you need to enable "Prepare Content" paramter in module options

NOTE: I'd like to be more precise, but unfortunately this component (forum) after the update not display more HTML tags, we hope to solve soon. original post (with HTML code) was here https://www.easy-profile.com/support/i-would-like-to-make-the-login-logout-module-look-like-yours.html#reply-6132

Hi,

I get already the avatar, but it is big and not round.
How do i get it round?

Regards, Mark

Hi,
sorry for late reply.

BIG
when you use {user avatar_mini} the system load avatar thumbs without styles, so you need to add some CSS rule to fit your image

ROUND
Easy Profile not apply any style, it use Bootstrap Classes. Avatar image have as default CSS classes these:
- avatar - this become from alias of field, for example if you create a image field with alias "testimage" than this image will have "testimage" class
- img-circle - this become from paramter Class attribute into field paramters, for avatar field is a default value (see screenshot)

img-circle is a standard bootstrap class that make rounded your image, so I think in your CSS fields missing this class.

Anyway, please post me your site link, we will send you CSS code to add at your site

Thanks for your answer.
In the profile page and userlist page are images round.
But i need to know acxactly the css code and where to put this for the module at the right site of your website with the loged in user. That image is not round at the moment.

Als this image is the bigone in steat of the thumbnail one.

my site is still in state of build. so i set offline the site for visitors.

Regards, Mark

And if i use {user avatar_mini} in de module for the FrontPage on the right side, then the image is less clear, but still as big as when i show {user avatar} avatar.
So it seems that the full size is still shown but with the thumbnail image in it.

Look at the attachment.

Hi,

And if i use {user avatar_mini} in de module for the FrontPage on the right side, then the image is less clear, but still as big as when i show {user avatar} avatar.

This because the size of image depends of your CSS style, for example many templates have this CSS rule:
img{max-width:100%}
or
img{width:100%}

so small and big image will have same size in your layout.


You can simply add these Rule for example
Size
.your-module-container img.avatar{width:60px;}

Round
img.img-circle{border-radius:1000px;}

To tell you exactly what we should see your add, all depends on your template.

Hi,

I cant find it. So i put the css file of my template as attachment.
Maybe you can do this for me?

Thank you for your help...

Regards,
Mark

Hi,

I have almost done it. Only the image stays big. I can get it small.
In the attachment you see how the module now is.

Question:
Is the modulecontainer the name of the module this the picture contains?
So:
.your-module-container img.avatar{width:60px;}

which ".your-module-contnainer" becomes: ".Gebruiker-online img.avatar{width:60px}


How do i get the image more small?

regards,
Mark

Hi,
you can choose size of image by CSS so you can change example from 60px to 40px or what you prefer

Is the modulecontainer the name of the module this the picture contains?

No, this depends on your template and on module parameter Advanced->Menu Class Suffix. You can also use Right Side CSS identifiers, but also this depends on your template.

To help you we need to see your site

Hi,

Well thank you for your support.
I did solve the large image problem.
But actually it isn't round anymore now.
Now its 50px, but it's normal not round.

So what do i have to do to combine those two?


Regards, Mark

Hi,

It is done now. It works.

Thank you very much for your support.

Regards,
Mark