Skip to Content
Anasayfa » Forum » Drupal Destek » Temalar

Yeni Blok Alanı Oluşturma

Deat, Cmt, 17/07/2010 - 01:00 tarihinde.

Merhaba arkadaşlar sitemde yeni bir tema yükledim.Tema çok hoşuma gitti yanlız.Blok sıkıntım var.Sadece ikitane blok alanı var. Sol sütün ve footer ben ise Sol, Sağ, Footer , Header alanlarını eklemek istiyorum.Ders bölümünde yeni blok alanları oluşturma konusu okudum ancak beceremedim.Bloklar başka yerlerde veya iç içe geçmiş olarak çıktı.Css bilgim çok zayıf. O yüzden beceremiyorum.Sizlerin yardımlarınızı bekliyorum.
Kullandığım Tema bu durum benim için çok önemli arkadaşlar bir saattir uğraşıyorum beceremedim.Yetenek yok işte =).

‹ Sky temasına menü blok u CCK ile eklediğim alanlar internet explorer da gözükmüyor ›
Ajan, Cmt, 17/07/2010 - 13:48 tarihinde.

İşine ne kadar yarar bilmiyorum ama en basitinden örnek veriyorum.

Blok alanı eklemek istiyorsan her zaman en üstten başla. Temanda ki sidebar-left alanını bul ve üstüne şunu ekle.


<?php if ($yeni-alan-sol): ?>
  <div id="yeni-alan" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-sol?>
  </div>
<?php endif; ?>


Daha sonra CSS dosyana gir şunları ekle.


#yeni-alan-sol {
float left;
width: 300px;
height: auto
}

daha sonra orta blok ekleyelim. Hemen eklediğin yeni-alan-sol bloğunun altına şunları ekle.


<?php if ($yeni-alan-orta): ?>
  <div id="yeni-orta" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-orta?>
  </div>
<?php endif; ?>

#yeni-alan-orta{
float left;
width: 220px;
height: auto
}

şimdi birde sağ blok atayalım.


<?php if ($yeni-alan-sag): ?>
  <div id="yeni-orta" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-sag?>
  </div>
<?php endif; ?>


#yeni-alan-sag{
float right;
width: 300px;
height: auto
}


Şimdi toparlayalım bakalım ne yaptık. varolan sidebar-left üstüne


<?php if ($yeni-alan-sol): ?>
  <div id="yeni-alan" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-sol?>
  </div>
<?php endif; ?>


<?php if ($yeni-alan-orta): ?>
  <div id="yeni-orta" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-orta?>
  </div>
<?php endif; ?>


<?php if ($yeni-alan-sag): ?>
  <div id="yeni-orta" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-sag?>
  </div>
<?php endif; ?>


diye ekledik. Burada ki class dizelerini ben boş bıraktım temaya uygun şekilde bir class atayabilirsin. Ama sidebar-left teki class neyse ona bakarak yap.

Onun dışında temada mutlaka clearfix vardır. en son eklediğimiz yen-alan-sag hemen altına clearfix ekle artık orada ne olarak verilmişse farklı isimde olabilir. Yine son halimiz şöyle oluyor.



<?php if ($yeni-alan-sol): ?>
  <div id="yeni-alan" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-sol?>
  </div>
<?php endif; ?>


<?php if ($yeni-alan-orta): ?>
  <div id="yeni-orta" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-orta?>
  </div>
<?php endif; ?>


<?php if ($yeni-alan-sag): ?>
  <div id="yeni-orta" class="istersen-bir-class-atayabilirsin-ben-atamiyorum">
    <?php print $yeni-alan-sag?>
  </div>
<?php endif; ?>

<div class="clearfix" </div>

css kodlarımız ise aşağıda ki gibi.


#yeni-alan-sol {
float: left;
width: 300px;
height: auto
}


#yeni-alan-orta{
float: left;
width: 220px;
height: auto
}


#yeni-alan-sag {
float right;
width: 300px;
height: auto
}



Bunlar örnek css kodlarıdır, bu kodlarla bloklar yan yana yapışmışta olabilir bunlarıda margin padding ayarı ile yapacaksın.

mesela yeni-alan-orta sola mı dayalı.

margin-right: 15px; yap 15 px uzaklaşsın vs.


Şimdi üst tarafta üç blok oldu. Tabi blok isimlerini info dosyasına yazıyorsun ardından admin e gir temalara gir kaydet çık. 3 blok görüntüsü oluşacaktır. sol orta sağ boyutları istediğin gibi ayarlayabilirsin.


Selametle kal, kolay gelsin.

Deat, Cmt, 17/07/2010 - 15:25 tarihinde.

Kardeşim teşekür ederim emek verip yazmışssın.Ama malasef yine olmadı.Site kayma yaptı bu seferde.Yine blok alanları istediğim gibi çıkmadı.Bu tema olayı yüzünden sitem 2 gündür kapalı.

Ajan, Sal, 03/08/2010 - 15:47 tarihinde.

Estafirullah ne demek ne demek. Fakat elimden başka birşey gelmiyor. Olayın mantığı ve CSS yapısı bu şekilde...

Birazdan çıkıyorum ve pazartesi gününe kadar yokum. Sen aldığın hatalar ile ilgili olarak bir kaç resim ekle ve buraya koy, diğer arkadaşlar sana yardımcı olacaklardır.

Deat, Cmt, 17/07/2010 - 18:09 tarihinde.

Tekrar teşekür ederim.Biraz daha kurcaladım ama yine olmadı.Blok alanları başka yerlerde çıkıyor.Örnek resim ;

Gördüğünüz gibi arkadaşlar sırf bir kaç blok alanı yüzünden sitemm 2 gündür kapalı.bu temayıda çok istiyorum tam benim stieme göre.Ne yapacağım bilmiyorum sizlerden yardım bekliyorum.Eğer Drupal temalarından iyi anlıyan bir arkadaşımız varsa temayı indirip kendisi blok eklerse çok minnettar kalırım.
Kullandığım tema. Sadece sağ ve saol header birde üstüde 3 tane blok alanı olsa benim için yeter.Tekrar teşekür ederim.

Ajan, Pzt, 19/07/2010 - 17:03 tarihinde.

Bir kaç örnek ekledim senin için. Bu bloklara bakarak olayın mantığını çözersin inşAllah. Fakat kısa zamanda CSS öğrenmelisin :)

tema.info dosyasına alanları eklemeyi unutma

Demo:

page.tpl.php: dosyasının tamamını aşağıda ki kodları ekleyerek değiştir.

<?php
// $Id: page.tpl.php,v 1.5 2009/12/12 22:28:50 chrisherberte Exp $
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

<head>
  <title><?php print $head_title ?></title>
  <meta name="author" content="Chris Herberte <a href="http://www.xweb.com.au"" title="http://www.xweb.com.au"">http://www.xweb.com.au"</a> />
  <?php print $head ?>
  <?php print $styles ?>
  <?php print $scripts ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>

<body>
  <div id="container" class="clear-block">

    <div id="header" class="clear-block">
      <div id="logo">
          <?php if ($logo) { ?><a href="<?php print $base_path ?>" title="Home"><img src="<?php print $logo ?>" alt="Home" /></a><?php } ?>
      </div>
      <div id="header-right">
        <div id="sitename">
          <?php if ($site_name) { ?><a href="<?php print $base_path ?>" title="Home"><?php print $site_name ?></a><?php } ?>
        </div>
        <div id="slogan">
          <?php if ($site_slogan) { ?><?php print $site_slogan ?><?php } ?>
        </div>
        <div id="primary">
          <?php if ($primary_links) { ?><?php print theme('links', $primary_links) ?><?php } ?>
        </div>
      </div>
    </div>
<?php if ($yenialan1): ?>
  <div id="yeni-alan-1">
    <?php print $yenialan1?>
  </div>
<?php endif; ?>



<?php if ($yenialan2): ?>
  <div id="yeni-alan-2">
    <?php print $yenialan2?>
  </div>
