+ Üye ol
|
İçerik Arama
Son üyeler
Temalar Kimler sitede
Ziyaretçi Sayısı
Alexa |
Ana sayfa / xoopshocasi.com / Tema Dersleri / Sıfırdan Tema Yapımı - 2
Sıfırdan Tema Yapımı - 2
Merhabalar..sıfırdan tema yapımına stil dosyasını yaratarak devam ediyoruz..
eğer tema derslerimize ilk olarak bu dökümanla başladıysanız..ilk önce Sıfırdan Tema Yapımı (theme.html) isimli dersimizi okumanızı tavsiye ederiz.. zira bu ders theme.html'yi yaratmış olduğunuz kabul edilerek anlatılacaktır. Şimdi theme.html dosyasındaki kimliği belirtilmiş yani id veya class parametreleri bazı değerler içeren taglerimiz için bir takım stil tanımlamalarında bulunmayı öğreneceğiz..ilk olarak body taginden başlayalım..biliyorsunuz ki theme.html dosyasında sayfamızı ortalanmış bir tablo üzerine kurmuştuk..bu sebeple arka plan rengi sayfa içeriğimizi daha iyi gösterecek bir biçimde ayarlanmalıdır..benim örneğimde arka plan için sadece renk tanımlanmış, siz isterseniz resim de tanımlayabilirsiniz body { background-color: #99ccff; } bu ders için verdiğim tüm örnekler aynı tema için kendi sitemde kullandığım renk değerleridir..yani tüm parçaları değişiklik yapmadan birleştirdiğinizde ModernFizik sitesinde kullanılan temaya ulaşacaksınız..şimdi hatırlarsanız theme.html içinde tüm içeriği taşıyan tablomuzun class="anatablo" olarak stil tanımlamasını yapmıştık şimdi css ile düzenleme yapıyoruz .anatablo { width: 97%; border: 3px solid #ee9933; background-color: #fafafa; font-family: verdana; font-size: 10pt; color: #333333; } width: genişlik , border: kenarlık, background-color: arka plan rengi, font-family: yazıtipi font-size: yazıtipi boyutu , color: yazıtipi rengi bu aşamaya kadar bir şeyi farketmiş olmalısınız..ilk kodumuzda sadece body yazarken ikincisinde .anatablo yazdık, yani başına bir nokta koyduk..ilk kullanımımız theme.html içinde hiç bir tanımlama yapmamıza gerek bırakmıyor ve atadığımız değerler body taginin geçtiği her yerde geçerli oluyor..her ne kadar body'nin bir çok yerde geçmesi söz konusu olmasa da biraz sonra aynı tanımlamayı sütunlarımız için de çok kullanışlı bir biçimde yapacağız..ikinci kodda ise theme.html içinde class="anatablo" şeklinde belirttiğimiz stili tanımladık..birazdan göreceğiz ki id="..." şeklinde yaptığımız tanım- lamalar içinde # işaretini kullanacağız..devam edelim table td { vertical-align: top; text-align: left; } bu kodla tüm tabloların tüm sütunlarının içeriklerinin dikey konum olarak üste, yatay konum olarak ise sola hizalanmasını sağladık tr#ust_menu { width: 100%; background-color: #fafafa; text-align: center; border: 2px dotted #ee9933; } tr#ust_menu a { font-size: 12pt; } hızlı erişim menüsü olarak tanımladığımız tr id="ust_menu" tablo satırını üstteki gibi şekillendiriyoruz..burada bir nokta çok önemlidir..tr#ust_menu a ile ust_menu id'sine sahip tüm tablo satırlarında geçen tüm a yani link vermeye yarayan tagleri toplu halde şekillendirdik..işte id ve class birbirinden bu noktada kesin olarak ayrılıyorlar..gördüğünüz gibi id tanımlaması yapılmış alanlar içinde bulunan diğer taglere de müdahale imkanı sağlıyorlar..bu yüzden class yerine id kullanmak daha mantıklı .sayfa_icerigi { width: 100%; text-align: justify; font-size: 8pt; padding: 3px; } a { color: #336699; font-family: verdana; font-size: 8pt; font-weight: bold; text-decoration: none; } a:hover { color: #ee9933; font-family: verdana; font-size: 8pt; font-weight: bold; text-decoration: underline; } üstteki kodumuz class="sayfa_icerigi" kullandığımız yerleri şekillendirir..görüldüğü gibi bu alanlar için genişliğin tam, metin hizalamasının iki yana yaslanmış, metin boyutunun 8 punto ve yanlardan bırakılacak boşluğun da 3 piksel olması gerektiğini belirttim..ikinci ve üçüncü satırımız ise aksi bir tanımlama olmadığı sürece (örneğin ust_menu) tüm linklerimizin şekillenmesini belirler..a:hover ise bir linkin üstüne gelindiğinde nasıl davranması gerektiğini belirleyen alandır şimdi tek tek blokların tanımlamalarını yapalım..soldan başlıyoruz :) td#sol_blok { width: 15%; border-right: 1px solid #cccccc; font-size:12px; } td#sol_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 3px solid #ee9933; border-right: 3px solid #ee9933; } td#sol_blok div.icerik { padding: 3px; line-height: 120%; line-height: 120%; } td#sol_blok a { color: #003366; font-size: 10pt; } td#sol_blok a:hover { color: #ee9933; } sol bloklar için 5 adet tanımlama yaptım..ilki bu blokların genişliklerini, kenarlıklarını ve yazıtipi boyutunu belirtiyor..baslik ve icerik alanları ise tüm bloklarda sayfanızın farklı ve orjinal gözükmesini sağlayabileceğiniz en önemli alanlar..belki bir bakışta anlayamadığınız tek şey line-height olabilir..bunu satırların biraz aralıklı durması için kullanıyoruz..diğer iki satır ise sol bloğa eklenen linklerin davranışını belirleyecektir td#sag_blok { vertical-align: top; width: 15%; font-size:12px; } td#sag_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 3px solid #ee9933; border-right: 3px solid #ee9933; } td#sag_blok div.icerik { padding: 3px; line-height: 120%; line-height: 120%; } td#sag_blok a { color: #003366; } td#sag_blok a:hover { color: #ee9933; } gördüğünüz gibi ben sağ blokla sol bloğumu aynı gözükecek şekilde ayarladım..ama siz farklı görünmesini isteyebilirsiniz, tek yapmanız gereken değerlerle oynamak td#orta_blok { vertical-align: top; width: 70%; border-right: 1px solid #cccccc; border-right: 1px solid #cccccc; font-size:12px; } td#orta_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 3px solid #ee9933; border-right: 3px solid #ee9933; } td#orta_blok div.icerik { vertical-align: top; padding: 3px; line-height: 120%; line-height: 120%; } td#orta_blok a { color: #003366; } td#orta_blok a:hover { color: #ee9933; } orta blok için de hemen hemen aynı tanımlamaları yapıyoruz..yalnız ufak bir not: orta bloğu yandakilerden geniş yapmayı unutmayın..yoksa orantısız bir görüntü ortaya çıkabilir td#orta_orta_blok { vertical-align: top; padding: 3px; } td#orta_orta_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 2px solid #ee9933; border-right: 2px solid #ee9933; } td#orta_orta_blok div.icerik { vertical-align: top; background-color: #fafafa; padding: 3px; line-height: 120%; line-height: 120%; } td#orta_sol_blok { vertical-align: top; padding: 3px; } td#orta_sol_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 2px solid #ee9933; border-right: 2px solid #ee9933; } td#orta_sol_blok div.icerik { background-color: #fafafa; padding: 3px; line-height: 120%; line-height: 120%; } td#orta_sag_blok { vertical-align: top; padding: 3px; } td#orta_sag_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 2px solid #ee9933; border-right: 2px solid #ee9933; } td#orta_sag_blok div.icerik { background-color: #fafafa; padding: 3px; line-height: 120%; line-height: 120%; } bu kodlar ise orta kısma eklenecek üçlü blokları tanımlıyor div#modul_icerigi { padding: 5px; } tüm blok tanımlamalarını bitirdiğinizde sayfalarınızda esas önemi taşıyan içeriğin modüller olduğunu unutmayın..ben örneğimde buraya pek dokunmadım ancak siz bir takım değişiklikler yapmak isteyebilirsiniz .even { background-color: #f3f4f5; padding: 5px; } .odd { background-color: #fafafa; padding: 5px; } son olarak da theme.html'de bizim tanımlamadığımız ancak yine de xoops'ta öntanımlı olan bir class'ı şekillendirelim..bu iki kod özellikle forum gibi alanlarda ardarda iki satırı birbirinden ayırt etmek için kullanılabilir evet pek de zor değilmiş değil mi?? işte ilk amatör temanızı bitirdiniz.. artık yaptığınız basit temaları geliştirmek sizin elinizde..html ve css bilgilerinizi elinizden geldiğince arttırın ki ortaya daha profesyonel işler çıksın..bu işlerde sabır çok önemli..ilk yaptığınız güzel olacak diye bir kural yok..umarım bu döküman hiç değilse size işin temelini anlatabilmek açısından faydalı olmuştur. Herkese İyi Çalışmalar Dilerim.. Bora Canbula --------------- xoopshocasi@xoopshocasi.com Ayrıca bakınız
 
|
