started refactoring the header template

5 files changed, 53 insertions, 83 deletions

diff --git a/askbot/skins/default/media/style/style.css b/askbot/skins/default/media/style/style.css
index 67dbbe67..a62c6ff3 100755
--- a/askbot/skins/default/media/style/style.css
+++ b/askbot/skins/default/media/style/style.css
@@ -123,17 +123,21 @@ blockquote {
     background-color: #F5F5F5;
 }
 
-#askbot-content {
+.content-wrapper {/* wrapper positioning class */
     width: 960px;
     margin: auto;
+    position:relative;
 }
 
-#roof {
-    position: relative;
+#ab-header {
     margin-top: 0px;
     background: #FFF;
 }
 
+#ab-header .content-wrapper {
+    height: 90px;/* same as logo height */
+}
+
 #CALeft {
     width: 710px;
     float: left;
@@ -162,61 +166,53 @@ blockquote {
     background: #777;
 }
 
-/* why is this called top? - this contains links like login, faq, etc */
-#top {
+#ab-logo {
+    padding: 0px 0px 0px 10px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 90px;
+    width: 70px;
+}
+
+#ab-meta-nav,
+#ab-main-nav {
     position: absolute;
+    left: 100px;
+}
+
+#ab-meta-nav {
     top: 0px;
-    right: 250px;
     height: 20px;
-    text-align: right;
     padding: 3px;
-    background-color: #ffffff;
 }
 
-/*#header {width:960px;}*/
-#top a {
+#ab-meta-nav a {
     height: 35px;
-    text-align: right; /*letter-spacing:1px; */
+    text-align: right;
     margin-left: 20px;
     text-decoration: underline;
     color: #555555;
 }
 
-#top a.ab-responses-envelope {
+#ab-meta-nav a#ab-responses {
     margin-left: 3px;
 }
-#top a img {
+#ab-meta-nav a img {
     vertical-align:middle;
     margin-bottom:2px;
 }
 
-#logo {
-    padding: 0px 0px 0px 10px;
-    height: 90px;
-    width: 70px;
-}
-
-#logoContainer {
-}
-#navTabContainer {
-    width: 610px;
-    padding-left: 10px;
-    text-align: left;
-}
-
-/* navBar includes logo, main tabs and links like logout, about, faq */
-#navBar {
-    float: clear;
-    position: relative;
-    display: block;
-    width: 960px;
+#ab-meta-nav .user-info a {
+    margin: 0;
+    text-decoration: none;
 }
 
-#navBar .nav {
-    margin: 20px 0px 0px 0px; /*letter-spacing:1px; */
+#ab-main-nav {
+    bottom: 0;
 }
 
-#navBar .nav a {
+#ab-main-nav a {
     color: #333333;
     background-color: #fff0e0;
     border: 1px solid #888888;
@@ -232,11 +228,11 @@ blockquote {
     float: left;
 }
 
-#navBar .nav a:hover {
-    text-decoration: underline
+#ab-main-nav a:hover {
+    text-decoration: underline;
 }
 
-#navBar .nav a.on {
+#ab-main-nav a.on {
     height: 24px;
     line-height: 28px;
     border-bottom: 1px solid #a40000;
@@ -249,23 +245,17 @@ blockquote {
     text-decoration: none
 }
 
-#navBar .nav a.special {
+#ab-main-nav a.special {
     font-size: 18px;
     color: #B02B2C;
     font-weight: bold;
     text-decoration: none;
 }
 
-#navBar .nav a.special:hover {
+#ab-main-nav a.special:hover {
     text-decoration: underline;
 }
 
-/* todo: this is probably not used any more */
-#navBar .nav div.focus {
-    float: right;
-    padding-right: 0px;
-}
-
 #searchBar {
     display:inline-block;
     background-color: #cccccc;/*888a85; /*#e9b96e;*/
@@ -1297,11 +1287,6 @@ ins .post-tag {
     text-decoration: none;
 }
 
-#top a.user-micro-info {
-    margin-left:0px;
-    text-decoration:none;
-}
-
 .narrow  .tags {
     float: left;
 }
@@ -1930,11 +1915,6 @@ p.signup_p {
     padding-right:5px; 
 }
 
-#top a.ab-nav-karma, #top a.ab-nav-badges {
-    margin: 0;
-    text-decoration: none;
-}
-
 img.gravatar {
     margin:2px;
 }
diff --git a/askbot/skins/default/templates/base.html b/askbot/skins/default/templates/base.html
index f2ee98af..a1575646 100644
--- a/askbot/skins/default/templates/base.html
+++ b/askbot/skins/default/templates/base.html
@@ -46,7 +46,7 @@
         {% include "blocks/system_messages.html" %}
         {% include "custom_header.html" ignore missing %}
         {% include "blocks/header.html" %}
-        <div id="askbot-content">
+        <div class="content-wrapper">
             {% block body %}
             {% endblock %}
         </div>
