#367299 by EclipseGc, JohnAlbin, geerlingguy, and Todd Nienkerk: Update and polish default page.tpl.php to make it easier for CSS designers to theme.

author: Angie Byron <webchick@24967.no-reply.drupal.org> 2009-02-24 17:50:22 +0000
committer: Angie Byron <webchick@24967.no-reply.drupal.org> 2009-02-24 17:50:22 +0000
commit: 743c8adcf7855c89eeb457c7828b4d0a6debd266 (patch)
tree: d454321b322b66997a5b690d8cc1a46225e6ffee
parent: 071ae7bf0d1b3cca108462bd0ad3e870dc3f2107 (diff)
download: brdo-743c8adcf7855c89eeb457c7828b4d0a6debd266.tar.gz
brdo-743c8adcf7855c89eeb457c7828b4d0a6debd266.tar.bz2
2 files changed, 96 insertions, 94 deletions
diff --git a/modules/system/page.tpl.php b/modules/system/page.tpl.php
index 94d2e0a85..4a5381978 100644
--- a/modules/system/page.tpl.php
+++ b/modules/system/page.tpl.php
@@ -11,8 +11,8 @@
  * - $base_path: The base URL path of the Drupal installation. At the very
  *   least, this will always default to /.
  * - $css: An array of CSS files for the current page.
- * - $directory: The directory the theme is located in, e.g. themes/garland or
- *   themes/garland/minelli.
+ * - $directory: The directory the template is located in, e.g. modules/system
+ *   or themes/garland.
  * - $is_front: TRUE if the current page is the front page. Used to toggle the mission statement.
  * - $logged_in: TRUE if the user is registered and signed in.
  * - $is_admin: TRUE if the user has permission to access administration pages.
@@ -48,23 +48,20 @@
  *   site, if they have been configured.
  * - $secondary_menu (array): An array containing the Secondary menu links for
  *   the site, if they have been configured.
+ * - $breadcrumb: The breadcrumb trail for the current page.
  *
  * Page content (in order of occurrence in the default page.tpl.php):
- * - $left: The HTML for the left sidebar.
- *
- * - $breadcrumb: The breadcrumb trail for the current page.
  * - $title: The page title, for use in the actual HTML content.
- * - $help: Dynamic help text, mostly for admin pages.
  * - $messages: HTML for status and error messages. Should be displayed prominently.
  * - $tabs: Tabs linking to any sub-pages beneath the current page (e.g., the view
  *   and edit tabs when displaying a node).
- *
+ * - $help: Dynamic help text, mostly for admin pages.
  * - $content: The main content of the current Drupal page.
- *
+ * - $feed_icons: A string of all feed icons for the current page.
+ * - $left: The HTML for the left sidebar.
  * - $right: The HTML for the right sidebar.
  *
  * Footer/closing data:
- * - $feed_icons: A string of all feed icons for the current page.
  * - $footer_message: The footer message as defined in the admin settings.
  * - $footer : The footer region.
  * - $closure: Final closing markup from any modules that have altered the page.
@@ -76,7 +73,7 @@
 ?>
 <!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 ?>">
+<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>
@@ -85,98 +82,93 @@
   <?php print $scripts; ?>
 </head>
 <body class="<?php print $body_classes; ?>">
-  <div id="page">
-    <div id="header">
-      <div id="logo-title">
 
-        <?php if (!empty($logo)): ?>
-          <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
-            <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
-          </a>
-        <?php endif; ?>
+  <div id="page-wrapper"><div id="page">
+
+    <div id="header"><div class="section clearfix">
 
+      <?php if ($logo): ?>
+        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
+          <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
+        </a>
+      <?php endif; ?>
+
+      <?php if ($site_name || $site_slogan): ?>
         <div id="name-and-slogan">
