Starting header changes in new default template

7 files changed, 179 insertions, 152 deletions

diff --git a/askbot/skins/default/media/images/logo.gif b/askbot/skins/default/media/images/logo.gif
index 03eb79f4..bfbdd62d 100644
--- a/askbot/skins/default/media/images/logo.gif
+++ b/askbot/skins/default/media/images/logo.gif
diff --git a/askbot/skins/default/media/images/sprites.png b/askbot/skins/default/media/images/sprites.png
new file mode 100644
index 00000000..2a9d1abd
--- /dev/null
+++ b/askbot/skins/default/media/images/sprites.png
diff --git a/askbot/skins/default/media/style/style.css b/askbot/skins/default/media/style/style.css
index 1431135f..d36f1c87 100644
--- a/askbot/skins/default/media/style/style.css
+++ b/askbot/skins/default/media/style/style.css
@@ -1,5 +1,7 @@
 @import url(jquery.autocomplete.css);
 
+/* ----- General HTML Styles----- */
+
 body {
     background: #FFF;
     font-size: 14px;
@@ -7,7 +9,7 @@ body {
     margin: 0;
     padding: 0;
     color: #000;
-    font-family: sans-serif;
+    font-family: 'Yanone Kaffeesatz', sans-serif;
 }
 
 div {
@@ -48,52 +50,6 @@ a {
     cursor: pointer;
 }
 
-/* http://pathfindersoftware.com/2007/09/developers-note-2/ */
-* html .clearfix,
-* html .paginator {
-    height: 1;
-    overflow: visible;
-}
-+ html .clearfix,
-+ html .paginator {
-    min-height: 1%;
-}
-.clearfix:after,
-.paginator:after {
-    clear: both;
-    content:".";
-    display:block;
-    height: 0;
-    visibility: hidden;
-}
-
-.badges a {
-    color: #763333;
-    text-decoration: underline;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-.badge-context-toggle.active {
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-h1 {
-    font-size: 160%;
-    padding: 10px 0 5px 5px;
-}
-
-.users-page h1, .tags-page h1 {
-    float: left;
-}
-
-.main-page h1 {
-    margin-right: 5px;
-}
-
 h2 {
     font-size: 140%;
     padding: 3px 0 3px 5px;
@@ -151,109 +107,154 @@ blockquote {
     background-color: #F5F5F5;
 }
 
-.content-wrapper {/* wrapper positioning class */
-    width: 960px;
-    margin: auto;
-    position:relative;
+/* http://pathfindersoftware.com/2007/09/developers-note-2/ */
+* html .clearfix,
+* html .paginator {
+    height: 1;
+    overflow: visible;
 }
-
-#ab-header {
-    margin-top: 0px;
-    background: #FFF;
++ html .clearfix,
++ html .paginator {
+    min-height: 1%;
+}
+.clearfix:after,
+.paginator:after {
+    clear: both;
+    content:".";
+    display:block;
+    height: 0;
+    visibility: hidden;
 }
 
-#ab-header .content-wrapper {
-    height: 90px;/* same as logo height */
+.badges a {
+    color: #763333;
+    text-decoration: underline;
 }
 
-#CALeft {
-    width: 710px;
-    float: left;
-    position: relative;
-    padding: 0 5px 10px 5px;
+a:hover {
+    text-decoration: underline;
 }
 
-#CARight {
-    width: 230px;
-    float: right;
-    padding: 0 5px 10px 5px;
+.badge-context-toggle.active {
+    cursor: pointer;
+    text-decoration: underline;
 }
 
-#CAFull {
-    float: left;
-    padding: 0 5px 10px 5px;
-    width: 950px;
+h1 {
+    font-size: 160%;
+    padding: 10px 0 5px 5px;
 }
 
-#ground {
+/* ----- Custom positions ----- */
+
+.left{float:left}
+.right{float:right}
+.clean{clear:both}
+
+/* ----- Color Palette ----- */
+
+.darkred {color: darkred}
+.greymessage {color:#424242}
+
+/* ----- Notify message bar ----- */
+
+.notify {
+    position: fixed;
+    top: 0px;
+    left: 0px;
     width: 100%;
-    clear: both;
-    border-top: 1px solid #000;
-    padding: 6px 0 0 0;
+    z-index: 100;
+    padding: 0;
     text-align: center;
-    background: #777;
+    background-color: #f5dd69;
+    border-top:#fff 1px solid;
 }
 
-#ground p {
-    margin-bottom:0;
+.notify p {
+    margin-top: 6px;
+    margin-bottom: 6px;
+    font-size: 16px;
 }
 
-#ab-logo {
-    padding: 0px 0px 0px 10px;
+#close-notify {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 90px;
-    width: 70px;
+    right: 5px;
+    top: 7px;
+    color: #735005;
+    text-decoration: none;
+    line-height: 18px;
+    background: url(../images/sprites.png) -6px -5px;
+    cursor: pointer;
+    width:20px;
+    height:20px;
 }
 
-img.license-logo {
-    margin: 6px 0 10px 0;
+#close-notify:hover {
+    background: url(../images/sprites.png) -26px -5px;
 }
 
-#ab-meta-nav,
-#ab-main-nav {
-    position: absolute;
-    left: 100px;
+/* ----- Header ----- */
+
+#header {
+    margin-top: 0px;
+    background: #16160f;
 }
 
-#ab-meta-nav {
-    top: 0px;
+#logo img{
+    padding: 5px 0px 5px 0px;
+}
+
+#user-tools-navigation {
     height: 20px;
-    padding: 3px;
-    margin: 0;
+    position:absolute;
+    bottom: 0;
+    right:10px;
+    padding-bottom:5px;
 }
 
-#ab-meta-nav a {
+#user-tools-navigation a {
     height: 35px;
     text-align: right;
     margin-left: 20px;
     text-decoration: underline;
-    color: #555555;
+    color:#d0e296;
+    font-size:16px;
 }
 
-#ab-meta-nav a:first-child {
+#user-tools-navigation a:first-child {
     margin-left: 0;
 }
 
-#ab-meta-nav a#ab-responses {
+#user-tools-navigation a#ab-responses {
     margin-left: 3px;
 }
