intranet-drupal-temalarına-css-ile-müdahale-etme

                                  DRUPAL TEMASINA CSS İLE MÜDAHALE

    Drupal ile oluşturduğumuz sitelerde değişikliği içerik yönetimi ile yaparız. İçerik ile yapamadığımız değişiklikleri ise css ya da php template dosyaları ile yaparız. Bu dosyalar kullandığımız temanın dizininde bulunur.

    Drupal sitemize css ile müdahale etmek için css dosyalarının “write” izni olması gerekir. Üzerinde çalıştığımız temanın klasörüne yazma izni veririz. Bu izinle temanın dosyalarında istediğimiz değişiklikeri yapabiliriz.    

    Bu izni drupal kurulumunda olduğu gibi konsol ekranında veririz. İznı vermemiz için root kullanıcısı olmak gerekir. Bunun için konsol ekranında komut satırına “su” yazarız. Yazdıktan sonra çıkan parola bölümüne ise parolamızı yazarız.  Sonra “chmod” komutu ile izni veririz. Biz kurulum aşamasında drupale “k9ticaripaket.com” adını verdiğimiz için bu ismi kullandık. Örneğin;

Eğer bartik temasında çalışıyorsak aşağıdaki komutu veririz.
chmod chmod a+w /var/www/html/k9ticaripaket.com/themes/bartik

Eğer marinelli temasında çalışıyorsak aşağıdaki komutu veririz.
chmod a+w /var/www/html/k9ticaripaket.com/sites/all/themes/marinelli/css       

 

Bartik Temasında Değişiklik Yapma

Marinelli Temasında Değişiklikler Yapma

1)Bartik Temasında Değişiklikler Yapma

     Css değişikliklerimizi yapmak için, kurduğumuz drupal dosyasının içindeki themes/bartik/css dizinine girilir. Bu dizinde css dosyalarını görebiliriz. Bu işlemi konsolda aşağıdaki komutla yaparız. Biz drupali kurarken "drupal-7.2" adını verdiğimiz için bu dizini yazdık. Drupali kurduğumuz yerde themes/bartik/css dizininden erişebiliriz.

   cd /var/www/html/drupal-7.2/themes/bartik/css

     Bu yolla drupalin kurulumu esnasında hazir gelen bartik temasını buradan değiştiririz. Bu yoldan sonra bu dizinin içindeki herhangi css dosyasını açarak css kodlarına müdahaleye başlarız.  Örneğin,  bu dizinin içindeki style.css dosyasına vi editorü ile girebiliriz. Vi editörü kullanımı için “vi final” yazısını okuyabilirsiniz.

       Komut satırına “vi style.css” yazılarak style.css dosyasına girilir. Dosyamız açıldığında esc modda açılır. Klavyeden “insert” tuşuna basılarak insert moda geçebiliriz. İnsert moda geçtikten sonra  style.css dosyasında istediğimiz değişiklikleri yapabiliriz.

    

                                                                  Kullanıcı Girişi Kontrolü

            Kullanıcı girişi kontrolü, kullanıcının hesabına girip çıktığı ve hesabında değişiklikler yaptığı yerdir.   Müdahale yapılmadan önceki drupal görüntüsü aşağıdaki şekildedir. Görüldüğü gibi kullanıcı hesap girişi ve çıkış butonları ekranın sağ tarafında bulunuyor. style.css dosyasında aşağıdaki kodu bulup değiştiririz.


#secondary-menu-links {
    float: right;
    font-size: 0.929em;
    margin: 10px 10px 0;
}

    css kodunu

secondary-menu-links {
    float: left;
    font-size: 10.929em;
    margin: 10px 10px 0;
}

şeklinde değiştirirsek aşağıdaki şekilde kırmızı renkle gösterilen yer, bulunduğu yerin soluna yaslanır ve yazının fontu da değişir. 

    

                                                                           Toolbar Kontrolü      

       Sayfamızın en üst kısmında bulunan toolbarın görünümünde gerekli değişiklikleri yapmak için drupal-7.2/modules/toolbar  dizinindeki "toolbar.css" dosyasini açarız. Burada toolbar id'li cssi degiştiririz.  Müdahalelerimizi yapmadan önce toolbar görünümü aşağıdaki şekilde idi.  


