CSS nasıl düzenlenir ?
- İlk olarak genel sayfa sitili ve sadece İnternet explorerda gözükücek olan scroll bar(kaydırma çubuğu) renkleri ile başlayılım
- Turuncu renkle belirttiğim kısım sitemizin arkaplanını renklendirebilrisiniz.
- Kahverengi ile belirttiğim kısım sitemizinin sağındaki kaydırma çubuklarını renklendirebilirsiniz.( sadece internet explorer da geçerlidir. )
- Yeşil renkle belirttiğim kısımlarda sitemizin arkaplanında gözükmesini istediğiniz resimi belirleyebilirsiniz.
- Zeytin yeşili ile belirttiğim kısımda arkaplanda yer alacak olan temanın genel özelliklerini ayarlayabilirsiniz. ( tekrar estsin veya tekrar etmesin gibi.. )
- Mavi renkle belirttiğim kısımda tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu ve tablomunun genişliğini belirleyebilirsiniz.
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
/*background-color: #E5E5E5;*/
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #9E836E;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #845526;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #845526;
/*background-image : url(http://www.shakira-fansclub.it/forum/body_back.gif);*/
/*background-image : url(http://www.shakira-fansclub.it/forum/bkg.gif);*/
background-image : url(http://www.shakira-fansclub.it/forum/Sfondo.jpg);
background-repeat : repeat-y;
background-color : #f5eace;
/*background-repeat : no-repeat;*/
background-position : top center;
/*background-attachment : fixed;*/
margin-top: 0%;
/*width: 822px; margin-left:9.1%; margin-right:9.1%;*/
- İkinci olarak Logomuzun sitilini ayarlayalım.
- Turuncuyla belirttiğim kısım logomuzun sitilini ve logomuzu ayarlayacağımız ([size85] yeni logo seçeceğimiz [/size]) kısımdır.
- Yeşil ile belirttiğim kısım logomuzun temel boutlarını ayarladığımız kısımdır.
/*Header e logo*/
#logo{
position: relative;
top:-38px;
background: url(http://www.shakira-fansclub.it/forum/logoV3.jpg) no-repeat scroll center top;
height: 300px; width: 801px;
}
#logo h2 a{
width: 801px;
height: 300px;
display: block;
margin: 0px;
padding: 0px;
text-indent: -5000px;
- Şimdide genel yazı sitili ayarlarını düzenleyelim
- Turuncu renkli ile belrttiğim kısımda yazı sitilini belirleyebiliriz..
- Yeşil renk ile belirttiğim kısım link renklerini ayarlayabiliriz.
- Zeytin yeşili ile belirttiğim kısımda linkin imleç üzerine getirildiğinde alacağı durumu belirleyebiliriz.
- Kahverengi ile belirttiğim kısımda ise linklerde gözükücek çizgi boyutunu ( kalınlık , yükseklik vs.vs. ) ayarlamanızı sağlar.
- Kırmızı renk ile belirttiğim kısıım ForumUp için özel olan CSS kodları dır bu kodları kurcalamayalım( ben kurcalayamadım yemedi
).
/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #845526; }
a:hover { text-decoration: underline; color : #DD6900; }
hr {width: 100%; height: 0px; border: solid #e3c080 0px; border-top-width: 1px;}
.fuHeaderCSS {margin-right: auto; margin-left: auto; max-width: 822px ! important; width: 822px; }
.fucopyright {background: #; position: relative; left:27.0896%; text-align: center;}
- Olarak ta Forumumuzun içini düzenleyelim.
- Kırmızı ile belirttiğim kısımda sitemizin kenarlıklarındaki renkleri değiştirmemizi sağlar.
- Turuncu ile belirttiğim kısımıda ise forum içinde gözükecek resimimizi ve forumiçinin ana renklerini belirleriz
- Gri ile belirttiğim kısımı henüz çözemedim ve tema düzenlerkende pek kullanmıyorum
/* This is the border line & background colour round the entire page */
.bodyline {border: 0px #845526 dotted; background-color : #fbf7ea;}
/* This is the outline round the main forum tables */
.forumline { width: 100%; border: 1px #845526 solid; background-image : url(http://www.shakira-fansclub.it/forum/back_shaki.jpg);}
.forumlineMenu { position: relative; top:600px; width:190px; border: 1px #845526 solid; background-image : url(http://www.shakira-fansclub.it/forum/sfondoshaki.jpg); }
- Şimdide tablo yapımızı(renkleri ve gözükecek resimileri) ayarlıyalım
- Turuncuyla belirttiğim kısımda ilk pixelimizi ,
- Yeşil ile belirttiğim yerde 2. pixelimizi ,
- Kırmızı ile belirttiğim yerde 3. pixelimizi ayarlıyoruz.
- Koyu Mavi ile belirttiğim kısımda forumumuzun sütun yapısını(rengini ve gözükücek resimi) düzenlediğimiz kısımdır.
/* Main table cell colours and backgrounds */
td.row1 {background-image : url(http://www.shakira-fansclub.it/forum/pixel01.gif);}
td.row2 {background-image : url(http://www.shakira-fansclub.it/forum/pixel02.gif);}
td.row3 {background-image : url(http://www.shakira-fansclub.it/forum/pixel03.gif);}
/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
height: 28px;
/*background-color: #D1D7DC;*/
background-image : url(http://www.shakira-fansclub.it/forum/cellpic2.gif);
background-repeat : repeat-x;
- Sütunların ve linklerin ayarlarını yaparlım
- Turuncu ile belirttiğim kısımda forumumuzun sütun yapısını(rengini ve gözükücek resimi) düzenlediğimiz kısımdır. Yalnız bunun diğerinden farkı sütun üzerindeki linklerin şeklini ( alta çizgi - üzerine çizgi - alta ve üste çizgi.. gibi )
/* Header cells - the blue and silver gradient backgrounds */
th {
color: #845526; font-size: 11px; font-weight : bold;
/*background-color: #845526;*/ height: 25px;
background-image: url(http://www.shakira-fansclub.it/forum/cellpic3.gif);
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(http://www.shakira-fansclub.it/forum/cellpic2.gif);
/*background-color:#D1D7DC;*/ border: #9E836E; border-style: solid; height: 28px;
}
td.catHeadMenu {background-image : url(http://www.shakira-fansclub.it/forum/cellpic2.gif); font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #845526}
- Turuncu ile belirttiğim kısımda forumumuzun sütun yapısını(rengini ve gözükücek resimi) düzenlediğimiz kısımdır. Yalnız bunun diğerinden farkı sütun üzerindeki linklerin şeklini ( alta çizgi - üzerine çizgi - alta ve üste çizgi.. gibi )
- Pixellerimizide ayarlıyalım
- Turuncu ile belirttiğim kısımda 3.pixelimizi
- yeşil ile belirttiğim kısımda ise 4.pixelimizi ayarlıyoruz..
- Gri ile belirttiğim kısımı henüz çözemedim ve tema düzenlerkende pek kullanmıyorum
/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: #9E836E; border-style: solid; height: 25px; }
td.row3Right{
background-image : url(http://www.shakira-fansclub.it/forum/pixel03.gif);
/*background-color: #D1D7DC;*/ border: #9E836E; border-style: solid; }
td.spaceRow{ background-image :url(http://www.shakira-fansclub.it/forum/pixel04.gif);
border: #845526; border-style: solid; }
th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 0px 0px 0px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }
- Genel yazı ayarlarımızı yapalım
- Yeşil ile belirttiğim kısımda forumumuzun Ana başlığını düzenleriz ( yazı tipleri, renkleri ve boyutu gibi...)
/* position : absolute; top:100px; The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2 {
font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; text-decoration: none; line-height : 120%; color : #000000;
} - Turuncu ile belirttiğim kısımda forumumuzda kullanacağımız yazı boyutları ve renkleri ayarlarız.
- Zeytin yeşili ile belirttiğim yerde ise forumumuzdaki linklerin görünümünü ayarlarız.
/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #845526; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #DD6900; text-decoration: underline; } - Turuncu ile belirttiğim kısımda üst menü( kayıt ol , giriş , arama gibi.. ) yazılarının boyutunu ve rengini ayarlarız.
- Yeşil ile belirttiğim kısımda linkin normal görünümünü
- Mavi ile belirttiğim kısımda ise linkin üzerine gelince nasıl görüneceğini ayarlarız.
/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #845526; }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; } - Turuncu ile belirttiğim kısımda kategori yazılarının boyutunu ve rengini ayarlarız.
- Yeşil ile belirttiğim kısımda kategori linkin normal görünümünü
- Mavi ile belirttiğim kısımda ise kategori linkin üzerine gelince nasıl görüneceğini ayarlarız.
/* Forum category titles */
.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #845526}
a.cattitle { text-decoration: none; color : #845526; }
a.cattitle:hover{ text-decoration: underline; } - Ana sayfada olan link ayarlarını yapalım.
- Kırmızı ile belirttiğim kısım linkin normal görünümü,(font boyutu ve renk ayarları )
- Yeşil ile belirttiğim kısım linkin üzerine gelmeden olan görünümü,
- Turuncu ile belirttiğim kısımda ise linkin imleç üzerindeyken alacağı durum ayarlanır.
/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 12px; color : #845526; }
a.forumlink { text-decoration: none; color : #845526; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }
- Nav ( SSS - Arama - Üye Listesi - Kullanıcı Grupları ) ayarlarımızı yapalım..
- Kırmızı ile belirttiğim kısım Nav'ın normal görünümü,(font boyutu ve renk ayarları )
- Yeşil ile belirttiğim kısım linkin üzerine gelmeden olan görünümü,
- Turuncu ile belirttiğim kısımda ise linkin imleç üzerindeyken alacağı durum ayarlanır.
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #845526; }
a.nav:hover { text-decoration: underline; }
- Viewforum görüntü ayarlarımızı yapalım
- Kırmızı ile belirttiğim kısım Topic'in normal görünümü,(font boyutu ve renk ayarları )
- Yeşil ile belirttiğim kısım topic'in üzerine gelmeden olan görünümü,
- Turuncu ile belirttiğim kısımda ise topic'in imleç üzerindeyken alacağı durum ayarlanır.
- Mavi ile belirttiğim kısımda topic'e tıkladıktan sonra alacağı şekil ayarlanır.
/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #845526; }
a.topictitle:visited { text-decoration: none; color : #BF7B37; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }
- Kullanıcı Adı , Profil bilgileri ayarlarını yapalım.
- Kırmızı renk ile belirttiğim kısım kullanıcı adını,
- Yeşil ile belirtiğim kısım profil bilgilerini,
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #000000;}
/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #000000; } - Viewtopic ( konuları görüntülediğimiz sayfa ) ayarlarını yapalım.
- Kırmızı ile belirttiğim kısım mesajımızın normal görünümü,(font boyutu ayarları )
- Yeşil ile belirttiğim kısım mesajın içindeki linkin nasıl görünceğini,
- Mavi ile belirttiğim kısımda topic'e tıkladıktan sonra alacağı şekil ayarlanır.
- Turuncu ile belirttiğim kısımda ise mesaj içindeki linkin imleç üzerindeyken alacağı durum ayarlanır.
/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link { text-decoration: none; color : #845526 }
a.postlink:visited { text-decoration: none; color : #BF7B37; }
a.postlink:hover { text-decoration: underline; color : #DD6900}
- Alıntı ve kod kutusu ayarlarını yapalım.
- Kırmızı ile belirttiğim kısımda kod un yazı stilini ve rengini,
- Yeşil ile belirttiğim kısımda arkaplan rengi,
- Turuncu ile belirttiğim kısımda borderın rengi ve genişliği ayarlanır.
- Kırmızı ile belirttiğim kısımda alıntı mesajının yazı stilini ve rengini,
- Yeşil ile belirttiğim kısımda arkaplan rengi,
- Turuncu ile belirttiğim kısımda borderın rengi ve genişliği ayarlanır.
/* Quote & Code blocks */
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #fbf8ee; border: #cca76b; border-style: solid; margin-bottom: 2px;
border-left-width: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #fbf8ee; border: #cca76b; border-style: solid; margin-bottom: 2px;
border-left-width: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
- Copyright kısmını düzenleyelim.( gerek yok ama neyse )
- Kırmızı renk ile belirttiğim kısım yazı stilini,
- Yeşil ile belirttiğim kısım copyright linkinin normal görünümü,
- Turuncu ile belirttiğim kısım copiright linkinin üzerine gelince alacağı görüntü,
/* Copyright and bottom info */
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright { color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;} - Forum elementleri ( Şeklil , kalıp elemanları ) ni düzenleyelim.
- Kırmızı ile belirttiğim kısımda yazı sitili ve font rengi,
- Yeşil ile belirttiğim kısımda ise sınır sütün rengini ayarlarız.
/* Form elements */
input,textarea, select {
color : #000000;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #000000;
} - Ne işe yaradığını çözemedim zaten kullanmıyorum
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #FFFFFF;
}
input { text-indent : 2px; }
- Buton ayarlarımızı yaparlım ( BBCode , gönder , )
- Kırmızı renk ile belrttiğim kısım BBCode butonlarımızın arkaplan,
- Yeşil ile belirttiğim kısım butonumuzun yazı stili ve rengini,
- Kahverengi ile belirttiğim gönder butonun arkaplanı,
- Turuncu ile belirttiğim kısım buton üzerindeki yazının stili ( kalın, italik, altı çizik )
-
/* The buttons used for bbCode styling in message post */
input.button {
background-color : #EFEFEF;
color : #000000;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The main submit button option */
input.mainoption {
background-color : #FAFAFA;
font-weight : bold;
}
/* None-bold submit button */
input.liteoption {
background-color : #FAFAFA;
font-weight : normal;
}
- Bu dosyayıda bilmiyorum bundada değişiklik yapmadan aynen uygulayın.
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know
*/
.helpline { background-color: #DEE3E7; border-style: none; }
/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");
- Yeşil ile belirttiğim kısımda forumumuzun Ana başlığını düzenleriz ( yazı tipleri, renkleri ve boyutu gibi...)
CSS yi düzenledik. şimdide onu nasıl kullanacağımızı öğrenmek için linke tıklayın.
http://staff.forumup.web.tr/viewtopic.p ... orum=staffwritten by TRX