-#ab-meta-nav a img {
+
+
+#user-tools-navigation .user-info,
+#user-tools-navigation .user-micro-info{
+    color:#b5b593;
+}
+
+#user-tools-navigation a img {
     vertical-align:middle;
     margin-bottom:2px;
 }
 
-#ab-meta-nav .user-info a {
+#user-tools-navigation .user-info a {
     margin: 0;
     text-decoration: none;
 }
 
-#ab-main-nav {
+#main-nav {
+    position: absolute;
+    left: 100px;
+}
+
+#main-nav {
     bottom: 0;
 }
 
-#ab-main-nav a {
+#main-nav a {
     color: #333333;
     background-color: #fff0e0;
     border: 1px solid #888888;
@@ -269,11 +270,11 @@ img.license-logo {
     float: left;
 }
 
-#ab-main-nav a:hover {
+#main-nav a:hover {
     text-decoration: underline;
 }
 
-#ab-main-nav a.on {
+#main-nav a.on {
     height: 24px;
     line-height: 28px;
     border-bottom: 1px solid #a40000;
@@ -286,17 +287,74 @@ img.license-logo {
     text-decoration: none
 }
 
-#ab-main-nav a.special {
+#main-nav a.special {
     font-size: 18px;
     color: #B02B2C;
     font-weight: bold;
     text-decoration: none;
 }
 
-#ab-main-nav a.special:hover {
+#main-nav a.special:hover {
     text-decoration: underline;
 }
 
+
+.users-page h1, .tags-page h1 {
+    float: left;
+}
+
+.main-page h1 {
+    margin-right: 5px;
+}
+
+
+
+
+.content-wrapper {/* wrapper positioning class */
+    width: 960px;
+    margin: auto;
+    position:relative;
+}
+
+#CALeft {
+    width: 710px;
+    float: left;
+    position: relative;
+    padding: 0 5px 10px 5px;
+}
+
+#CARight {
+    width: 230px;
+    float: right;
+    padding: 0 5px 10px 5px;
+}
+
+#CAFull {
+    float: left;
+    padding: 0 5px 10px 5px;
+    width: 950px;
+}
+
+#ground {
+    width: 100%;
+    clear: both;
+    border-top: 1px solid #000;
+    padding: 6px 0 0 0;
+    text-align: center;
+    background: #777;
+}
+
+#ground p {
+    margin-bottom:0;
+}
+
+
+
+img.license-logo {
+    margin: 6px 0 10px 0;
+}
+
+
 #searchBar {
     display:inline-block;
     background-color: #cccccc;/*888a85; /*#e9b96e;*/
