Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
MyBB Gece modu özelliği [Modifikasyon]
#1
Lightbulb 
Bu modifikasyon sitenizine gece modu(koyu tema) seçicisi(switcher) ekleye bilirsiniz.
Farklı bir sitede paylaşırken yapımcı ismi belirtmenizi rica ediyorum, örn: 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.
PHP 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.
PHP Kod:
<script>(function(windowdocumentundefined) {
    
'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';
    }
})(
windowdocument);    

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 :
VQXZmr.png
https://resmim.net/f/Xdv5dt.png
ücretli grafik - tasarım ve kodlama işleri yapılır
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla
Teşekkür verenler: admin , Time Trave , kaRanLık-6 , LastWorld , Gokss
#2
Önizlemeyi goruntuleyemiyorum
Edep ile gelen lütuf ile gider...

Bağışta bulunmak için Tıklayınız... :)
Ara
Cevapla
Teşekkür verenler:
#3
(06-07-2019 Saat: 22:28)NextWorld Nickli Kullanıcıdan Alıntı: Önizlemeyi goruntuleyemiyorum

Hızlıresim sunucularında problem var galiba, yedek önizleme linki eklenmiştir.
ücretli grafik - tasarım ve kodlama işleri yapılır
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla
Teşekkür verenler: NextWorld
#4
- destek sitesine uygulanmıştır. Teşekkürler. (ve ben gece modunu kullanıyorum, gözü yormuyor)
- hızlıresim mümkünse kullanmayın. Bazı yerlerden açılmıyor.
Ana prensibimiz "İnsana/Yaradılana Saygı"

Amacımız sadece para kazanmak ya da geyik değil, aynı zamanda faydalı şeyler yapmak. sadece para kazanmak olsaydı, yapılacak birçok şey vardı... 

Haksızlığa uğrayan varsa sırayla diğer görevlilere, sonra adminlere, tatmin olmazlarsa da bana yazabilirler. Elimizden geldiği kadar adaletli olmaya çalışacağız. 

Önemli konular listesi: https://destek.10tl.net/showthread.php?tid=99072
Android 10tl programı: https://destek.10tl.net/showthread.php?tid=98074
Ara
Cevapla
Teşekkür verenler: Novruz


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi



***