Joomla Temalarının Standart CSS Yapısı

[RoHaN]

Joomla temalarının görsel özelliklerine ilişkin bütün css seçicileri açıklamalarıyla beraber aşağıda sunulmuştur. Burada bahsi geçen seçiciler standart joomla temalarında olması gerekenleri kapsamaktadır. CSS kodlama kuralları çerçevesinde bu seçiciler değiştirilerek farklı tanımlama biçimleri oluşturulabilir ve standart seçiciler ile yapılamayacak görsel farklılıklar yaratılabilir. Bununla birlikte joomla ile kullanılan bileşen ve modüllerin kendilerine ait CSS seçicileri tespit edilerek, standardın üzerinde görünümler elde edilebilir. Çalışmalarınınzda başarılar diliyorum

body {}

/*Body tagı temanın genel görünüşü ile ilgili özelliklerini tanımlamak için kullanılır. Örn: Font türü, Metin hizalaması, arkaplan rengi, sayfanın dış kenar boşlukları gibi*/


p {}

/*Başka bir tanımlama yapılmadığı sürece Temadaki bütün "div" taglarının özelliklerini tanımlamak için kullanılır */


td {}

/*Başka bir tanımlama yapılmadığı sürece Temadaki bütün "td" taglarının özelliklerini tanımlamak için kullanılır */


tr {}

/* Başka bir tanımlama yapılmadığı sürece Temadaki bütün "tr" taglarının özelliklerini tanımlamak için kullanılır */


ul {}

/*Başka bir tanımlama yapılmadığı sürece Temadaki bütün ("u l" taglarının) listelenmiş içeriğin, listelenme biçimi özelliklerini tanımlamak için kullanılır*/


ul li {}

/*Başka bir tanımlama yapılmadığı sürece Temadaki bütün ("l i" taglarının) listelenmiş içeriğin, özelliklerini tanımlamak için kullanılır*/


a:link {}

/*Temadaki link özelliklerini tanımlamak için kullanılır (renk, font tipi, fony büyüklüğü vs.)*/


a:visited {}

/*Temadaki ziyaret edilmiş link özelliklerini tanımlamak için kullanılır (renk, font tipi, fony büyüklüğü vs.)*/


a:hover {}

/*Temadaki linklerin üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü değişimi gibi efektleri tanımlamak için kullanılır */


hr {}

/*Site içeriğinde kullanabileceğiniz yatay çizgilerin özelliklerini tanımlamak için kullanılır */


hr.separator {}

/*Site içeriğinde kullanabileceğiniz yatay çizgilerin özelliklerini tanımlamak için kullanılır */


.button {}

/*İletişim, arama veya özel tanımlama yapılmamış diğer bileşen ve formların butonlarının özelliklerini tanımlamak için kullanılır */


.inputbox {}

/*İletişim, arama veya özel tanımlama yapılmamış diğer bileşen ve formların metin veya kelime giriş kutucuklarının özelliklerini tanımlamak için kullanılır */


.search {}

/*Arama modülünde, kelime giriş kutucuğu ve arama butonunun içinde bulunduğu

tagının (alanının) özelliklerini tanımlamak için kullanılır */


a.mainlevel{}

/*Temadaki anamenu özelliklerini tanımlamak için kullanılır (renk, font tipi, font büyüklüğü, arkaplan rengi, arkaplan resmi vs.)*/


a.mainlevel:link {}

/*Temadaki anamenu özelliklerini tanımlamak için kullanılır (renk, font tipi, font büyüklüğü, arkaplan rengi, arkaplan resmi vs.)*/


a.mainlevel:visited {}

/*Temadaki anamenüde, ziyaret edilmiş menü öğelerinin özelliklerini tanımlamak için kullanılır */


a.mainlevel:hover {}

/*Temadaki anamenü öğelerinin üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü, arkaplan resmi değişimi gibi efektleri tanımlamak için kullanılır */


#active_menu {}

/*Temadaki anamenü öğelerinden, o anda kullanılmakta olanın özelliklerini tanımlamak için kullanılır*/


ul#mainlevel-nav {}

/*Temadaki üst ve alt (top-bottom) menülerin genel özelliklerini tanımlamak için kullanılır*/


ul#mainlevel-nav li{}