<?php endif; ?>


<?php if ($yenialan3): ?>
<div id="yeni-alan-3">
    <?php print $yenialan3?>
  </div>
<?php endif; ?>






<?php if ($yenialan4): ?>
  <div id="yeni-alan-4">
    <?php print $yenialan4?>
  </div>
<?php endif; ?>



<?php if ($yenialan5): ?>
  <div id="yeni-alan-5">
    <?php print $yenialan5?>
  </div>
<?php endif; ?>


<?php if ($yenialan6): ?>
<div id="yeni-alan-6">
    <?php print $yenialan6?>
  </div>
<?php endif; ?>




<?php if ($yenialan7): ?>
  <div id="yeni-alan-7">
    <?php print $yenialan7?>
  </div>
<?php endif; ?>



<?php if ($yenialan8): ?>
  <div id="yeni-alan-8">
    <?php print $yenialan8?>
  </div>
<?php endif; ?>


<?php if ($yenialan9): ?>
<div id="yeni-alan-9">
    <?php print $yenialan9?>
  </div>
<?php endif; ?>




    <div id="sidebar-container">
      <div id="sidebar">
        <?php if ($left) { ?><?php print $left ?><?php } ?>
        <?php if ($right) { ?><?php print $right ?><?php } ?>
      </div>
      <div id="sidebar-footer">
      </div>
    </div>

    <div id="content">
      <?php print $breadcrumb; ?>
      <?php if ($show_messages) { print $messages; } ?>
      <h2 class="title"><?php print $title ?></h2>
      <?php print $help ?>
      <?php print $tabs ?>
      <?php print $content; ?>
      <?php print $feed_icons ?>
    </div>

    <div class="clear-block">
    </div>

      <div id="footer">
        <?php print $footer ?>
        <?php if (isset($secondary_links)) { ?>
        <?php print theme('links', $secondary_links, array('class' =>'links', 'id' => 'seclink')) ?>
        <?php } ?>
        <span id="designby">
          <?php if ($site_name) { ?>&copy; <?php print date('Y') ." ". $site_name ?> : <?php } ?>Design by <a href="http://www.xweb.com.au">Chris Herberte</a>
        </span>
      </div>
  </div>
  <?php print $closure ?>

</body>
</html>

CSS dosyanın en alt kısmına şunları ekle:

#yeni-alan-1 {
float: left;
width: 200px;
height: auto
}


#yeni-alan-2{
float: left;
width: 250px;
height: auto;
margin-left: 30px;
}


#yeni-alan-3 {
float:right;
width: 300px;
height: auto
}


#yeni-alan-4 {
float: left;
width: 200px;
height: auto
}


#yeni-alan-5{
float: left;
width: 250px;
height: auto;
margin-left: 30px;
}


#yeni-alan-6 {
float:right;
width: 300px;
height: auto
}

#yeni-alan-7 {
float: left;
width: 200px;
height: auto
}


#yeni-alan-8{
float: left;
width: 250px;
height: auto;
margin-left: 30px;
}


#yeni-alan-9 {
float:right;
width: 300px;
height: auto
}

Selametle kolay gelsin.

Deat, Pzt, 19/07/2010 - 17:42 tarihinde.

AJAn kardeş çok teşekür ederim. Gerçekten beni çok büyük bir sorundan kurtardın. Yanlız senden çok ufak birşey daha rica edeceğim.

Burada üste bir kod var. Onu nasıl yok edebilirim ? Kodları tekrardan yükledim ama hala kaybolmadı. Birde bir adet sağ bloğa ir blok alanı ekliyebilirmiyiz. Tekrar teşekür ederim çok saol.

Ajan, Sal, 20/07/2010 - 09:34 tarihinde.

Sözünü ettiğin alan bende yazmıyor fakat dosyadan o linki tamamen kaldırdım ve sağ blok ekledim. Kolay gelsin.

<?php
// $Id: page.tpl.php,v 1.5 2009/12/12 22:28:50 chrisherberte Exp $
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