@@ -1839,9 +1897,7 @@ p.space-above {
     color: red;
 }
 
-.darkred {
-    color: darkred;
-}
+
 
 button::-moz-focus-inner {
     padding:0;
@@ -1882,42 +1938,6 @@ button::-moz-focus-inner {
     padding-right: 10px;
 }
 
-.notify {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    z-index: 100;
-    padding: 0;
-    text-align: center;
-    font-weight: Bold;
-    color: #444;
-    background-color: #F4A83D;
-}
-
-.notify p {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    font-size: 16px;
-}
-
-#close-notify {
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    padding: 0 3px 0 3px;
-    color: #735005;
-    text-decoration: none;
-    font-size: 14px;
-    line-height: 18px;
-    background-color: #FAD163;
-    border: 2px #735005 solid;
-    cursor: pointer;
-}
-
-#close-notify:hover {
-    text-decoration: none;
-}
 
 .noscript {
     position: fixed;
diff --git a/askbot/skins/default/templates/base.html b/askbot/skins/default/templates/base.html
index 9f779945..42a8daf4 100644
--- a/askbot/skins/default/templates/base.html
+++ b/askbot/skins/default/templates/base.html
@@ -22,6 +22,7 @@
                 type="text/css"
             />
         {% endif %}
+        <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400,700' rel='stylesheet' type='text/css'>
         {% block forestyle %}{% endblock %}
         {% if user_messages %}
         <style type="text/css">
diff --git a/askbot/skins/default/templates/blocks/header.html b/askbot/skins/default/templates/blocks/header.html
index d7359007..1a4deb58 100644
--- a/askbot/skins/default/templates/blocks/header.html
+++ b/askbot/skins/default/templates/blocks/header.html
@@ -1,23 +1,26 @@
 <!-- template header.html -->
 {% import "macros.html" as macros %}
-<div id="ab-header">
+<div id="header">
     <div class="content-wrapper">
         {% if settings.SHOW_LOGO %}
-        <a id="ab-logo" href="{% url questions %}?start_over=true"><img 
+        <a id="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">
+        <div id="user-tools-navigation">
             {% include "blocks/header_meta_links.html" %}
             {{settings.CUSTOM_HEADER}}
         </div>
-        <div id="ab-main-nav">
+        
+        <div id="main-nav">
+            <!--
             <a 
                 id="nav_questions"
                 href="{% url questions %}"
                 {% if active_tab == 'questions' %}class="on"{% endif %}
             >{% trans %}questions{% endtrans %}</a>
+            -->
             <a 
                 id="nav_tags"
                 href="{% url tags %}"
@@ -33,12 +36,16 @@
                 href="{% url badges %}"
                 {% if active_tab == 'badges' %}class="on"{% endif %}
             >{% trans %}badges{% endtrans %}</a>
+            <!--
             <a 
                 id="nav_ask"
                 href="{% url ask %}"
                 class="{% if active_tab == 'ask' %}on{% else %}special{% endif %}"
             >{% trans %}ask a question{% endtrans %}</a>
+            -->
         </div>
+        
+        <div class="clean"></div>
     </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 83a5ed55..2324291d 100644
--- a/askbot/skins/default/templates/blocks/header_meta_links.html
+++ b/askbot/skins/default/templates/blocks/header_meta_links.html
@@ -9,8 +9,7 @@
 {% else %}
     <a href="{{ settings.LOGIN_URL }}">{% trans %}login{% endtrans %}</a>
 {% endif %}
-    <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() %}
     <a href="{% url site_settings %}">{% trans %}settings{% endtrans %}</a>
 {% endif %}
diff --git a/askbot/skins/default/templates/blocks/system_messages.html b/askbot/skins/default/templates/blocks/system_messages.html
index 18ba03d7..120ad718 100644
--- a/askbot/skins/default/templates/blocks/system_messages.html
+++ b/askbot/skins/default/templates/blocks/system_messages.html
@@ -1,8 +1,8 @@
 <div class="notify" style="display:none">
     {% if user_messages %}
         {% for message in user_messages %}
-              <p class="darkred">{{ message }}</p>
+              <p class="greymessage">{{ message }}</p>
         {% endfor %}
     {% endif %}
-    <a id="close-notify" onclick="notify.close(true)">&times;</a>
+    <a id="close-notify" onclick="notify.close(true)"></a>
 </div>