waffles temasının sutunlarını değiştirmek
zuzhulk, Pzt, 26/04/2010 - 22:15 tarihinde.
waffles temasında sidebar last olarak gecen sag taraftaki sidebar ın altına içerik kısmındaki yazılar girmekte. sidebarlast bloklarının bittigi yerde yazılar o tarafa dogru uzanmakta. bu temayı nasıl tam 3 sutunlu yapabilirim. sidebar last ı nasıl bagımsız yapabilirim. page.tpl.php kodları aşağıdaki gibi.
kaç gündür denememe uğraşmama rağmen kısıtlı css bilgimle beceremedim
<!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" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<!--[if IE 7]>
<link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie7-fixes.css" type="text/css">
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie6-fixes.css" type="text/css">
<![endif]-->
<?php print $scripts; ?>
</head>
<body class="<?php print $body_classes; ?>">
<div id="page" class="clearfix">
<div id="header">
<div id="header-wrapper" class="clearfix">
<?php if ($search_box): ?>
<div id="search-box">
<?php print $search_box; ?>
</div><!-- /search-box -->
<?php endif; ?>
<div id="header-first">
<?php if ($logo): ?>
<div id="logo">
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a>
</div>
<?php endif; ?>
<?php if ($site_name): ?>
<h1><a href="<?php print $base_path ?>" title="<?php print t('Home'); ?>"><?php print $site_name; ?></a></h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<span id="slogan"><?php print $site_slogan; ?></span>
<?php endif; ?>
</div><!-- /header-first -->
<div id="header-middle">
<?php if ($header_middle): ?>
<?php print $header_middle; ?>
<?php endif; ?>
</div><!-- /header-middle -->
<div id="header-last">
<?php if ($header_last): ?>
<?php print $header_last; ?>
<?php endif; ?>
</div><!-- /header-last -->
</div><!-- /header-wrapper -->
<div id="header-bottom" class="clearfix">
<?php if ($primary_links): ?>
<div id="primary-menu">
<?php print $primary_links_tree; ?>
</div><!-- /primary_menu -->
<?php endif; ?>
</div><!-- /header-bottom -->
</div><!-- /header -->
<div id="preface">
<?php if ($preface_first || $preface_middle || $preface_last || $mission): ?>
<div id="preface-wrapper" class="<?php print $prefaces; ?> clearfix">
<?php if ($mission): ?>
<div id="mission">
<?php print $mission; ?>
</div>
<?php endif; ?>
<?php if ($preface_first): ?>
<div id="preface-first" class="column">
<?php print $preface_first; ?>
</div><!-- /preface-first -->
<?php endif; ?>
<?php if ($preface_middle): ?>
<div id="preface-middle" class="column">
<?php print $preface_middle; ?>
</div><!-- /preface-middle -->
<?php endif; ?>
<?php if ($preface_last): ?>
<div id="preface-last" class="column">
<?php print $preface_last; ?>
</div><!-- /preface-last -->
<?php endif; ?>
</div><!-- /preface-wrapper -->
<?php endif; ?>
</div><!-- /preface -->
<div id="main">
<div id="main-wrapper" class="clearfix">
<?php if ($sidebar_first): ?>
<div id="sidebar-first">
<?php print $sidebar_first; ?>
</div><!-- /sidebar-first -->
<?php endif; ?>
<div id="content-wrapper">
<?php if ($help): ?>
<?php print $help; ?>
<?php endif; ?>
<?php if ($messages): ?>
<?php print $messages; ?>
<?php endif; ?>
<?php if ($breadcrumb): ?><div id="breadcrump_over">
<div id="breadcrump_image"></div>
<div id="breadcrumb">
<?php print $breadcrumb; ?></div>
</div><!-- /breadcrumb -->
<?php endif; ?>
<?php if ($content_top): ?>
<div id="content-top">
<?php print $content_top; ?>
</div><!-- /content-top -->
<?php endif; ?>
<div id="content">
<?php if ($tabs): ?>
<div id="content-tabs">
<?php print $tabs; ?>
</div>
<?php endif; ?>
<?php if (($sidebar_first) && ($sidebar_last)) : ?>
<?php if ($sidebar_last): ?>
<div id="sidebar-last">
<?php print $sidebar_last; ?>
</div><!-- /sidebar_last -->
<?php endif; ?>
<?php endif; ?>
<div id="content-inner">
<?php if ($title): ?>
<h1 class="title"><?php print $title; ?></h1>
<?php endif; ?>
<div id="content-content">
<?php print $content; ?>
</div>
</div><!-- /content-inner -->
</div><!-- /content -->
<?php if ($content_bottom): ?>
<div id="content-bottom">
<?php print $content_bottom; ?>
</div><!-- /content-bottom -->
<?php endif; ?>
</div><!-- /content-wrapper -->
<?php if ((!$sidebar_first) && ($sidebar_last)) : ?>
<?php if ($sidebar_last): ?>
<div id="sidebar-last">
<?php print $sidebar_last; ?>
</div><!-- /sidebar_last -->
<?php endif; ?>
<?php endif; ?>
<?php if ($postscript_first || $postscript_middle || $postscript_last): ?>
<div id="postscript-wrapper" class="<?php print $postscripts; ?> clearfix">
<?php if ($postscript_first): ?>
<div id="postscript-first" class="column">
<?php print $postscript_first; ?>
</div><!-- /postscript-first -->
<?php endif; ?>
<?php if ($postscript_middle): ?>
<div id="postscript-middle" class="column">
<?php print $postscript_middle; ?>
</div><!-- /postscript-middle -->
<?php endif; ?>
<?php if ($postscript_last): ?>
<div id="postscript-last" class="column">
<?php print $postscript_last; ?>
</div><!-- /postscript-last -->
<?php endif; ?>
</div><!-- /postscript-wrapper -->
<?php endif; ?>
<?php if ($footer_top || $footer || $footer_message): ?>
<div id="footer" class="clearfix">
<?php if ($footer_top): ?>
<?php print $footer_top; ?>
<?php endif; ?>
<?php if ($footer): ?>
<?php print $footer; ?>
<?php endif; ?>
<?php if ($footer_message): ?>
<?php print $footer_message; ?>
<?php endif; ?>
</div><!-- /footer -->
<?php endif; ?>
</div><!-- /main-wrapper -->
</div><!-- /main -->
</div><!-- /page -->
<?php print $closure; ?>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<!--[if IE 7]>
<link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie7-fixes.css" type="text/css">
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie6-fixes.css" type="text/css">
<![endif]-->
<?php print $scripts; ?>
</head>
<body class="<?php print $body_classes; ?>">
<div id="page" class="clearfix">
<div id="header">
<div id="header-wrapper" class="clearfix">
<?php if ($search_box): ?>
<div id="search-box">
<?php print $search_box; ?>
</div><!-- /search-box -->
<?php endif; ?>
<div id="header-first">
<?php if ($logo): ?>
<div id="logo">
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a>
</div>
<?php endif; ?>
<?php if ($site_name): ?>
<h1><a href="<?php print $base_path ?>" title="<?php print t('Home'); ?>"><?php print $site_name; ?></a></h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<span id="slogan"><?php print $site_slogan; ?></span>
<?php endif; ?>
</div><!-- /header-first -->
<div id="header-middle">
<?php if ($header_middle): ?>
<?php print $header_middle; ?>
<?php endif; ?>
</div><!-- /header-middle -->
<div id="header-last">
<?php if ($header_last): ?>
<?php print $header_last; ?>
<?php endif; ?>
</div><!-- /header-last -->
</div><!-- /header-wrapper -->
<div id="header-bottom" class="clearfix">
<?php if ($primary_links): ?>
<div id="primary-menu">
<?php print $primary_links_tree; ?>
</div><!-- /primary_menu -->
<?php endif; ?>
</div><!-- /header-bottom -->
</div><!-- /header -->
<div id="preface">
<?php if ($preface_first || $preface_middle || $preface_last || $mission): ?>
<div id="preface-wrapper" class="<?php print $prefaces; ?> clearfix">
<?php if ($mission): ?>
<div id="mission">
<?php print $mission; ?>
</div>
<?php endif; ?>
<?php if ($preface_first): ?>
<div id="preface-first" class="column">
<?php print $preface_first; ?>
</div><!-- /preface-first -->
<?php endif; ?>
<?php if ($preface_middle): ?>
<div id="preface-middle" class="column">
<?php print $preface_middle; ?>
</div><!-- /preface-middle -->
<?php endif; ?>
<?php if ($preface_last): ?>
<div id="preface-last" class="column">
<?php print $preface_last; ?>
</div><!-- /preface-last -->
<?php endif; ?>
</div><!-- /preface-wrapper -->
<?php endif; ?>
</div><!-- /preface -->
<div id="main">
<div id="main-wrapper" class="clearfix">
<?php if ($sidebar_first): ?>
<div id="sidebar-first">
<?php print $sidebar_first; ?>
</div><!-- /sidebar-first -->
<?php endif; ?>
<div id="content-wrapper">
<?php if ($help): ?>
<?php print $help; ?>
<?php endif; ?>
<?php if ($messages): ?>
<?php print $messages; ?>
<?php endif; ?>
<?php if ($breadcrumb): ?><div id="breadcrump_over">
<div id="breadcrump_image"></div>
<div id="breadcrumb">
<?php print $breadcrumb; ?></div>
</div><!-- /breadcrumb -->
<?php endif; ?>
<?php if ($content_top): ?>
<div id="content-top">
<?php print $content_top; ?>
</div><!-- /content-top -->
<?php endif; ?>
<div id="content">
<?php if ($tabs): ?>
<div id="content-tabs">
<?php print $tabs; ?>
</div>
<?php endif; ?>
<?php if (($sidebar_first) && ($sidebar_last)) : ?>
<?php if ($sidebar_last): ?>
<div id="sidebar-last">
<?php print $sidebar_last; ?>
</div><!-- /sidebar_last -->
<?php endif; ?>
<?php endif; ?>
<div id="content-inner">
<?php if ($title): ?>
<h1 class="title"><?php print $title; ?></h1>
<?php endif; ?>
<div id="content-content">
<?php print $content; ?>
</div>
</div><!-- /content-inner -->
</div><!-- /content -->
<?php if ($content_bottom): ?>
<div id="content-bottom">
<?php print $content_bottom; ?>
</div><!-- /content-bottom -->
<?php endif; ?>
</div><!-- /content-wrapper -->
<?php if ((!$sidebar_first) && ($sidebar_last)) : ?>
<?php if ($sidebar_last): ?>
<div id="sidebar-last">
<?php print $sidebar_last; ?>
</div><!-- /sidebar_last -->
<?php endif; ?>
<?php endif; ?>
<?php if ($postscript_first || $postscript_middle || $postscript_last): ?>
<div id="postscript-wrapper" class="<?php print $postscripts; ?> clearfix">
<?php if ($postscript_first): ?>
<div id="postscript-first" class="column">
<?php print $postscript_first; ?>
</div><!-- /postscript-first -->
<?php endif; ?>
<?php if ($postscript_middle): ?>
<div id="postscript-middle" class="column">
<?php print $postscript_middle; ?>
</div><!-- /postscript-middle -->
<?php endif; ?>
<?php if ($postscript_last): ?>
<div id="postscript-last" class="column">
<?php print $postscript_last; ?>
</div><!-- /postscript-last -->
<?php endif; ?>
</div><!-- /postscript-wrapper -->
<?php endif; ?>
<?php if ($footer_top || $footer || $footer_message): ?>
<div id="footer" class="clearfix">
<?php if ($footer_top): ?>
<?php print $footer_top; ?>
<?php endif; ?>
<?php if ($footer): ?>
<?php print $footer; ?>
<?php endif; ?>
<?php if ($footer_message): ?>
<?php print $footer_message; ?>
<?php endif; ?>
</div><!-- /footer -->
<?php endif; ?>
</div><!-- /main-wrapper -->
</div><!-- /main -->
</div><!-- /page -->
<?php print $closure; ?>
</body>
</html>
- Yeni yorum ekle
- 1189 kez okundu
#sidebar-last {
display:block;
}
şeklinde yaparsan olması lazım.
Cihan dediğin şekilde olmadı. bir de ilk resimdeki gibi şuanda sutunlar. mesela content e breadcrumb ekledigim zaman da sitebar last otomatik olarak aşağı kayıyor. sidebar last ı sag taraftaki şekildeki gibi nasıl bağımsız yapabilirim. öyle birşey söz konusu mu acaba ?
Cihan başka bir türlü yaptım galiba :)) bak yazayım böyle bi problem çıkar mı sence bir inceler misin.. ?
page.tpl.php de breadcrumb kodlarını kestim direkt sidebar-first ün üstüne yapıştırdım. böylece sağ sütunu kaydırmıyor. en üstte menü nün altında breadcrumb çıkıyor.
asıl probleme gelince de,
content-inner bölümüne aşagıda belirttigim gibi width: 600px değerini ekledim ve içerik kısmını sınırlandırdım. böylece sidebar-lastın altına yazılar gelmeden sınıra geldi mi alt satıra geçiyor. böyle bir çözüm problem yaratabilir mi başka bir durumlarda ?
/* CONTENT REGIONS */
/*******************/
#content-wrapper {
overflow: hidden;
}
#content-top {
margin: 0 0 30px;
overflow: hidden;
}
#content {
margin: 0 0 20px; /* default spacing between content regions */
min-width: 600px;
}
#content-inner {
width: 600px; <- bu değeri ekledim css ye ve content teki içerik kısmını 600px e sınırladım.
}
#content-bottom {
clear: both;
margin: 20px 0 0;
overflow: hidden;
}
çok genel söylüyorum:
1. right sidebar'ı content'in dışına alın
2. content'e width verin
3. content ve rightsidebar'a float:left özelliği verin
firebug kullanmakta fayda var. değişir kaydet reload demeden css değişikliklerini görebiliyorsunuz.
ben cevap yazarken siz çözmüşsünüz... :)
content ile content-inner 'ın width'leri 600px, bu değere margin değerleri dahil olmadığı için margin eklediğinizde sorun çıkabilir.
dediğiniz şekilde mi daha sağlıklı olur yoksa benim yaptığım şekilde mi. birde breadcrumb u en üst e aldıgım zaman sidebar-first ile diger iki kolonun üst boşlukları eş olmuyor. onları margin ile eşitlediğimde, bu sefer de breadcrumb un çıkmadıgı sayfalarda sidebar-first daha yukarda çıkıyor.. bunu nasıl dengeleyebilirim ?
tema bende kurulu değil. dediğim gibi firebug ile bakabilrisiniz sorunun hangi css'nin hangi satırından kaynaklandığına.
breadcrumb'ın bulunduğu alanı var olduğu ve olmadığı halde inceleyin, min-height, margin padding gibi yükseklik veren özellikleri... yokken yükseklik 0-sıfır olmalı kanaatimce...
dediğiniz gibi yapınca sidebar ı ayırınca daha iyi oldu kanaatimce :) ancak bu sefer breadcrumb content in içinde, breadcrumb yok iken cok guzel hersey, breadcrumb cıkınca right sidebar verdigim degere göre biraz küçülüyor ve büyütünce de sağ tarafının büyüttüğüm kadarı gözükmüyor. css nin içinden content in içinde olan bütün sidebar last ifadelerini çıkartsam hallolur mu acaba
Aydos ' un dediği gibi headerdan sonra sidebar ve daha sonra content bölümünün gelmesi daha iyi olur zaten bu sidebar bölümlerine float:left; float:right verince content direk ortaya oturur
bu arada min-height özelliğini ie6 desteklemiyor
Aydos cevaplamış ve onun dediği yöntem doğrudur. Senin yaptığında da bir sakınca olmaz ama asıl yöntem aydosun dediği. Genişlik için temanında genişliğini sabitleyip ona göre ayarlayabilirsin. Ne kadar fluid genişleyip daralabilen temalar kullanılmaya çalışılsada büyük siteler bile artık sabit boyutlar kullanıyor.
herkese tesekkur ederim arkadaşlar.. birşeyler öğrenmek başarmak insana daha çok haz veriyor.. teşekkürler tekrar :))
Bende teşekkür ederim sevincini paylaştıgın için.
zuzhulk,
wafless temasında bende de aynı sorun var.. tam yaptım dedim uğraştım hep bozuldu.
eğer sen yaptıysan şu temayı bir yere yükleyebilirsen biz de faydalanabilir miyiz?
uğraştım herşey bozuldu da..
Zafer birkac ufak duzeltme kaldı şimdi ki sorun pencereyi ufaltınca falan sag sutun asagı kayıyor. onların hepsini düzeltsem öyle eklesem olur mu şu sıralar yogunum biraz fazla ugrasamıyorum. cuma gunu ekleyebilirim yada persembe uyar mı
zuzhulk,
olur napalım...bekleyeceğiz inşallah sorunu halledebilirsin?
bende denedim. ben de ise küçültünce sağ sütun sola kayıyordu ve içeriği aşağıya itiyordu...
bekliyorum tüm drupalcılar adına...
http://hotfile.com/dl/41097688/62ccb98/waffles.rar.html
zamanım oldugu kadar yapmaya calıstım.
buraya ekledim temayı. insallah yapabilmişimdir. 1280px yaptım genişliğini yanlız sabit şekilde. pencere kucultulmesiyle kuculmuyor. pixeli kucultugun zaman yada %li yaptıgın zaman sidebar last kayabilir emin degilim ondan. ben böyle sabitleyerek bir çözüm üretmeye çalıştım. daha ayrıntılı sonraki günlerde bakabilirim. bir sorunun olursa yada olusabilecek bir probleme karsı bir çözümün, sende paylaşırsın birlikte öğreniriz ;) kolay gelsin.. insallah olmustur.
1024 ile çalışan çok ekran var 1280 çok fazla buna dikkat etmelisiniz.
sağ blok sorunlu,
bende de küçültünce sola üstte doğru kayıyordu ve içerik altta kayıyordu.
sen de de aşağıdan sola kayıyor içerik üstte kalıyor.
ve bilmiyorum sende nasıl gözüküyor ama bende şu anda sağbar biraz aşağıda oldu.
şu temayı düzenleyecek bir bilgimiz yok..Amma da zor işmiş. Bunu yapan arkadaş birde sabit bloklu yapsaymış amma da dua alırdı.
senin istedigin olculer nedir. ben 1280 px sabit yapmıstım. eger onu kucultuyorsan diger blokların pixellerini de kucultmen gerekir. 1024px yapacagım bende cihanın dedigi gibi cogu bilgisayar 1024 çözünürlükte kullanılıyor. kendi ihtiyacına göre duzenleyebilirsin. ben bile hiç bilgim olmadan o kadar yaptım. en buyuk yardımcım firebug ;)
senin verdiğin temayı direkt yüklemiştim. herhangi bir oynama yapmamıştım.
ayrıca benim ayarlarda da sağ sol üste kayıyordu.
senin ayarlarda da sağ altta kayıyor.
15.6 inç laptopda böyle gözüküyor. Ayarlara hiç dokunmadan bile sağ bar da sorun vardı. Ben de aynı sorunu çözemedim işte...
bende aynı tema kaymadan sorunsuz çalışıyor :s
bu arada birşey sormak istiyorum. waffles teması ile acquia marina teması tıpatıp aynı gibi geliyor bana sadece renkleri farklı. sutun yapısı menüsü blokları falan. farklarını bilen var mı acaba ?