Forumteams.com !     Forum ve Portal Sistemleri     Forum & İçerik Yönetim Sistemleri     MyBB    

MyBB Gece Modu Özelliği Yapma - MyBB Gece Modu Butonu Yapma

şenol   16-02-2021 Saat 23:08
#1
MyBB Gece Modu Özelliği Yapma / MyBB Gece Modu Butonu Yapma

Bu Modifakasyon Sayesinde MyBB Sitenize gece modu özelliği yapabilirsiniz

Modifakasyon Yapımcısı ;Nevruz

İşlemlere geçelim

Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Headerinclude - [Gruplandırılmamış] Şablonlar » headerinclude » Şablonunu açın..

Aşağıdaki kodu kodu bulun;

Kod:
{$stylesheets}

Bulduktan sonra hemen üst kısmına şu kodları ekleyin..


Kod:
<script>(function(window, document, undefined) {
    'use strict';
    if (!('localStorage' in window)) return;
    var nightMode = localStorage.getItem('gmtNightMode');
    if (nightMode) {
        document.documentElement.className += ' night-mode';
    }
})(window, document);   

document.addEventListener('DOMContentLoaded',function() {
    'use strict';
    // Feature test
    if (!('localStorage' in window)) return;
    var nightMode = document.querySelector('#night-mode');
    if (!nightMode) return;
    // When clicked, toggle night mode on or off
nightMode.addEventListener('click', function (event) {
event.preventDefault();
document.documentElement.classList.toggle('night-mode');
        if ( document.documentElement.classList.contains('night-mode') ) {
            localStorage.setItem('gmtNightMode', true);
            return;
        }
        localStorage.removeItem('gmtNightMode');
    }, false);
});</script>

Buradaki işlem bu kadardır. Kaydedip kapatın sonraki işleme geçelim.

Admin KP » Temalar ve şablonlar » Kullandığınız tema » global.css » Gelişmiş düzenleme » dedikten sonra aşağıdaki kodları en alt kısıma ekleyin.

Kod:
night-mode body{
    background-color: #14191e
}

.night-mode #content{
    background-color: #14191e;
    color: #eee
}

.night-mode #logo{
    background-color:#14191e
}

.night-mode #logo a{
    color:#eee
}

.night-mode .trow1, .night-mode .trow2{
    background-color: #14191e;
    border-color: #14191e;
    color:#eee
}

.night-mode .trow1 a, .night-mode .trow2 a{
    color: #eee
}

Buradaki işlemde bitti kaydedip kapatın. şimdi en son işelme kaldı Gece modu botonunu ekleyeceğiz..

Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Header Şablonlar » header Şablonunu açın..

Şu kodu bulun;

Kod:
{$awaitingusers}

bulduktan sonra altına ekleyin 

PHP Kod:
<button type="button" id="night-mode">Gece Modu</button> 

Buradaki işlemde bu kadardır eğer bu Gece Modu botununu siz nerede görünmesini istiyorsanız orayada ekleyebilirsiniz size kalmış..

Son olarak eğer kullanıcılarınızın gece saatlerinde sitenizde otomatik olarak gece modunda kullanmasını istiyorsanız yukarıdaki headerinclude şablonuna eklediğiniz kodları aşağıdaki kodlarla değiştirin.


Kod:
<script>(function(window, document, undefined) {
    'use strict';
    if (!('localStorage' in window)) return;
    var nightMode = localStorage.getItem('gmtNightMode');
    if (nightMode) {
        document.documentElement.className += ' night-mode';
    }
})(window, document);  

document.addEventListener('DOMContentLoaded',function() {
    'use strict';
    // Feature test
    if (!('localStorage' in window)) return;
    var nightMode = document.querySelector('#night-mode');
    if (!nightMode) return;
    // When clicked, toggle night mode on or off
nightMode.addEventListener('click', function (event) {
event.preventDefault();
document.documentElement.classList.toggle('night-mode');
        if ( document.documentElement.classList.contains('night-mode') ) {
            localStorage.setItem('gmtNightMode', true);
            return;
        }
        localStorage.removeItem('gmtNightMode');
    }, false);
});</script>
Son Düzenleme: 30-06-2021 Saat 00:41, Düzenleyen: şenol.
Fikrin rütbesi yoktur.
  
 Cevapla
cool   29-11-2022 Saat 10:42
#2
(16-02-2021 Saat 23:08)şenol Adlı Kullanıcıdan Alıntı:
PHP Kod:
<button type="button" id="night-mode">Gece Modu</button> 

Buradaki işlemde bu kadardır eğer bu Gece Modu botununu siz nerede görünmesini istiyorsanız orayada ekleyebilirsiniz size kalmış..

Butonu burdaki gibi tıklayınca gece gündüz iconu olarak nasıl yapabiliriz.
[-] Aşağıdaki 1 Kullanıcı Bu Gönderiyi Beğendi
  
  
 Cevapla
Önceki Konu      Sonraki Konu
  

Konuyu Okuyanlar: 1 Ziyaretçi