Tema Yapım Dersleri / Global.css Geniş Anlatım / 1. Bölüm
Merhabalar.
Şimdi sizlere forumumuzdaki ana css kaynağı ve genellikle tema ana dosyası olan Global.CSS anlatacağım. lütfen uzun diye kestirip atmayın yararlı bilgiler var özellikle tema yapmak istiyenlere.
Global.css Anlatım 1
* Global.css Nerdedir
Admin KP>>Şablon & Stil>>Kullandığınız Tema>>global.css
Tıkladığımızda karşımıza Basit mod ve Gelişmiş mod
gelecektir. Bunlardan Genel olarak Gelişmiş mod kullanırız. Css eklemk istiyorsak veya düznmelek istiyorsak daha zor ama güzeldir.
Global.css Anlatım 2
* Arkaplan Nasıl değiştirilir
Şimdi Global.css nin yerini öğrendiğimize göre sürekli admin kp> şeklinde gidip sizinde kafanızı karıştırıp yormayalım.
Global.css>>Gelişmiş Mod>>Body
body deki
bu şekilde değiştiriyoruz
böylece arkaplana resim eklemiş oluyoruz.
Global.css Anlatım 3
* Container nedir? rengi nasıl değiştirilir
Container bir temanın önemli parçalarındandır. genellikle beyazdır, veya hiç olmaz sadece arkaplan olur ama görüntü güzel olmayabilir.
değiştirince foruma bakın ne olduğu çok açık :)
Global.Css>>Gelişmiş Mod>>Container
şimdi ek css leri anlatayım.
bu container renk kodudur. genel olarak rengi #fff yani beyazdır.
bu ise container genişliğidir.
sayı dediğimiz 80% gibidir. px ise piksel dir. yani 904px gibi kullanılır. ama "%" her erkana uyum sağlar daha iyidir.
bu sanırım containerdeki yazıların renk koduydu.
bu ise container çerçevesidir. 1px i değiştirerek büyük bir çerçeve, renkkodunu değiştirip çerçeve rengini ayarlayabiliriz.
hatırlıyorsam bu genişliği her ekrana daha uyum sağlar yapıyordu. onu kaldırınca bende kayma olmuştu.
yukarıdaki genişletme yönetmi bütün forumlarıda birlikte genişletir.
bu ise sadece containeri tek genişletir vs.
bu ise containerdeki yazıların yönünü belirler.
left right center kullanılabilir.
Global.Css Anlatım 4
* Thead Tcat Tfoot nedir nasıl düzenlenir
Thead ı görmenin en basit yolu Kategori adlarının arkaplanına bakmaktır.
Tcat ise thead ın altındadır.
Tfoot Forumun alt kısımlarında bulunur genel olarak. thead ile aynı grafiği taşıdığında güzel olur.
sadece theadı göstermek yeterlidir. hemen hemen diğerleride aynı.
Global.css>>Gelişmiş Mod>>Thead-Tcat-Tfoot hangisi derseniz.
ek css leri anlatayım.
(Resim olmayabilir)
bu thead arkaplanıdır. bunla oynayarak theadı değiştirebiliriz.
bu thead üstünde yazan yazıların hangi renk olduğunu belirler.
burdaki SAYIpx 7px gibi ayarlanılabilinir. bu yüksekliği ayarlar theadın. yada tcatın herneyse :D
renkkodu ise tam anlayamadım. oynadım birşey değişmedi.
bu ise font stilini belirler.
bold-kalın
italic-eğik yazı
regular-normal yazı
normal-bunu biliyoruz :D
daha bunun gibi yapılınabilinir.
Global.Css Anlatım 5
*Trow nedir nasıl edtilenir
trow forumların arkaplanıdır. basit ama önemlidir...
Global.Css>>Gelişmiş Mod>>Trow1 Trow2 arasında oynayacağız.
ikiside aynı birini göstereceğim. sadece renkleri farklı olabilir.
bu trowların rengini belirler. isteyen renkkodundan hemen sonrasına
ekleyerek resim ekleyebilir.
Global.Css Anlatım 6
* Bottommenu nedir nasıl düzenlenir
Bottommenu genellikle dil seçiminin hani "footer da gösterilecek forum adı" kısmının olduğu yerdir.
Global.Css>>Gelişmiş Mod>>Bottommenu
ek css lerden başlıyalım yine.
bottommanu arkaplanının kodudur.
bu ise bottommenu üstünde yazan yazının renk kodudur.
bu ise bottommenu çerçevesidir. SAYIpx çerçeve büyüklüğüdür. #renkkodu ise çerçeve rengidir.
bottommenu yüksekliğidir.
Global.Css Anlatım 7
* Linklerin yazı rengini ayarlamak
Şimdi linklerin yazı rengini ayarlayamaya geldi.
mesela linkler böyle gözükür. onun rengini değiştirebiliriz.
Global.Css>>Gelişmiş Mod>>
a:link
üstüne gelmeden ki renk hali
a:visited
linkin tıklandıktan sonraki halidir. bu a:link ile aynı olabilir.
a:hover, a:active
bu linkin üstüne gelinceki renk kodudur.
bu linkin üstüne gelince altında yazı oluşmasını sağlar. değişik türleri vardır. hiçbirşey için none olur.
CSS link özellikleri diye ararsak buluruz.
a:active ayırırsak, linkin tıklandığı andaki durumu olur.
bunlar temel CSS lerdir.
bu kadarını anlatabildim.
Kusurum hatam varsa özür dilerim.
Lütfen başta dediğim gibi uzun diye kestirip atmayın yararlı bilgiler var.
Alıntı değildir.
Merhabalar.
Şimdi sizlere forumumuzdaki ana css kaynağı ve genellikle tema ana dosyası olan Global.CSS anlatacağım. lütfen uzun diye kestirip atmayın yararlı bilgiler var özellikle tema yapmak istiyenlere.
Global.css Anlatım 1
* Global.css Nerdedir
Admin KP>>Şablon & Stil>>Kullandığınız Tema>>global.css
Tıkladığımızda karşımıza Basit mod ve Gelişmiş mod
gelecektir. Bunlardan Genel olarak Gelişmiş mod kullanırız. Css eklemk istiyorsak veya düznmelek istiyorsak daha zor ama güzeldir.
Global.css Anlatım 2
* Arkaplan Nasıl değiştirilir
Şimdi Global.css nin yerini öğrendiğimize göre sürekli admin kp> şeklinde gidip sizinde kafanızı karıştırıp yormayalım.
Global.css>>Gelişmiş Mod>>Body
body deki
Kod:
backgorund: #renkkodu;
bu şekilde değiştiriyoruz
Kod:
backgorund: #renkkodu url(resim linki);
böylece arkaplana resim eklemiş oluyoruz.
PHP Kod:
Not: #renkkodu sizin oradaki renk kodunuz dur. oradaki #fff de olabilir #efefef de olabilir ben öyle dedim diye #renkkodu diye yapıştırmayacaksınız. aynı renk kodunuz kalacak öyle. sadece renk eklemek istiyenler renk kodunu değiştirebilir.
Renk kodlarının başında "#" olmalıdır.
"#" eklemeden bir yol ise ingilizce renk yazmaktır (green,red,blue,grey vb).
Global.css Anlatım 3
* Container nedir? rengi nasıl değiştirilir
Container bir temanın önemli parçalarındandır. genellikle beyazdır, veya hiç olmaz sadece arkaplan olur ama görüntü güzel olmayabilir.
değiştirince foruma bakın ne olduğu çok açık :)
Global.Css>>Gelişmiş Mod>>Container
şimdi ek css leri anlatayım.
Kod:
background: #renkkodu;
Kod:
witdh: sayı%/px;
bu ise container genişliğidir.
sayı dediğimiz 80% gibidir. px ise piksel dir. yani 904px gibi kullanılır. ama "%" her erkana uyum sağlar daha iyidir.
Kod:
color: #renkkodu;
Kod:
border: 1px solid #renkkodu;
Kod:
margin: auto auto;
hatırlıyorsam bu genişliği her ekrana daha uyum sağlar yapıyordu. onu kaldırınca bende kayma olmuştu.
Kod:
padding: sayı%;
bu ise sadece containeri tek genişletir vs.
Kod:
text-align: yazı yönü;
left right center kullanılabilir.
Global.Css Anlatım 4
* Thead Tcat Tfoot nedir nasıl düzenlenir
Thead ı görmenin en basit yolu Kategori adlarının arkaplanına bakmaktır.
Tcat ise thead ın altındadır.
Tfoot Forumun alt kısımlarında bulunur genel olarak. thead ile aynı grafiği taşıdığında güzel olur.
sadece theadı göstermek yeterlidir. hemen hemen diğerleride aynı.
Global.css>>Gelişmiş Mod>>Thead-Tcat-Tfoot hangisi derseniz.
ek css leri anlatayım.
Kod:
backgorund: #renkkodu url(resimlinki);
bu thead arkaplanıdır. bunla oynayarak theadı değiştirebiliriz.
Kod:
color: #renkkodu;
Kod:
padding: SAYIpx solid #renkkodu;
renkkodu ise tam anlayamadım. oynadım birşey değişmedi.
Kod:
font-weight: yazı;
bold-kalın
italic-eğik yazı
regular-normal yazı
normal-bunu biliyoruz :D
daha bunun gibi yapılınabilinir.
Global.Css Anlatım 5
*Trow nedir nasıl edtilenir
trow forumların arkaplanıdır. basit ama önemlidir...
Global.Css>>Gelişmiş Mod>>Trow1 Trow2 arasında oynayacağız.
ikiside aynı birini göstereceğim. sadece renkleri farklı olabilir.
Kod:
backgorund: #renkkodu;
bu trowların rengini belirler. isteyen renkkodundan hemen sonrasına
Kod:
url (resimlinki)
Global.Css Anlatım 6
* Bottommenu nedir nasıl düzenlenir
Bottommenu genellikle dil seçiminin hani "footer da gösterilecek forum adı" kısmının olduğu yerdir.
Global.Css>>Gelişmiş Mod>>Bottommenu
ek css lerden başlıyalım yine.
Kod:
backgorund: #renkkodu;
Kod:
color: #renkkodu;
Kod:
border: SAYIpx solid #renkkodu;
bu ise bottommenu çerçevesidir. SAYIpx çerçeve büyüklüğüdür. #renkkodu ise çerçeve rengidir.
Kod:
padding: SAYIpx;
Global.Css Anlatım 7
* Linklerin yazı rengini ayarlamak
Şimdi linklerin yazı rengini ayarlayamaya geldi.
mesela linkler böyle gözükür. onun rengini değiştirebiliriz.
Global.Css>>Gelişmiş Mod>>
a:link
Kod:
color: #renkkodu;
a:visited
Kod:
color: #renkkodu;
a:hover, a:active
Kod:
color: #renkkodu;
Kod:
text-decoration: underline;
CSS link özellikleri diye ararsak buluruz.
a:active ayırırsak, linkin tıklandığı andaki durumu olur.
bunlar temel CSS lerdir.
bu kadarını anlatabildim.
Kusurum hatam varsa özür dilerim.
Lütfen başta dediğim gibi uzun diye kestirip atmayın yararlı bilgiler var.
Alıntı değildir.