Ayancık-Zaviye Köyü-Paylaşım Forumu

fenerli1907

TRX yazmış:

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 Wink

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.

Alıntı:

/* 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. Wink

Turuncuyla belirttiğim kısım logomuzun sitilini ve logomuzu ayarlayacağımız ( yeni logo seçeceğimiz ) kısımdır.

Yeşil ile belirttiğim kısım logomuzun temel boutlarını ayarladığımız kısımdır.

Alıntı:

/*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 Wink

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 Wink

bu kodları kurcalamayalım( ben kurcalayamadım yemedi Laughing

).

Alıntı:

/* 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. Wink

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 Wink

Alıntı:

/* 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.

Alıntı:

/* 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 Wink

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 )

Alıntı:

/* 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}

Pixellerimizide ayarlıyalım Wink

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 Wink

Alıntı:

/*
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 Smile

*/
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 Wink

Yeşil ile belirttiğim kısımda forumumuzun Ana başlığını düzenleriz ( yazı tipleri, renkleri ve boyutu gibi...)

Alıntı:

/* 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.

Alıntı:

/* 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.

Alıntı:

/* 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.

Alıntı:

/* 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.

Alıntı:

/* 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.

Alıntı:

/* 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.

Alıntı:

/* 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,

Alıntı:

/* 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.

Alıntı:

/* 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.

Alıntı:

/* 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 Laughing

)

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ü,

Alı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.
  
  Alıntı:
  
  /* 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 :D
  
  Alıntı:
  
  /* 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 )

Alıntı:

/* 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. ;)

Alıntı:

/* 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");

CSS yi düzenledik. şimdide onu nasıl kullanacağımızı öğrenmek için linke tıklayın.

Only registred user can see link on this forum!
Registred or Login on forum!

written by TRX

_________________
<font color="Green" size="2"><b>Ayancik Zaviye Köyü Yönetim Ekibi
Admin: