2018-10-04, 10:38 AM
What you will end up with.
Open Templates > Your theme > Reputation Templates > reputation
Copy & paste this.
Open Templates > Your theme > Reputation Templates > reputation_vote
Copy & paste this.
Add this in Themes > Your theme > Global.css
Note: I am not sure of the correct avatar variable so it shows the avatar of who evers reputation page it is in the top right.
Original time line code from here
https://bootsnipp.com/snippets/featured/...gle-column
Open Templates > Your theme > Reputation Templates > reputation
Copy & paste this.
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->reputation_report}</title>
{$headerinclude}
<script type="text/javascript">
<!--
var delete_reputation_confirm = "{$lang->delete_reputation_confirm}";
// -->
</script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
{$add_reputation}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear">
<tr>
<td class="thead"><strong>{$lang->reputation_report}</strong></td>
</tr>
<tr>
<td class="tcat"><strong>{$lang->summary}</strong></td>
</tr>
<tr>
<td class="trow1">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<span class="largetext"><strong>{$username}</strong></span><br />
<span class="smalltext">
({$usertitle})<br />
<br />
<strong>{$lang->total_reputation}:</strong> <span class="repbox {$total_class}">{$rep_total}</span><br /><br />
<strong>{$lang->reputation_members} {$rep_members}</strong><br />
<strong>{$lang->reputation_posts} {$rep_posts}</strong>
</span>
</td>
<td align="right">
<img style="margin-top: 1em; margin-right: 1em;position: relative;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); height: 100px; width: 100px;" src="{$mybb->user['avatar']}" alt="{$mybb->user['username']}'s avatar" title="{$mybb->user['username']}'s avatar" />
</td>
</tr>
</table> <br />
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder trow2">
<tr>
<td> </td>
<td><span class="smalltext reputation_positive">{$lang->positive_count}</span></td>
<td><span class="smalltext reputation_neutral">{$lang->neutral_count}</span></td>
<td><span class="smalltext reputation_negative">{$lang->negative_count}</span></td>
</tr>
<tr>
<td><span class="smalltext">{$lang->last_week}</span></td>
<td><span class="smalltext">{$f_positive_week}</span></td>
<td><span class="smalltext">{$f_neutral_week}</span></td>
<td><span class="smalltext">{$f_negative_week}</span></td>
</tr>
<tr>
<td><span class="smalltext">{$lang->last_month}</span></td>
<td><span class="smalltext">{$f_positive_month}</span></td>
<td><span class="smalltext">{$f_neutral_month}</span></td>
<td><span class="smalltext">{$f_negative_month}</span></td>
</tr>
<tr>
<td><span class="smalltext">{$lang->last_6months}</span></td>
<td><span class="smalltext">{$f_positive_6months}</span></td>
<td><span class="smalltext">{$f_neutral_6months}</span></td>
<td><span class="smalltext">{$f_negative_6months}</span></td>
</tr>
<tr>
<td><span class="smalltext">{$lang->all_time}</span></td>
<td><span class="smalltext">{$f_positive_count}</span></td>
<td><span class="smalltext">{$f_neutral_count}</span></td>
<td><span class="smalltext">{$f_negative_count}</span></td>
</tr>
</table> <br />
<div>{$reputation_votes} </div>
</td>
</tr>
</table>
{$multipage}
{$footer}
</body>
</html>
Open Templates > Your theme > Reputation Templates > reputation_vote
Copy & paste this.
<div class="container">
<div class="row">
</div>
<div class="qa-message-list" id="wallmessages">
<div class="message-item" id="m16">
<div class="message-inner">
<div class="qa-message-content">
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="middle" width="1">
<img style="position: relative;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); height: 50px; width: 50px;" src="{$mybb->user['avatar']}" alt="{$mybb->user['username']}'s avatar" title="{$mybb->user['username']}'s avatar" />
</td>
<td valign="middle">
<div style="padding:10px;" class="trow1 {$status_class}" id="rid{$reputation_vote['rid']}">
{$report_link}{$delete_link}
{$reputation_vote['username']} <span class="smalltext">{$reputation_vote['user_reputation']} - {$last_updated}<br />{$postrep_given}</span>
<br /><strong class="{$vote_type_class}">{$vote_type} {$vote_reputation}:</strong> {$reputation_vote['comments']}
</div>
</td>
</tr>
</table>
</div>
</div></div>
</div>
</div>
Add this in Themes > Your theme > Global.css
.message-item {
margin-bottom: 25px;
margin-left: 40px;
position: relative;
}
.message-item .message-inner {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px;
position: relative;
}
.message-item .message-inner:before {
border-right: 10px solid #ddd;
border-style: solid;
border-width: 10px;
color: rgba(0,0,0,0);
content: "";
display: block;
height: 0;
position: absolute;
left: -20px;
top: 6px;
width: 0;
}
.message-item .message-inner:after {
border-right: 10px solid #fff;
border-style: solid;
border-width: 10px;
color: rgba(0,0,0,0);
content: "";
display: block;
height: 0;
position: absolute;
left: -18px;
top: 6px;
width: 0;
}
.message-item:before {
background: #fff;
border-radius: 2px;
bottom: -30px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
content: "";
height: 100%;
left: -30px;
position: absolute;
width: 3px;
}
.message-item:after {
background: #fff;
border: 2px solid #ccc;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
content: "";
height: 15px;
left: -36px;
position: absolute;
top: 10px;
width: 15px;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.message-item .message-head {
border-bottom: 1px solid #eee;
margin-bottom: 8px;
padding-bottom: 8px;
}
.message-item .message-head .avatar {
margin-right: 20px;
}
.message-item .message-head .user-detail {
overflow: hidden;
}
.message-item .message-head .user-detail h5 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.message-item .message-head .post-meta {
float: left;
padding: 0 15px 0 0;
}
.message-item .message-head .post-meta >div {
color: #333;
font-weight: bold;
text-align: right;
}
.post-meta > div {
color: #777;
font-size: 12px;
line-height: 22px;
}
.message-item .message-head .post-meta >div {
color: #333;
font-weight: bold;
text-align: right;
}
.post-meta > div {
color: #777;
font-size: 12px;
line-height: 22px;
}
Note: I am not sure of the correct avatar variable so it shows the avatar of who evers reputation page it is in the top right.
Original time line code from here
https://bootsnipp.com/snippets/featured/...gle-column