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
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla PGM
Teşekkür verenler: admin , Time Traveler , kaRanLık-61 , LastWorld , Gokss
#2
Önizlemeyi goruntuleyemiyorum
Edep ile gelen lütuf ile gider...
(------ keyifsizm.10tl.net ------)
Bağışta bulunmak için Tıklayınız... :)
Cevapla PGM
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
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla PGM
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 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, evrensel hukuk kaidelerine uymaya ç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
Yeni Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
Ara
Cevapla PGM
Teşekkür verenler: Novruz
#5
post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor
Ire lokke, ire tedd
2013 - günümüz
Cevapla PGM
Teşekkür verenler:
#6
(23-07-2019 Saat: 04:31)Ciri Nickli Kullanıcıdan Alıntı: post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Postbit kısmı için gece modu özelliği postbit butonları yanına eklenmiştir(PGM).
ücretli grafik - tasarım ve kodlama işleri yapılır
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla PGM
Teşekkür verenler:
#7
(23-07-2019 Saat: 04:31)Ciri Nickli Kullanıcıdan Alıntı: post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Zaten yarım yamalak olmuş, temadaki her şey arka planı beyaz varsayarak yapıldığından her şeyle uğraşmak gerekiyor. Yazının rengi, onun bunun arka planı
Nihility#9226
Cevapla PGM
Teşekkür verenler:
#8
Bence yine de kullanışlı..
Ama tabi daha kullanışlı hale getirilebilir.
Mesela öneri: gece modunda, beyaz kalan aradaki yerlerin rengi de koyulaştırılabilir. bunu bi deneyin bence.. yani kodlayabilirseniz @Novruz ben de destek forumuna uygularım. şuanda bu gece modu destekte var. üstte sağda görebilirsiniz basit bir şekilde tıklanabilen bir yer/link gibi var.
Ana prensibimiz "İnsana 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, evrensel hukuk kaidelerine uymaya ç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
Yeni Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
Ara
Cevapla PGM
Teşekkür verenler:
#9
Opera kullanıyorum ve "Opera bağlantıyı açamadı, çünkü sisteminizde "Javascript:" iletişim kuralı ile ilişkilendirilmiş bir uygulama bulunmuyor"
yazıyor.
Ire lokke, ire tedd
2013 - günümüz
Cevapla PGM
Teşekkür verenler:
#10
Destek'e girince mi oluyor? nerede oluyor ? ne durumda ?
Ana prensibimiz "İnsana 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, evrensel hukuk kaidelerine uymaya ç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
Yeni Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
Ara
Cevapla PGM
Teşekkür verenler:
#11
(23-07-2019 Saat: 18:57)Nihility Nickli Kullanıcıdan Alıntı:
(23-07-2019 Saat: 04:31)Ciri Nickli Kullanıcıdan Alıntı: post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Zaten yarım yamalak olmuş, temadaki her şey arka planı beyaz varsayarak yapıldığından her şeyle uğraşmak gerekiyor. Yazının rengi, onun bunun arka planı

Zaten tümüyle gece moduna uyarlama gibi bir amacımız yok şuanlık, yeni bir temaya geçildiği zaman tümüyle uyarlama yapılacaktır.

(23-07-2019 Saat: 19:58)Ciri Nickli Kullanıcıdan Alıntı: Opera kullanıyorum ve "Opera bağlantıyı açamadı, çünkü sisteminizde "Javascript:" iletişim kuralı ile ilişkilendirilmiş bir uygulama bulunmuyor"
yazıyor.

Ben de Opera kullanıyorum ve hiç bir hata yok. Hangi butonda bu hatayı aldığını belirtir misin?
ücretli grafik - tasarım ve kodlama işleri yapılır
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla PGM
Teşekkür verenler:
#12
(23-07-2019 Saat: 20:59)Novruz Nickli Kullanıcıdan Alıntı:
(23-07-2019 Saat: 18:57)Nihility Nickli Kullanıcıdan Alıntı:
(23-07-2019 Saat: 04:31)Ciri Nickli Kullanıcıdan Alıntı: post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Zaten yarım yamalak olmuş, temadaki her şey arka planı beyaz varsayarak yapıldığından her şeyle uğraşmak gerekiyor. Yazının rengi, onun bunun arka planı

Zaten tümüyle gece moduna uyarlama gibi bir amacımız yok şuanlık, yeni bir temaya geçildiği zaman tümüyle uyarlama yapılacaktır.

(23-07-2019 Saat: 19:58)Ciri Nickli Kullanıcıdan Alıntı: Opera kullanıyorum ve "Opera bağlantıyı açamadı, çünkü sisteminizde "Javascript:" iletişim kuralı ile ilişkilendirilmiş bir uygulama bulunmuyor"
yazıyor.

Ben de Opera kullanıyorum ve hiç bir hata yok. Hangi butonda bu hatayı aldığını belirtir misin?

PGM butonunda. Çerezleri mi temizlemem gerek? Tarayıcının Site Ayarları bölümünde Javascript kullanımı varsayılan olarka izin ver şeklinde ayarlı
Ire lokke, ire tedd
2013 - günümüz
Cevapla PGM
Teşekkür verenler:
#13
(24-07-2019 Saat: 20:26)Ciri Nickli Kullanıcıdan Alıntı:
(23-07-2019 Saat: 20:59)Novruz Nickli Kullanıcıdan Alıntı:
(23-07-2019 Saat: 18:57)Nihility Nickli Kullanıcıdan Alıntı:
(23-07-2019 Saat: 04:31)Ciri Nickli Kullanıcıdan Alıntı: post_content kısmını da, (sanırım container kısmı oluyordu) koyulaştırabilirseniz çok hoş olur. -benim açımdan- bu şekliyle, arka taraf koyu ancak ön taraf açık renkli daha çok göz yoruyor

Zaten yarım yamalak olmuş, temadaki her şey arka planı beyaz varsayarak yapıldığından her şeyle uğraşmak gerekiyor. Yazının rengi, onun bunun arka planı

Zaten tümüyle gece moduna uyarlama gibi bir amacımız yok şuanlık, yeni bir temaya geçildiği zaman tümüyle uyarlama yapılacaktır.

(23-07-2019 Saat: 19:58)Ciri Nickli Kullanıcıdan Alıntı: Opera kullanıyorum ve "Opera bağlantıyı açamadı, çünkü sisteminizde "Javascript:" iletişim kuralı ile ilişkilendirilmiş bir uygulama bulunmuyor"
yazıyor.

Ben de Opera kullanıyorum ve hiç bir hata yok. Hangi butonda bu hatayı aldığını belirtir misin?

PGM butonunda. Çerezleri mi temizlemem gerek? Tarayıcının Site Ayarları bölümünde Javascript kullanımı varsayılan olarka izin ver şeklinde ayarlı

Kodlar güncellendi, tekrar kontrol eder misin?
ücretli grafik - tasarım ve kodlama işleri yapılır
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla PGM
Teşekkür verenler:
#14
f.lux indirin bitsin gitsin
Go
Ara
Cevapla PGM
Teşekkür verenler:
#15
Bu hali daha iyi @Novruz
elinize sağlık
Ana prensibimiz "İnsana 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, evrensel hukuk kaidelerine uymaya ç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
Yeni Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***