/*Temadaki üst ve alt (top-bottom) menülerin genel özelliklerini tanımlamak için kullanılır*/


#mainlevel-nav a:link {}

/*Temadaki üst ve alt (top-bottom) menülerde font türü, font boyutu, font rengi vs& gibi özellikleri tanımlamak için kullanılır*/


#mainlevel-nav a:visited{}

/*Temadaki üst ve alt (top-bottom) menülerde daha önce ziyaret edilmiş olanların font türü, font boyutu, font rengi vs& gibi özellikleri tanımlamak için kullanılır*/


#mainlevel-nav a:hover {}

/*Temadaki üst ve alt (top-bottom) menülerde üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü, arkaplan resmi değişimi gibi efektleri tanımlamak için kullanılır */


a.sublevel{}

/*Temadaki alt menülerin (submenu) özellikleri tanımlamak için kullanılır */


a.sublevel:link {}

/*Temadaki alt menülerin (submenu) özellikleri tanımlamak için kullanılır */


a.sublevel:visited {}

/*Temadaki alt menülerden (submenu) daha önce ziyaret edilmiş olanların özellikleri tanımlamak için kullanılır */


a.sublevel:hover {}

/*Temadaki alt menülerde (submenu) üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü, arkaplan resmi değişimi gibi efektleri tanımlamak için kullanılır */


.pagenavbar {}

/*Temanın en altında gördüğünüz ("<< Start < Prev Next > End >> yada "<< Başa Dön < Önceki Sonraki > Sona Git >> uygulamasının link özelliği taşımadığı durumlardaki (Az sayıda içerik bulunduğunda bu durum oluşur) özelliklerini tanımlamak için kullanılır */


.pagenavbar:link {}

/*Temanın en altında gördüğünüz ("<< Start < Prev Next > End >> yada "<< Başa Dön < Önceki Sonraki > Sona Git >> uygulamasının link özelliği taşıdığı durumlardaki özelliklerini tanımlamak için kullanılır */

.pagenavbar:visited {}

/*Temanın en altında gördüğünüz ("<< Start < Prev Next > End >> yada "<< Başa Dön < Önceki Sonraki > Sona Git >> uygulamasında, daha önce ziyaret edilmiş uygulama öğesinin özelliklerini tanımlamak için kullanılır */

.pagenav {}

/*Temanın en altında gördüğünüz ("<< Start < Prev Next > End >> yada "<< Başa Dön < Önceki Sonraki > Sona Git >> uygulamasının metin özelliklerini tanımlamak için kullanılır*/


a.pagenav:visited {}

/*Temanın en altında gördüğünüz ("<< Start < Prev Next > End >> yada "<< Başa Dön < Önceki Sonraki > Sona Git >> uygulamasında, daha önce ziyaret edilmiş uygulama öğesinin metin özelliklerini tanımlamak için kullanılır */


a.pagenav:hover {}

/*Temanın en altında gördüğünüz ("<< Start < Prev Next > End >> yada "<< Başa Dön < Önceki Sonraki > Sona Git >> uygulamasında üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü, arkaplan resmi değişimi gibi efektleri tanımlamak için kullanılır */


a.readon:link {}

/*Temadaki Devamını oku... yada "Read More" uygulamasının özelliklerini tanımlamak için kullanılır */


a.readon:hover {}

/*Temadaki Devamını oku... yada "Read More" uygulamasında üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü, arkaplan resmi değişimi gibi efektleri tanımlamak için kullanılır */


a.readon:visited {}

/*Temadaki Devamını oku... yada "Read More" uygulamasının daha önceden ziyaret edilmiş olması halindeki özelliklerini tanımlamak için kullanılır */

.back_button {}

/*Temadaki [Back] yada [Geri] uygulamasının özelliklerini tanımlamak için kullanılır */


.pagenav_prev {}

/*Temadaki <Önceki uygulamasının özelliklerini tanımlamak için kullanılır */


.pagenav_next {}

/*Temadaki Next> yada Sonraki> uygulamasının özelliklerini tanımlamak için kullanılır */

.latestnews ul {}

/* latest news (son eklenen içerik) modülünün listeleme özelliklerini tanımlamak için kullanılır */

.latestnews li {}

