Konuyu Oyla:
  • Toplam: 3 Oy - Ortalama: 3.33
  • 1
  • 2
  • 3
  • 4
  • 5
Tema Yapım Dersleri / Global.css Geniş Anlatım
#1
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

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;
bu container renk kodudur. genel olarak rengi #fff yani beyazdır.

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;
bu sanırım containerdeki yazıların renk koduydu.

Kod:
border: 1px solid #renkkodu;
bu ise container çerçevesidir. 1px i değiştirerek büyük bir çerçeve, renkkodunu değiştirip çerçeve rengini ayarlayabiliriz.

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ı%;
yukarıdaki genişletme yönetmi bütün forumlarıda birlikte genişletir.
bu ise sadece containeri tek genişletir vs.

Kod:
text-align: yazı yönü;
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.

Kod:
backgorund: #renkkodu url(resimlinki);
(Resim olmayabilir)
bu thead arkaplanıdır. bunla oynayarak theadı değiştirebiliriz.

Kod:
color: #renkkodu;
bu thead üstünde yazan yazıların hangi renk olduğunu belirler.

Kod:
padding: SAYIpx solid #renkkodu;
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.

Kod:
font-weight: yazı;
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.

Kod:
backgorund: #renkkodu;

bu trowların rengini belirler. isteyen renkkodundan hemen sonrasına
Kod:
url (resimlinki)
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.

Kod:
backgorund: #renkkodu;
bottommanu arkaplanının kodudur.

Kod:
color: #renkkodu;
bu ise bottommenu üstünde yazan yazının renk kodudur.

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;
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
Kod:
color: #renkkodu;
üstüne gelmeden ki renk hali

a:visited
Kod:
color: #renkkodu;
linkin tıklandıktan sonraki halidir. bu a:link ile aynı olabilir.

a:hover, a:active
Kod:
color: #renkkodu;
bu linkin üstüne gelinceki renk kodudur.
Kod:
text-decoration: underline;
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.
Ara
Cevapla PGM
Teşekkür verenler:
#2
Paylaşım için teşekkürler Şefim.Ben de birkaç bilgi eklemek istiyorum.

Renkleri #RENKKODU şeklinde veya ingilizce isimleriyle yazabileceğimiz gibi rgb (red,green,blue yani kırmızı,yeşil,mavi) değerleriyle şu şekilde de tanımlayabiliriz:

PHP Kod:
rgb (kirmizi,yesil,mavi); 
şeklinde.Burada "kırmızı" yerine kırmızı değeri "yeşil" yerine yeşil renk değerini "mavi" yerine ise mavi renk değerini yazabiliriz.

İkinci bir konu:Border Color

PHP Kod:
border-color(); 
şeklinde kullanılır.Bu border ın yani dış tablo boşluğunun rengidir.

Üçüncü olarak margin ve padding

margin kodu dış boşluktur.Yani yanındaki tabloya olan uzaklığıdır.

padding ise iç boşluktur.

PHP Kod:
marginauto auto

bu kodda ise margin otomatik olarak tanımlanır.

Bir de text-decoration var


burada

PHP Kod:
{text-decoration:overline;} // Yazının hemen üzerinde bir çizgi olur.
h2 {text-decoration:line-through;} // Üstü çizili yazı
h3 {text-decoration:underline;} // Altı çizili yazı
h4 {text-decoration:blink;} // Kaybolup tekrar gelen yazı 
(Blink'i Chrome IE ve safari desteklemez.)

AYRINTILI CSS KODLARI

Paylaşım için tekrar teşekkürler.

GÖREVİNİ BIRAKTI
Önce AHLAK ve MANEVİYAT

Hakk’ın tesisi için çalışmamakla Batıl’ın hakimiyeti için çalışmak arasında fark yoktur.



Prof. Dr. Necmettin ERBAKAN


TÜM KONULARIM

Başaɾının içeɾiğindeki en önemli, biɾicik malzeme, insanlaɾla nasıl geçineceğini iyi bilmektiɾ. / Theodore Roosevelt
Ara
Cevapla PGM
Teşekkür verenler:
#3
Teşekkürler. Güzel anlatım :D
Ara
Cevapla PGM
Teşekkür verenler:
#4
Teşekkürler
Ara
Cevapla PGM
Teşekkür verenler:
#5
Rica ederim.

ForumK sanada eklemen için +rep veriyorum :)
Ara
Cevapla PGM
Teşekkür verenler:
#6
Teşekkürler. Çok yararlı bir paylaşım olmuş. Bir şey rosacağım. Tabloları nasıl oval yapabilirim acaba?
Ara
Cevapla PGM
Teşekkür verenler:
#7
(27-07-2012 Saat: 20:07)tamam Nickli Kullanıcıdan Alıntı: Teşekkürler. Çok yararlı bir paylaşım olmuş. Bir şey rosacağım. Tabloları nasıl oval yapabilirim acaba?

Araştırarak bulabilirsiniz bunun hakkında birçok konu var.
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping