- Patch #200685 by boombatower, dvessel, et al: convert bluemarine theme to tableless layout.

author: Dries Buytaert <dries@buytaert.net> 2008-05-07 07:05:56 +0000
committer: Dries Buytaert <dries@buytaert.net> 2008-05-07 07:05:56 +0000
commit: e9b40575b2c67d958321a5cc01664a505f5d8cba (patch)
tree: ad51c443d8cc650f7873003834a0620e897ee85c /themes
parent: a3059e8c4c5bcfe8bacc7680cb14ca751db7ad87 (diff)
download: brdo-e9b40575b2c67d958321a5cc01664a505f5d8cba.tar.gz
brdo-e9b40575b2c67d958321a5cc01664a505f5d8cba.tar.bz2
4 files changed, 121 insertions, 83 deletions
diff --git a/themes/bluemarine/bluemarine.info b/themes/bluemarine/bluemarine.info
index 26995182f..76d7102c5 100644
--- a/themes/bluemarine/bluemarine.info
+++ b/themes/bluemarine/bluemarine.info
@@ -1,6 +1,6 @@
 ; $Id$
 name = Bluemarine
-description = Table-based multi-column theme with a marine and ash color scheme.
+description = Tableless theme with a marine and ash color scheme.
 version = VERSION
 core = 7.x
 engine = phptemplate
diff --git a/themes/bluemarine/page.tpl.php b/themes/bluemarine/page.tpl.php
index b83111aa1..73b3229f8 100644
--- a/themes/bluemarine/page.tpl.php
+++ b/themes/bluemarine/page.tpl.php
@@ -11,53 +11,45 @@
   <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
 </head>
 
-<body>
-
-<table border="0" cellpadding="0" cellspacing="0" id="header">
-  <tr>
-    <td id="logo">
-      <?php if ($logo) { ?><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
-      <?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
-      <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>
-    </td>
-    <td id="menu">
-      <?php if (isset($secondary_links)) { ?><?php print theme('links', $secondary_links, array('class' => 'links', 'id' => 'subnavlist')) ?><?php } ?>
+<body class="<?php print $body_classes; ?>">
+  <div id="header" class="clear-block">
+    <?php if ($search_box) { ?><div class="search-box"><?php print $search_box ?></div><?php }; ?>
+    <?php if ($logo) { ?><a class="logo" href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
+    <?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php }; ?>
+    <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>
+
+    <div id="menu">
+      <?php if (isset($secondary_links)) { ?><?php print theme('links', $secondary_links, array('class' => 'links', 'id' => 'subnavlist')); ?><?php } ?>
       <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?>
-      <?php print $search_box ?>
-    </td>
-  </tr>
-  <tr>
-    <td colspan="2"><div><?php print $header ?></div></td>
-  </tr>
-</table>
-
-<table border="0" cellpadding="0" cellspacing="0" id="content">
-  <tr>
-    <?php if ($left) { ?><td id="sidebar-left">
-      <?php print $left ?>
-    </td><?php } ?>
-    <td valign="top">
+    </div>
+
+    <div id="header-region"><?php print $header ?></div>
+  </div>
+
+  <div class="layout-columns">
+    <?php if ($left) { ?><div id="sidebar-left" class="column"><?php print $left ?></div><?php } ?>
+
+    <div id="main" class="column">
       <?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
-      <div id="main">
+      <div class="inner">
         <?php print $breadcrumb ?>
         <h1 class="title"><?php print $title ?></h1>
-        <div class="tabs"><?php print $tabs ?></div>
-        <?php if ($show_messages) { print $messages; } ?>
+        <?php if ($tabs) { ?><div class="tabs"><?php print $tabs ?></div><?php } ?>
         <?php print $help ?>
+        <?php if ($show_messages) { print $messages; } ?>
         <?php print $content; ?>
         <?php print $feed_icons; ?>
       </div>
-    </td>
-    <?php if ($right) { ?><td id="sidebar-right">
-      <?php print $right ?>
-    </td><?php } ?>
-  </tr>
-</table>
-
-<div id="footer">
-  <?php print $footer_message ?>
-  <?php print $footer ?>
-</div>
+    </div>
+
+    <?php if ($right) { ?><div id="sidebar-right" class="column"><?php print $right ?></div><?php } ?>
+  </div>
+
+  <div id="footer">
+    <?php print $footer_message ?>
+    <?php print $footer ?>
+  </div>
+
 <?php print $closure ?>
 </body>
 </html>
diff --git a/themes/bluemarine/style-rtl.css b/themes/bluemarine/style-rtl.css
index ef3c46905..b9275965f 100644
--- a/themes/bluemarine/style-rtl.css
+++ b/themes/bluemarine/style-rtl.css
@@ -2,9 +2,22 @@
 body {
   direction: rtl;
 }
-#logo img {
+.layout-columns .column {
   float: right;
 }
+#sidebar-left, #sidebar-right {
+  margin-right: 0;
+  margin-left:  -18em;
+}
+#sidebar-left {
+  right: -18em;
+}
+.logo {
+  float: right;
+}
+.search-box {
+  float: left; /* LTR */
+}
 #menu {
   padding: 0.5em 0.5em 0 0.5em;
   text-align: left;
