XenForo Sabit (Sticky) ve Normal Konuları Eklentisiz Ayırma Rehberi (extra.less ile)

  • Konuyu Başlatan Konuyu Başlatan Koddly
  • Başlangıç tarihi Başlangıç tarihi

Koddly

Administrator
Yönetici
Selam 👋

Bu konuda sizlere XenForo 2 üzerinde, herhangi bir eklenti kullanmadan, sadece extra.less dosyasına birkaç satır CSS kodu ekleyerek sabit konular ile normal konuları görsel olarak ayırmayı göstereceğim.


💡 Neden Gerekli?​

Bazı kategorilerde sabit konular (📌 kurallar, duyurular vs.) ile normal konular karışık durabiliyor.
Bu yöntemle sabit konulara “Sabit Konular”, normal konulara ise “Normal Konular” başlığı ekleniyor ve görsel olarak daha düzenli bir görünüm elde ediyorsunuz.
Üstelik eklentisiz — sadece birkaç satır CSS!


🧩 Uygulama Adımları​

  1. Yönetici paneline girin:
    AdminCP → Görünüm (Appearance) → Şablonlar (Templates) → extra.less
  2. Aşağıdaki kodu extra.less dosyasının en altına ekleyin:

CSS:
/* ---------- LIGHT THEME COLORS ---------- */
@media (prefers-color-scheme: light) {
    .structItemContainer-group--sticky::before {
        content: "📌 Sabit Konular";
        display: block;
        background: #fff7e6; /* soft amber */
        color: #a15c00;
        font-weight: 600;
        font-size: 14px;
        padding: 8px 12px;
        border: 1px solid #ffe0b3;
        border-radius: 6px 6px 0 0;
    }

    .structItemContainer-group:not(.structItemContainer-group--sticky)::before {
        content: "💬 Normal Konular";
        display: block;
        background: #f2f3f5;
        color: #444;
        font-weight: 600;
        font-size: 14px;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 6px 6px 0 0;
        margin-top: 10px;
    }

    .structItem--sticky {
        background: #fffdf6;
        border-left: 3px solid #ffcc80;
    }
}

/* ---------- DARK THEME COLORS ---------- */
@media (prefers-color-scheme: dark) {
    .structItemContainer-group--sticky::before {
        content: "📌 Sabit Konular";
        display: block;
        background: #3a2a00; /* dark golden */
        color: #ffd280;
        font-weight: 600;
        font-size: 14px;
        padding: 8px 12px;
        border: 1px solid #5c4600;
        border-radius: 6px 6px 0 0;
    }

    .structItemContainer-group:not(.structItemContainer-group--sticky)::before {
        content: "💬 Normal Konular";
        display: block;
        background: #1f1f1f;
        color: #e0e0e0;
        font-weight: 600;
        font-size: 14px;
        padding: 8px 12px;
        border: 1px solid #2a2a2a;
        border-radius: 6px 6px 0 0;
        margin-top: 10px;
    }

    .structItem--sticky {
        background: #2a2100;
        border-left: 3px solid #caa94e;
    }
}

/* ---------- SHARED SPACING / STRUCTURE ---------- */
.structItemContainer-group--sticky {
    margin-bottom: 10px;
    padding-bottom: 5px;
}

🖼️ Sonuç Nasıl Görünür?​

  • 📌 Sabit konuların üstünde “Sabit Konular” etiketi görünür.
  • 💬 Normal konuların üstünde “Normal Konular” etiketi görünür.
  • Tema açık veya koyu olduğunda renkler otomatik olarak değişir.

Örnek:​

sabit-sticky-ve-normal-konulari-eklentisiz-ayirma-rehberi-extraless-ile.webp



⚙️ Ek Bilgi​

  • Kod, sadece görsel amaçlıdır, sıralama veya yapısal değişiklik yapmaz.
  • XenForo’nun varsayılan temasıyla tamamen uyumludur.
  • Koyu temalarda aşırı parlaklık oluşuyorsa, background renklerini daha koyu tonlarla değiştirebilirsiniz.

💬 Sorularınız olursa bu konu altına yazabilirsiniz.
Kolay gelsin! 🎨

 
Son düzenleme:
Geri
Üst