-          <?php if (!empty($site_name)): ?>
-            <h1 id="site-name">
-              <a href="<?php print $front_page ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
-            </h1>
+          <?php if ($site_name): ?>
+            <?php if ($title): ?>
+              <div id="site-name"><strong>
+                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
+              </strong></div>
+            <?php else: /* Use h1 when the content title is empty */ ?>
+              <h1 id="site-name">
+                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
+              </h1>
+            <?php endif; ?>
           <?php endif; ?>
 
-          <?php if (!empty($site_slogan)): ?>
+          <?php if ($site_slogan): ?>
             <div id="site-slogan"><?php print $site_slogan; ?></div>
           <?php endif; ?>
-        </div> <!-- /name-and-slogan -->
-      </div> <!-- /logo-title -->
+        </div> <!-- /#name-and-slogan -->
+      <?php endif; ?>
 
-      <?php if (!empty($search_box)): ?>
+      <?php if ($search_box): ?>
         <div id="search-box"><?php print $search_box; ?></div>
       <?php endif; ?>
 
-      <?php if (!empty($header)): ?>
-        <div id="header-region">
+      <?php if ($header): ?>
+        <div id="header-region" class="region">
           <?php print $header; ?>
         </div>
       <?php endif; ?>
 
-    </div> <!-- /header -->
-
-    <div id="container" class="clearfix">
-
-      <div id="navigation" class="menu <?php if (!empty($main_menu)) { print "withmain"; } if (!empty($secondary_menu)) { print " withsecondary"; } ?> ">
-        <?php if (!empty($main_menu)): ?>
-          <div id="main-menu" class="clearfix">
-            <?php print theme('links', $main_menu, array('class' => 'links main-menu')); ?>
-          </div>
-        <?php endif; ?>
-
-        <?php if (!empty($secondary_menu)): ?>
-          <div id="secondary-menu" class="clearfix">
-            <?php print theme('links', $secondary_menu, array('class' => 'links secondary-menu')); ?>
-          </div>
-        <?php endif; ?>
-      </div> <!-- /navigation -->
-
-      <?php if (!empty($left)): ?>
-        <div id="sidebar-left" class="column sidebar">
+    </div></div> <!-- /.section, /#header -->
+
+    <?php if ($main_menu): ?>
+      <div id="navigation"><div class="section">
+        <?php print theme('links', $main_menu, array('id' => 'main-menu', 'class' => 'links clearfix')); ?>
+      </div></div> <!-- /.section, /#navigation -->
+    <?php endif; ?>
+
+    <div id="main-wrapper"><div id="main" class="clearfix">
+
+      <div id="content" class="column"><div class="section">
+        <?php if ($breadcrumb): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?>
+        <?php if ($mission): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>
+        <?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
+        <?php print $messages; ?>
+        <?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
+        <?php print $help; ?>
+        <div id="content-area" class="region">
+          <?php print $content; ?>
+        </div> <!-- /#content-area -->
+        <?php print $feed_icons; ?>
+      </div></div> <!-- /.section, /#content -->
+
+      <?php if ($left): ?>
+        <div id="sidebar-left" class="column sidebar"><div class="section region">
           <?php print $left; ?>
-        </div> <!-- /sidebar-left -->
+        </div></div> <!-- /.section, /#sidebar-left -->
       <?php endif; ?>
 
-      <div id="main" class="column"><div id="main-squeeze">
-        <?php if (!empty($breadcrumb)): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?>
-        <?php if (!empty($mission)): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>
-
-        <div id="content">
-          <?php if (!empty($title)): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
-          <?php if (!empty($tabs)): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
-          <?php if (!empty($messages)): print $messages; endif; ?>
-          <?php if (!empty($help)): print $help; endif; ?>
-          <div id="content-content" class="clearfix">
-            <?php print $content; ?>
-          </div> <!-- /content-content -->
-          <?php print $feed_icons; ?>
-        </div> <!-- /content -->
-
-      </div></div> <!-- /main-squeeze /main -->
-
-      <?php if (!empty($right)): ?>
-        <div id="sidebar-right" class="column sidebar">
+      <?php if ($right): ?>
+        <div id="sidebar-right" class="column sidebar"><div class="section region">
           <?php print $right; ?>
