From 743c8adcf7855c89eeb457c7828b4d0a6debd266 Mon Sep 17 00:00:00 2001
From: Angie Byron <webchick@24967.no-reply.drupal.org>
Date: Tue, 24 Feb 2009 17:50:22 +0000
Subject: [PATCH] #367299 by EclipseGc, JohnAlbin, geerlingguy, and Todd
Nienkerk: Update and polish default page.tpl.php to make it easier for CSS
designers to theme.
---
modules/system/page.tpl.php | 148 +++++++++++++++++-------------------
themes/stark/layout.css | 42 ++++++----
2 files changed, 96 insertions(+), 94 deletions(-)
diff --git a/modules/system/page.tpl.php b/modules/system/page.tpl.php
index 94d2e0a85ab4..4a5381978857 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 193affb6da9f..0d87d6e2b6d0 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;
}
--
GitLab