discussion XenForo Forum üst tarafına tarih, saat ve ay bilgisi

[Nevzat]

XenForo Forum üst tarafına tarih, saat ve ay bilgisi​

Uyumlu XF Sürümleri

1. 2.2.X
2. 2.3.X

Forumunuzun en üst tarafına tarih, saat ve ayın evresi gibi bilgileri ekleyin.

Bunun için öncelikle temanızın PAGE_CONTAINER şablonun açın ve aşağıdaki kodu bulun:

<div class="p-pageWrapper" id="top">

Aşağıdaki kodu altına ekleyin ve kendinize göre özelleştirin:

<div class="ust-bar">
    <div class="ust-bar-sol">
        <a href="#" target="_blank"><i class="iconSinifiniz"></i>facebook</a>
        <a href="#" target="_blank"><i class="iconSinifiniz"></i>youtube</a>
        <a href="#" target="_blank"><i class="iconSinifiniz"></i>instagram</a>
    </div>
    <div class="ust-bar-sag">
        <span id="tarih"></span>
        <span id="ay-evresi"></span>
    </div>
</div>

Sonrasında temanızın helper_js_global şablonunu açın ve en altında bulunan </xf:macro> satırının üstüne aşağıdaki kodları ekleyin:

<script>
function tarihSaatGuncelle() {
    const simdi = new Date();
    const gunAdlari = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];
    const ayAdlari = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"];
    const gun = gunAdlari[simdi.getDay()];
    const tarih = simdi.getDate();
    const ay = ayAdlari[simdi.getMonth()];
    const yil = simdi.getFullYear();
    const saat = String(simdi.getHours()).padStart(2, '0');
    const dakika = String(simdi.getMinutes()).padStart(2, '0');
    const formatliTarih = `${tarih} ${ay} ${yil} ${gun} | ${saat}:${dakika}`;
    document.getElementById("tarih").textContent = formatliTarih;
    const ayinYasi = ayYasiHesapla(simdi);
    const ayEvresi = ayEvresiBul(ayinYasi);
    document.getElementById("ay-evresi").textContent = `Şu anki ay evresi: ${ayEvresi}`;
}
function ayYasiHesapla(tarih) {
    const yeniAyReferans = new Date(2000, 0, 6);
    const referanstanBeriGunler = (tarih - yeniAyReferans) / (1000 * 60 * 60 * 24);
    return Math.floor(referanstanBeriGunler) % 29.53;
}
function ayEvresiBul(ayinYasi) {
    if (ayinYasi < 1.84566) return "Yeni Ay";
    else if (ayinYasi < 5.53699) return "Hilal";
    else if (ayinYasi < 9.22831) return "İlk Dördün";
    else if (ayinYasi < 12.91963) return "Şişkin Ay";
    else if (ayinYasi < 16.61096) return "Dolunay";
    else if (ayinYasi < 20.30228) return "Şişkin Ay (azalan)";
    else if (ayinYasi < 23.99361) return "Son Dördün";
    else if (ayinYasi < 27.68493) return "Hilal (azalan)";
    else return "Yeni Ay";
}
tarihSaatGuncelle();
setInterval(tarihSaatGuncelle, 60000);
</script>

Daha sonra aşağıdaki kodu temanızın extra.less şablonuna yerleştirin:

.ust-bar {
    background-color: #d95151;
    color: #fff;
    padding: 6px 10px;
    display: flex;
    justify-content: space-around;
    font-size: 14px; 
    a {
        color: #fff;
        margin-right: 10px;
        text-decoration: none;
      
    }
}