MyBB Community Forums
[For 1.8] Default guest avatar + Hover Effect - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] Default guest avatar + Hover Effect (/thread-220611.html)



Default guest avatar + Hover Effect - Anka06 - 2018-11-09

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


RE: Default guest avatar + Hover Effect - Omar G. - 2018-11-09

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).


RE: Default guest avatar + Hover Effect - Anka06 - 2018-11-10

(2018-11-09, 04:51 PM)Omar G. Wrote: 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> 



RE: Default guest avatar + Hover Effect - Diamante - 2018-12-22

(2018-11-10, 01:34 PM)Anka06 Wrote:
<div class="dfavatar-box">{$mybb->user['avatar']}</div> 

Hi.

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


RE: Default guest avatar + Hover Effect - WallBB - 2018-12-22

(2018-12-22, 02:29 AM)Diamante Wrote:
(2018-11-10, 01:34 PM)Anka06 Wrote:
<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


RE: Default guest avatar + Hover Effect - Diamante - 2018-12-22

(2018-12-22, 06:35 AM)WallBB Wrote: Here you go
https://community.mybb.com/thread-166660.html

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

Thanks.


RE: Default guest avatar + Hover Effect - Anka06 - 2018-12-23

this tutorial is only valid for visitors


RE: Default guest avatar + Hover Effect - Eldenroot - 2019-01-02

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) Smile


RE: Default guest avatar + Hover Effect - blongso - 2020-03-05

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