Css içindeki önemli olan kısmları anlatacağım bazı yerleri yani fazla oynamamanız gereken yerleri geçeceğim
İlk önce genel sayfa stilini belirlememiz lazım,
body {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
color: #323D4F;
background-color: #FFFFFF;
font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
margin: 0;
Sayfa stilinin olduğu yani arka plan ve gövdenin olduğu kısım;
background-color: #FFFFFF; arka plan rengidir.
color: #323D4F; forum açıklamaları içindeki yazı rengidir.
Eğr arka plana resim veya herhangi bir görüntü ilave etmek isterseniz; background-image: url('RESİM LİNKİ'); Bunu body kısmındaki kodlar içine ilave etmeniz sorununuzu çözecektir.
Eğer arka plana görüntü ilave ederseniz renk kodunuda görüntüye göre ayarlayın, görüntünün olmadığı yerde arka planınız veya sayfa stiliniz farklılık göstermesin.
#wrapheader {
min-height: 120px;
height: auto !important;
height: 120px;
/* background-image: url('./images/background.gif');
background-repeat: repeat-x;*/
/* padding: 0 25px 15px 25px;*/
padding: 0;
Oturumu kapat, öm.,Pano kılavuzu vb. başlık kısmı dahil olduğu kısımdır.
#wrapcentre {
margin: 15px 25px 0 25px;
forumun genel çerçevesidir, Bu kısma renk kodları ilave ederek boyut ile birlikde farklılıklar yaratabilirsiniz.
#wrapfooter {
text-align: center;
clear: both;
Forum veya sayfanın en altında bulunan yönetim panelinin olduğu kısımdır. Bu kısımdada ufak oynamalar yapabilirsiniz. sola veya sağa geçirip çerceve içine alabilirsiniz.
#wrapnav {
width: 100%;
margin: 0;
background-color: #ECECEC;
border-width: 1px;
border-style: solid;
border-color: #A9B8C2;
Bu kısımda fazla oynama yapmanıza gerek yoktur.
#logodesc {
margin-bottom: 5px;
padding: 5px 25px;
background: #D9DFE4;
border-bottom: 1px solid #4787A7;
Burası kod içine logomuzu koyduğumuz kısımdır. logomuzu herhangi bir resim sitesinden upload edip bu kısma kayabiliriz, tabiki bu kısmada background-image: url('RESİM LİNKİ'); ilave edeceksiniz, logo boyutu yani uzunluğu 1000px civarında olursa forum üstüne tam oturur.
ayrıca bu kısımda logomuza göre yükseklik vermek için height: 150px; kısmını ilave ederek logo boyutunu ayarlarız.piksel ayarlarını her zaman değiştirebiliriz.
#menubar {
margin: 0 25px;
}
#datebar {
margin: 10px 25px 0 25px;
}
Kullanıcı paneli ve saat kısmının olduğu yerdir.
Tema içindeki önemli olan kısımları elimden geldiğince anlatacağım için bazı yerleri direk geçeceğim. /* Text
--------------------- */
alanı içinde
.postauthor {
color: #000000;
}
.postdetails {
color: #000000;
Topikler içerisindeki Kullanıcı Adı , Profil bilgilerinin olduğu kısımdır.
/* Tables
------------ */
th {
color: #71DD8D;
font-size: 1.1em;
font-weight: bold;
background-color: #006699;
background-image: url('./images/cellpic3.gif');
white-space: nowrap;
padding: 7px 5px;
Bu kısım Forum, Konu, İleti, Son iletinin olduğu kısımdır. celpic rengine göre arka plan rengini,yani celpic altında gözükecek rengi "background-color: #006699;" celpic üzerindeki yazı rengi "color: #71DD8D;" yazı büyüklüğü,font büyüklüğü ayarı "font-size: 1.1em;"
.tablebg {
background-color: #A9B8C2;
Forum içerisindeki bölümleri ayıran ince çizgilerin olduğu kısımdır, stile göre ayarlama yapabilirsiniz.
.catdiv {
height: 28px;
margin: 0;
padding: 0;
border: 0;
background: white url('./images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;
}
.cat {
height: 28px;
margin: 0;
padding: 0;
border: 0;
background-color: #C7D0D7;
background-image: url('./images/cellpic1.gif');
text-indent: 4px;
Bu kısımda kategori kesimlerinin olduğu kısımdır. Burdaki celpic boyutunun sağ taraf için 300*30px civarında olmasına dikkat edin , 300px dek küçük olan celpicler yani ara çubuk sağ tarafdaki kısmı tamamlamamaktadır.
.row1 {
background-color: #ECECEC;
padding: 4px;
}
.row2 {
background-color: #DCE1E5;
padding: 4px;
}
.row3 {
background-color: #C0C8D0;
padding: 4px;
}
.spacer {
background-color: #D1D7DC;
}
hr {
height: 1px;
border-width: 0;
background-color: #D1D7DC;
color: #D1D7DC;
}
Bu kısım row1, row2, row3 forum açıklamalarının,konu, ileti, son iletilerin olduğu kısımın zemin renklerini ayarlar.
/* Links
------------ */
a:link {
color: #006597;
text-decoration: none;
}
a:active,
a:visited {
color: #005784;
text-decoration: none;
}
a:hover {
color: #29AB4A;
text-decoration: underline;
}
a.forumlink {
color: #006699;
font-weight: bold;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 1.2em;
}
a.topictitle {
margin: 1px 0;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.2em;
}
a.topictitle:visited {
color: #5493B4;
text-decoration: none;
}
th a,
]th a:visited {
color: #71DD8D !important;
text-decoration: none;
}
th a:hover {
text-decoration: underline;
}
Bu kısımdan linklerimizin renk ayarlarını, farenin üzerine geldiği zaman alacağı hali ayarlar, bu kısımda th a:visited { aynı zamanda üyeler sayfasındaki link rengidir.burdaki renk kodunun tables de ayarladığımız renk kodu ile aynı olmasına dikkat edin.
.quotetitle, .attachtitle {
margin: 10px 5px 0 5px;
padding: 4px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #A9B8C2;
color: #333333;
background-color: #A9B8C2;
font-size: 0.85em;
font-weight: bold;
Bu kısımda alıntı satırlarının renk ve yazı ayarlarını yaparız
bir yerden almana gerek yok...
