Jquery HaberBantı, FotoGaleri,Tarih Destekli Okul Temam V14

Kodla Büyü

xorcistforyou

Seçkin Üye
Seçkin Üye
Mesajlar
909
Wordpress temalarına olan ilgim artınca dayanamadım, bende benzer bir tasarımı kendi fikirlerimden yola çıkarak 2. bir tema daha oluşturdum. Bu temayı 7 farklı şekilde kullanabilme imkanımızda bulunmaktadır. aşağıdaki resimdeki gibi...

Okul Tema v13 incelemek için : TIKLA
Diğer çalışmalarıma ulaşmak ve incelemek için imzamdaki linki kullanabilirsiniz...
TEMANIN ÖNİZLEMESİ
V14 ÖNİZLEME TIKLAYINIZ

TEMANIN ÖZELLİKLERİ

1. Temamız 988px genişliğinde ve 2 sütundan oluşmaktadır.

2. Burda örnek banner kullanımı ekli. Boş banner'ı "resimler" klasöründe bulabilirsiniz.

3. jQuery coin slider kullanılarak haber bantı oluşturdum. Scripti biraz modifiye ettim burda.

4. Personel ve okul sayfalarında kendi yazdığım jQuery script ile akerdeon tarzında şık bir kullanım ekledim.

5. Thickbox kullanarak okul galeri sayfası hazırladım.

6. Haftanın bölümünüde siteyi daha çekici hale getirmek için , birde diğer tasarımlardan farklı olması amacıyla ekledim.

7. FF, Chrome ve IE'de sorunsuz çalışmaktadır. IE6 desteği yoktur.

8. FF ve Chrome için CSS3 kodları ekleyerek görsellik kattım.

9. "bos-sablon.html" adında boş bir şablon dosyası içindedir. Yeni ekleyeceğiniz sayfaları bu şablonu kullanarak hazırlayabilirsiniz.

10. Haber arşiv sayfası ekledim eski haberleri buraya yazmanız için.


NOT: IE7 testi yapamadım. Bazı görsel aksaklıklar oluşabilir.


TEMA DEĞİŞİMİ NASIL YAPILACAK ?

1. "FTHTEMA.CSS" dosyasını açtıktan sonra "yatay menu kodları" başlığını buluyoruz.

2. Aşağıdaki kod bloğunda "m-bar3.jpg" kısmını "m-bar1.jpg ... m-bar7.jpg" şeklinde değiştiriyoruz.
Kod:
#menubar { position:relative;
		   display:block;
		   text-align:left;
		   height:40px;
		   width:988px;
		   margin:0; padding:0;
		   background:#e8e8e8 url(../resimler/m-bar3.png) no-repeat top;
}

3. Aşağıdaki kod bloğunda "m3.jpg" kısmını "m1.jpg ... m7.jpg" şeklinde değiştiriyoruz.
Kod:
.slmenu h1 { 
		  color:#fff;
		  font:normal 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		  height:50px;
		  line-height:50px;
		  letter-spacing:1px;
		  margin:0;
		  padding:0px 0px 0px 20px;
		  background:transparent url(../resimler/m3.jpg) no-repeat left top;
		  display:block;
		  text-shadow:1px 1px 0 #555;}

4. Bu şekilde tema değişikliklerini ayarlayabiliyoruz.


Kod:
ŞİFRE : fatihets
 

Ekli dosyalar

  • ana-tanitim.jpg
    ana-tanitim.jpg
    261.3 KB · Görüntüleme: 1,923
  • index-ust.jpg
    index-ust.jpg
    118.5 KB · Görüntüleme: 1,923
  • index-altt.jpg
    index-altt.jpg
    60.6 KB · Görüntüleme: 1,923
  • fthtema14.rar
    fthtema14.rar
    349.3 KB · Görüntüleme: 493
eyvallah.. güle güle kullanın..

siteye eklenebilecek bolumler hakkında da fikir paylaşabilirseniz sonraki çalışmalar daha kapsamlı ve kullanışlı olabilir.
 
Hocam şablon olayını çözmüşsünüz tebrikler. :alkis: :alkis: Tema değiştirme olayı da çok güzel düşünülmüş. Bundan önce paylaştığınız şablonu düzenlemeyi bitirmek üzereyim,yardımcı olabilirseniz bir şey sorabilir miyim? (evet mi dediniz :D :D e sorayım o zaman) okulumuz ve okul galeri sayfalarını tek bir sayfada göstermek istiyorum ve bunu da coda-slideri kullanarak yapayım diyorum fakat diğer temalarınızda kullandığınız slider kodlarıyla bu işi yapmaya çalırken tabları bir türlü ortalayamıyorum.Biraz daha açıklayıcı olsun diye buyrun ekran görüntüsü.
 

Ekli dosyalar

  • 23.08.jpg
    23.08.jpg
    46.7 KB · Görüntüleme: 1,820
Hocam;
1. o bolumu css'den text-align:center ile yapmak istersen tekrar bir div içine alman gerekir o bolumu.. Ve o div için dediğim değeri atamalısın.

2. "galeri,tarihçe ..." bolumunu içine alan div'e sag ve sol margin değerleri atayarak sayfanın ortasına alabilirsin..
yani sayfa 700px genişliğinde diğer kısım 400px ise border ve padding değerlerini de düşerek 300px kısım için sağ ve sol margin 150px vererek sayfa ortasına alabilirsin...
 
BBNET
Geri
Üst