#226587 by JohnAlbin, E.Z, et al: Make sidebar regions semantic and RTL-friendly.

7 files changed, 88 insertions, 51 deletions

diff --git a/themes/garland/maintenance-page.tpl.php b/themes/garland/maintenance-page.tpl.php
index 74dc026cd..3d888541f 100644
--- a/themes/garland/maintenance-page.tpl.php
+++ b/themes/garland/maintenance-page.tpl.php
@@ -61,10 +61,10 @@
 
       </div> <!-- /header -->
 
-      <?php if ($left): ?>
-        <div id="sidebar-left" class="sidebar">
+      <?php if ($sidebar_first): ?>
+        <div id="sidebar-first" class="sidebar">
           <?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
-          <?php print $left ?>
+          <?php print $sidebar_first ?>
         </div>
       <?php endif; ?>
 
@@ -78,9 +78,9 @@
           <div id="footer"><?php print $footer ?></div>
       </div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->
 
-      <?php if ($right): ?>
-        <div id="sidebar-right" class="sidebar">
-          <?php print $right ?>
+      <?php if ($sidebar_second): ?>
+        <div id="sidebar-second" class="sidebar">
+          <?php print $sidebar_second ?>
         </div>
       <?php endif; ?>
 
diff --git a/themes/garland/minnelli/minnelli.css b/themes/garland/minnelli/minnelli.css
index e55942cb2..017801d9b 100644
--- a/themes/garland/minnelli/minnelli.css
+++ b/themes/garland/minnelli/minnelli.css
@@ -8,7 +8,7 @@ body.two-sidebars #wrapper #container {
   width: 980px;
 }
 
-body.sidebar-left #wrapper #container,
-body.sidebar-right #wrapper #container {
+body.sidebar-first #wrapper #container,
+body.sidebar-second #wrapper #container {
   width: 770px;
 }
diff --git a/themes/garland/page.tpl.php b/themes/garland/page.tpl.php
index 0f05af635..0bf43da70 100644
--- a/themes/garland/page.tpl.php
+++ b/themes/garland/page.tpl.php
@@ -38,10 +38,10 @@
         <?php if ($secondary_nav): print $secondary_nav; endif; ?>
       </div> <!-- /#header -->
 
-      <?php if ($left): ?>
-        <div id="sidebar-left" class="sidebar">
+      <?php if ($sidebar_first): ?>
+        <div id="sidebar-first" class="sidebar">
           <?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
-          <?php print $left ?>
+          <?php print $sidebar_first ?>
         </div>
       <?php endif; ?>
 
@@ -61,10 +61,10 @@
           <div id="footer"><?php print $footer ?></div>
       </div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->
 
-      <?php if ($right): ?>
-        <div id="sidebar-right" class="sidebar">
-          <?php if (!$left && $search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
-          <?php print $right ?>
+      <?php if ($sidebar_second): ?>
+        <div id="sidebar-second" class="sidebar">
+          <?php if (!$sidebar_first && $search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
+          <?php print $sidebar_second ?>
         </div>
       <?php endif; ?>
 
diff --git a/themes/garland/print.css b/themes/garland/print.css
index 36d7f2b20..67c0f79dd 100644
--- a/themes/garland/print.css
+++ b/themes/garland/print.css
@@ -12,12 +12,12 @@ ul.main-menu, ul.secondary-menu,
   display: none;
 }
 
-body.two-sidebars, body.sidebar-left, body.sidebar-right, body {
+body.two-sidebars, body.sidebar-first, body.sidebar-second, body {
   width: 640px;
 }
 
-body.sidebar-left #center, body.sidebar-right #center, body.two-sidebars #center,
-body.sidebar-left #squeeze, body.sidebar-right #squeeze, body.two-sidebars #squeeze {
+body.sidebar-first #center, body.sidebar-second #center, body.two-sidebars #center,
+body.sidebar-first #squeeze, body.sidebar-second #squeeze, body.two-sidebars #squeeze {
   margin: 0;
 }
 
diff --git a/themes/garland/style-rtl.css b/themes/garland/style-rtl.css
index a8cf3557e..5f9c1b308 100644
--- a/themes/garland/style-rtl.css
+++ b/themes/garland/style-rtl.css
@@ -86,11 +86,48 @@ dl dd {
   float: right;
 }
 
-#sidebar-left .block-region {
+#wrapper #container #center {
+  float: right;
+}
+
+body.sidebar-first #center {
+  margin-left: 0;
+  margin-right: -210px;
+}
+body.sidebar-second #center {
+  margin-left: -210px;
+  margin-right: 0;
+}
+
+/* And add blanks left and right for the sidebars to fill */
+body.sidebar-first #squeeze {
+  margin-left: 0;
+  margin-right: 210px;
+}
+body.sidebar-second #squeeze {
+  margin-left: 210px;
+  margin-right: 0;
+}
+
+#wrapper #container .sidebar {
+  float: right;
+}
+
+#sidebar-first .block {
+  padding: 0 0 0 15px;
+}
+
+#sidebar-second .block {
+  padding: 0 15px 0 0;
+}
+
+
+
+#sidebar-first .block-region {
   margin: 0 0 0 15px;
 }
 