/* latest news (son eklenen içerik) modülünde listelenmiş öğelerin özelliklerini tanımlamak için kullanılır */

.mostread ul{}

/* most popular (Popüler içerik) modülünün listeleme özelliklerini tanımlamak için kullanılır */


.mostread li{}

/* most popular (Popüler içerik) modülünde listelenmiş öğelerin özelliklerini tanımlamak için kullanılır */


a.category:link {}

/*Linklenmiş kategori sayfasının genel link özelliklerini tanımlamak için kullanılır*/


a.category:hover {}

/*Linklenmiş kategori sayfasının mauseover link özelliklerini tanımlamak için kullanılır*/


a.category:visited {}

/*Linklenmiş kategori sayfasının ziyaretedilmiş link özelliklerini tanımlamak için kullanılır*/

.blogsection {}

/*Varolan yada dahasonra oluşturulabilecek Blog bölümünün genel link özelliklerini tanımlamak için kullanılır */


.blog_more {}

/*Varolan yada dahasonra oluşturulabilecek Blog bölümündeki devamını oku uygulamasının özelliklerini tanımlamak için kullanılır */


a.blogsection:link {}

/*Blog bölümündeki linklerin genel özelliklerini tanımlamak için kullanılır*/


a.blogsection:visited {}

/*Blog bölümündeki linklerden, daha önceden ziyaret edilmiş olanların özelliklerini tanımlamak için kullanılır*/


a.blogsection:hover {}

/*Blog bölümündeki linklerde, üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü, arkaplan resmi değişimi gibi efektleri tanımlamak için kullanılır */


.componentheading {}

/*Başlıkları görünür olarak ayarlanmış bileşenlerin, başlık özelliklerini tanımlamak için kullanılır*/


.contentheading {}

/*Temada içerik başlıklarının özelliklerini tanımlamak için kullanılır */


.contentpane {}

/*Temada içerik (content) olmayan arama sayfası, iletişim sayfası, linklenmiş kategori sayfası ve bileşen sayfalarının içinde bulunduğu alanın özelliklerini tanımlamak için kullanılır*/


.contentpaneopen {}

/*Temada içerik (content) metninin bulunduğu alanın özelliklerini tanımlamak için kullanılır */


.contentpagetitle {}

/*Temada içerik başlıklarının kendi sayfasındaki özelliklerini tanımlamak için kullanılır */


a.contentpagetitle:hover {}

/*Temada içerik başlıklarının linkli olma özelliği aktif iken, başlıkların üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü, arkaplan resmi değişimi gibi efektleri tanımlamak için kullanılır */


a.contentpagetitle:link {}

/*Temada içerik başlıklarının linkli olma özelliği aktif iken, başlıkların özelliklerini tanımlamak için kullanılır */


a.contentpagetitle:visited {}

/*Temada içerik başlıklarının linkli olma özelliği aktif iken, daha önceden ziyaret edilmiş başlıkların özelliklerini tanımlamak için kullanılır */


.contentdescription {}

/*Temada bölüm ve kategori açıklamalarının özelliklerini tanımlamak için kullanılır*/


table.contenttoc {}

/* Temada pagebreak özelliğini kullanarak ayırdığınız içeriklerde sağ üste tarafta oluşan menu alanının genel özellkilerini tanımlamak iin kullanılır*/


table.contenttoc td {}

/* Temada Temada pagebreak özelliğini kullanarak ayırdığınız içeriklerde sağ üste tarafta oluşan menu alanının özelliklerini tanımlamak için kullanılır*/


table.contenttoc th {}

/* Temada Temada pagebreak özelliğini kullanarak ayırdığınız içeriklerde sağ üste tarafta oluşan menu alanında linkli olmayan öğelerin özelliklerini tanımlamak için kullanılır */


table.contenttoc td.toclink {}

/* Temada Temada pagebreak özelliğini kullanarak ayırdığınız içeriklerde sağ üste tarafta oluşan menu alanında linkli olan öğelerin özelliklerini tanımlamak için kullanılır */


a.toclink:link {}

Temada Temada pagebreak özelliğini kullanarak ayırdığınız içeriklerde sağ üste tarafta oluşan menu alanının link özelliklerini tanımlamak için kullanılır*/


