UserProfile on the side

[mastersly]

Preview​

[align=center]

Plugin required:Template Conditionals


[hide=4]
Go
ACP >> Templates and style >> Themes >> YOUR THEME >> Global.css
add this

.userboxtraincolortext{color: #bdb1b1!important;font-size: 17px;}
.welcomebrobox {
? ? box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
? ? background-color: #202020!important;
? ? border-radius: 4px;
? ? border: 1px solid #1c1c1c;
}

.welcomebrobox .userbrodetail {
? ? align-items: center;
? ? padding: 12px;
? ? background-color: #242424;
? ? border-radius: 2px;
}
.d-flexwithtraincomming{display: flex;}

.welcomebrobox .statisticsboxss {
? ? padding: 14px 12px 12px;
? ? text-align: center;
}

.welcomebrobox .rankisheretrain {
? ? padding: 12px;
? ? text-align: center;
}

.flexcategtraincom {
? ? flex: 1;
? ? margin: 0 5px;
}

.welcomebrobox .userbrodetail img {
? ? width: 40px;
? ? height: 40px;
? ? border-radius: 50px;
}

.welcomebrobox .rankbrotrainbox {
? ? background-color: #272727;
? ? border-radius: 2px;
? ? box-shadow: 0 0 8px #1f1f1f;
? ? font-weight: 600;
? ? align-items: center;
? ? font-size: 12px;
? ? padding: 10px;
}

.welcomebrobox .userboxwithcredrcredits {
? ? margin-left: auto;
? ? font-weight: 600;
? ? padding-right: 8px;
? ? color: #cca83e;
? ? background-color: #2d2d2d;
? ? border-radius: 2px;
? ? box-shadow: 0 0 8px #232323;
? ? align-items: center;
}

.welcomebrobox .userboxwithcredrcredits i {
? ? font-size: 17px;
? ? margin-right: 5px;
? ? padding: 6px 10px;
? ? text-align: center;
? ? background-color: #2f2f2f;
}

Go
ACP >> Templates and styles >> Templates >> YOUR THEME >> Index Templates >> Index

<!-- BEGIN USEERBOX -->
<if $mybb->user['usergroup'] != 1 then>
<div class="welcomebrobox">
 <div class="d-flexwithtraincomming userbrodetail">
 <img src="{$mybb->user['avatar']}" onerror="this.src='/images/default_avatar.png';"> 

<div style="margin-left: 12px;">

 <div class="username"><span style="text-shadow: 1px 1px 1px #000;">{$mybb->user['username']}</span></div>
 <div class="usertitle"></div> 

</div>

 <div class="d-flexwithtraincomming userboxwithcredrcredits">
 <i class="fa fa-coins user-icon"></i> <span>{$mybb->user['newpoints']}</span>
 </div>
 </div>
 <div class="d-flexwithtraincomming statisticsboxss"> 
<div class="flexcategtraincom"> 

	<a class="userboxtraincolortext" href="reputation.php?uid={$mybb->user['uid']}">{$mybb->user['reputation']} </a>

<div class="title">Reputation</div> </div>
 <div class="flexcategtraincom"> 

<a class="userboxtraincolortext" href="search.php?action=finduserthreads&uid={$mybb->user['uid']}"> {$mybb->user['threadnum']} </a>

<div class="title">Threads</div> </div> 
<div class="flexcategtraincom">
<span class="userboxtraincolortext"> {$mybb->user['tyl_unumtyls']} </span><div class="title">Likes</div> </div> </div> 


<div class="d-flexwithtraincomming rankisheretrain"> <div class="d-flexwithtraincomming flexcategtraincom grey rankbrotrainbox"> <i class="fas fa-award"></i>  Current Rank: <span class="ml-auto ranktitle title-gid9" style="margin-right: 12px;">{$mybb->usergroup['title']}<br></span> </div> </div> </div>
	</if>
<!-- END USEERBOX -->

 

[Mariela]

Amazing tutorial! Thank you very much!

 

[0x27]

Great tutorial!

 

[Negative]

Interesting tutorial!

 

[denemecekelemene]

thanks!

 

[Mariela]

I was wondering.. is it possible to add a background image to that profile side? Let's say a member chooses his postbit background and it also appears in this side profile? Any idea?

 

[mastersly]

Yeah it can be done but need some changes to the code because postbit background doesnt fit there

 

[Mariela]

Ok thank you very much! I will play with the codes and see if I can adjust it. I will share here as soon as I manage to do that!

 

[Sobi]

Great Tut

 

[BrolySSJ]

Having a user profile on the site is a very good thing and i think that if it is on the side in a chat like this then you can see the experience of a member as well.