#toolbar {
   background: none repeat scroll 0 0 #9999ff ;   
           // arkaplan rengi özellikleri
   box-shadow: 0 3px 20px blue;                        // toolbarın altındaki geçiş rengi özelliklerini belirtir
   color: red;
   font: small "Lucida Grande",Verdana,sans-serif;
     // toolbardaki yazıların özellikleri
   left: 0;                                                                          // toolbarın solundaki boşluk miktarı
   margin: 0 9px;
   padding: 0 20px; 
                      // toolbarın iki satırı arasındaki boşluk
   position: fixed;
   right: 0;         
   top: 0;
   z-index: 600;
}

olan css kodunu aşağıdaki şekilde değiştirebiliriz.

#toolbar {
    background: none repeat scroll 0 0 #9999FF;
    box-shadow: 0 3px 20px #000000;
    color: grey;
    font: small "Lucida Grande",Verdana,sans-serif;
    left: 0;
    margin: 0 20px;
    padding: 0 40px;
    position: fixed;
    right: 10px;
    top: 5px;
    z-index: 600;
}

       yukarıdaki css kodları ile toolbarımızı aşağıdaki görünüme çeviririz. Margin özelliği ile toolbarın sayfa kenarları ile arasındaki boşluğu artırdık, padding ile toolbar içeriye doğru geçer. Ayrıca position özelliğini fixed olarak ayarlamamız toolbarın ekranda sabit olarak görünmesini sağlar. Yani biz kaydırma çubuğu ile aşağıya insek de toolbar, ekranın üst kısmında hep gözükür.        

Toolbardaki yazı büyüklüklerini, arkaplan rengini ve yazı şeklini toolbar a id'li css'ten aşağıdaki şekilde ayarlayabiliriz.

#toolbar a {
    color: fff;
    font-size: .846em;
    text-decoration: underline;
}

olan css'i aşağıdaki gibi değiştiririz.
#toolbar a {
    color: yellow;
    font-size: 1.246em;
    text-decoration: underline;
}

    Bu şekilde toolbardaki yazıların büyüklüğünü ve rengini değiştirmiş oluruz.    

         yine bu css dosyasında #toolbar-home a span id'li css'de iki toolbar arası boşlukları ayarlayabiliriz. Burada height özelliğinden toolbarın ilk kısmını uzatarak boşluğu artırabiliriz.      

#toolbar-home a span {
    background: url("toolbar.png") no-repeat scroll 0 -45px transparent;
    display: block;
    height: 14px;
   margin: 3px 0;
    text-indent: -9999px;
   vertical-align: text-bottom;
   width: 11px;
}

olan css dosyasını aşağıdaki gibi değiştirebiliriz.
#toolbar-home a span {
    background: url("toolbar.png") no-repeat scroll 0 -45px transparent;
    display: block;
    height: 64px;
    margin: 3px 0;
    text-indent: -9999px;
    vertical-align: text-bottom;
    width: 11px;
}

     Yapacağımız işlemler sonrası toolbar'da aşağıdaki şekildeki gibi bir görünüm elde ederiz.

     

                                              Bartik Temasında Renk Değişimi  

    Bir başka css dosyamız colors.css dosyasıdır. Bu dosyayı themes/bartik/css dizininde bulabiliriz. Bu dosyada drupal elemanlarımızın rengini değiştirebileceğimiz css'ler yer alır.


   
      Örneğin, sayfamızın solunda bulunan sidebar-first bloğunun rengini .sidebar .block classlarının bulunduğu yerde değiştirebiliriz. Bu şekilde bloğun arkaplan ve kenar renklerini buradan değiştiririz.

   .sidebar .block {
    background-color: #ffcc33;
    border-color: #000000;
}

olan css kodunu aşağıdaki gibi değiştiririz.

      .sidebar .block {
    background-color: lightBlue;
    border-color: black;
}

    Bir başka şekilde sayfamızın tabanında yer alan footer bölümünün ayarlarını da aşağıdaki şekilde değiştirebiliriz. Burada  #1B086D kodu koyu mavi renginin kodunu belirler. Bu kodun yerine istediğimiz rengi yazarak sitemizin footer bölümünü (taban bölgesi) değiştirebiliriz.

#page-wrapper, #footer-wrapper {
   background: none repeat scroll 0 0 #1B086D;
}

    ya da sitemizin üst kısmında header alanındaki yazıların(site ismi ve slogan) rengini değiştirebiliriz. Burada site ismi ve sloganını kırmızı olarak değiştirdik. Bunu da;
.region-header, .region-header a, .region-header li a.active, #name-and-slogan, #name-and-slogan a, #secondary-menu-links li a {
   color:red;
}       
                                     