@@ -15,6 +28,7 @@ body {
 #subnavlist {
   padding: 0.5em 0 0.4em 1.2em;
 }
+
 ul.links li {
   border-right: 1px solid #9cf;
   border-left: none;
diff --git a/themes/bluemarine/style.css b/themes/bluemarine/style.css
index c88def143..abe091461 100644
--- a/themes/bluemarine/style.css
+++ b/themes/bluemarine/style.css
@@ -52,10 +52,6 @@ pre {
   font-size: 12px;
   border: 1px solid #ddd;
 }
-table {
-  /* make <td> sizes relative to body size! */
-  font-size: 1em;
-}
 .form-item label {
   font-size: 1em;
   color: #222;
@@ -74,29 +70,94 @@ table {
 /*
 ** Page layout blocks / IDs
 */
-#header, #content {
+
+body {
+  min-width: 56em;
+  /* Background color needed to fill the sidebars for the length of the page. */
+  background-color: #ddd;
+}
+
+.layout-columns {
+  padding: 0 18em;
+}
+
+.sidebar-left .layout-columns {
+  padding-right: 0;
+}
+
+.sidebar-right .layout-columns {
+  padding-left: 0;
+}
+
+.layout-columns .column {
+  position: relative;
+  float: left; /* LTR */
+}
+
+#main {
   width: 100%;
+  background-color: #fff;
+}
+#main .inner {
+  padding: 1em 1.5em 3em 1.5em;
+}
+
+#sidebar-left, #sidebar-right {
+  width: 16em;
+  padding: 1em;
+  margin-right: -18em; /* LTR */
+  background-color: #ddd;
+}
+
+#sidebar-left {
+  right: 18em; /* LTR */
 }
+
 #header {
+  padding: .2em;
   background-color: #69c;
 }
-#logo {
-  vertical-align: middle;
-  border: 0;
-}
-#logo img {
+.logo {
   float: left; /* LTR */
   padding: 0 1em;
   border: 0;
 }
+.site-name {
+  margin: 0.6em 0 0 ;
+  font-size: 2em;
+  white-space: nowrap;
+}
+.site-name a:link, .site-name a:visited {
+  color: #fff;
+}
+.site-name a:hover {
+  color: #369;
+  text-decoration: none;
+}
+.site-slogan {
+  font-size: 1em;
+  color: #eee;
+  display: block;
+  margin: 0;
+  font-style: italic;
+  font-weight: bold;
+}
+.search-box {
+  float: right; /* LTR */
+  margin: 1em;
+}
 #menu {
   padding: 0.5em 0.5em 0 0.5em; /* LTR */
   text-align: right; /* LTR */
   vertical-align: middle;
 }
+#header-region {
+  clear: both;
+}
+
 #navlist {
   font-size: 1.0em;
-  padding: 0 0.8em 1.2em 0; /* LTR */
+  padding: 0 0.8em 0.5em 0; /* LTR */
   color: #9cf;
 }
 #navlist a {
@@ -137,30 +198,6 @@ ul.links li.first {
   color: #9cf;
   font-weight: bold;
 }
-.site-name {
-  margin: 0.6em 0 0 ;
-  padding: 0;
-  font-size: 2em;
-}
-.site-name a:link, .site-name a:visited {
-  color: #fff;
-}
-.site-name a:hover {
-  color: #369;
-  text-decoration: none;
-}
-.site-slogan {
-  font-size: 1em;
-  color: #eee;
-  display: block;
-  margin: 0;
-  font-style: italic;
-  font-weight: bold;
-}
-#main {
-  /* padding in px not ex because IE messes up 100% width tables otherwise */
-  padding: 10px;
-}
 #mission, .node .content, .comment .content {
   line-height: 1.4em;
 }
@@ -180,17 +217,12 @@ ul.links li.first {
 .error {
   border-color: red;
 }
-#sidebar-left, #sidebar-right {
-  background-color: #ddd;
-  width: 16em;
-  /* padding in px not ex because IE messes up 100% width tables otherwise */
-  padding: 10px;
-  vertical-align: top;
-}
+
 #footer {
   background-color: #eee;
   padding: 1em;
   font-size: 0.8em;
+  clear: both;
 }
 
 /*
author	Dries Buytaert <dries@buytaert.net>	2008-05-07 07:05:56 +0000
committer	Dries Buytaert <dries@buytaert.net>	2008-05-07 07:05:56 +0000
commit	e9b40575b2c67d958321a5cc01664a505f5d8cba (patch)
tree	ad51c443d8cc650f7873003834a0620e897ee85c /themes
parent	a3059e8c4c5bcfe8bacc7680cb14ca751db7ad87 (diff)
download	brdo-e9b40575b2c67d958321a5cc01664a505f5d8cba.tar.gz brdo-e9b40575b2c67d958321a5cc01664a505f5d8cba.tar.bz2