Güncel ve Genel Bilgi Desteği
Giriş Sayfanız Yapın  Güncel ve Genel Bilgi Desteği    Sık Kullanılanlara Ekleyin
Follow @yucinbil
Javascript Css stil değiştirici hazırlamak
Yazar bot
Bir önceki yazımda size söz verdiğim gibi beraber javascript yardımı ile css stil değiştirici hazırlayacağız. Ancak eğer css konusunda bilgi sahibi değilseniz lütfen uzman biri yardımı ile hazırlamanızı yapınız. Yapacağınız hata sitenizde değişik bozulmalara neden olabilir. Yazının devamında anlattığım css stil değiştiri hazırlama yabancı bir siteden Türkçeye çevirilmiş halidir.
1. Javascript styleswitcher dosyasını indirin
Vereceğim bu dosya stil geçişlerini sağlamanız için gereken bir js dosyasıdır.
İndir (styleswitcher.js)
2. <head> tagı arasında js dosyasını çağırın
Stil değiştiriyi ekleyeceğiniz sayfada </head> tagının hemen üstüne alttaki kodu ekleyin eğer koddaki src çağırma kısmı farklı ise kendi sitenize göre uygun hale getirin:
<script type="text/javascript" src="styleswitcher.js"></script>
3. Yeni bir stil dosyası oluşturun
Bu kısım en önemli kısımdır. Sitenizde bulunan css stil dosyasının bir kopyasını oluşturarak içindeki değerleri , renkleri yeni stile göre ayarlayın. Eğer stilinizdeki tanımlamalar diğer stil ile bağdaşmazsa uyumsuzluklar ortaya çıkabilir. Gerekli değişiklikleri yapıktan sonra dosyanızı “style-mavi.css” şeklinde farlı bir isim ile adlandırın ve kaydedin. Bu işlemi istediğiniz kadar stil oluşturmak için kullanabilirsiniz.
4. Head bölümünde stillere link verin
Dikkat etmeniz gereken nokta iki çeşit stil dosyası olduğudur. Ana stil ve Alternatif stil. Ana stiliniz temanın ilk stilidir Title yani başlık değeri default’dur.
<link rel="stylesheet" type="text/css" href="style.css" title="default" />
Oluşturduğunuz diğer stil dosyaları alternatif stillerdiir. Alttaki kod gibi “Rel” ve “Title” değerleri ana stilden farklıdır. Birden fazla alternatif eklemek için alttaki kodları tekrarlayabilirsiniz..
<link rel="alternate stylesheet" type="text/css" href="style-mavi.css" title="mavi" />
5. CSS stil değiştiricileri sitenize link olarak ekleyin.
Üstteki stil dosyalarını oluşturup tanımladıktan sonra buları ziyaretcilernizin kullanacağı hale getirmek için sitenizde istediğiniz herhangi bir yerde link olarak ister text formatında isterseniz imaj formatın kullanıcınıza suınabiilirsiniz. Altta belirttiğim kodda dikkat çeken kısım setActiveStyleSheet(’mavi’); olarak belirtiğimiz stil aktifleştirme bölümüdür.
<a href="/" onclick="setActiveStyleSheet(’mavi’); return false;">Mavi Tema</a>
Aynı link kodu ile alttakini kullanarakda ziyaretçinin orjinal stile dönmesi sağlanabilir:
<a href="/" onclick="setActiveStyleSheet(’default’); return false;">Orjinal Tema</a>
İşte bukadar stil değiştiriciniz hazır.
Eğer Css hakkında bilgi sahibi değilseniz lütfen uzman birinin gözetimi ile yapın. Yanlış bir şey yaptığınızda sitenizin yapısını bozabilirsiniz ve ben kesinlikle bu nedenden ötürü sorumluluk kabul etmem.
Kolay gelsin.
Bu yazı toplamda 8510, bugün ise 1 kez görüntülenmiş
Ev ve İş Telefonu Başvurusu Yapmak İçin; Buraya tıklayınız...Okuyucu Yorumları
Yorum
Reklam
Son Eklenenler
- Çiçek Saksıları
- Çocuk Kitapları Web Sitesi Açıldı
- Fabrika İnşaatı Web Sitesi Açıldı.
- Hazır Beton
- Pirelli 2012 Takvimi Çekimi -Galeri
- Kral oyun oyna | Ücretsiz oyun oyna ! hafıza oyunları burada 3
- Oyun Oyna 3d Oyunla Araba Oyunu silah Oyunu flash oyunlar burada
- Fatmagülün Suçu Ne Yeni Sezon İlk Fragmanı sitemizde 2011Fatmagül’ün Suçu Ne Yeni Sezon Fragman Video İzle Kanal D Eylül 2011
- Öyle Bir Geçer zamanki dizisi yeni sezon ilk fragmanı izle
- 2011 Üniversite harçları – üniversite kayıt evrakları 2011-2012
Ayarlar
- Haziran 14, 2008
- Teknoloji
- 1 yorum
- RSS Yorumları
- Del.ico.us
- Digg!
şunu video olarak anlatsan daha iyi olur css dosyası oluşturun diyorsunda millet onu nasıl oluşturacak bi bilgi verseydin iyi o9luırdu