css'inden ayarlayabiliriz.    

      Tüm bu işlemler sonucunda sitemizde aşağıdaki gibi bir görünüm elde ederiz.

 

       2) Marinelli Temasında Değişiklikler Yapma 

              Bartik  temasının yanı sıra ilgileneceğimiz bir diğer tema da Marinelli temasıdır.
Marinelli temasında değişiklik yapmak için, kurduğumuz sunucunun içindeki sites/all/themes/marinelli/css dizinin içindeki css dosyalarında gerekli ayarlamalar yapılır.  


   Banner Bölümünün Boyutlarının Değiştirilmesi  

      Aşağıda gördüğümüz banner resminin altında bulunan açıklama bölümünün boyut ayarlarını   sites/all/themes/marinelli/css dizinin içindeki slideshow.css dosyasında yapabiliriz.

Bu dosyada aşağıdaki kodda değişiklik yaparak banner açıklamasının boyutlandırılmasını yapabiliriz.

.rgba #header-image-text {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
}

olan kodu aşağıdaki gibi değiştirirsek

.rgba #header-image-text {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    width: 400px;
    height: 250px;
}

bu şekilde aşağıdaki görünümü elde etmiş oluruz. "width" özelliği ile bölümün genişliğini "height" özelliği ile de yüksekliği ayarlayabiliriz.     

           

                                          Banner Açıklamalarında Değişiklik Yapma

      Banner resimlerinin altında, resimleri açıklayan cümleler vardır. Bu cümlelerin ayarlamaları sites/all/themes/marinelli/css dizinindeki slideshow.css dosyasından yapılır. Bu css dosyasını açarız ve içindeki css kodları ile banneraçıklamalarını değiştiririz. Bunun için açtığımız dosyada değiştirmek istediğimiz css'i arayıp bulmamız gerekir.

#header-image-text-data {
    margin-right: 70px;
    padding: 15px 20px;
}

css kodunu aşağıdaki şekilde değiştirirsek banner açıklamalarının kenarlara olan uzaklığını küçültmüş oluruz.

#header-image-text-data {
    margin-right: 70px;
     padding: 5px 10px;
}

Aşağıda gördüğümüz gibi “Title for image” yazısı ile açıklama bölümünün arasında kalan boşluk azalmış oldu.

                                                         

                           Banner Açıklamalarının Yazı Fontunu Değiştirme

   Banner açıklamalarının font büyüklüğünü değiştirmek için yine slideshow.css dosyasını açarız. Bu dosyada aşağıdaki kodumuzu arayıp bulduktan sonra gerekli değişiklikleri yaparız.

#header-image-title {
    font-size: 1.6em;
    font-weight: bold;
}

burada da font size özelliğini 1.6em'den 3.6em'ye çıkarırsak aşağıdaki görünümü sağlamış oluruz.

          

     Banner açıklamasındaki font renklerini ise aşağıdaki şekilde değiştirebiliriz. Bunun için slideshow.css dosyasında aşağıdaki kodları buluruz. Değiştirme işleminden önceki görünüm yukarıdaki gibidir.
 
#header-image-title, #header-image-title a {
    color: #898989;
}
#header-image-description a {
    color: #898989;
}

olan kodları aşağıdaki gibi değiştiririz.

#header-image-title, #header-image-title a {
    color: red;
}
#header-image-description a {
    color: red;
}

    Css kodlarındaki color özelliklerini red olarak belirlersek banner açıklama rengini aşağıdaki resimde gördüğümüz gibi kırmızı olarak belirlemiş oluruz.

                                       

                                       Banner Açıklama Yazısının Arkaplanına Müdahale Etme


    Banner açıklama kısmının arkaplan müdahalesini ise sites/all/themes/marinelli/css/css3 dizininde bulunan "ccs3_graphics.css" dosyasından yaparız.  ccs3_graphics.css dosyasını açarız. Sonra aşağıdaki kodu arayıp bulduktan sonra değiştirmeye başlarız. 

.rgba #header-image-text {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
}


kodunu


.rgba #header-image-text {
    background: none repeat scroll 0 0 blue;
}


şeklinde değiştirirsek aşağıdaki görünümü elde ederiz. Bu yolla banner açıklamalarının arkaplan rengini siyahtan maviye çevirmiş oluruz.

    

                                                       İçerik Adının Kaldırılması

       Sayfamızda içerikte de çeşitli değişiklikler yapabiliriz. Örneğin, aşağıda resimde gördüğümüz Ana Sayfa yazısını kaldırmak için /var/www/html/sites/all/themes/marinelli/templates dizinindeki  node—teaser.tpl.php adlı dosyaya gideriz. O dosyada,


