MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
novruz avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

MyBB Gece modu özelliği [Modifikasyon]


Sponsor Reklam

Çevrimdışı novruz
 Tarih: 06-07-2019, Saat:21:25
#1
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 :
resim
Cevapla
Bunu Beğenenler: #Zavira , ScaryMario
Sponsor Reklam
Sponsor Reklam Sponsor Reklam

Çevrimdışı #Zavira
 Tarih: 06-07-2019, Saat:21:28
(Son Düzenleme: 06-07-2019, Saat:21:29, Düzenleyen: #Zavira.)
#2
Default tema kullanmayacağım ama çok güzel elinize sağlık Gülümseme
Cevapla
Bunu Beğenenler:

Çevrimdışı novruz
 Tarih: 06-07-2019, Saat:21:34
#3
(06-07-2019, Saat:21:28)#Zavira Adlı Kullanıcıdan Alıntı: Default tema kullanmayacağım ama çok güzel elinize sağlık Gülümseme

Modifikasyon default tema üzerinde yapılmıştır fakat istenilen temaya uyarlana bilir, sadece css kodlarını doğru düzenlemeniz yeterlidir.
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  MyBB her foruma ayrı Font Awesome ikon [Modifikasyon] novruz 0 381 14-08-2019, Saat:11:01
Son Yorum: novruz
  [1.6 - 1.8] Mybb Social Login Eklentisi ile 30 Farklı Sosyal MEdya sitesiyle Kayıt Olma camoka1903 5 2,289 18-07-2019, Saat:17:47
Son Yorum: MuslumDurukan
  MyBB ana sayfada son konular 4'lü blok [Modifikasyon] novruz 0 207 03-07-2019, Saat:17:39
Son Yorum: novruz
Öneri - Fikir MyBB kimler çevrimiçi bölümünde kullanıcı avatarı [Modifikasyon] novruz 0 165 30-06-2019, Saat:11:08
Son Yorum: novruz
  MyBB Codeblock "Tümünü seç", "Tümünü kopyala" butoları [Modifikasyon] novruz 0 143 28-06-2019, Saat:15:08
Son Yorum: novruz



Konuyu Okuyanlar: 1 Ziyaretçi