để làm được thống kê như hình ta làm như sau
hãy tìm "widget_forum_statistics" rồi xóa hết nội dung trong đó, thay thế bằng mã dưới
CSS:
<xf:css src="istatistik.less" />
<div class="ist-anaalan"{{ widget_data($widget) }}>
<div class="ist-kutu">
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk1"><xf:fa icon="fa-comment-lines" /></div>
<span class="ist-bilgi">{{ phrase('threads') }}</span>
<p class="sayi">{$forumStatistics.threads|number}</p>
</div>
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk2"><xf:fa icon="fa-comments" /></div>
<span class="ist-bilgi">{{ phrase('messages') }}</span>
<p class="sayi">{$forumStatistics.messages|number}</p>
</div>
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk3"><xf:fa icon="fa-users" /></div>
<span class="ist-bilgi">{{ phrase('members') }}</span>
<p class="sayi">{$forumStatistics.users|number}</p>
</div>
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk4"><xf:fa icon="fa-users-medical" /></div>
<span class="ist-bilgi">{{ phrase('latest_member') }}</span>
<p><xf:username user="{$forumStatistics.latestUser}" /></p>
</div>
</div>
</div>
</div>tiếp đến trong Style tạo mới "istatistik.less" có nội dung như sau:
CSS:
.ist-anaalan {
margin-top: 20px;
}
.ist-kutu {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 10px;
}
.ist-ic {
flex:25%;
display: grid;
}
.ist-detay {
background-color: darken(@xf-contentBg, 4%);
box-shadow: 0 5px 10px rgba(199, 202, 206, 0.1);
padding: 5px 10px 5px 5px;
border-radius: 8px;
border: 1px solid;
border-color: xf-diminish(@xf-borderColor, 6%);
}
.fa-renk1 {
background-color: #22a720;
color: @xf-textColor;
}
.fa-renk2 {
background-color: #204492;
color: @xf-textColor;
}
.fa-renk3 {
background-color: #a2b509;
color:@xf-textColor;
}
.fa-renk4 {
background-color: #f2930d;
color: @xf-textColor;
}
.fa-icon {
font-size: 30px;
width: 50px;
height: 50px;
float: left;
line-height: 50px;
border-radius: 50px;
text-align: center;
}
.ist-detay p {
color: @xf-textColor;
font-weight: 600;
font-size: 20px;
text-align: right;
padding-right: 5px;
margin: 0;
}
.ist-anaalan .ist-kutu .ist-detay span {
text-align: right;
display: grid;
padding-right: 5px;
}
@media (min-width: 900px){
.ist-anaalan .ist-kutu .ist-ic-bosluk:first-of-type,
.ist-anaalan .ist-kutu .ist-ic-bosluk:nth-child(2),
.ist-anaalan .ist-kutu .ist-ic-bosluk:nth-child(3)
{padding-right: 5px;
}
}
@media (max-width: 900px){
.ist-anaalan .ist-kutu .ist-ic-bosluk:first-of-type,
.ist-anaalan .ist-kutu
.ist-ic-bosluk:nth-child(3) {
padding-right: 5px;
}
}
@media (max-width: 900px){
.ist-anaalan .ist-kutu .ist-ic {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 30px;
}
}