Bu makaleyi
phpKFdestek.org üyeleri için özel hazırladım.
İlk önce dosyalar/tema/sablon.css açın ve ilk satırda
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç A:link {
COLOR: #007900; TEXT-DECORATION: none}
A:active {
COLOR: #007900; TEXT-DECORATION: none}
A:visited {
COLOR: #007900; TEXT-DECORATION: none}
A:hover {
COLOR: #000000; TEXT-DECORATION: underline}
şeklinde bir kod görüceksiniz..Şimdi bu kodların ne işe yaradığını görüceğiz.İlk önce
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç A:link {
COLOR: #007900; TEXT-DECORATION: none}
Bu kod linklerin renklerini belirler.Burdaki #007900 adlı kod , linklerin rengidir.O rengi isterseniz turuncu orange isterseniz siyah black yapın.Size kalmış birşey..
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç A:active {
COLOR: #007900; TEXT-DECORATION: none}
Bu kod ziyaret edilmiş linklerin rengini,şeklini şemalini belirten yerdir.Burda her türlü editleme yapabilirsiniz..
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç A:hover {
COLOR: #000000; TEXT-DECORATION: none}
Bu Kod imlecin linkin üzerine geldiğinde hangi renge dönüşmesini veya şeklinin nasıl olacağını belirten koddur.Mesela:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç
Burdaki none yazan yere underline yazdığımızda imleç linkin üzerine gelince , linkin altına bi çizgi çekiliyor..
11.Satırda ise şu kodlar var.
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç BODY
{
background-image: url(artalan.png);
SCROLLBAR-FACE-COLOR: #fcfcfc;
SCROLLBAR-highlight-color: #ffffff;
SCROLLBAR-SHADOW-COLOR: #009900;
SCROLLBAR-3dlight-color: #009900;
SCROLLBAR-ARROW-COLOR: #009900;
SCROLLBAR-TRACK-COLOR: #eeeeee;
}
Şimdi hepsini tek tek ne işe yaradığını öğreneceğiz..
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç {
background-image: url(artalan.png);
Bu kod forumumuzun arkaplanında bulunan resimdir.Hepimizde artalan.png olarak bulunur.Ama şablon rengi yeşil ise artalany.png olur.
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç SCROLLBAR-FACE-COLOR: #fcfcfc;
SCROLLBAR-highlight-color: #ffffff;
SCROLLBAR-SHADOW-COLOR: #009900;
SCROLLBAR-3dlight-color: #009900;
SCROLLBAR-ARROW-COLOR: #009900;
SCROLLBAR-TRACK-COLOR: #eeeeee;
}
Bu kod ise scrollbar'ınızın rengini, biçimini belirler.İstediğiniz renk yapıp , biçimini değiştirebilirsiniz..
22.Satırda ise şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .sayfa_kenarlik1
{
position: relative;
width: 100%;
}
Adından da belli olduğu gibi sayfa kenarlıklarının biçimini belirtir.Burdaki width olan yer sayfa kenarlığının yüksekliğidir.İstediğiniz gibi düzenleyebilirsiniz.Ama 100 önerilir..
28.Satırda ise şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .sayfa_kenarlik2
{
position: relative;
width: 95%;
background-color: #ffffff;
border-left: 3px solid #82c878;
border-right: 3px solid #82c878;
}
Bu kodlar ise sayfa kenarlarının daha gelişmiş düzenlenmesini sağlar.Mesela :
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç background-color: #ffffff;
Sayfa kenarının rengini;
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç
Sayfa kenarının yüksekliğini;
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç border-left: 3px solid #82c878;
Sol sayfa kenarının büyüklüğünü (px) ve rengini;
Burdaki ise:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç border-right: 3px solid #82c878;
Sağ sayfa kenarının büyüklüğünü (px) ve rengini belirtir..
37.Satırda şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .etiket
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 12px;
}
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç
Forumda kullanılan yazı tiplerini belirtir.
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç
Bu kod ise yazı tipinin boyutunu (size) belirtir..
43.Satırda ve 52.Satırda başlık biçimi düzenlemesiyle ilgili kodlar var ama biz 42.Satırdakini göreceğiz..
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .baslik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 19px;
font-weight: bolder;
text-align: center;
color: #009900;
}
Burdaki font-family , font size ve font-weigh'ı görmüştük.Bu yüzden bunları geçiyoruz ve diğer kodlara dönüyoruz..
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç
Bu kod ise yazının yönünü belirtir.Anasayfamızdaki kategoriler hep ortalanmış bir şekilde olur.Bunun sebebi burdaki center yani ortalama kodudur.Eğer bunu left yapsaydık kategorilerin isimleri solda, right yapsaydık sağ tarafta olurdu..
61 ve 66.Satırda şu kodlar var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .tablo_border
{
background: #009900;
}
.cizgi_renk
{
border: 1px solid #009900;
}
Burdaki;
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .tablo_border
{
background: #009900;
}
Kodu , tabloların arkaplan rengini belirler.Mesela burdaki #009900 renk kodunu black olarak değiştirelim.Sonuç olarak tablolar(fazla belli olmasalarda) renkleri siyah olur..
Burdaki;
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .cizgi_renk
{
border: 1px solid #009900;
}
Kod, adından da belli olduğu gibi çizgilerin renkleri ve biçimleri ile ilgilidir.Px değerini arttırıp - azaltırsak çizgiler büyür veya küçülür.Ordaki renk kodunu da kendinize göre editleyin..
71.Satırda şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .arama_baslik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 13px;
font-weight: bolder;
font-style: italic;
text-align: center;
color: #000000;
background: #ffffff;
}
Bu kod forumdaki
arama seçeneklerinin şablonunu belirtir.
Zaten bu aşamaya kadar size-weight-color vb. Gibi kodları öğrendik.Şimdiki kodumuz ise , 76.Satırda bulunan:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç
Kodudur..Bu kod yazının (fontun) stilini belirtir.Burdaki italic , bunun eğik olduğunu eğer bunu bold yaparsak yazının kalın olacağını gösterir..
82.Satırda şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .ana_forum_baslik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 13px;
font-weight: bolder;
color: #ffffff;
background-color: #55ba3e;
background-image: url(cubuk2.gif);
height: 24px;
}
}
Forumun Türk yapımı olması bizim için büyük bir avantaj.Burdaki kodları az-çok anlayabiliyoruz.ana_forum_baslık kodu ise , forumunuzun başlığının stilini belirler.Satırda bulunan kodları öğrendiğimizden , gerisini siz halledebilirsiniz..
93.Satırda şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .ana_forum_taban
{
background-color: #55ba3e;
background-image: url(cubuk2.gif);
Burdaki kod ise cubuk2.gif'in bulunduğu tablonun arkaplan rengini belirtir..
111.Satırda şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .konu_baslik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 15px;
font-weight: bolder;
color: #ffffff;
background-color: #55ba3e;
background-image: url(cubuky.gif);
}
Bu kod ise konu başlıklarının biçimini belirtir.Kodları öğrendiğimiz için siz editlersiniz..
149.ve 169.Satırda şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .hizlicevap_baslik
{
background-image: url(cubuk.gif);
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #FFFFFF;
border: 2px solid #e0e0e0;
width: 600px;
background-color: #55ba3e;
height: 23px;
position: relative;
}
.hizlicevap_icerik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #000000;
border: 2px solid #e0e0e0;
width: 600px;
height: 350px;
background-color: #ffffff;
position: relative;
overflow: auto;
}
Bu kodlar Türkçe olduğu için kolay editlenir.Bunun üzerinde fazla durmadan size bırakıyorum..
176. ve 190.Satırda şu kodlar var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .kod_baslik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: black;
border: 2px solid #e0e0f5;
/*width: 460px;*/
width: 97%;
background-color: #e0e0f5;
height: 22px;
position: relative;
left: 5px;
}
.kod_icerik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 12px;
color: black;
border: 2px solid #e0e0f5;
/*width: 460px;*/
width: 97%;
background-color: #f9f9f9;
position: relative;
left: 5px;
overflow: auto;
}
Bu ise BBC 'deki kodların biçimini belirtir.
204. ve 218.Satırda şu kodlar var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .alinti_baslik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 10px;
color: black;
border: 2px solid #f0e0f5;
/*width: 460px;*/
width: 97%;
background-color: #f0e0f5;
height: 22px;
position: relative;
left: 5px;
}
.alinti_icerik
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 10px;
color: black;
border: 2px solid #f0e0f5;
/*width: 460px;*/
width: 97%;
background-color: #ffffff;
position: relative;
left: 5px;
overflow: auto;
}
Bu kodlar ise alıntıların biçimini belirtir..
245.Satırda şu kod var:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .dugme
{
BACKGROUND-COLOR: #55ba3e;
BORDER-BOTTOM: #006600 2px solid;
BORDER-LEFT: #66DD00 2px solid;
BORDER-RIGHT: #006600 2px solid;
BORDER-TOP: #66DD00 2px solid;
COLOR: white;
FONT-FAMILY: verdana, sans-serif, tahoma, arial, helvetica;
FONT-SIZE: 11.0px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none;
}
Bu kod düğmelerin biçimini belirtir.Peki ne düğmesi? Şimdi özel ileti bölümüne girin orda" Seçilileri sil " ve "Seçilileri kaldır" adında 2 düğme vardır.Bu kodlar işte orayı belirtiyor..
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç
Sol tarafın biçimini ,rengini;
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç
Sağ tarafın biçimini ,rengini belirtir.Diğer kodları ise siz biliyorsunuz :]
Son olarakta şu kodlar bulunmakta:
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .kurucu
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #FF0000;
FONT-WEIGHT: bold;
}
.yonetici
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #FF9900;
FONT-WEIGHT: bold;
}
.yardimci
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #660099;
FONT-WEIGHT: bold;
}
.kullanici
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #000000;
}
Bunları kısaca tanıtayım;
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .kurucu
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #FF0000;
FONT-WEIGHT: bold;
}
Bu kod; Kurucu (admin)'in rengini biçimini belirtir..
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .yonetici
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #FF9900;
FONT-WEIGHT: bold;
}
Bu kod; Yöneticinin rengini biçimini belirtir..
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .yardimci
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #660099;
FONT-WEIGHT: bold;
}
Bu kod; Yardımcı(moderat)'nın rengini biçimini belirtir..
Son olarakta;
Kod Çizelgesi Dil Seçin:
php
php
c++
html
javascript
sql
xml
perl
Hepsini Seç .kullanici
{
font-family: verdana, sans-serif, tahoma, arial, helvetica;
font-size: 11px;
color: #000000;
}
Bu kod; Kullanıcıların rengini biçimini belirtir..
Makalemizin sonuna geldik.Umarım bu kodlar hakkında birşeyler öğrenmişsinizdir.Artık kendi kendinize temanızı yapabilirsiniz..Makalede bir kaç kodu anlatmadım çünkü gerekli görmedim.
Önemli hatırlatma: Bu makale resmi site hariç herhangi bir sitede kaynak belirtilmeden dağıtılırsa , yasal işlemler uygulanabilir!
Düzenleme Nedeni: Üst Konu Yapıldı.
![[ TASARIM KURSU ] Türkiye`nin En Ayrıntılı içeriğe Sahip Tasarım Sitesi](../tk_logo.gif "[ TASARIM KURSU ] Türkiye`nin En Ayrıntılı içeriğe Sahip Tasarım Sitesi"){kind=logo}
![[ TURKISH EMULATOR ] Türkiye'nin Emulator Portalı (Günlük Haber,Emulator,Rom, Cihaz Tanıtımı)](../tremulator.gif "[ TURKISH EMULATOR ] Türkiye'nin Emulator Portalı (Günlük Haber,Emulator,Rom, Cihaz Tanıtımı)")
çok süper bi anlatım olmuş