<h2 class="teaser-title">
  <?php print l($title, 'node/'.$nid, array('html'=>TRUE)); ?>

php komutlarını aşağıdaki gibi yorum satırına alınarak pasif edilir.  Bu şekilde ana sayfanın yazısının içinde bulunduğu bölge kaldırılır. Komutları yorum satırına alma işlemi aşağıdaki gibi değiştirilir. Kodların başına ve sonuna aşağıdaki karakterler yazılır. Bu şekilde sitemizin giriş sayfasında ki linki kaldırmış oluruz.

 <?php /*  <h2 class="teaser-title">
                  <?php print l($title, 'node/'.$nid, array('html'=>TRUE)); ?>  */?>

    Yaptığımız bu işlem, sitemizde ilk sayfada bulunan “Ana Sayfa” linkini kaldırmaya yarar.  Site içinde bu linki tıkladığımız zaman sayfaya ya da makaleye gideriz. Tıkladıktan sonra ki görünüm aşağıdaki şekildedir.

    Sayfa ya da makale içindeki başlık ismini kaldırmak için  sites/all/themes/marinelli/templates dizinindeki  “page.tpl.php” dosyasını açarız. Bu dosyada;

<?php if ($title): ?>
            <h1 id="page-title"><?php print $title; ?></h1>
          <?php endif; ?>

olan css kodlarını, aşağıda olduğu gibi yorum satırına alarak pasif hale getiririz.bu şekilde başlığı kaldırımış oluruz. Bu şekilde Ana Sayfa yazısını kaldırmış oluruz.

<?php  /* <?php if ($title): ?>
               <h1 id="page-title"><?php print $title; ?></h1>
               <?php endif; ?>  */ ?>

    

                                                   Bölge Ayraç Çizgisinin Kaldırılması

       Aşağıdaki şekilde gördüğümüz gibi iki html div bölgesinin ayrımı kesikli çizgi ile belirtilmiş. Bu çizgiyi sites/all/themes/marinelli/css dizinindeki node.css dosyasında bulunan .teaser-container classından kaldırabiliriz. 

 

.teaser-container {
    border-bottom: 1px dashed #CCCCCC;
}

olan css kodunda dashed(kesikli çizgi) sözcüğünü none olarak değiştiririz.


teaser-container {
    border-bottom: 1px none #CCCCCC;
}

şeklinde değiştirirsek aşağıdaki görünümü elde etmiş oluruz.

 

     

                                                      Resim Ebatlarını Değiştirme  

Sayfamızda banner kısmında çıkan resimlerin ebatlarını değiştirme işini sites/all/themes/marinelli/css dizinindeki "slideshow.css" dosyasında yaparız. Bu dosyayı açtıktan sonra img.slide adlı css'i arayıp bulduktan sonra değişiklik işine başlayabiliriz.

   

img.slide{
        width: 100%;
        height: 340px; /* image image height */
}

kodundaki width ve height özelliklerine istediğimiz boyutu verebiliriz. Height özelliğine 200px width özelliğine ise 640px verirsek aşağıdaki görünümü elde etmiş oluruz.  

img.slide{
        width: 640px;
        height: 200px; /* image image height */
}

  

         Yukarıda gördüğümüz gibi yaptığımız bu işlem sadece resmin boyutlarını değiştirir. Mavi renkte gördüğümüz resmin arkaplanında değişiklik yapmaz. Bunun için “Resmin Arkaplan Boyutunu Değiştirme” bölümüne bakmamız gerekir.

                     

                                                  Resmin Arkaplan Boyutunu Değiştirme 
Banner resimlerinin arkasında kalan bölge ayarlarını değiştirmek için sites/all/themes/marinelli/css dizinindeki "slideshow.css" dosyasına gideriz. Bu dosyada aşağıdaki kodu buluruz. 


#header-images {
    display: block;
    float: left;
    height: 340px;    /* burdaki 340 sayısını sitediğimiz değerle değiştiririz. */
    position: relative;
    width: 100%;
    z-index: 2;
}

  css kodundaki height özelliğini istediğimiz gibi değiştirebiliriz. Bunun sonucunda aşağıdaki gibi resmin arkaplanını da istediğimiz gibi değiştiririz.

         
    

                                                                  Site Adı ve Slogan Ayarları
    
        Sitemizin üst kısmında bulunan site adı ve slogan bölümünü için gerekli ayarlamaları top id'li css kodu yapar.  Top id'li css kodunu sites/all/themes/marinelli/css dizinindeki “layout.css” dosyasında buluruz.


    #top {
    float: left;
    height: 140px;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}
    
  yukarıdaki kodu aşağıdaki şekilde değiştiririz.

