freelancer

Mybb Gece Modu Özelliği Ekleyin [Modifikasyon]
Konuyu başlatan yazar root


Bu konuyu oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5


0 konudaki cevap sayısı
root
Yönetici
4 Aylık Kullanıcı


Yönetici
Ticaret Sayısı: 0
Ad Soyad: Webmaskar
Mesajlar: 61
Katılım: 20-02-2021
Konum: Balıkesir
Cinsiyet: Erkek
Meslek: Webmaskar Yönetici
WPuan: 3
61 threads Kayıt Tarihi: 20-02-2021
Beğeniler: 6 / 0
16-04-2021, 01:55 AM -
#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.
Beğenenler:

Hesap açın veya yorum yazmak için giriş yapın.

Yorum yazmak için Giriş yapmanız gerekiyor.

Kayıt Ol

Hesap oluşturmak ve bize katılmak çok kolay!

Kayıt Ol

Giriş Yap

Bir hesabın mı var? Hemen giriş yap!

Giriş Yap



Konuyu Okuyanlar: 1 Ziyaretçi

[-]
Etiketler
gece , modu , özelliği , ekleyin , modifikasyon