Xenforo Özel Forum İstatistik

Merhaba arkadşalar defoult istatistik biraz düzenleyerek modern hale getirdmi umarım kullanışlı olur



1. Admin CP > Görnüm Ve Diller > Widget Yöneticisi Giriyoruz

2. Var olan forum istatistik widgete tıklıyıp konumunu aşağıdaki görsel gibi düzenliyoruz.



3. Görnüm Ve Diller > Şablonlarda Ara ( arama yerinde başlık içeriğine : extra.less yazıp aratıyoruz. Extra.less şablonuna girip vereceğim kodları yapıştırıyoruz. NOT : Eğer şablon içinde daha önceden kod varsa silmenize gerek yoktur. O kodların altına yapıştıra bilirsiniz. )

/* Ap Yazılım Özel İstatistik */


/* İkonları Root kısımından değiştirmeniz tavsiye edlir. Aksi taktirde bozulmalar meydana gele bilir*/


:root {
        --kutuarkaplanrengi: @xf-contentBg;
        --istatistikikonrengi: @xf-textColorMuted;
        --altborderrengi: @xf-borderColor;
        --altgolgerengi1: rgba(0, 0, 0, 0.25);
        --altgolgerengi2: rgba(0, 0, 0, 0.22);
  
        --konularikon: "\f4a6";
        --mesajlarikon: "\f4b6";
        --kullanicilarikon: "\f0c0";
        --sonuyeikon: "\f234";
      }






@_strStatsBlock-paddingV: @xf-paddingMedium;
@_strStatsBlock-paddingH: @xf-paddingLarge;


.p-body-pageContent {
  .block[data-widget-key="forum_overview_forum_statistics"] {
    .block-minorHeader {
      display: none;
    }


    .block-body.block-row {
      display: flex;
      padding: 0;
      justify-content: center;
      margin-top: 10px; 


      .pairs.pairs--justified {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
        padding: 4px 12px;
        margin: 4px;
        border-bottom: @xf-borderSize solid var(--altborderrengi);
        margin: 4px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        background-color: var(--kutuarkaplanrengi);
        box-shadow: var(--altgolgerengi1)0px 14px 28px,var(--altgolgerengi2)0px 10px 10px;


        &:before {
          .m-faBase();
          font-size: 30px;
          color: var(--istatistikikonrengi);
          float: left;
          line-height: 2;
        }


        &:nth-child(1) {
          &:before {
            content: var(--konularikon);
          }
        }


        &:nth-child(2) {
          &:before {
            content: var(--mesajlarikon);
          }
        }


        &:nth-child(3) {
          &:before {
            content: var(--kullanicilarikon);
          }
        }


        &:nth-child(4) {
          border: none;


          &:before {
            content: var(--sonuyeikon);
          }


          dd {
            font-size: @xf-fontSizeNormal;
            font-weight: bold;
          }
        }


        dt {
          float: inherit;
          margin-right: 0;
          text-align: right;


          &:after {
            content: "";
          }
        }


        dd {
          font-weight: 500;
          font-size: @xf-fontSizeLarger;
        }
      }
    }
  }
}


@media (max-width: @xf-responsiveWide) {
  .p-body-pageContent {
    .block[data-widget-key="forum_overview_forum_statistics"] {
      .block-body.block-row {
        .pairs.pairs--justified {
          &:before {
            float: none;
            display: flex;
            justify-content: center;
            line-height: normal;
          }


          dt {
            float: none;
            text-align: center;
          }


          dd {
            float: none;
            text-align: center;
          }
        }
      }
    }
  }
}


@media (max-width: @xf-responsiveMedium) {
  .p-body-pageContent {
    .block[data-widget-key="forum_overview_forum_statistics"] {
      .block-minorHeader {
        display: none;
      }


      .block-body.block-row {
        display: flex;
        flex-wrap: wrap;


        .pairs.pairs--justified {
          flex: auto;
          width: 50%;
          max-width: initial;
          text-align: center;
          margin-top: 20px;


          &:before {
            float: inherit;
            display: block;
          }


          &:nth-child(1) {
            float: left;
            border-bottom: @xf-borderSize solid var(--altborderrengi);
          }


          &:nth-child(2) {
            float: left;
            border-bottom: @xf-borderSize solid var(--altborderrengi);
          }


          &:nth-child(3) {
            float: left;
            border-bottom: @xf-borderSize solid var(--altborderrengi);
          }


          &:nth-child(4) {
            float: left;
            border-bottom: @xf-borderSize solid var(--altborderrengi);
          }


          dt {
            text-align: center;
          }


          dd {
            text-align: center;
          
          }
        }
      }
    }
  }
}

Eline sağlık usta güzel bir çalışma

Teşekkürler hocam