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
Ara
Cevapla PGM
Teşekkür verenler: admin , Time Traveler , kaRanLık-61 , LastWorld , Gokss
#2
Önizlemeyi goruntuleyemiyorum
-ARCH
Lütfen "Rep Verbutonuna tıklayarak bizi değerlendirin.
Forum Organizatörü
Ara
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.
Ara
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 insana saygı" dedik, kimileri bunu yanlış anladı, sürekli tepemize çıktı. 
Bundan sonra ana prensibim: "isteyen istediği yere gitsin". Forumda sürekli negatif enerji yayanları, hakaret edenleri ya da hakaretimsi yazanları dahi banlayacağım. Forumda etkileşim azalacakmış umuruda değil. Yıllarca negatif enerjili insanlara katlandığım yeter.. 

Sonra duymadım, bilmiyordum yok.. 

Önemli konular listesi: https://destek.10tl.net/showthread.php?tid=99072
Android 10tl programı: https://destek.10tl.net/showthread.php?tid=98074
Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
10tl.net Geneli (Forum açma v.b.) Kurallar: https://destek.10tl.net/showthread.php?tid=25433

twitter.png https://twitter.com/10tlnet
discord.png https://discord.gg/fUC7A2W
email.png  info (at.) 10tl.net
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
Ara
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).
Ara
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ı
Ara
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 insana saygı" dedik, kimileri bunu yanlış anladı, sürekli tepemize çıktı. 
Bundan sonra ana prensibim: "isteyen istediği yere gitsin". Forumda sürekli negatif enerji yayanları, hakaret edenleri ya da hakaretimsi yazanları dahi banlayacağım. Forumda etkileşim azalacakmış umuruda değil. Yıllarca negatif enerjili insanlara katlandığım yeter.. 

Sonra duymadım, bilmiyordum yok.. 

Önemli konular listesi: https://destek.10tl.net/showthread.php?tid=99072
Android 10tl programı: https://destek.10tl.net/showthread.php?tid=98074
Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
10tl.net Geneli (Forum açma v.b.) Kurallar: https://destek.10tl.net/showthread.php?tid=25433

twitter.png https://twitter.com/10tlnet
discord.png https://discord.gg/fUC7A2W
email.png  info (at.) 10tl.net
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.
Ara
Cevapla PGM
Teşekkür verenler:
#10
Destek'e girince mi oluyor? nerede oluyor ? ne durumda ?
----------------
"Ana prensibimiz insana saygı" dedik, kimileri bunu yanlış anladı, sürekli tepemize çıktı. 
Bundan sonra ana prensibim: "isteyen istediği yere gitsin". Forumda sürekli negatif enerji yayanları, hakaret edenleri ya da hakaretimsi yazanları dahi banlayacağım. Forumda etkileşim azalacakmış umuruda değil. Yıllarca negatif enerjili insanlara katlandığım yeter.. 

Sonra duymadım, bilmiyordum yok.. 

Önemli konular listesi: https://destek.10tl.net/showthread.php?tid=99072
Android 10tl programı: https://destek.10tl.net/showthread.php?tid=98074
Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
10tl.net Geneli (Forum açma v.b.) Kurallar: https://destek.10tl.net/showthread.php?tid=25433

twitter.png https://twitter.com/10tlnet
discord.png https://discord.gg/fUC7A2W
email.png  info (at.) 10tl.net
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?
Ara
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ı
Ara
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?
Ara
Cevapla PGM
Teşekkür verenler:
#14
f.lux indirin bitsin gitsin
Ara
Cevapla PGM
Teşekkür verenler:
#15
Bu hali daha iyi @Novruz
elinize sağlık
----------------
"Ana prensibimiz insana saygı" dedik, kimileri bunu yanlış anladı, sürekli tepemize çıktı. 
Bundan sonra ana prensibim: "isteyen istediği yere gitsin". Forumda sürekli negatif enerji yayanları, hakaret edenleri ya da hakaretimsi yazanları dahi banlayacağım. Forumda etkileşim azalacakmış umuruda değil. Yıllarca negatif enerjili insanlara katlandığım yeter.. 

Sonra duymadım, bilmiyordum yok.. 

Önemli konular listesi: https://destek.10tl.net/showthread.php?tid=99072
Android 10tl programı: https://destek.10tl.net/showthread.php?tid=98074
Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
10tl.net Geneli (Forum açma v.b.) Kurallar: https://destek.10tl.net/showthread.php?tid=25433

twitter.png https://twitter.com/10tlnet
discord.png https://discord.gg/fUC7A2W
email.png  info (at.) 10tl.net
Ara
Cevapla PGM
Teşekkür verenler:
#16
.//Düzenlendi
-ARCH
Lütfen "Rep Verbutonuna tıklayarak bizi değerlendirin.
Forum Organizatörü
Ara
Cevapla PGM
Teşekkür verenler:
#17
Teşekkürler işe yarar bilgiler.
Ara
Cevapla PGM
Teşekkür verenler:
#18
Gece gündüz iconu olarak nasıl yapabiliriz.
Ara
Cevapla PGM
Teşekkür verenler:
#19
Bu linkteki gibi olsa iyi olur.

https://codepen.io/himalayasingh/pen/eaejBQ

Alttaki gibi css kullanmak istiyorum.Yukardaki kodu nasıl ayarlayabiliriz. Sayfa degiştirince bazı kodlarda sayfayı yenileyince beyazlık çıkıyor.

.dark body {
background: #000;
}
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi



YILLARIN FORUMU / Forumcu.10TL.NeT -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping