Bilgilendirme XenForo-2 TabWidget İstatistikler

XDinc

Moderatör
Katılım
Ocak 2, 2017
Mesajlar
1,248
Tepki puanı
2,915
Puanları
115
Herkese merhabalar,
Bildiğiniz gibi XF-2 yapısında widget yardımları ile dilediğiniz alanda macros_dataları poziyonlardırabiliyorsunuz.

Peki bu ne demek?

Ek olarak bir istatistik eklentisine ihtiyaç duymadan dilediğiniz şekilde son konular, yeni mesajlar vb. tabları oluşturabilirsiniz.
Gelin birlikte nasıl yapılıyor göz atalım;

İlk olarak widgets alanına giriş yapın.

1518026616463.png

Add widget - Yeni Widget ekliyoruz.

1518026777557.png

widget definiton alanında New Threads olarak seçimimizi yapıyoruz.

1518026826324.png

Kullanacağımız widgey key:

HTML:
tab_lastest_threads
Burada dikkat etmemiz gereken nokta display in position alanında (Gösterim alanı) seçim yapmıyoruz.
Title (Başlık kullanmıyoruz)
Görütüleme sitili full (Tam)

1518026921580.png

Aynı uygulamayı Yeni mesajlar içinde yapıyoruz...

1518027331299.png

Kullanacağımız widget_key:

HTML:
tab_lastest_post
Süreci bir önceki aşama ile aynı olacak şekilde kayıt ediyoruz.

Resources kullanan arkadaşlarımız ek olarak aşağıdaki widget_key ile ekstra bir tab daha ekleyebilirler.

HTML:
tab_new_resources
Gelelim şuana kadar ne bir başlık nede pozisyon verdiğimiz (Gösterim alanı) widgetları tek bir tab üzerinde göstermeye;

Yeni bir widget daha ekliyoruz.
Fakat şimdi HTML yapısını kullanacağız,
Aşağıdaki kodları HTML widget alanına ekliyoruz.

Widget kimliği-ID: TabWidget
Pozisyon: Forumlist Above nodes (Forumların üstünde)
Advanced mode açık.

1518032147994.png

HTML:
<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="tab_lastest_threads">Yeni Konular</a>
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab"
                        id="tab_lastest_post"
                        role="tab">Yeni Mesajlar</a>
                 <a href="{{ link('resources') }}?skip=1"
                        class="tabs-tab"
                        id="tab_new_resources"
                        role="tab">Yeni Kaynaklar</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="tab_lastest_threads">
                 <xf:widget key="tab_lastest_threads" />
             </li>
             <li role="tabpanel" aria-labelledby="tab_lastest_post">
                 <xf:widget key="tab_lastest_post" />
             </li>
             <li role="tabpanel" aria-labelledby="tab_new_resources">
                 <xf:widget key="tab_new_resources" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>
Sıra geldi less yapısını düzenlemeye,
Aşağıdaki kodları kendinize göre düzenleyebilir yada extra.less şablonuna ekleyebilirsiniz.

HTML:
/* İstatistikler */

.template-forum_list .p-body-pageContent > .block > .block-container .u-dt[title] {
  float: left;
  height: 20px;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90px;
}
.template-forum_list .structItem-iconContainer .avatar {
  font-size: 15px;
  height: 25px;
  width: 25px;
}
.template-forum_list .block-footer:not(.block-footer--split) .block-footer-controls {
  display: none;
}
.template-forum_list .structItem-minor .structItem-parts,
.template-forum_list .structItem-minor .structItem-parts,
.template-forum_list .structItem-pageJump,
.template-forum_list .structItem-pageJump,
.template-forum_list .structItem-statuses .structItem-status,
.template-forum_list .structItem-statuses .structItem-status,
.template-forum_list .structItem-minor .structItem-extraInfoMinor,
.template-forum_list .structItem-minor .structItem-extraInfoMinor,
.template-forum_list .structItem-cell .structItem-minor dd,
.template-forum_list .structItem-cell .structItem-minor dd,
.template-forum_list .structItem-cell .structItem-minor dt,
.template-forum_list .structItem-cell .structItem-minor dt,
.template-forum_list .lastPostAv,
.template-forum_list .lastPostAv {
  display: none;
}
.template-forum_list .structItem-cell.structItem-cell--meta {
  width: 100px;
}
.template-forum_list .structItem-title {
  font-size: 14px;
  height: 25px;
  overflow: hidden;
  line-height: 25px;
}
.template-forum_list .pairs.pairs--justified > dt,
.template-forum_list .structItem-cell {
  font-size: 12px;
}
.template-forum_list .structItem-cell {
    padding: 2px 8px;
}
.template-forum_list .p-body-pageContent > .block > .block-container .pairs.pairs--justified > dd {
  float: none;
  text-align: left;
}
.template-forum_list .p-body-sidebar .block-body .block-row {
  padding: 5px;
}
.template-forum_list .p-body-sidebar .block-body .block-row .avatar.avatar--xs {
  font-size: 15px;
  height: 25px;
  width: 25px;
}

@media (max-width: 650px) {
  .template-forum_list .structItem-cell.structItem-cell--meta,
  .template-forum_list .structItem-cell.structItem-cell--latest:before,
  .template-forum_list .structItem-cell.structItem-cell--latest a,
  .template-forum_list .structItem-statuses > li,
  .template-forum_list .structItem-extraInfo > li, {
    display: none;
  }
}
/*
@media (max-width: 450px) {
    .template-forum_list .structItem-title span {
        display: none;
    }
}
*/
.template-forum_list .structItem-resourceTagLine{
    display: none;
}
.template-forum_list .structItem-iconContainer .avatar:nth-child(2) {
    display: none;
}

.template-forum_list .structItem-iconContainer .avatar {
    left: 10px;
}


Sonuç:

1518031767341.png
 

Special

Üye
Katılım
Tem 27, 2017
Mesajlar
207
Tepki puanı
206
Puanları
43
Yaş
28
Web Sitesi
jailbreaktr.com
Extra.less şablonuna aşağıdaki kodları eklemen yeterli olacaktır
CSS:
.structItem-cell.structItem-cell--latest .u-dt[title] {
    display:none;
}
Teşekkür ederim hocam.. Şöyle bir durum farkettim sizde de aynı maalesef.

İlk seçenek "Son Mesajlar" ikinci ise "Son Konular" Sayfayı yenileyince, önce son konular gözüküp hızlıca, son mesajlara geçiyor.

Bunun nedeni, kodlarla mı ilgili yoksa, Xenforo'da gömülü widget ile mi? Eğer öyle ise geri bildirimde bulunma şansınız var mı acaba
 

Bizi sosyal sitelerde takip edin


Üst Alt