Rehber Xenforo Gece Gündüz Modu Yapmak

Merhaba arkadaşlar, XenForo forumunuz için yazdığım gece ve gündüz kodu ile rahatça karanlık ve açık temaya geçiş sağlayabilirsiniz. Bu özel kod, açık temadan karanlık temaya geçişi kolaylaştırarak forumunuza modern bir görünüm kazandırıyor. Detaylar ve kodun kullanımından bahsedelim.
Aşağıdaki kod, XenForo forumlarınız için gece ve gündüz modu eklemek için kullanabileceğiniz özel koddur:

<style>
  .theme-button-container {
    display: flex;
    align-items: center;
    margin: 0 5px;
  }

  .theme-button {
    display: inline-block;
    margin: 0 5px;
    padding: 5px; /* Daha küçük bir yuvarlak alan için paddingi azaltabilirsiniz */
    background: none;
    border: none;
    cursor: pointer;
  }

  .theme-button i {
    font-size: 15px; /* Simgelerin boyutunu buradan ayarlayabilirsiniz */
  }
</style>

<div class="theme-button-container">
  <a href="{{ link('misc/style', null, {
    'style_id': 101, '_xfRedirect': $redirect, 't': csrf_token()
  }) }}" class="theme-button" title="Açık Tema">
    <i class="fas fa-lightbulb-on"></i>
  </a>

  <a href="{{ link('misc/style', null, {
    'style_id': 104, '_xfRedirect': $redirect, 't': csrf_token()
  }) }}" class="theme-button" title="Karanlık Tema">
    <i class="fas fa-moon"></i>
  </a>
</div>

Bu kod, forumunuzun başlık veya tüm sayfa başlığı içinde kullanıcıya özel bir tema seçeneği sunar. Bu kodu kullanmak için, ilk önce "style_id: 101" ve "style_id: 104" yazan kısmı kendi tema id'niz ile değiştirin. Tema id'nizi öğrenmek çok kolay. Admin panelinize girin ve sırasıyla Görünüm ve diller > Temalarınız kısmına gelin ve her iki temanın da farenizi üstüne getirin sol aşağıda gözükür.

XenForo admin panelinize giriş yapın. Ardından "Reklam Yöneticisi" bölümüne gidin ve "Reklam Ekle" seçeneğini seçin. Tüm sayfa başlığına entegre etmek için uygun alanı seçip yukarıdaki kodu ekleyin. Bu basit adımları takip ederek, forumunuzda gece ve gündüz modlarını etkinleştirebilir ve kullanıcıların forum deneyimini özelleştirmelerine olanak tanıyabilirsiniz.

 

[Trojen]

Eline sağlık, en net anlatılan olmus gerçekten.

 

[LostFearLess]

Eğer ben kodla falan uğraşamam hem şık hemde pratik bir eklenti arıyorum diyorsanız, bakmanızı tavsiye ederim

Güncel - Xenforo Gece Gündüz Modu

Merhaba XenForo topluluğu! Sizlerle kendi geliştirilmiş karanlık modu (Gece modu) deneyimini tam anlamıyla yaşamanızı sağlayacak olan "ExtraDark" eklentisini tanıtmaktan mutluluk duyuyorum. ExtraDark, XenForo'nun default teması ile mükemmel uyum...

forumchess.com.tr

 

[LostFearLess]

XenForo 2.3 sürümü için güncellenmiştir, Font Awesome ikonları `<xf:fa>` etiketi kullanılarak entegre edildi. Bu, daha önce kullanılan `<i class="fas fa-lightbulb-on"></i>` ve `<i class="fas fa-moon"></i>` gibi klasik HTML etiketlerinin yerini alıyor. Bu değişiklik, XenForo'nun temalarını yönetirken daha uyumlu ve modern bir yapı sağlar.

2.3 sürümünde, ikon boyutları `.theme-button xf\\:fa` sınıfı üzerinden 20px olarak ayarlandı. Bu, 2.2 sürümündeki `.theme-button i` sınıfının 15px olarak ayarlandığı halinden daha büyük ve daha belirgin ikonlar sağlar. Aynı zamanda, hover efekti için `transform: scale(1.1);` eklendi, bu da ikonların üzerine gelindiğinde %10 büyümesini sağlar.

<style>
  .theme-button-container {
    display: flex;
    align-items: center;
    margin: 0 5px;
  }

  .theme-button {
    display: inline-block;
    margin: 0 5px;
    padding: 5px; /* Daha küçük bir yuvarlak alan için paddingi azaltabilirsiniz */
    background: none;
    border: none;
    cursor: pointer;
  }

  .theme-button i {
    font-size: 15px; /* Simgelerin boyutunu buradan ayarlayabilirsiniz */
  }
</style>

<div class="theme-button-container">
  <a href="{{ link('misc/style', null, {
    'style_id': 101, '_xfRedirect': $redirect, 't': csrf_token()
  }) }}" class="theme-button" title="Açık Tema">
    <xf:fa icon="fa-sun" />
  </a>

  <a href="{{ link('misc/style', null, {
    'style_id': 104, '_xfRedirect': $redirect, 't': csrf_token()
  }) }}" class="theme-button" title="Karanlık Tema">
    <xf:fa icon="fa-moon" />
  </a>
</div>

2.3 sürümünde, `.theme-button-container` ve `.theme-button` sınıfları, önceki sürüme benzer şekilde tanımlanmış olsa da, daha esnek bir tasarım sunmak için bazı küçük ayarlamalar yapıldı. Özellikle hover efekti eklenerek kullanıcı etkileşimini daha çekici hale getirilmiştir.

 

[LostFearLess]

Bu ise biraz daha irisi ve efektli olan versiyonudur.

<style>
  .theme-button-container {
    display: flex;
    align-items: center;
    margin: 0 5px;
  }

  .theme-button {
    display: inline-block;
    margin: 0 5px;
    padding: 5px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .theme-button xf\\:fa {
    font-size: 20px; /* Simgelerin boyutunu ayarlayabilirsiniz */
  }

  .theme-button:hover {
    transform: scale(1.1); /* Hover efekti ekleyebilirsiniz */
  }
</style>

<div class="theme-button-container">
  <a href="{{ link('misc/style', null, {
    'style_id': 159, '_xfRedirect': $redirect, 't': csrf_token()
  }) }}" class="theme-button" title="Açık Tema">
    <xf:fa icon="fa-sun" />
  </a>

  <a href="{{ link('misc/style', null, {
    'style_id': 160, '_xfRedirect': $redirect, 't': csrf_token()
  }) }}" class="theme-button" title="Karanlık Tema">
    <xf:fa icon="fa-moon" />
  </a>
</div>