diff --git a/askbot/skins/default/templates/blocks/header.html b/askbot/skins/default/templates/blocks/header.html
index 917e3a4f..981168ea 100644
--- a/askbot/skins/default/templates/blocks/header.html
+++ b/askbot/skins/default/templates/blocks/header.html
@@ -1,24 +1,15 @@
 <!-- template header.html -->
 {% import "macros.html" as macros %}
-<div id="roof">
-    <div id="navBar">
-        <div id="top">
-            {% include "blocks/header_meta_links.html" %}
-        </div>
-        <table border="0" cellspacing="0" cellpadding="0">
-          <tr>
-    {% if settings.SHOW_LOGO %}
-    <td id="logoContainer">
-        <div id="logo">
-            <a href="{% url questions %}?start_over=true"><img 
-                src="{{ settings.SITE_LOGO_URL|media }}" 
-                title="{% trans %}back to home page{% endtrans %}"
-                alt="{% trans site=settings.APP_SHORT_NAME %}{{site}} logo{% endtrans %}"/></a>
-        </div>
-    </td>
-    {% endif %}
-    <td id="navTabContainer" valign="bottom" align="left">
-        <div class="nav">
+<div id="ab-header">
+    <div class="content-wrapper">
+        {% if settings.SHOW_LOGO %}
+        <a id="ab-logo" href="{% url questions %}?start_over=true"><img 
+            src="{{ settings.SITE_LOGO_URL|media }}" 
+            title="{% trans %}back to home page{% endtrans %}"
+            alt="{% trans site=settings.APP_SHORT_NAME %}{{site}} logo{% endtrans %}"/></a>
+        {% endif %}
+        <div id="ab-meta-nav">{% include "blocks/header_meta_links.html" %}</div>
+        <div id="ab-main-nav">
             <a 
                 id="nav_questions"
                 href="{% url questions %}"
@@ -45,9 +36,6 @@
                 class="{% if active_tab == 'ask' %}on{% else %}special{% endif %}"
             >{% trans %}ask a question{% endtrans %}</a>
         </div>
-    </td>
-          </tr>
-        </table>
     </div>
 </div>
 <!-- end template header.html -->
diff --git a/askbot/skins/default/templates/blocks/header_meta_links.html b/askbot/skins/default/templates/blocks/header_meta_links.html
index 93bba656..9e1f5d75 100644
--- a/askbot/skins/default/templates/blocks/header_meta_links.html
+++ b/askbot/skins/default/templates/blocks/header_meta_links.html
@@ -1,8 +1,9 @@
+<span class="user-info">
 {% if request.user.is_authenticated() %}
     <a href="{{ request.user.get_absolute_url() }}">{{ request.user.username }}</a> 
     {% spaceless %}
     {% if request.user.new_response_count > 0 or request.user.seen_response_count > 0 %}
-    <a class='ab-responses-envelope' href="{{request.user.get_absolute_url()}}?sort=inbox&section=forum">
+    <a id='ab-responses' href="{{request.user.get_absolute_url()}}?sort=inbox&section=forum">
         <img 
             alt="{% trans username=request.user.username %}responses for {{username}}{% endtrans %}"
             {% if request.user.new_response_count > 0 %}
@@ -16,7 +17,7 @@
     </a>
     {% endif %}
     {% if moderation_items %}
-        <a class="ab-responses-envelope"
+        <a id="ab-responses"
             href="{{request.user.get_absolute_url()}}?sort=inbox&section=flags"
         >
         {% if moderation_items['new_count'] > 0 %}
@@ -48,6 +49,7 @@
 {% else %}
     <a href="{% url user_signin %}">{% trans %}login{% endtrans %}</a>
 {% endif %}
+</span>
 <a href="{% url about %}">{% trans %}about{% endtrans %}</a>
 <a href="{% url faq %}">{% trans %}faq{% endtrans %}</a>
 {% if request.user.is_authenticated() and request.user.is_administrator() %}
diff --git a/askbot/skins/default/templates/faq.html b/askbot/skins/default/templates/faq.html
index ed31c50b..781650fc 100644
--- a/askbot/skins/default/templates/faq.html
+++ b/askbot/skins/default/templates/faq.html
@@ -4,7 +4,7 @@
 {% block content %}
 <h1>{% trans %}Frequently Asked Questions {% endtrans %}({% trans %}FAQ{% endtrans %})</h1>
 <h2 class="first">{% trans %}What kinds of questions can I ask here?{% endtrans %}</h2>
-<p>Most importanly - questions should be <strong>relevant</strong> to this community.{% endtrans %}
+<p>{% trans %} Most importanly - questions should be <strong>relevant</strong> to this community.{% endtrans %}
 {% trans %}Before asking the question - please make sure to use search to see whether your question has alredy been answered.{% endtrans %}
 </p>
 <h2>{% trans %}What questions should I avoid asking?{% endtrans %}</h2>