- Patch #7330 by MegaGrunt: turns primary and secondary link ids into a classes,

and assigns the classes to header and footer.  Also renamed a few elements to
  make them more logical/consistent.  Plus added search id around search area,
  and a few other minor improvements.

themes/xtemplate/pushbutton/xtemplate.css

@@ -33,18 +33,18 @@ tr.light {
 tr.dark td, tr.light td {
   padding: 0.3em;
 }
-a {
+a:link {
   text-decoration: none;
   font-weight: bold;
   color: #ff8c00;
 }
-a:link {
-  color: #ff8c00;
-}
 a:visited {
+  text-decoration: none;
+  font-weight: bold;
   color: #c96;
 }
-a:hover {
+a:hover, a:active {
+  font-weight: bold;
   color: #ff4500;
   text-decoration: underline;
 }
@@ -85,10 +85,10 @@ pre {
 /*
 ** Page layout blocks / IDs
 */
-table#primary-links-table  {
+#primary-menu  {
   background-color: #e0edfb;
 }
-table#primary-links-table tr {
+#primary-menu tr {
   background: transparent url(header-a.jpg) left bottom repeat;
 }
 td#home {
@@ -104,35 +104,35 @@ td#home a:hover img {
   width: 144px;
   height: 63px;
 }
-#primary-links   {
+.primary-links, .primary-links a:link, .primary-links a:visited {
-  background: transparent url(header-b.jpg) left top no-repeat;
-  font-size: 0.85em;
-}
-#primary-links h1, #primary-links h2, #primary-links h3 {
-  font-size: 1.7em;
-}
-#primary-links a  {
   color: #369;
 }
-#primary-links a:hover {
+.primary-links a:hover {
   color: #000;
 }
-table#secondary-links-table   {
+#primary-menu .primary-links   {
+  background: transparent url(header-b.jpg) left top no-repeat;
+  font-size: 0.79em;
+}
+#primary-menu .primary-links h1, #primary-menu .primary-links h2, #primary-menu .primary-links h3 {
+  font-size: 2.3em;
+  color: #369;
+}
+#secondary-menu {
   background-color: #369;
   border-top: 3px solid #69c;
   border-bottom: 3px solid #69c;
-  font-size: 0.85em;
 }
-td#secondary-links {
+.secondary-links, .secondary-links a:link, .secondary-links a:visited  {
   color: #e4e9eb;
 }
-#secondary-links a  {
+.secondary-links a:hover {
-  color: #e4e9eb;
-}
-#secondary-links a:hover {
   color: #fff;
   text-decoration: underline;
 }
+#secondary-menu .secondary-links {
+  font-size: 0.85em;
+}
 #content {
   background-color: #fff;
 }
@@ -146,7 +146,7 @@ td#secondary-links {
 }
 #search .form-text, #search .form-submit {
   border: 1px solid #369;
-  font-size: 1.1em;
+  font-size: 0.85em;
 }
 #search .form-text {
   width: 8em;
@@ -229,31 +229,27 @@ td#secondary-links {
   text-align: center;
   color: #aaa;
 }
-table#footer-links {
+table#footer-menu {
   border-top: 3px solid #6699cc;
   border-bottom: 3px solid #6699cc;
   background-color: #369;
   color: #e4e9eb;
 }
-#footer-links td {
+#footer-menu td {
   padding: 5px;
-  font-size: 0.85em;
+  font-size: 0.75em;
 }
-#footer-links td h1 {
+#footer-menu .primary-links, #footer-menu a:link, #footer-menu a:visited  {
-  color: #e4e9eb;
-  font-size: 1.15em;
-  font-weight: bold;
-  padding: 0;
-  margin: 0;
-}
-#footer-links a  {
   color: #e4e9eb;
 }
-#footer-links a:hover  {
+#footer-menu a:hover  {
   color: #fff;
   text-decoration: underline;
 }
-
+#footer-menu .primary-links h1, #footer-menu .primary-links h2, #footer-menu .primary-links h3 {
+  font-size: 1.3em;
+  color: #e4e9eb;
+}
 /*
 ** Common declarations for child classes of node, comment, block, box, etc.
 ** If you want any of them styled differently for a specific parent, add

themes/xtemplate/pushbutton/xtemplate.xtmpl

@@ -10,23 +10,25 @@
 
 <div class="hide"><a href="#content" title="Skip navigation." accesskey="2">Skip navigation</a>.</div>
 
-<table id="primary-links-table" summary="Navigation elements." border="0" cellpadding="0" cellspacing="0" width="100%">
+<table id="primary-menu" summary="Navigation elements." border="0" cellpadding="0" cellspacing="0" width="100%">
   <tr>
     <td id="home" width="10%"><a href="./" title="Home"><img src="{directory}/logo.gif" alt="Home" width="144" height="63" border="0" /></a></td>
-    <td id="primary-links" width="90%"  align="center" valign="middle">{primary_links}</td>
+    <td class="primary-links" width="90%"  align="center" valign="middle">{primary_links}</td>
   </tr>
 </table>
 
-<table id="secondary-links-table" summary="Navigation elements." border="0" cellpadding="0" cellspacing="0" width="100%">
+<table id="secondary-menu" summary="Navigation elements." border="0" cellpadding="0" cellspacing="0" width="100%">
   <tr>
-    <td id="secondary-links" width="75%"  align="center" valign="middle">
+    <td class="secondary-links" width="75%"  align="center" valign="middle">
       {secondary_links}
     </td>
-    <td  id="search" width="25%"  align="center" valign="middle">
+    <td  width="25%"  align="center" valign="middle">
       <!-- BEGIN: search_box -->
       <form action="{search_url}" method="post">
+        <div id="search">
           <input class="form-text" type="text" size="15" value="" name="keys" alt="{search_description}" />
           <input class="form-submit" type="submit" value="{search_button_text}" alt="submit" />
+        </div>
       </form>
       <!-- END: search_box -->
     </td>
@@ -115,11 +117,11 @@
   </tr>
 </table>
 
-<table id="footer-links" summary="Navigation elements." border="0" cellpadding="0" cellspacing="0" width="100%">
+<table id="footer-menu" summary="Navigation elements." border="0" cellpadding="0" cellspacing="0" width="100%">
   <tr>
     <td align="center" valign="middle">
-      {primary_links}<br />
+      <div class="primary-links">{primary_links}</div>
-      {secondary_links}
+      <div class="secondary-links">{secondary_links}</div>
     </td>
   </tr>
 </table>