Joomla Tema Yapımı : Template.css Kodlarının Açıklaması
Aşağıda joomla tema yapımında kullanılan template_css sitil sayfasının kodları
açıklanmıştır. Kodları açıklanan tema, ücretisiz aps_clean_generic temasıdır.
Ücretsiz joomla temanın orjinal halini indirmek için tıklayın, temayı türkçe
açıklamalı template_css dosyası ile indirmek için tıklayın.
body { /*joomla temanızın body kısmının özellikleri burada biçimlendirilir.*/
background-attachment: fixed; /* Arka plana eklenen resmin, sayfa ile
beraber kayması yada sabit kalması. Burada fixed ile sabitlenmiş. */
background-color: #000000; /*Joomla sayfanızın arka plan rengi. Fakat
bu temada arka plana resim eklediği için gördüğüm kadarıyla bir
işlevi yok*/
background-image: url(../images/bg_black.gif); /* Temanızın arka plan
resmi (bg_black.gif). 1*3 boyutunda siyah tonunda küçük bir çizgi
arka plan resmi olarak eklenmiş.*/
background-position: 0px 0px; /* Üst satırda tanımlanan arka plan resminin
başlangıç konumu. Aşağıdaki değerleri alabilir:
top left : sol üst köseden basla
top center : üst ortadan basla
top right , center left , center center , center right , bottom left ,
bottom center , bottom right
x-% y-% : yüzde olarak başlangıç konumu
x-poz y-poz : ekranın belirtilen x ve y konumlarından basla. Bu
temada 0,0 konumundan yani sol üst köseden başlamış.*/
scrollbar-3dlight-color: #0066FF; /*sağ tarafta bulunan kaydırma
çubuğunun üst ve sol kenarlıklarının rengi.*/
scrollbar-darkshadow-color: #000000; /* alt ve sağ gölge rengi*/
scrollbar-base-color: #ff0000;
scrollbar-face-color: #0066FF; /* kaydırma çubuğunun ana rengi, üst ve
alttaki ok işaretli kısımlar ile kaydırma çubuğunun asil rengi */
scrollbar-highlight-color: #FFFFFF; /*face-color kaydırma kısmındaki ana
renkleri gösterir, burası ise sol ve üstteki gölge renklerini belirler.
3dlight ile face arasındaki renklendirme bölümü*/
scrollbar-shadow-color: #0000FF; /*highlight ile tek farkı sağ alt köse
rengini belirlemesi */
scrollbar-track-color: #666666; /*Kaydırma çubuğunun üzerinde kaydığı
zemin rengi*/
scrollbar-arrow-color: #FFFFFF; /*Kaydırma çubuğunun kaydırmaya
yarayan üst ve alttaki bölümlerde bulunan ok işaretlerinin rengi*/
margin: 0px; /*margin uygulanan etiketin etrafındaki boşluktur (bu satir
body etiketini etkiler ) Buradaki sıfır değeri sayfa ile tema
arasındaki boşluğu ifade eder. Bu değer sıfır olsa da temanın
sağında ve solunda boşluk olabilir. Bu boşluk index.php de
tablo veya div ile verilir.*/
padding: 0px; /*padding içerik ile kenarlık arasındaki boşluktur. Burada
margin ile hemen hemen aynı işlemi yapar. Bir kutu içinde a
yazdığını düşünün. Bu kutunun kenarları ile tarayici
arasındaki mesafe margin, a harfi ile kutu arasındaki
mesafe padding.*/
height: 0px; /*yükseklik*/
width: 0px; /*genişlik*/
}
td,tr,p,div { /*td tablodaki sütunları, tr tablodaki satırları ifade eder. p
paragraf özellikleri, div ise belli bir bölgeye istenilen
özelliklerin verilmesini sağlar. Burada hepsi için ortak
tanımlama yapılmıştır. Div Joomla tema yapımında
index.php sayfasında tablolar yerine kullanılabilir. Her bölüm
için ayrı bir tablo hücresi yerine div oluşturulabilir.*/
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; /*gövde
(body) kısmında kullanılacak yazı fontu ailesi*/
font-size: 11px; /*body için yazı boyutu*/
color: Black; /*body için yazı rengi*/
}
/****************************
Link Özellikleri
****************************/
a:link, a:visited { /* a:link normal link özelliği, a: visited ziyaret edilmiş link
özelliği. Normal linkler ve ziyaret edilmiş linkler için ortak
özellik tanımlanmış. Yani ziyaret edilmiş linkler farklı
görünmez.*/
font-size: 11px; color: #000000; text-decoration: none; /* yazı boyutu : 11px,
yazı rengi 000000, text-decoration: none; ise yazının herhangi bir
yerinde çizgi yok demek (altı üstü çizili gibi) */
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; /*linklerin
yazı tipi*/
font-weight: bold; /*linkler kalın yazı olsun demek*/
}
a:hover { /*linkin üstüne gelinince linkin biçiminin nasıl olacağı*/
color: #0000FF; /*Fare ile linkin üstüne gelinince link 0000FF (mavi)
renginde olsun*/
text-decoration: none; /*linkin altı veya üstü çizili olmasın*/
font-weight: bold; /*üstüne gelinince link kalın yazı ile gösterilsin*/
}
/****************************
Styles for dhtml tabbed-pages. dhtml tab menü sitili.
****************************/
.ontab { /*tab menü aktif olduğu zaman tab menünün sitili burada belirlenir.*/
background-color: #0066FF; /*tab menünün zemin rengi*/
border-left: outset 2px #0000FF; /*sol kenarlık biçimi. Dışa doğru, 2px
kalınlığında, mavi*/
border-right: outset 2px #808080;
border-top: outset 2px #0000FF;
border-bottom: solid 1px #d5d5d5;
text-align: center; /*tab menüde yazılar ortalı olsun */
cursor: hand; /*Fare işaretçisinin tab menü üzerine gelince el (hand) seklini
alması*/
font-weight: bold; /*yazılar kalın olsun*/
color: #FFFFFF; /*yazı rengi*/
}
.offtab { /*tab menüsü aktif olmadığı zamanki biçiminin belirlenmesi*/
background-color : #e5e5e5;
border-left: outset 2px #E0E0E0;
border-right: outset 2px #E0E0E0;
border-top: outset 2px #E0E0E0;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: normal;
}
.tabpadding { /*tab menünün padding (kenar boşlukları) özelliğinin ayarlandığı
yer*/
}
.tabheading { /*tab menünün heading (baslık) kısmının ayarlandığı bölüm*/
background-color: #CCE197;
text-align: left;
}
.pagetext { /*Sayfanin orta kısmındaki metin biçimleri ile ilgili değişiklik
yapmaya yarar */
visibility: hidden;
display: none;
position: relative;
top: 0;
}
/***************************
Header Text. Baslık yazılarının biçimlendirildiği bölüm.
****************************/
h4 { /*h4 derecede baslık yazılarının biçimi. baslık yazıları h1 den baslar ve
artarak gider.*/
color: #000099; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px; font-weight: bold;
}
h5 {
color: #000066; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; font-weight: bold;
}
h6 {
color: #000033; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; font-weight: bold;
}
/***************************
Horizontal Line. Yatay Çizgiler
****************************/
hr { /*yatay çizgi biçimi burada belirlenir. */
background: #0066FF; height:2px; border: 1px inset; /*0066ff renginde, 2px
yükseklikte, 1px kalınlıkta, inset içe çizginin içe doğru olduğunu
gösterir*/
}
hr.separator { /*yatay çizgi ayırıcı. formların düzenlenmesinde kullanılır.*/
background: #000066;
height: 1px;
width: 75px;
border: 0px;
}
/***************************
Default Class Settings. Link ayarları
****************************/
a.mainlevel:link, a.mainlevel:visited { /*temadaki ana linklerin özellikleri
Örneğin sol taraftaki Ana Menü baslığı altındaki linkler.*/
color: #000000; /*yazı rengi*/
background-position: left; /*sola hizalı*/
text-align: right; /*yazıyı sola hizala*/
}
a.mainlevel:hover { /*Ana menülerin üstüne gelince oluşacak biçim. Örnek : */
color: #0000FF;
background-position: left;
text-align: left;
}
a.sublevel:hover { /*Alt menülerin; fare ile üstüne gelindiğinde alacağı biçim*/
color: #ff0000; text-decoration: underline;
}
a.sublevel:link, a.sublevel:visited { /*Normal ve ziyaret edilmiş alt menüler*/
color: #000066; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-weight: normal;
}
/*****************************
Eğer içerik baslıkları (örneğin haber baslıkları) birer link ise bu linkler
a.contentpagetitle özelliği ile düzenlenir.
******************************/
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 3px;
font-weight: bold;
color: #000066;
text-align:left;
}
a.contentpagetitle:hover {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align:left;
color: #0066FF;
text-decoration: underline;
font-weight: bold;
}
/******************************
Ortadaki bölümde çıkan haberler, iletişim, bağlantılar gibi bölümlerin özellikleri.
*******************************/
.contentpane {
background-color : #FFFFFF; /*Örneğin haberler seçildiğinde haberin yazılı
olduğu kısmın zemin rengi*/
}
.contentpaneopen { /*Bağlantılar, iletişim, haberler ve haber baslıkları dışındaki
içeriklerin biçimi burada belirlenir.(flash haber, arama,
joomlaya hoşgeldiniz, lisans gibi)*/
background-color : #ffffff;
border : 0px solid #0078FF;
width: 95%;
}
.contentheading { /*contentpaneopen ile özellikleri belirlenen bölümün başlık
biçimlendirmesi*/
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000066;
text-align:left;
background-color: #FFFFFF;
line-height: 24px;
height: 24px;
}
.contentpagetitle {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 3px;
font-weight: bold;
color: #000066;
text-align:left;
}
table.contenttoc { /*Eğer birden fazla içerik öğesini içerisinde bulunduran bir
tablo öğesi varsa; bu bölümde ilgili değişiklikler yapılır.*/
color: #000033;
background-color: #e0e0e0;
}
table.contenttoc td { /*tablo öğesinin sütun özelliği*/
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
text-align:left;
}
.contentdescription { /*Kategori ve bölümlerin açıklamasının bulunduğu bölüm.
Örneğin; bağlantılar için “sürekli webde dolaşıyoruz…”
şeklinde başlayan açıklama kısmı*/
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
}
/***************************
More Specific Links. Diğer Linkler.
****************************/
a.blogsection:link, a.blogsection:visited { /*Bu kısımda sayfanın en altında
bulunan bölüm linklerinin düzenlendiği yer. Mesela bu
tema için en altta “Flash Heber3″ linki var.*/
color: #ff0000; text-decoration: none; font-weight: normal;
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
a.blogsection:hover { /*yukarıdaki link ve visited tanımlamaları ile normal link
ve ziyaret edilmiş link tanımlandı. Burada ise hover ile
linkin üstünden fare geçerken oluşacak durum
tanımlanmış.*/
color: #0066F; text-decoration: underline;
font-weight: normal;
font-size: 10px;
}
a.weblinks:link, a.weblinks:visited { /*Web bağlantılarının biçimi burada
açıklanır.*/
color: #000033; text-decoration: none; font-weight: normal;
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}
a.weblinks:hover {
color: #0066FF; text-decoration: underline;
}
a.readon:link, a.readon:visited { /*readon ile “Devamını Oku…” linki
biçimlendirilir.*/
color: #000099; text-decoration: none; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
list-style: inside url(../images/read.gif);
list-style-type: disc; /*devamını oku yazısının basındaki içi dolu top (disc)*/
display: list-item;
white-space: normal;
font-weight: normal;
}
a.readon:hover { /*hover readon ile “Devamını Oku…” linkinin üstüne
gelinince oluşacak biçimlendirme yapılır*/
color: #0066FF; text-decoration: underline;
font-weight: normal;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
list-style: inside url(../images/read.gif);
list-style-type: disc;
display: list-item;
white-space: normal;
}
/***************************
Modül Baslıkları (Örneğin : Ana Menü, Giriş Formu, Anketler, Popüler)
****************************/
table.moduletable {
margin: 0px 0px 0px 0px; /*Modül baslığının sırası ile üstten, sağdan, alttan
ve soldan boşluk miktarları*/
width: 100%; /*Modül baslığının içinde bulunduğu hücrenin genişliği*/
}
table.moduletable th { /*Modül baslığı ile ilgili yazı biçimlendirmeleri burada
yapılır*/
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-align: left;
width: 100%;
height: 22px;
background-color: #0066FF;
}
table.moduletable td { /*Modüller içindeki yazıların biçimlendirmesi. Örneğin ;
Anketlerdeki seçenekler, Giriş formundaki kullanıcı
adi, beni hatırla yazıları*/
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}
/**************************
Component Basligi
***************************/
.componentheading { /*Componentin içerik baslığı buradan biçimlendirilir.
Örneğin ; Haberler seçildiğinde Haberler yazan baslık,
İletişim seçildiğinde İletişim yazan baslık gibi.*/
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000033;
text-align:left;
line-height: 22px;
height: 22px;
white-space: normal;
}
/**************************
Formdaki butonlar ve metin kutuları
***************************/
.button { /*Bu bölümde formdaki butonlar biçimlendirilir. Örnek: Gönder
butonu*/
color: #000000;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-weight: bold;
text-align: center;
font-size: 12px;
font: bold;
background: #CDCDCD;
border: 1px solid #000000;
height: 20px;
}
.inputbox { /*Bu bölümde formdaki metin kutuları biçimlendirilir. Örnek : isim
girilen kutu*/
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000033;
background: #FFFFFF;
border: 1px solid #000000;
}
/***************************
Kategorilerdeki yazılar ve link özellikleri. Örneğin bağlantılar kısmındaki
linklerin rengini a.category:link bölümündeki color seçeneği ile ayarlarsınız.
****************************/
.category {
color: #000033; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; font-weight: bold; text-decoration: none;
}
a.category:link, a.category:visited { /*Kategori içindeki linklerin biçimi
Örneğin bağlantılar kısmında sitedefteri
linki*/
color: #000033; font-weight: bold;
}
a.category:hover { /*Linkin üzerine gelince oluşacak biçim. Örneğin : sitedefteri
linkine gelince yazının kırmızı olması için color: #FF0000;
yazılmalı*/
color: #0066FF;
}
/****************************
Poll Tables. Anket tablosunun içeriği buradan ayarlanır.
*****************************/
.poll {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000033;
line-height: 14px;
}
.sectiontableentry1, { /*Anket seçeneklerinin zemin rengi olarak iki renk
kullanılır. Örneğin : Bir seçeneğin zemin rengi beyazsa
altındaki seçeneğin zemin rengi gri, gri zemin renginden
sonra da beyaz olur. Bu renklerden biri burada belirlenir.*/
background-color : #FFFFFF;
}
.sectiontableentry2 {
background-color : #CDCDCD; /*Renklerden diğeri de burada belirlenir.*/
}
.sectiontableheader { /*Anket sonuçlarını gösterirken en üstte yazan anket
isminin olduğu hücreyi biçimlendirir.*/
background-color : #FFFFFF;
color : #000033;
font-weight : bold;
}
/******************************
Misc.
*******************************/
.small { /*Burada Yazar … şeklinde yazıyı yazanı belirten yazı
biçimlendirilir.*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0066FF;
text-decoration: none;
font-weight: normal;
}
.smalldark { /*Burada anket sonuçlarında alt kısımdaki oy veren sayısı, ilk oy,
son oy yazısı biçimlendirilir.*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000033;
text-decoration: none;
font-weight: normal;
}
/*******************************
Newsfeeds. Bu bölümde haber başlıları bileşeni ile ilgili düzenlemeleri yapabilirisiniz.
********************************/
.newsfeedheading {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: #000033;
text-align:left;
}
.newsfeeddate {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0066FF;
font-weight: normal;
}
/*****************************
Create/Modify Dates . Oluşturulma tarihi.
******************************/
.createdate { /*Yazının oluşturulma tarihinin biçimlendirilmesi burada yapılır*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #0066FF;
text-decoration: none;
font-weight: normal;
}
.modifydate { /*Değişikliğe uğramış yazının ne zaman değiştirildiğini belirten
yazının biçimlendirilmesi burada yapılır.*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #0066FF;
text-decoration: none;
font-weight: normal;
}
/*****************************/
Content voting /*oy başlığı*/
/******************************/
.content_rating { /*yazının rating değeri yazısının biçimlendirilmesi*/
font-weight: normal;
font-size: 8pt;
}
.content_vote { /*yazının oy sonuçlarının başlığının biçimlendirilmesi*/
font-weight: normal;
font-size: 8pt;
}
/*****************************/
fast4rdf /*Newsfeeds sayfasının ana metnini tanımlamak için kullanılır.*/
/******************************/
.fase4rdf {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; color: #ff0000; font-weight: normal;
}
a.fase4rdf:link {
font-size: 11px; font-weight: normal; color: #ff0000;
}
a.fase4rdf:hover {
font-weight: bold; color: #0066FF;
}
/******************************
Searchintro and contact
*******************************/
table.searchintro {
background-color: #FFFFFF; /*arama sonuç raporunu biçimlendirir. Örnek :
“Aranacak Kelimeler sitedefteri” yazısının
olduğu tablo zemin rengi*/
border: 1px solid #000099; /*Üstteki zemin rengi idi, bu ise tablo kenarlığı*/
}
.contact {
background-color: #FFFFFF;
}
.icons {
background-color: #FFFFFF;
border-right-width: 1px;
border-right-style: dashed;
border-right-color: #0078FF;
}
.details {
background-color: #FFFFFF;
font-size: 10px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/****************************** /
Pagenav /*Sayfalar arası geçişi sağlayan ( << Başa Dön < Önceki 1 Sonraki > Sona Git >> ) linkler ile ilgili düzenlemeler*/
/*******************************/
.pagenav {
font-weight: normal;
}
a.pagenav, a.pagenav:visited {
font-weight: bold;
color: #ff0000;
}
a.pagenav:hover {
color: #ff0000;
}
.pagenavbar {
}
/* for modifying (moscode) output. Don’t set the colour! ??? */
.moscode {
background-color: #f0f0f0;
}
/* Text passed with mosmsg url parameter ??? */
.message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 10pt;
color : #ff6600;
text-align: center;
}
/**************************** /
APS Specific
/*Buradaki aps temanın adının aps_clean_generic olması ile ilgili*/
/*Bu bölümde temanın temel hatları biçimlendiriliyor.*/
/*****************************/
.aps_outline {
width: 800px; /*Joomla temanızın tarayıcıdaki genişliğini buradan
ayarlayabilirsiniz. Mesela bu sayıyı 1000 yaparsak sayfanın
sağ ve sol kenarlarındaki boşluk azalacaktır*/
height: 100%; /*Joomla temanızın yüksekliğini buradan ayarlayabilirsiniz.*/
background-color: #000000; /*Temanın sağ sol kenarları hariç zemin rengi.
Üstünde tema bulunduğu için sayfayı
yenileyince kısa bir süre görünen renk*/
border-left: 1px solid #000000; /*Temanın sol tarafındaki kenarlık rengi*/
border-right: 1px solid #000000; /*Temanın sağ tarafındaki kenarlık rengi*/
}
.aps_topbar { /*Bu temada en üstte, logonun da üstünde Anasayfa->Haberler
şeklinde yol gösterici var. İşte bu yol göstericinin
biçimlendirilmesi burada yapılıyor.*/
background-color: #000000;
background-image: url(../images/bg_light_gray.gif);
background-position: 0px 0px;
width: 100%;
text-align: left;
}
.aps_title { /*Yol göstericinin hemen altında logonun bulunduğu title kısmı var.
Site adı burada 20px boyutunda yazdırılmış. Bu yazının ve
altındaki zeminin biçimlendirmesi burada yapılıyor. */
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
background-color: #0066FF;
background-image: url(../images/bg_light_blue.gif);
background-position: 0px 0px;
width: 100%;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
color: #FFFFFF;
}
.aps_leftbar { /*Sol taraftaki menülerin olduğu bölüm (left modules) burada
biçimlendiriliyor*/
background-color: #CCCCCC;
background-image: url(../images/bg_light_gray.gif);
background-position: 0px 0px;
width: 150px;
border-right: 1px solid #000000;
text-align: center;
}
.aps_centerbar { /*Orta kısımdaki ana yazıların olduğu bölümün (main body)
zemin rengi buradan belirleniyor*/
background-color: #FFFFFF;
}
.aps_bottombar { /*Alt taraf buradan biçimlendiriliyor*/
background-color: #0066FF;
background-image: url(../images/bg_light_blue.gif);
background-position: 0px 0px;
width: 100%;
border-top: 1px solid #000000;
color: #FFFFFF;
}
.aps_rightbar {
background-color: #FFFFFF;
width: 150px;
}
.aps_rightbar_user2 {
background-color: #FFFFFF;
border: 1px solid #0066FF;
}
.aps_rightbar_right {
background-color: #FFFFFF;
border: 1px solid #0066FF;
}
