Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] - Font Awesome 5 Tabbed Forum Statistics (re-posted)
#1
Information 
Font Awesome 5 Tabbed Forum Statistics ** ( re-posted due to numerous user requests and complaints after I deleted my old tutorials. )

* originally posted as a response here: https://community.mybb.com/thread-217296...pid1303351


1 - Admin Cp - Themes & Styles - İndex Templates - index_boardstats
Replace all with:


<div class="statstabs tborder-statstabs">
<input type="radio" name="statstabs" id="tabone" checked="checked" />
<label for="tabone">
<i class="fas fa-globe whos_on"></i>
Who's Online
</label>
<div class="statstab">
<div style="margin-top:-5px;">
<h3>{$whosonline}</h3>
<br />
{$birthdays}
</div>
</div>
<input type="radio" name="statstabs" id="tabtwo" />
<label for="tabtwo">
<i class="fas fa-signal whos_statistic"></i>
Statistics
</label>
<div class="statstab">
<div style="margin-top:-5px;text-align:left;">
<i class="fas fa-envelope whos_posts"></i>
Total Posts
<span class="float_right">{$stats['numposts']}</span>
</div>
<div>
<i class="fas fa-comments whos_threads"></i>
Total Threads
<span class="float_right">{$stats['numthreads']}</span>
</div>
<div>
<i class="fas fa-users whos_members"></i>
Total Members
<span class="float_right">{$stats['numusers']}</span>
</div>
<div>
<i class="fas fa-graduation-cap whos_latest"></i>
Latest User
<span class="float_right">$newestmember</span>
</div>
<div>
<i class="fas fa-globe whos_most"></i>
Most Online
<span class="float_right">{$mostonline['numusers']}</span>
</div>
</div>
<input type="radio" name="statstabs" id="tabthree" />
<label for="tabthree">
<i class="fas fa-cog whos_option"></i>
Options
</label>
<div class="statstab">
<span class="smalltext">
<span class="float_left">
{$logoutlink}
<a href="misc.php?action=markread{$post_code_string}">
<i class="fas fa-eye whos_read"></i>
{$lang->bottomlinks_markread}
</a>
</span>
<span class="float_right">
<a href="showteam.php">
<i class="fas fa-users whos_team"></i>
{$lang->forumteam}
</a>
<br />
{$statspage}
</span>
</span>
</div>
</div>
<br />


2 - Admin Cp - Themes & Styles - İndex Templates - index_statspage
Replace all with:

<a href="stats.php"><i class="fas fa-signal whos_stats"></i> {$lang->forumstats}</a>


3 - Admin Cp - Themes & Styles - İndeTemplates - index_logoutlink
Replace all with:

<a href="member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><i class="fas fa-power-off whos_logout"></i> {$lang->index_logout}</a><br />


4 - Admin Cp - Themes & Styles - İndeTemplates - index_whosonline
Replace all with:


<tr>
<td class="tcat"><i class="fas fa-wifi whos_user"></i> <span class="smalltext"><strong>{$lang->whos_online}</strong> [<a href="online.php">{$lang->complete_list}</a>]</span></td>
</tr>
<tr>
<td class="trow1"><span class="smalltext">{$lang->online_note}</span><br /><i class="fas fa-user whos_online"></i> <span class="smalltext">{$onlinemembers}</span></td></tr>


5 - Admin Cp - Themes & Styles - İndeTemplates - index_birthdays
Replace all with:


<tr><td class="tcat"><i class="fas fa-birthday-cake whos_bday"></i>
<span class="smalltext"><strong>{$lang->todays_birthdays}</strong></span></td></tr>
<tr>
<td class="trow1"><span class="smalltext">{$bdays}</span></td>
</tr>


6 - Add to Global.css:


/** Stats Tabs **/
.tborder-statstabs {
background: #0066a2 url('images/thead.png') top left repeat-x;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
padding: 4px;

}
.statstabs {
display: flex;
flex-wrap: wrap;
color: #2C2C2C;
width: 99.5%;
transition: background ease 1.2s;
}
.statstabs a {
font-size: 13px;
}
.statstabs label {
padding: 5px;
order: 1;
display: block;
margin-right: 0.1rem;
cursor: pointer;
background: #EFEFEF;
transition: background ease 1.2s;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.statstabs .statstab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;
transition: background ease 1.2s;
}
.statstabs input[type="radio"] {
position: absolute;
opacity: 0;
}
.statstabs input[type="radio"]:checked+label {
background: #fff;
}
.statstabs input[type="radio"]:checked+label+.statstab {
display: block;
}
@media (max-width: 45em) {
.statstabs .statstab,
.statstabs label {
order: initial;
}
.statstabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}
i.whos_on,
i.whos_statistic,
i.whos_option {
color: #333;
font-size: 16px;
opacity: 0.5;
}
i.whos_online,
i.whos_user,
i.whos_bday {
color: #333;
font-size: 16px;
opacity: 0.4;
}
i.whos_posts,
i.whos_threads,
i.whos_members,
i.whos_latest,
i.whos_most,
i.whos_read,
i.whos_team,
i.whos_logout,
i.whos_stats {
color: #333;
font-size: 13px;
opacity: 0.4;
}

7 - Admin Cp - Themes & Styles - headerinclude

Find:
{$stylesheets}

Add for external linkage:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">


Add for internal linking:

<link rel="stylesheet" href="{$mybb->asset_url}/fontawesome5/css/all.css">


* You can download Fontawesome5 pkg stripped down for size to be used for theme includes here:
http://s000.tinyupload.com/index.php?fil...7200671326
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)