[For 1.8] Default guest avatar + Hover Effect

[Anka06]

Global.css Add

.dfavatar-box {
    border-radius: 50%;
    overflow: hidden;
    margin-top: -22px;
    margin-right: 15px;
    background: #fff url('images/default_avatar.png') no-repeat;
    background-size: 100% auto;
    float: left;
    width: 35px;
    height: 35px;
    border: 6px solid #111;
}

.dfavatar-box:hover {
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -moz-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    transform: rotate(720deg)
}

header_welcomeblock_guest Add To Top

<div class="dfavatar-box"></div> 

wiev
https://imgur.com/a/RxKOmVd

[Omar G.]

Thank you for your contribution. As a suggestion, I would add how to display this for all registered users too (don't forget users without avatars).

[Anka06]

Thank you for your contribution. As a suggestion, I would add how to display this for all registered users too (don't forget users without avatars).

Thanks can be this way

<div class="dfavatar-box">{$mybb->user['avatar']}</div> 

[Diamante]

<div class="dfavatar-box">{$mybb->user['avatar']}</div> 

Hi.

Did not work. The circle appears without the avatar user.

[WallBB]

<div class="dfavatar-box">{$mybb->user['avatar']}</div> 

Hi.

Did not work. The circle appears without the avatar user.

Here you go
https://community.mybb.com/thread-166660.html

@OP: Modify your tutorial as this will cause above blank image issue

[Diamante]

Here you go
https://community.mybb.com/thread-166660.html

@OP: Modify your tutorial as this will cause above blank image issue

Thanks.

[Anka06]

this tutorial is only valid for visitors

[Eldenroot]

I use something like that:

Header_welcomeblock_member template -> add this:

<a href="{$mybb->settings['bburl']}/usercp.php"><img class="header_avatar" src="{$mybb->user['avatar']}" /></a>

at the end of header_welcomeblock_member template add this:

<script>
$(document).ready(function() {
//create a default avatar for those without one.
if($('.header_avatar img', this).attr('src') == ''){
$('.header_avatar img').attr('src', "images/default_avatar.png");
}
});
</script>

and into global.css add this:

.header_avatar {
    padding: 1px;
    height: 32px !important;
    width: 32px !important;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    border: 1px solid #ccc;
    float: left;
    background-color: #fff;
    margin-top: -6px;
}

.header_avatar:hover {
	border: 1px solid #0072BC;
}

Save and hard refresh your web browser cache (Ctrl+F5)

[blongso]

Thank you Eldenroot!
Thank you for sharing. I took it over for our forum
blongso