MyBB Community Forums

1- Admin Cp - Themes & Styles - İndex Templates - index_boardstats Find

change

<div class="statstabs">
  <input type="radio" name="statstabs" id="tabone" checked="checked">
  <label for="tabone"><i class="fas fa-globe"></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"></i>
  Statistics</label>
  <div class="statstab">
     <div style="margin-top:-5px;text-align:left;">  
        <i class="fas fa-envelope"></i>
        Total Posts<span class="float_right">{$stats['numposts']}</span>
     </div>
     <div><i class="fas fa-comments"></i>
        Total Threads<span class="float_right">{$stats['numthreads']}</span>
     </div>
     <div><i class="fas fa-users"></i>
        Total Members<span class="float_right">{$stats['numusers']}</span>
     </div>
     <div><i class="fas fa-graduation-cap"></i>
        Latest User<span class="float_right">$newestmember</span>
     </div>
     <div><i class="fas fa-globe"></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"></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"></i> {$lang->bottomlinks_markread}</a></span>
     <span class="float_right"><a href="showteam.php"><i class="fas fa-users"></i> {$lang->forumteam}</a><br />
     {$statspage}</span>
     </span>          
  </div>
</div>
<br />

1- Admin Cp - Themes & Styles - İndex Templates - index_statspage Find
change

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

1- Admin Cp - Themes & Styles - İndeTemplates - index_logoutlink Find
change

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

Global.css

/** Stats Tabs **/
.statstabs {    
  background: #6fb1e3;
  width:10px;
  padding: 0;
  border-top:5px solid#6fb1e3;
  border-bottom:1px solid#ddd;
  border-left:1px solid#ddd;
  border-right:1px solid#ddd;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px; 
  border-radius: 6px 6px 6px 6px;
  display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;
  flex-wrap:wrap;
  color:#A1A0A0;    
  width: 99.5%; 
  transition: background ease 1.2s;
}

.statstabs a {    
   font-size: 13px;
   color:#A1A0A0;    
}  

.statstabs label {
  padding: 5px;
  order: 1;
  display: block;
  margin-left: 0.2rem;
  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;
}
}

1- Admin Cp - Themes & Styles - headerinclude - {$stylesheets}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

[Image: 687474703a2f2f6936362e74696e797069632e63...642e706e67]

[Image: 687474703a2f2f6936372e74696e797069632e63...302e706e67]

[Image: 687474703a2f2f6936352e74696e797069632e63...352e706e67]

Subject Edited Thanks vintagedaddyo

There are a few issues with the tutorial I found for example: incorrect language variable for "mark read" so text does not display, duplicate signal icons, the board stats collapse function apparently being broken with this tutorial and with this tutorial being applied the collapse should be removed anyways..., etc etc, just a few quick things I noticed and quickly corrected for myself though I did not spend much time checking for further issues than what I initially noticed. Anyhow, I figured I would share the variant.

Examples:
[Image: azffqd.png]

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"></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"></i>
   Statistics</label>
   <div class="statstab">
      <div style="margin-top:-5px;text-align:left;">  
         <i class="fas fa-envelope"></i>
         Total Posts<span class="float_right">{$stats['numposts']}</span>
      </div>
      <div><i class="fas fa-comments"></i>
         Total Threads<span class="float_right">{$stats['numthreads']}</span>
      </div>
      <div><i class="fas fa-users"></i>
         Total Members<span class="float_right">{$stats['numusers']}</span>
      </div>
      <div><i class="fas fa-graduation-cap"></i>
         Latest User<span class="float_right">$newestmember</span>
      </div>
      <div><i class="fas fa-globe"></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"></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"></i> {$lang->bottomlinks_markread}</a></span>
      <span class="float_right"><a href="showteam.php"><i class="fas fa-users"></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"></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"></i> {$lang->index_logout}</a><br />

4 - 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;
 }
}

5 - Admin Cp - Themes & Styles - headerinclude - {$stylesheets}
Add for external linkage:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

* Just a thought, but I tend to prefer adding font-awesome locally to a theme rather than linking externally for a theme for example:

<!-- FontAwesome -->

<link rel="stylesheet" href="{$mybb->asset_url}/themes/themename/fontawesome/css/font-awesome.min.css">

(2018-05-02, 10:52 PM)vintagedaddyo Wrote: [ -> ]There are a few issues with the tutorial I found for example: incorrect language variable for "mark read" so text does not display, duplicate signal icons, the board stats collapse function apparently being broken with this tutorial and with this tutorial being applied the collapse should be removed anyways..., etc etc, just a few quick things I noticed and quickly corrected for myself though I did not spend much time checking for further issues than what I initially noticed. Anyhow, I figured I would share the variant.

Examples:
[Image: azffqd.png]