#top {
    float: left;
    height: 80px;
    margin-bottom: 10px;
    position: relative;
    width: 75%;
}
    
     
Bu yolla site adı – sloganı ve bannerlar arası boşluk miktarını 140px'den 80px'e indirimiş olduk.  Ayrıca site adı ve sloganı bölümünü de ekranın uzunluğunun yüzde 75'ine indirimiş olduk.

     Ayrıca “links.css” dosyasından  aşağıdaki css kodlarını bulup değiştirebiliriz.

.outsidecontent a, .outsidecontent li a.active, #header-images a, #navigation-secondary a {
    color: white;
    text-decoration: none;
}

  css kodunu ise aşağıdaki gibi değiştiririz.

.outsidecontent a, .outsidecontent li a.active, #header-images a, #navigation-secondary a {
    color: red;
    text-decoration: underlined;
}

     Burada da site adı ve sloganının rengini kırmızı olarak, fontuda altı çizgili olarak belirledik.
Tüm bu müdahalelerden sonra site görünümümüz şekildeki gibi değişir.


 

Bu işlemden sonra site ve slogan adlarının font büyüklüklerini de değiştirebiliriz. Site adı sites/all/themes/marinelli/css dizinindeki “layout.css” dosyasındaki #site title css'inden ayarlanır.

#site-title {
    font-size: 3em;
    line-height: 0.8em;
}

font-size özelliğinden site adının fontunu istediğimiz gibi değiştiririz. Site sloganının ayarlarını ise yine layout.css dosyasında bulunan #site-slogan css'inden ayarlarız.

  #site-slogan {
    font-size: 2em;
    text-indent: 0.5em;
}
       olan css ile de sloganın fontunu değiştiririz.  Bu işlemin sonunda ise aşağıdaki görünümü elde ederiz.

 

          
                            

                                                                 Tablo Kenarlarlarını Silme

 

     Her ne kadar tablo kenar kalınlıklarını 0 olarak belirlesek de drupal sitesinde oluşturduğumuz tabloların üst kenarları aşağıda olduğu gibi gözükür. Bunu modules/system dizininde bulunan system.theme.css adlı dosyada bulunan table seçicisi ile değiştirebiliriz.

table {
  border-collapse: collapse;
}

    olan koddaki border-collapse özelliğini “seperate” olarak değiştiririz.

table {
  border-collapse: seperate;
}


 

Şekilde görüldüğü gibi bu özellikle, içerikte oluşturulan tablonun üst kenarını kaldırmış olduk.

                                             Sayfaya Buton Koyma ve Özelliklerini Değiştirme

      Sayfaya buton ekleyip özelliklerini değiştirme işi, drupal içeriğinde CK editör yardımıyla yapılır. Bunun için ilk önce içerikteki sayfaya bir buton ekleriz.

   Daha sonra CK editörümüzde “Kaynak” tuşuna basarak html kod sayfasını açarız. Html sayfasında oluşan

   <input name="Buton 3"  type="button" value="Buton" />  

yazısının içine butonun style özelliklerini aşağıdaki gibi yazarız.

    <input name="Buton 3" style=" background-color:#fed; color:#050; box-shadow: 3px 3px 4px black;" type="button" value="Buton" />

   Butonumuzu bu şekilde değiştirirsek, butonumuzun arkaplan rengini,  yazı rengini belirtir ve butonumuza bir gölgelendirme yaparız.

                                                              

                                              Tab Kontrolü Ayarları
     Banner kısmının üstüne bulunan, sayfaların içeriği arası geçiş yapmaya yarayan tabların özellikleri  sites/themes/marinelli/css/ dizininideki primary-links.css dosyasında bulunur. Müdahaleden önce tema aşağıdaki gibidir. Aşağıda gördüğümüz tablar içerikten bağımsızdır. Bu yüzden tabları 2 aşamada küçültmemiz gerekir.

   İlk önce tabları yukarı çekmemiz gerekir. Bunu için;
 
#navigation-primary > ul > li > h2, #navigation-primary > ul > li > a {
    font-size: 1em;
    line-height: 40px;
}

olan css kodunu aşağıdaki şekilde değiştiririz. Bu şekilde banner üstünde bulunan tabları yukarıya çekmiş olduk.

