Default avatar on the profile button.

Default avatar on the profile button. Started by Ruth · February 20, 2018, 03:44:05 am · Read 4258 times 0 Members and 2 Guests are viewing this topic. previous topic - next topic

Default avatar on the profile button.

February 20, 2018, 03:44:05 am

Hi!

I am using own default avatars in my themes.

I registerd a test-account in my testforum right now. In the profile summary and everywhere in forum and portal the default avatar for this theme is displayed, but there is no "small version" of this default avatar on the profile button. This button shows the small SVG-Icon for profile:

This will change, if the User is choosing or uploading an own avatar, even in the mobile view:

I would like, that the default avatar is displayd on the profile button too, without any changing of the avatar in the forum profile.

I did not dare to change anything about this in the css-files, because I got already a mess about the mobile view of the main menue and the SVG-icons in my theme.

So I just want to know, if this behavior of the default avatar on the profile button is okay...or maybe a bug?

Re: Default avatar on the profile button.

Reply #1 – February 20, 2018, 07:19:46 am

It is the default behaviour indeed: the button shows the avatar of the user, if the user doesn't have an avatar and the "use default avatar" is set in the option, then the default is used.

If you want to override this behaviour and always show the default one, I think something like this in your custom.css should work:

Code: [Select]

.i-account::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23555555' stroke-width='.07em' fill='white' viewBox='0 0 32 32'%3E%3Cpath d='M25.143 25.09q0 2.142-1.304 3.383t-3.466 1.24H4.768q-2.16 0-3.464-1.24T0 25.09q0-.947.063-1.85t.25-1.945.473-1.938.768-1.74T2.66 16.17t1.528-.955 1.99-.357q.162 0 .75.384t1.33.857 1.93.855 2.384.384 2.384-.385 1.93-.857 1.33-.858.75-.384q1.088 0 1.99.357t1.527.955 1.107 1.446.768 1.74.473 1.94.25 1.945.065 1.85zM19.43 9.142q0 2.84-2.01 4.848T12.572 16t-4.848-2.01-2.01-4.847 2.01-4.848 4.848-2.01 4.848 2.01 2.01 4.848z'/%3E%3C/svg%3E") !important;
    background-image: none !important;
}

and, if you want to be specific and target only the menu and not risk, use something like:

Code: [Select]

#main_menu .i-account::before {

for the selector.

Re: Default avatar on the profile button.

Reply #2 – February 21, 2018, 05:09:42 am

Thank you very much, Emanuele.

I tried both, but nothing happened with this code.

I tried several other things, some I cannot remember at all, with results like this:

I have already this in my custom.css for the user avatars on the profile buttons:

Code: [Select]

.i-account:before {
    display: block;
    width: 2.2em;
    height: 2.2em;
    background: no-repeat center;
    background-size: contain;
    margin: -3px 0 0 -4px;
    top: -7px;
    left: -3px;
    position: relative;
    float: left;
    margin-right: 0.8em;
}

So I tried this for the default avatar, which is looking as I want it, but than every user

will get the default avatar on the profile button:

Code: [Select]

#main_menu .i-account::before {
    content: "";
    background-image: url(../../images/default_avatar.png);
}

At the moment I have this, it is working for both kind of avatars, but the default avatar looks much to small:

Code: [Select]


#main_menu .i-account {
background-image: url(../../images/default_avatar.png);
display: inline-block;
background-repeat: no-repeat;
padding-bottom: 5px;
background-size: contain;
}
#main_menu .i-account::before { content:"";}

If I change something about the size of the default avatar, the profile button will get to much height or the user avatar will not "overlay" the default avatar or something else is happening, which is looking ugly.

I also have tried to display nothing on the profile button, if someone is using the default avatar. But than there will be an "empty place" on the profile button on the left side.

This button should get shorter without an avatar.

Maybe this would be the best solution...but I don't know, how to do it.

Re: Default avatar on the profile button.

Reply #3 – February 21, 2018, 12:50:07 pm

I'm now a little lost about what you actually want to obtain...

Re: Default avatar on the profile button.

Reply #4 – February 21, 2018, 06:45:57 pm

Sorry Emanuele, it is very difficult to explain for me.

I want to change the small SVG-Icon on the profile button to default_avatar.png
The default avatar should have the same size as an user avatar.
An user avatar is looking like this on the profile button in our themes:

I don't like this results for the default avatar:

The default avatar on the profile button should look like this:

If this is not possible, the profile button should show nothing until the user has selected an own avatar:

But than the profile button should not look like this:

Re: Default avatar on the profile button.

Reply #5 – February 22, 2018, 06:08:18 am

I tried some other things, but they were all not working .

So I will stay with this one in my custom.css:

Code: [Select]

#main_menu .i-account {
background-image: url(../../images/default_avatar.png);
display: inline-block;
background-repeat: no-repeat;
padding-bottom: 5px;
background-size: contain;
}
#main_menu .i-account::before { content:"";}

It is working "somehow" for both kinds of avatars and the default avatar is looking okay with this in the mobile view.

Most people are using their own avatar anyway....or I can change their profiles and select the default avatar for a proper display on the "normal" profile button. It is not this important.

Re: Default avatar on the profile button.

Reply #6 – February 22, 2018, 05:37:11 pm

Okay, that makes sense, I think I was just mislead by the "own" in your first sentence, no problem.

Have you re-built your theme based on 1.1 default?
If so it seems you are missing some css definitions... who knows.
Anyway, I see now you have changed the style again, somehow based on what I think it should be the baseline of your theme, I would do something like that:

Code: [Select]

#main_menu i-account {
    display: none;
}
#button_profile a:before {
    content: "";
    background-image: url(../../images/theme/default_avatar.png) !important;
    width: 32px;
}

That works on my test account.
Or at least I think it works the way you would expect it to work.

Re: Default avatar on the profile button.

Reply #7 – February 22, 2018, 05:44:20 pm

QuoteHave you re-built your theme based on 1.1 default?

Yes, I have tried to do this, Emanuele.

Thank you for the code....I will try it.

Edit:

It is not working...The SVG-Icon will stay and the profile button is getting too much width.

I had changed a lot in my custom.css for 1.1.1 , so maybe there are other reasons, why it does not work,

Re: Default avatar on the profile button.

Reply #8 – February 23, 2018, 04:39:33 am

Oh yes, I added a display: inline-block somewhere in addition to the above, but I forgot to report it...
I'll see this evening if I can reproduce the result.

Re: Default avatar on the profile button.

Reply #9 – February 24, 2018, 12:35:47 am

I tried it again, based on your code, Emanuele....and some other things. Different results, but none of them looked or worked the way I want it.

It seems to me, that there is - maybe just in my theme with its "special" main menu - no good possibilty, to show both kinds of avatars really nice (or to show both of them at all). The profile button will get to much width or height or this button will look ugly in the mobile view (even with an user avatar) if the profile button is looking good with the default avatar.

I also noticed now, that the default avatar is missing, if you look at the topics in a board. I did not see this before, because everywhere else in forum and portal the default avatar is displayed:

So I don't want to bother you with this changing of this SVG-icon. It is much too difficult and too much work and spoiled time on it - and really not this important.

I can give new registerd users without an avatar the default avatar in their profiles, it is just one click - and than the default avatar will be displayd in the boards and on the profile button as proper like an user avatar.