Forumunuzun istatistik tasarımını aşağıda ki görsel gibi yapmak için aşağıdaki adımları uygulayınız.
Şablonlarda widget_forum_statistics şablonunu açıp tüm kodları aşağıdaki ile değiştirin.
Daha sonra istatistik.less adında yeni bir şablon oluşturup alttaki kodları ekleyin
Son olarak zaten forumunuzun en altında istatistik mevcutsa resimdeki gibi değişecek. mevcut değilse yeni widget oluşturup istatistik vidgetini seçin forumun altı diye konumlayınız.
Şablonlarda widget_forum_statistics şablonunu açıp tüm kodları aşağıdaki ile değiştirin.
Kod:
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk2"><i class="fad fa-comments"></i></div>
<p class="sayi">{$forumStatistics.messages|number}</p>
<span class="ist-bilgi">{{ phrase('messages') }}</span>
</div>
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk3"><i class="fad fa-users"></i></div>
<p class="sayi">{$forumStatistics.users|number}</p>
<span class="ist-bilgi">{{ phrase('members') }}</span>
</div>
</div>
<div class="ist-ic ist-ic-bosluk">
<div class="ist-detay">
<div class="fa-icon fa-renk4"><i class="fad fa-users-medical"></i></div>
<p><xf:username user="{$forumStatistics.latestUser}" /></p>
<span class="ist-bilgi">{{ phrase('latest_member') }}</span>
</div>
</div>
</div>
</div>
Daha sonra istatistik.less adında yeni bir şablon oluşturup alttaki kodları ekleyin
Kod:
.ist-anaalan {
margin-top: 20px;
}
.ist-kutu {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 10px;
}
.ist-ic {
flex:25%;
}
.ist-detay {
background-color: #dedede;
box-shadow: 0px 5px 10px -4px rgba(0,0,0,0.29);
padding: 5px 20px 5px 5px;
text-align: center;
border-radius: 50px;
}
.fa-renk1 {
background-color: #22a720;
color: #c9c9c9;
}
.fa-renk2 {
background-color: #204492;
color: #c9c9c9;
}
.fa-renk3 {
background-color: #a2b509;
color: #c9c9c9;
}
.fa-renk4 {
background-color: #f2930d;
color: #c9c9c9;
}
.fa-icon {
font-size: 30px;
width: 50px;
height: 50px;
float: left;
line-height: 50px;
border-radius: 50px;
}
.ist-detay p {
color: #272727;
font-weight: 600;
font-size: 20px;
text-align: right;
padding: 0;
margin: 0;
}
.ist-anaalan .ist-kutu .ist-detay span {
color: #a02828;
text-align: right;
display: block;
}
@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;
}}
Son olarak zaten forumunuzun en altında istatistik mevcutsa resimdeki gibi değişecek. mevcut değilse yeni widget oluşturup istatistik vidgetini seçin forumun altı diye konumlayınız.