MyBB Depo Forum
MyBB ana sayfada son konular 4'lü blok [Modifikasyon] - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: MyBB 1.8 Depo (https://mybbdepo.com/mybb-1-8-depo-forumu)
+--- Forum: MyBB 1.8 Modifikasyon & Eklenti Deposu (https://mybbdepo.com/mybb-1-8-modifikasyon-eklenti-deposu-forumu)
+--- Konu Başlığı: MyBB ana sayfada son konular 4'lü blok [Modifikasyon] (/mybb-ana-sayfada-son-konular-4-lu-blok-modifikasyon-konusu.html)

MyBB ana sayfada son konular 4'lü blok [Modifikasyon] - novruz - 03-07-2019

Bu modifikasyon sayesinde herhangi bir eklentiye(plugin) ihtiyaç duymadan forumda açılmış son konuları ana sayfaya(veya istenilen herhangi bir sayfaya) 4'lü blok şeklinde ekleye bilirsiniz.
Farklı bir sitede paylaşırken yapımcı ismi belirtmenizi rica ediyorum, örn: Modifikasyon Yapımcısı: Novruz.

Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Ana Sayfa - [index] Şablonlar » index
  1. {$header} değişkeninin altına aşağıdaki kodu ekleyin;
    PHP Kod:
    <ul class="threadlist"></ul> 


  2. </body> tagının üzerine ekleyin;
    PHP Kod:
    <script>threadlist = document.getElementsByClassName("threadlist")[0];
    fetch('syndication.php?type=atom1.0&limit=4')  .then(res => res.text())  .then((responseText) => {    const doc = new DOMParser().parseFromString(responseText, 'text/xml');    const elm = Array.from(doc.getElementsByTagName("title"));    const elm2 = Array.from(doc.getElementsByTagName("id"));    for(var i = 1; i < elm.length; i++){    threadlist.innerHTML += '<li><a href="' + elm2[i].textContent + '"><span>' + elm[i].textContent + '</span></a></li>';    }
    });    </script> 

Admin KP » Temalar ve şablonlar » Kullandığınız tema » global.css » Gelişmiş düzenleme » aşağıdaki kodları en alta ekleyin.
PHP Kod:
.threadlist{
    padding:0;
    display:flex;
    list-style:none;
    width:100%;
}

.threadlist li{
    display:flex;
    flex-basis:calc(100% / 4);
    justify-content:center
}

.threadlist li a{
    display: flex;
    flex-basis: 96%;
    align-items: flex-end;
    height: 10rem;
    padding: 1rem;
    text-decoration: none;
    font-family:sans-serif;
    border-radius: 5px;
    color:white;
    background:url(https://cdn.pixabay.com/photo/2017/08/18/11/24/mybb-2654585_960_720.jpg) center center / cover;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
}

.threadlist li a span{
    -webkit-transition: 150ms linear;
    transition: 150ms linear
}

.threadlist li a:hover span{
    margin-bottom: 4px
} 

Önizleme :
resim

Özelleştirme :
  • Blok arkaplanını düzenlemek için .threadlist li a seçicisindeki background değişkenindeki linki değiştire bilirsiniz.
  • Blok sayısını arttırmak için Javascript kodundaki syndication.php?type=atom1.0&limit=4 linkindeki 4 sayısını arttırmak istediğiniz sayı ile değiştirin ve CSS kodundaki .threadlist li seçicisindeki calc(100% / 4); değerindeki 4 sayısını arttırmak istediğiniz sayı ile değiştirin.