2018-11-03, 10:18 AM
index_boardstats - add to bottom
Global.css
<div id="statistics">
<div class="statistics-box">
<i class="fas fa-pencil-alt fa-2x"></i>
<div class="statistics-box--figure">{$stats['numthreads']}</div>
</div>
<div class="statistics-box">
<i class="fas fa-users fa-2x"></i>
<div class="statistics-box--figure">{$stats['numusers']}</div>
</div>
<div class="statistics-box">
<i class="fas fa-comments fa-2x"></i>
<div class="statistics-box--figure">{$stats['numposts']}</div>
</div>
<div class="statistics-box">
<i class="fas fa-user-plus fa-2x"></i>
<div class="statistics-box--figure">$newestmember</div>
</div>
<div class="statistics-box">
<i class="fas fa-globe fa-2x"></i>
<div class="statistics-box--figure">{$mostonline['numusers']}</div>
</div>
</div>
Global.css
#statistics {
display: flex;
flex-direction: row;
text-align: center;
background: #f0f1f2;
padding: 5px;
border-radius: 5px;
font-family: Tahoma, Geneva, sans-serif;
box-shadow: inset 0 0 3px #ddd;
}
.statistics-box {
box-sizing: border-box;
padding: 20px;
background: #fafbfc;
border-radius: 5px;
flex: 0 0 auto;
color:#64a8d6;
flex-grow: 1;
flex-basis: 0;
margin: 5px;
box-shadow: 0 0 3px #ddd;
}
.statistics-box--figure {
display: block;
margin-top: 20px;
color: #a8a8a8;
}
@media only screen and (max-width: 865px) {
.statistics-box {
width: 98% !important;
display: inline-block;
text-align: left;
padding: 8px;
margin-left: -5px;
}
#statistics {
width: 100% !important;
display: inline-block;
background: #fff;
box-shadow: none;
}
.statistics-box:nth-child(2) {
background: #e37d8c;
color: #fff;
}
.statistics-box:nth-child(1) {
background: #54cc74;
color: #fff;
}
.statistics-box:nth-child(3) {
background: #729fdb;
color: #fff;
}
.statistics-box--figure a {
color: #f5f5f5;
}
.statistics-box:nth-child(4) {
background: #ab72db;
color: #fff;
}
.statistics-box:nth-child(5) {
background: #dbb472;
color: #fff;
}
#statistics i {
float: left;
margin-top: 5px;
}
.statistics-box--figure {
float: right;
margin-top: 10px;
color: #f5f5f5;
}
}