XF 2.2 How to get avatar rounded but not resource icons ?

[Nicolas FR]

Hello,

Is there a way to avoid this ?
When i put 50px radius in avatar settings, resources avatar are rounded too...

Thanks !

 

[Paul B]

Use the extra.less template to set a different radius for avatars on resource pages.

[data-type="resource"]
{
    .avatar
    {
        border-radius: 10px;
    }
}

You will likely need additional selectors, depending on which elements you want to target.

 

[Nicolas FR]

Thanks Brogan,

This code works for .avatar 48x48 but i can't find what code for others sizes.

depending on which elements you want to target.

All sizes i want to target.
I tried .avatar.avatar-m or .avatar-m in the same code for example but without success, any idea ?

i tried this too

[data-type="resource"]
{
    .avatar
    {border-radius: 2px;}
    & .avatar--m
    {border-radius: 2px;}
    & .avatar--xxs
    {border-radius: 2px;}
}

 

[Paul B]

A screenshot of the areas you are referring to would help.

 

[Nicolas FR]

Simply the resources page :

• resources list
• top resource
• carousel

Ressources Web | <b>Documentation</b>

cocoriweb.community

 

[Nicolas FR]

Simply the resources page :

• resources list
• top resource
• carousel

Ressources Web | <b>Documentation</b>

cocoriweb.community

 

[Paul B]

None of those are covered by [data-type="resource"] which is why I said "You will likely need additional selectors, depending on which elements you want to target.".

Use the browser inspector (F12) to inspect the page to determine what selectors you need to use.

For the carousel for example you can use [data-xf-init="carousel"] which would then make the code:

[data-type="resource"],
[data-xf-init="carousel"]
{
    .avatar
    {
        border-radius: 10px;
    }
}

Or you could do it based on the template name, instead of data.

 

[Nicolas FR]

Oh ok, selectors are the place where are displayed avatars, i thought selectors are .avatar, .avatar-m, etc...
Thanks, i will try.