#navigation-primary > ul > li > h2, #navigation-primary > ul > li > a {
    font-size: 1em;
    line-height: 20px;
}

Daha sonra da

#navigation-primary {
    float: left;
    height: 40px;
    line-height: 40px;
    width: 100%;
}
olan css kodunu da aşağıdaki gibi değiştirirsek içerik ile tablar arasındaki mesafeyi azaltmış oluruz.

#navigation-primary {
    float: left;
    height: 20px;
    line-height: 40px;
    width: 100%;
}

                                   

           

                                          Sayfa Boşluklarını Küçültme
       İçerikte oluşturduğumuz sayfaların kenarlarında oluşan boşlukların küçültmesi ya da büyültmesi “grid_1000.css” adlı css dosyasında bulunur. Değişikliği yapmadan önce sitemizin görünümü aşağıdaki şekildedir.

  

Bunun için sites/all/themes/marinelli/css/grid dizinindeki “grid_1000” adlı dosyayı açarız. Açtıktan sonra aşağıdaki kodları bulup değiştirirz.

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline;
    float: left;
     margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

olan css kodunda margin-bottom: -60px; özelliğini aşağıdaki gibi eklersek içeriğin alt tabanını 60px kadar yukarı çekmiş oluruz, böylece boşluğu kapatırız.

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display: inline;
    float: left;
     margin-left: 10px;
    margin-right: 10px;
    position: relative;
    margin-bottom: -30px;
}
Bu şekilde  aşağıdaki görünümü elde etmiş oluruz.

                               İÇERİK ARKAPLAN RENGİNİ DEĞİŞTİRME

      Drupal içeriğinin arkaplan rengini css yardımı ile değiştirebiliriz. Site ilk açıldığında arkaplan rengi aşağıdaki gibi beyaz olarak gelir.

 Arkaplan rengini, drupal dosyasının içinde sites/all/themes/marinelli/css/css3 dizinindeki css3_graphics.css dosyasından değiştiririz. Bu css dosyasında aşağıdaki kodu arayıp bulduktan sonra,

.cssgradients #contentWrapper {
     background: -moz-linear-gradient(center top , #EEEEEE, #FFFFFF 5%) repeat scroll 0 0 transparent;
}

    bu kod ile içerik arkaplan rengini istediğimiz gibi değiştiririz. Yukarıdaki fonksiyonda “center tab”  özelliği rengin yukarıdan aşağı doğru değişeceğini beliritir. İlk renk kodu hangi renkten başlayacağını, ikinci renk kodu ise hangi renkle biteceğini gösterir. Son parametrede % ile gösterilen sayı ilk rengin sayfanın ne kadarını tutacağını belirtir. Örnegin;

.cssgradients #contentWrapper {
    background: -moz-linear-gradient(center top , yellow, lightBlue 35%) repeat scroll 0 0 transparent;
}

    Bu şekilde ilk rengi sarı ikinci rengi açık mavi olarak belirledik. Bu şekilde sarı rengi, sayfanın %35'ini kaplamış oldu. Yaptığımız değişiklerle aşağıdaki görünümü elde etmiş oluruz.

 

ÖNEMLİ NOT:
    Temamıza css ile müdahale yapmamız için öncelikle cache ayarlarını yapmamız gerekir. 3 farklı cache ayarları yapmamız gerekir. Bunlar; tarayıcımızda, drupalde ve sunucumuzda(apache) yapılan cache ayarlarıdır.

   a) Tarayıcı İçin Cache Ayarları


        Firefox için cache ayarları, “Araçlar” menüsünde “Yakın Geçmişi Temizle”ye tıklanarak yapılır. Tıklandıktan sonra karşımıza çıkan pencerede “Şimdi Temizle” butonuna basılarak tarayacının cacheleri temizlenmiş olur.

 

    b) Drupal İçerik Cache Ayarları

Drupal için cache ayarları “Yapılandırma” bölümünden yapılır. Performans'a basıldıktan sonra karşımıza çıkan sayfada “Clear all caches” butonuna tıklarız. Tıkladıktan sonra yaptıklarımızı kaydederiz. Böylece drupal'in cachelerini de temizlemiş oluruz.

      c) Sunucu Cache Ayarları

      Yapmamız gereken 3. cache ayarı ise apache cache'lerini temızlenmesidir. Bunun için konsolumuzun komut satırına “etc/init.d/httpd restart” komutunu gireriz. Bu şekilde apache sunucumuzun cachelerini temizlemiş oluruz.