You need to enable JavaScript to run this app.

Skip to main content

Administrator
Mybb Gece Modu
Bu modifikasyon sitenizine gece modu(koyu tema) seçicisi(switcher) ekleye bilirsiniz.

Modifikasyon Yapımcısı: Novruz

Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Headerinclude - [Gruplandırılmamış] Şablonlar » headerinclude »  {$stylesheets} değişkeninin üzerine aşağıdaki 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>

Admin KP » Temalar ve şablonlar » Kullandığınız tema » global.css » Gelişmiş düzenleme » aşağıdaki kodları en alta 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
}
Admin KP » Temalar ve şablonlar » Şablonlar » Kullandığınız temanın şablon seti » Header Şablonlar » header {$awaitingusers}değişkeni altına aşağıdaki kodu ekleyin.


Kod:
<button type="button" id="night-mode">Night Mode</button>

Not 1 : Gece modu seçici ikonun nerede gözükmesini istiyorsanız o şablona ekleyin. Örnek olarak header'a eklenmiştir.


Not 2 : Örnek olarak buton(span ve b. kullanıla bilir) eklenmiştir, önemli nokta eklediğiniz elementin night-mode id'sine sahip olması.


Not 3 : Gece saatlerinde siteye giriş yapan kullanıcıların otomatik olarak gece modunda siteyi kullanması için headerinclude şablonuna eklediğiniz kodları aşağıdaki ile değiştirin.




Kod:
<script>(function(window, document, undefined) {
    'use strict';
    var hr = (new Date()).getHours();
    if(hr > 20 || hr < 6){
        document.documentElement.className += ' night-mode';
    }
    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>

Hangi bölgelere uygulanması ayarlamak için CSS kullanımı : Hangi alanda kullanımını istiyor iseniz o bölüm için kullanacağınız seçici isminin önüne .night-mode eklemeniz yeterlidir.
Örnek : #content seçicisinin gece modunda nasıl gözükeceğini ayarlamak için .night-mode #content başlığı altında gerekli tanımlamaları yapa bilirsiniz.



Dip not : Yapıla işlemler size sadece işlemin nasıl yapıldığını anlatma amaçlı, kişiselleştirme tamamen size kalmış bir şey.


Önizleme :



[Resim: P7P35O.png]
VIP ÜYE OLUN FARKI YAŞAYIN...

İçerik sağlayıcı paylaşım sitesi olarak hizmet veren ForumCenneti sitemizde 5651 sayılı kanunun 8. maddesine ve T.C.K'nın 125. maddesine göre tüm üyelerimiz yaptıkları paylaşımlardan kendileri sorumludur. Sitemiz hakkında yapılacak tüm hukuksal şikayetleri bağlantısından bize ulaşıldıktan en geç 3 (üç) gün içerisinde ilgili kanunlar ve yönetmenlikler çerçevesinde tarafımızca incelenerek, gereken işlemler yapılacak ve site yöneticilerimiz tarafından bilgi verilecektir.