a.toclink:visited {}

Temada Temada pagebreak özelliğini kullanarak ayırdığınız içeriklerde sağ üste tarafta oluşan menu alanının ziyaret edilmiş link özelliklerini tanımlamak için kullanılır


a.toclink:hover {}

Temada Temada pagebreak özelliğini kullanarak ayırdığınız içeriklerde sağ üste tarafta oluşan menu alanının mauseover link özelliklerini tanımlamak için kullanılır


.sectiontableheader {}

/*Temada haberler, Sıkça sorulan sorular, linkler sayfalarında Tarih Yazı Başlığı Yazar Tıklama gibi bölümlerin olduğu en üst satırın özelliklerini tanımlamak için kullanılır*/


.sectiontableentry1 {}

/*Temada haberler, Sıkça sorulan sorular, linkler sayfalarında peş peşe gelen içeriğin özelliklerini tanımlamak için kullanılır*/ (açıkrenk arkaplan)


.sectiontableentry2 {}

/*Temada haberler, Sıkça sorulan sorular, linkler sayfalarında peş peşe gelen içeriğin özelliklerini tanımlamak için kullanılır*/ (koyurenk arkaplan)


table.moduletable {}

/*Temada modüllerin içinde bulunduğu alanın özelliklerini tanımlamak için kullanılır */


table.moduletable th {}

/*Temada modüllerin başlıklarının özelliklerini tanımlamak için kullanılır */


table.moduletable td {}

/*Temada modüllerin içinde bulunduğu hücrenin özelliklerini tanımlamak için kullanılır */


.createdate {}

/*Temada içerik başlığının altında gördüğünüz içerik oluşturulma tarihinin özelliklerini tanımlamak için */


.modifydate {}

/*Temada yeniden düzenlenen içeriklerin altında görebileceğini son düzenlenme tarihinin özelliklerini tanımlamak için kullanılır*/


.small {}

/*Temada içerik başlıklarının hemen altında görebileceğiniz yazar adının özelliklerini tanımlamk için kullanılır*/


.smalldark {}

/*Temada anket sonuçlarının görüntülendiği sayfada oylayanların sayısı metninin özelliklerini tanımlamak için kullanılır*/


.poll {}

/*Temada anket modülünün hücre özelliklerini tanımlamak için kullanılır*/


.pollstableborder {}

/*Temada anket modülünün kenar çizgilerinin özelliklerini tanımlamak için kullanılır*/


.weblinks{}

/*Temada linkler sayfasında görebileceğiniz linkli öğelerin özelliklerini tanımlamak için kullanılır */


a.weblinks:hover {}

/*Temada linkler sayfasında görebileceğiniz linkli öğelerin üzerine fare ile geldiğinizde renk değişimi, alt üst çizgi, font büyüklüğü, arkaplan resmi değişimi gibi efektleri tanımlamak için kullanılır */


.newsfeedheading {}

/*Temada nevsfeed sayfasının başlığının özelliklerini tanımlamak için kullanılır */


.newsfeeddate {}

/*Temada nevsfeed sayfasınında görebileceğiniz tarihlerin özelliklerini tanımlamak için kullanılır */


.fase4rdf {}

/*Temada nevsfeed sayfasının anametninin özelliklerini tanımlamak için kullanılır */


table.searchintro {}

/*temada arama sonuçlarının gösteren metnin özelliklerini tanımlamak için kullanılır*/


.ontab {}

/* Tema önyüzünden içerik editlemesi yaparken görebileceğiniz tab butonlarından aktif olanın özelliklerini tanımlamak içinkullanılır*/


.offtab {}

/* Tema önyüzünden içerik editlemesi yaparken görebileceğiniz tab butonlarından aktif olmayanın özelliklerini tanımlamak içinkullanılır */


.tabpadding {}

/* Tema önyüzünden içerik editlemesi yaparken görebileceğiniz tab butonların boyut özellkilerini tanımlamak için kullanılır*/


.tabheading {}

/* ? */


.pagetext {}

/* Tema önyüzünden içerik editlemesi yaparken görebileceğiniz metin giriş alanlarının metin özellkilerinit tanımlamak için kullanılır*/



Yazar: Bülent ATA

[BarıSH]

hımm iyi olmuş...