1 sayfadan 1. sayfa

CSS nasıl düzenlenir ?

İletiTarih: 12.02.2008, 22:19
trx
Bu CSS dosyası shakirashiver sitesinden örnek olarak alınıp açıklanmıştır.

CSS nasıl düzenlenir ?


  1. İ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%;*/
  2. İ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;
  3. Ş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 :lol: ).

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

  4. 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); }
  5. Şimdide tablo yapımızı(renkleri ve gözükecek resimileri) ayarlıyalım

  6. 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}

  7. 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; }
  8. 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 :lol: )
      • 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 :D
        /* 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");

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


:arrow: http://staff.forumup.web.tr/viewtopic.p ... orum=staff



written by TRX