-#sidebar-right .block-region {
+#sidebar-second .block-region {
   margin: 0 15px 0px 0;
 }
 
@@ -270,7 +307,7 @@ ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.seconda
   position: relative;
 }
 
-#sidebar-right{
+#sidebar-second {
   position: absolute;
   right: 0;
 }
diff --git a/themes/garland/style.css b/themes/garland/style.css
index f51c2c7e4..0b87e836a 100644
--- a/themes/garland/style.css
+++ b/themes/garland/style.css
@@ -377,33 +377,33 @@ body.two-sidebars {
   min-width: 980px;
 }
 /* With 2 columns, require a minimum width of 800px. */
-body.sidebar-left, body.sidebar-right {
+body.sidebar-first, body.sidebar-second {
   min-width: 780px;
 }
 
 /* We must define 100% width to avoid the body being too narrow for near-empty pages */
 #wrapper #container #center {
-  float: left;
+  float: left; /* LTR */
   width: 100%;
 }
 
 /* So we move the #center container over the sidebars to compensate */
-body.sidebar-left #center {
-  margin-left: -210px;
+body.sidebar-first #center {
+  margin-left: -210px; /* LTR */
 }
-body.sidebar-right #center {
-  margin-right: -210px;
+body.sidebar-second #center {
+  margin-right: -210px; /* LTR */
 }
 body.two-sidebars #center {
   margin: 0 -210px;
 }
 
 /* And add blanks left and right for the sidebars to fill */
-body.sidebar-left #squeeze {
-  margin-left: 210px;
+body.sidebar-first #squeeze {
+  margin-left: 210px; /* LTR */
 }
-body.sidebar-right #squeeze {
-  margin-right: 210px;
+body.sidebar-second #squeeze {
+  margin-right: 210px; /* LTR */
 }
 body.two-sidebars #squeeze {
   margin: 0 210px;
@@ -413,7 +413,7 @@ body.two-sidebars #squeeze {
 #wrapper #container .sidebar {
   margin: 60px 0 5em;
   width: 210px;
-  float: left;
+  float: left; /* LTR */
   z-index: 2;
   position: relative;
 }
@@ -422,23 +422,23 @@ body.two-sidebars #squeeze {
   margin: 0 0 1.5em 0;
 }
 
-#sidebar-left .block {
-  padding: 0 15px 0 0px;
+#sidebar-first .block {
+  padding: 0 15px 0 0; /* LTR */
 }
 
-#sidebar-right .block {
-  padding: 0 0px 0 15px;
+#sidebar-second .block {
+  padding: 0 0 0 15px; /* LTR */
 }
 
 .block .content {
   margin: 0.5em 0;
 }
 
-#sidebar-left .block-region {
+#sidebar-first .block-region {
   margin: 0 15px 0 0px; /* LTR */
 }
 
-#sidebar-right .block-region {
+#sidebar-second .block-region {
   margin: 0 0px 0 15px; /* LTR */
 }
 
@@ -486,11 +486,11 @@ body.two-sidebars #squeeze {
   z-index: 3;
 }
 
-body.sidebar-left #footer {
+body.sidebar-first #footer {
   margin-left: -210px;
 }
 
-body.sidebar-right #footer {
+body.sidebar-second #footer {
   margin-right: -210px;
 }
 
diff --git a/themes/stark/layout.css b/themes/stark/layout.css
index 0d87d6e2b..67f3117c8 100644
--- a/themes/stark/layout.css
+++ b/themes/stark/layout.css
@@ -17,8 +17,8 @@
  */
 
 #content,
-#sidebar-left,
-#sidebar-right {
+#sidebar-first,
+#sidebar-second {
   float: left;
   display: inline;
   position: relative;
@@ -27,11 +27,11 @@
 #content {
   width: 100%;
 }
-body.sidebar-left #content {
+body.sidebar-first #content {
   width: 80%;
-  left: 20%;
+  left: 20%; /* LTR */
 }
-body.sidebar-right #content {
+body.sidebar-second #content {
   width: 80%;
 }
 body.two-sidebars #content {
@@ -39,17 +39,17 @@ body.two-sidebars #content {
   left: 20%;
 }
 
-#sidebar-left {
+#sidebar-first {
   width: 20%;
-  left: -80%;
+  left: -80%; /* LTR */
 }
 
-body.two-sidebars #sidebar-left {
-  left: -60%;
+body.two-sidebars #sidebar-first {
+  left: -60%; /* LTR */
 }
 
-#sidebar-right {
-  float: right;
+#sidebar-second {
+  float: right; /* LTR */
   width: 20%;
 }