<head>
  <title><?php print $head_title ?></title>
  <?php print $head ?>
  <?php print $styles ?>
  <?php print $scripts ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>

<body>
  <div id="container" class="clear-block">

    <div id="header" class="clear-block">
      <div id="logo">
          <?php if ($logo) { ?><a href="<?php print $base_path ?>" title="Home"><img src="<?php print $logo ?>" alt="Home" /></a><?php } ?>
      </div>
      <div id="header-right">
        <div id="sitename">
          <?php if ($site_name) { ?><a href="<?php print $base_path ?>" title="Home"><?php print $site_name ?></a><?php } ?>
        </div>
        <div id="slogan">
          <?php if ($site_slogan) { ?><?php print $site_slogan ?><?php } ?>
        </div>
        <div id="primary">
          <?php if ($primary_links) { ?><?php print theme('links', $primary_links) ?><?php } ?>
        </div>
      </div>
    </div>
<?php if ($yenialan1): ?>
  <div id="yeni-alan-1">
    <?php print $yenialan1?>
  </div>
<?php endif; ?>



<?php if ($yenialan2): ?>
  <div id="yeni-alan-2">
    <?php print $yenialan2?>
  </div>
<?php endif; ?>


<?php if ($yenialan3): ?>
<div id="yeni-alan-3">
    <?php print $yenialan3?>
  </div>
<?php endif; ?>






<?php if ($yenialan4): ?>
  <div id="yeni-alan-4">
    <?php print $yenialan4?>
  </div>
<?php endif; ?>



<?php if ($yenialan5): ?>
  <div id="yeni-alan-5">
    <?php print $yenialan5?>
  </div>
<?php endif; ?>


<?php if ($yenialan6): ?>
<div id="yeni-alan-6">
    <?php print $yenialan6?>
  </div>
<?php endif; ?>




<?php if ($yenialan7): ?>
  <div id="yeni-alan-7">
    <?php print $yenialan7?>
  </div>
<?php endif; ?>



<?php if ($yenialan8): ?>
  <div id="yeni-alan-8">
    <?php print $yenialan8?>
  </div>
<?php endif; ?>


<?php if ($yenialan9): ?>
<div id="yeni-alan-9">
    <?php print $yenialan9?>
  </div>


<?php endif; ?>
     <?php if ($right): ?>
<div id="sidebar-right">
    <?php print $right?>
  </div>
<?php endif; ?>



    <div id="sidebar-container">
      <div id="sidebar">
        <?php if ($left) { ?><?php print $left ?><?php } ?>
      </div>
      <div id="sidebar-footer">
      </div>
    </div>

    <div id="content">
      <?php print $breadcrumb; ?>
      <?php if ($show_messages) { print $messages; } ?>
      <h2 class="title"><?php print $title ?></h2>
      <?php print $help ?>
      <?php print $tabs ?>
      <?php print $content; ?>
      <?php print $feed_icons ?>
    </div>

    <div class="clear-block">
    </div>

      <div id="footer">
        <?php print $footer ?>
        <?php if (isset($secondary_links)) { ?>
        <?php print theme('links', $secondary_links, array('class' =>'links', 'id' => 'seclink')) ?>
        <?php } ?>
        <span id="designby">
          <?php if ($site_name) { ?>&copy; <?php print date('Y') ." ". $site_name ?> : <?php } ?>Design by <a href="http://www.xweb.com.au">Chris Herberte</a>
        </span>
      </div>
  </div>
  <?php print $closure ?>

</body>
</html>

#sidebar-right {
float:right;
width: 200px;
height: auto
}

Deat, Çrş, 21/07/2010 - 19:12 tarihinde.

Ajan çok teşekür ederim. Çok hayır duamı aldın valla : ) Allah seni diğer cms sistemlerin şerrinden korusun. Drupal kalkanın olsun felan. xD Tekrar çok teşekür ederim.

Ajan, Per, 22/07/2010 - 09:50 tarihinde.

Rica ederim ne demek o dualara inan hepimizin ihtiyacı var. Allah razı olsun.