[For 1.8] Default guest avatar + Hover Effect
#1
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


Attached Files Thumbnail(s)
   
Reply
#2
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).
Reply
#3
(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> 
Reply
#4
(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.
Reply
#5
(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
Reply
#6
(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.
Reply
#7
this tutorial is only valid for visitors
Our New Theme Published =  click to download
Reply
#8
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
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#9
Thank you Eldenroot!
Thank you for sharing. I took it over for our forum Cool
blongso
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)