[For 1.8] ColorFul Theme - Postbit Author details like inlobos

[Mastersly]

THEME:https://community.mybb.com/thread-228326.html

Hello everyone,
If you are using ColorFul Theme you have notice that author details looks different in postbit,

It look like this


Use the following tutorial if you want to look like this (Only in postbit classic




1ownload the following image and create some userbars


2:Go
ACP>>Templates and style>>Templates>>Colorful Templates>>Postbit>>postbit_author_user
and replace everything with this

<div class="post-row-dlts">
<div class="post-icon-dlts"><i class="fa fa-user"></i></div>
<div class="post-row-inner-dlts"><span style="float: left">Member for:</span> <span style="float: right">
<if $post['regdate']+(60*60*24*1095) <= TIME_NOW then><span style="color: #FF0040;">4 Years of Service</span>
<elseif $post['regdate']+(60*60*24*1095) <= TIME_NOW then><span style="color: #FF0080;">3 Years</span>
<elseif $post['regdate']+(60*60*24*730) <= TIME_NOW then><span  style="color: #FF00BF;">2 Years</span>
<elseif $post['regdate']+(60*60*24*365) <= TIME_NOW then><span  style="color: #FF00FF;">1 Year</span>
<elseif $post['regdate']+(60*60*24*330) <= TIME_NOW then><span  style="color: #0080FF;">11 Months</span>
<elseif $post['regdate']+(60*60*24*300) <= TIME_NOW then><span  style="color: #00FFFF;">10 Months</span>
<elseif $post['regdate']+(60*60*24*270) <= TIME_NOW then><span  style="color: #00FF80;">9 Months</span>
<elseif $post['regdate']+(60*60*24*240) <= TIME_NOW then><span  style="color: #00FF00;">8 Months</span>
<elseif $post['regdate']+(60*60*24*210) <= TIME_NOW then><span  style="color: #FF4000;">7 Months</span>
<elseif $post['regdate']+(60*60*24*180) <= TIME_NOW then><span  style="color: #FF8000;">6 Months</span>
<elseif $post['regdate']+(60*60*24*150) <= TIME_NOW then><span  style="color: #FFBF00;">5 Months</span>
<elseif $post['regdate']+(60*60*24*120) <= TIME_NOW then><span  style="color: #aaa;">4 Months</span>
<elseif $post['regdate']+(60*60*24*90) <= TIME_NOW then><span style="color: #aaa;">3 Months</span>
<elseif $post['regdate']+(60*60*24*60) <= TIME_NOW then><span  style="color: #aaa;">2 Months</span>
<elseif $post['regdate']+(60*60*24*30) <= TIME_NOW then><span  style="color: #aaa;">1 Month</span>
<elseif $post['regdate']+(60*60*24*21) <= TIME_NOW then><span  style="color: #aaa;">3 Weeks</span>
<elseif $post['regdate']+(60*60*24*14) <= TIME_NOW then><span  style="color: #aaa;">2 Weeks</span>
<elseif $post['regdate']+(60*60*24*7) <= TIME_NOW then><span  style="color: #aaa;">1 Week</span>
<elseif $post['regdate']+(60*60*24*6) <= TIME_NOW then><span  style="color: #aaa;">6 days</span>
<elseif $post['regdate']+(60*60*24*5) <= TIME_NOW then><span  style="color: #aaa;">5 days</span>
<elseif $post['regdate']+(60*60*24*4) <= TIME_NOW then><span  style="color: #aaa;">4 days</span>
<elseif $post['regdate']+(60*60*24*3) <= TIME_NOW then><span  style="color: #aaa;">3 days</span>
<elseif $post['regdate']+(60*60*24*2) <= TIME_NOW then><span  style="color: #aaa;">2 days</span>
<elseif $post['regdate']+(60*60*24*1) <= TIME_NOW then><span  style="color: #aaa;">1 day</span>
<elseif $post['regdate']+(60*60*24*0) <= TIME_NOW then><span  style="color: #aaa;">Few hours</span></if>
</span><br /></div>
</div>

<div class="post-row-dlts">
<div class="post-icon-dlts"><i class="fa fa-book"></i></div>
<div class="post-row-inner-dlts"><span style="float: left">{$lang->postbit_threads}</span> <span style="float: right"><a href="/search.php?action=finduserthreads&uid={$post['uid']}">{$post['threadnum']}</a></span><br /></div>
</div>

<div class="post-row-dlts">
<div class="post-icon-dlts"><i class="fa fa-comments"></i></div>
<div class="post-row-inner-dlts"><span style="float: left">{$lang->postbit_posts}</span> <span style="float: right"><a href="/search.php?action=finduser&uid={$post['uid']}">{$post['postnum']}</a></span><br /></div>
</div>

3:Go
ACP>>Templates and style>>Templates>>Colorful Templates>>Postbit>>postbit_classic
and replace everything with this

{$ignore_bit}{$deleted_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="d-flex mobile-postbit-classic">
<div class="post_author scaleimages">

<!-- POSTBIT CLASSIC BACKGROUND -->
<if $post['fid6'] then>
<div class="Postbitclas-Bg-image" style="background-image: url({$post['fid6']});"></div>
<else>
</if>
<!-- POSTBIT CLASSIC BACKGROUND -->


{$post['onlinestatus']}
<br>
 <div class="postbit-classic-stars">{$post['userstars']}</div>
 <div class="author_avatar">{$post['useravatar']}</div>
<strong><center><span class="largetext">{$post['profilelink']}{$post['newpoints_shop_items']}</span></center></strong> 

<!-- AUTHRO INFORMATIONS -->
 <div class="author_information">
 <span class="smalltext">

<!-- REP AND LIKES -->
<div class="d-flex"><div class="post-stat"><span class="largetext"><a href="reputation.php?uid={$uid}"><strong class="reputation_positive">{$post['replink']}</strong></a></span><br>
<span class="x-smalltext text-uppercase">Rep</span></div>
<div class="post-sta2t"><span class="largetext">
<strong class="<if ($post['tyl_unumrcvtyls'] > 0) then>reputation_positive</if>
<if ($post['tyl_unumrcvtyls'] == 0) then>reputation_neutral</if>
<if ($post['tyl_unumrcvtyls'] < 0) then>reputation_negitive</if>">
{$post['tyl_unumrcvtyls']}
</strong>
</span><br>
<span class="x-smalltext text-uppercase">Likes</span></div>
</div>
<!-- REP AND LIKES -->

<!-- USERTITLE -->
<div class="Usertittle-postbitclassic"><span class="title_numb_{$usergroup['gid']}">{$post['usertitle']}</span></div>
 <!-- USERTITLE --> 
 </span>
 </div>
<!-- AUTHRO INFORMATIONS -->


<!-- GROUP IMAGE -->
 <div class="groupimage-postbitclassic">{$post['groupimage']}</div>
<!-- GROUP IMAGE -->

<!-- USERS-DETAILS-CLASSIC -->
<div class="postclas-userdtls">


<div class="user-postbitclassic-details">
{$post['user_details']}
{$post['profilefield']}

<center>{$post['ougc_awards']}</center>
</div>

 </div>



<!-- USERS-DETAILS-CLASSIC -->



</div>
<div class="post_content">
 <div class="post_head">
 {$post['posturl']}
 {$post['icon']}
 <span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
 {$post['subject_extra']}
 </div>
 <div class="post_body scaleimages" id="pid_{$post['pid']}">
 {$post['message']}
 </div>
 {$post['attachments']}
 {$post['signature']}
 <div class="post_meta" id="post_meta_{$post['pid']}">
 {$post['iplogged']}
 <div class="float_right">
 {$post['poststatus']}
 </div>
 </div>
 {$post['input_editreason']}
</div>

 </div>
<div style="{$post['tyl_display']}" id="tyl_{$post['pid']}">{$post['thankyoulike_data']}</div>
<div class="post_controls">
 <div class="postbit_buttons author_buttons float_left">
 {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
 </div>
 <div class="postbit_buttons post_management_buttons float_right">
 {$post['button_tyl']}{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_mention']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
 </div>
</div>
</div>

GO
ACP>>Templates and styles>>Themes>>Colorful Theme>> custom.css
and add this

.post-row-dlts{display: flex;background: #242424;align-items: center;margin: 2px 8px;border-radius: 2px;width: 90%;}
.post-icon-dlts{padding: 9px; background: #1c1c1c; margin-right: .1rem; border-radius: 2px 0 0 2px;}
.post-row-inner-dlts{padding: 5px; width: 100%;}
.groupimage-postbitclassic img{position: relative;width: 192px;z-index: 3;}
.postclas-userdtls {position: relative;top: -39px;z-index: 1;}

Find this

.user-postbitclassic-details{background-color: #1c1c1c;width: 160px;margin: auto auto;border-top: 2px solid #333030;border-bottom: 2px solid #272727;border-left: 2px solid #272727;border-right: 2px solid #272727;margin-bottom: 10px;}

and replace with this

.user-postbitclassic-details{width: 185px;margin: auto auto;}

[Crazycat]

Note that your tutorial requires the usage of conditionnal templates plugin. And someone made "age of service" in plugin version, you'd better use it.

[PARADOX987]

does it work with mybb default theme?

[Eldenroot]

You should replace image by css solution

[Mastersly]

You should replace image by css solution

I want to give them an image so they can edit it and make an userbar

[lkop]

thank you for the contribute.

anyone tried this on default mybb theme?