Farklı css seçmek? |
15 Mesajlar | 1.786 Okunma | ||
- Üyelik 24.02.2018
- Yaş/Cinsiyet 42 / E
- Meslek Webmaster
- Konum Diğer
- Ad Soyad R** C**
- Mesajlar 262
- Beğeniler 110 / 53
- Ticaret 2, (%100)
Merhabalar, bir konuda yardıma ihtiyacım var. Sitemde kullandığım tema açık tonlarda bir tema ve ben siteme gece modu eklemek istiyorum fakat benim yapmak istediğim ise şuan ki temamım css dosyasını isteğime göre editleyip gece moduna uygun hale getirip ve sitede bir buton yardımıyla gece modu için hazırladığım css i tıklama ile nasıl aktif edebilirim?
- Üyelik 03.04.2019
- Yaş/Cinsiyet 29 / E
- Meslek .
- Konum Trabzon
- Ad Soyad A** K**
- Mesajlar 905
- Beğeniler 393 / 395
- Ticaret 3, (%100)
Javascript localStorage araştırın hocam, css dosyasından renk datalarını içeren class ların aynısını alın
.gecemodu .ornek {buraya gece modu css renkleri}
gibi kaydedin her birini. Sonra bir buton ekleyin, bu butona tıklandığında sitenin body tagına gecemodu class ını eklesin jquery ile ve aynı zamanda localStorage e de gece modunun aktif olduğunu belirten değeri yollasın. Sayfa açılışında da yine javascript kodları gece modu açık mı değil mi diye kontrol etsin, açıksa otomatik olarak body tagına gecemodu class ını atasın.
Çok karışık anlatmış olabilirim, benim kullandığım sistem bu şekilde
.gecemodu .ornek {buraya gece modu css renkleri}
gibi kaydedin her birini. Sonra bir buton ekleyin, bu butona tıklandığında sitenin body tagına gecemodu class ını eklesin jquery ile ve aynı zamanda localStorage e de gece modunun aktif olduğunu belirten değeri yollasın. Sayfa açılışında da yine javascript kodları gece modu açık mı değil mi diye kontrol etsin, açıksa otomatik olarak body tagına gecemodu class ını atasın.
Çok karışık anlatmış olabilirim, benim kullandığım sistem bu şekilde
- Üyelik 03.04.2019
- Yaş/Cinsiyet 29 / E
- Meslek .
- Konum Trabzon
- Ad Soyad A** K**
- Mesajlar 905
- Beğeniler 393 / 395
- Ticaret 3, (%100)
Benim genel sorunum ya bu sanırım :) Aklımdan çok hızlı geçiyor düşündüklerim yazıya aktarırken de öyle olmuş kusura bakmayın.
Siz önce internetten javascript localStorage çalışma mantığına bakın, işimi görür derse o şekilde olsun. Aklıma bir ikinci yöntem daha geliyor işin içinde php olduğu ama o yöntem pek mantıklı olmaz zannımca
Siz önce internetten javascript localStorage çalışma mantığına bakın, işimi görür derse o şekilde olsun. Aklıma bir ikinci yöntem daha geliyor işin içinde php olduğu ama o yöntem pek mantıklı olmaz zannımca
- Üyelik 03.04.2019
- Yaş/Cinsiyet 29 / E
- Meslek .
- Konum Trabzon
- Ad Soyad A** K**
- Mesajlar 905
- Beğeniler 393 / 395
- Ticaret 3, (%100)
var theme = window.localStorage.currentTheme;
$('body').addClass(theme);
if ($("body").hasClass("gecemodu")) {
$('.dntoggle').addClass('fa-sun-o');
$('.dntoggle').removeClass('fa-moon-o');
document.getElementById("dntoggle").innerHTML=" Normal Mod";
} else {
$('.dntoggle').removeClass('fa-sun-o');
$('.dntoggle').addClass('fa-moon-o');
document.getElementById("dntoggle").innerHTML=" Gece Modu";
}
$('.dntoggle').click(function() {
$('.dntoggle').toggleClass('fa-sun-o');
$('.dntoggle').toggleClass('fa-moon-o');
if ($("body").hasClass("gecemodu")) {
$('body').toggleClass('gecemodu');
localStorage.removeItem('currentTheme');
localStorage.currentTheme = "day";
document.getElementById("dntoggle").innerHTML=" Gece Modu";
} else {
$('body').toggleClass('gecemodu');
localStorage.removeItem('currentTheme');
localStorage.currentTheme = "gecemodu";
document.getElementById("dntoggle").innerHTML=" Normal Mod";
}
});
Hocam benim gece modu açıp kapatmak için kullandığım kod bloğu bu şekilde. Zamanında birçok kaynaktan araştırmıştım gece modu olayını, en mantıklısı bu gelmişti bana :)
Şimdi biraz daha sade anlatmaya çalışayım.
Mesela diyelim sizin css dosyasında şöyle bir kod var.
body {background-color:#fff;
color :#000000}
. icerik {background-color:green;
color:red}
Arka plan beyaz yazı renkleri de siyah.
Class ı icerik olan div in arka planı yeşil yazıları da kırmızı.
Şimdi siz aynı veya herhangi bir css dosyasına şu şekil bir kod daha ekleyin ;
.gecemodu {background-color:#000000;
color :#fff}
.gecemodu .icerik {background-color:yellow;
color:purple}
Şimdiki haliyle ne dedik, eğer gece modu aktif olursa ;
Ana sayfanın arka plan rengi siyah yazıları da beyaz olsun.
Yine class o icerik olan div in arka planı sarı yazıları da mor olsun.
Bu ani değişimi de bir buton yardımıyla üstte verdiğim javascript kodu sayesinde yapıyoruz :)
- Üyelik 24.02.2018
- Yaş/Cinsiyet 42 / E
- Meslek Webmaster
- Konum Diğer
- Ad Soyad R** C**
- Mesajlar 262
- Beğeniler 110 / 53
- Ticaret 2, (%100)
Hocam çok teşekkürler fakat benim içerik çok farklı Datalife Engine script kullanıyorum benim sadece amacım gece.css diye bir css hazırlayıp gereken herşeyi onun içerisine yapıp bir buton yardımı ile o css i sitede seçmek olacaktı :D
- Üyelik 03.04.2019
- Yaş/Cinsiyet 29 / E
- Meslek .
- Konum Trabzon
- Ad Soyad A** K**
- Mesajlar 905
- Beğeniler 393 / 395
- Ticaret 3, (%100)
Olsun hocam bunun için yine de localStorage kullanmanız şart, sadece sonraki adımları değişir :) veri tabanı sorgusu ile de yapılabilir aslında, scripti bilmiyorum açıkçası, üyelik sistemli bir site değilse php veri tabanı sorgusu ile yapmak mantıklı olmaz
- Üyelik 03.01.2016
- Yaş/Cinsiyet 39 / E
- Meslek .Net Developer - İng Öğretmeni
- Konum İzmir
- Ad Soyad Ö** Ç**
- Mesajlar 339
- Beğeniler 39 / 160
- Ticaret 0, (%0)
Şöyle bir yol daha var css yolunu bir değişkene ata ve o değişkeni button click olarak değiştir tabi artık gerisi senin js ilemi event edersin yoksa php koduylamı bilmem.
Ama abdullahın dediği yol bana göre daha iyi
Ama abdullahın dediği yol bana göre daha iyi
- Üyelik 03.01.2016
- Yaş/Cinsiyet 39 / E
- Meslek .Net Developer - İng Öğretmeni
- Konum İzmir
- Ad Soyad Ö** Ç**
- Mesajlar 339
- Beğeniler 39 / 160
- Ticaret 0, (%0)
Bir çok yöntem bulursun mantığını kavradıktan sonra
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)