-        </div> <!-- /sidebar-right -->
+        </div></div> <!-- /.section, /#sidebar-right -->
       <?php endif; ?>
 
-    </div> <!-- /container -->
+    </div></div> <!-- /#main, /#main-wrapper -->
 
-    <div id="footer-wrapper">
-      <div id="footer">
-        <?php print $footer_message; ?>
-        <?php if (!empty($footer)): print $footer; endif; ?>
-      </div> <!-- /footer -->
-    </div> <!-- /footer-wrapper -->
+    <div id="footer"><div class="section">
+      <?php print theme('links', $secondary_menu, array('id' => 'secondary-menu', 'class' => 'links clearfix')); ?>
+      <?php if ($footer_message): ?><div id="footer-message"><?php print $footer_message; ?></div><?php endif; ?>
+      <?php if ($footer): ?><div id="footer-region" class="region"><?php print $footer; ?></div><?php endif; ?>
+    </div></div> <!-- /.section, /#footer -->
 
-    <?php print $closure; ?>
+  </div></div> <!-- /#page, /#page-wrapper -->
 
-  </div> <!-- /page -->
+  <?php print $closure; ?>
 
 </body>
 </html>
diff --git a/themes/stark/layout.css b/themes/stark/layout.css
index 193affb6d..0d87d6e2b 100644
--- a/themes/stark/layout.css
+++ b/themes/stark/layout.css
@@ -10,39 +10,49 @@
  *
  * This layout method works reasonably well, but shouldn't be used on a
  * production site because it can break. For example, if an over-large image
- * (one that is wider than 20% of the viewport) is in a sidebar, the entire
- * #main content can shift completely below the sidebar.
+ * (one that is wider than 20% of the viewport) is in the left sidebar, the
+ * image will overlap with the #content to the right. The exception to this
+ * is IE6 which will just hide the navigation block completely in these
+ * instances due to a positioning bug.
  */
 
+#content,
 #sidebar-left,
-#main,
 #sidebar-right {
   float: left;
   display: inline;
   position: relative;
 }
 
-#sidebar-left,
-#sidebar-right {
-  width: 20%;
+#content {
+  width: 100%;
 }
-
-body.one-sidebar #main {
+body.sidebar-left #content {
   width: 80%;
+  left: 20%;
 }
-
-body.two-sidebars #main {
+body.sidebar-right #content {
+  width: 80%;
+}
+body.two-sidebars #content {
   width: 60%;
+  left: 20%;
+}
+
+#sidebar-left {
+  width: 20%;
+  left: -80%;
 }
 
-body.sidebar-left #main-squeeze {
-  margin-left: 20px;
+body.two-sidebars #sidebar-left {
+  left: -60%;
 }
 
-body.sidebar-right #main-squeeze {
-  margin-right: 20px;
+#sidebar-right {
+  float: right;
+  width: 20%;
 }
 
-body.two-sidebars #main-squeeze {
-  margin: 0 20px;
+.section {
+  margin: 10px;
 }
author	Angie Byron <webchick@24967.no-reply.drupal.org>	2009-02-24 17:50:22 +0000
committer	Angie Byron <webchick@24967.no-reply.drupal.org>	2009-02-24 17:50:22 +0000
commit	743c8adcf7855c89eeb457c7828b4d0a6debd266 (patch)
tree	d454321b322b66997a5b690d8cc1a46225e6ffee
parent	071ae7bf0d1b3cca108462bd0ad3e870dc3f2107 (diff)
download	brdo-743c8adcf7855c89eeb457c7828b4d0a6debd266.tar.gz brdo-743c8adcf7855c89eeb457c7828b4d0a6debd266.tar.bz2