[Xfce4-commits] <wiki:master> Update CSS template for Xfce 4.8

Mike Massonnet noreply at xfce.org
Mon Dec 13 08:42:01 CET 2010


Updating branch refs/heads/master
         to 78d77b24ee628c34ed579d917f508f2350758ad8 (commit)
       from 2b5543efb389db8f3a639edcd125e4ba9249c765 (commit)

commit 78d77b24ee628c34ed579d917f508f2350758ad8
Author: Mike Massonnet <mmassonnet at xfce.org>
Date:   Sun Dec 12 09:18:45 2010 +0100

    Update CSS template for Xfce 4.8

 lib/tpl/xfce/design.css       |   63 ++++++++++++++++++++++++++---------------
 lib/tpl/xfce/layout.css       |   60 ++++++++++++++------------------------
 lib/tpl/xfce/main.php         |   58 +++++++++++++++++---------------------
 lib/tpl/xfce/style.ini        |    9 ++++--
 lib/tpl/xfce/xfce-header.html |   61 +++++++++++++++++++++++++++++++++++++++
 5 files changed, 155 insertions(+), 96 deletions(-)

diff --git a/lib/tpl/xfce/design.css b/lib/tpl/xfce/design.css
index 8c62457..989c6fd 100644
--- a/lib/tpl/xfce/design.css
+++ b/lib/tpl/xfce/design.css
@@ -11,7 +11,7 @@
 * { padding: 0; margin: 0; }
 
 body {
-  font: 80% Helvetica, Arial, sans-serif;
+  font: 90% Helvetica, Arial, sans-serif;
   background-color: __background__;
   color: __text__;
 }
@@ -50,6 +50,7 @@ div.dokuwiki blockquote,
 div.dokuwiki table,
 div.dokuwiki pre {
   margin: 0 0 1.0em 0;
+  line-height: 1.7em;
 }
 
 div.dokuwiki hr {
@@ -64,6 +65,9 @@ div.dokuwiki div.nothing {
   margin: 2em;
 }
 
+div.dokuwiki div.header {
+}
+
 div.dokuwiki div.stylefoot {
   margin-top: 1.5em;
   border-top: 1px __border__ solid;
@@ -274,12 +278,12 @@ div.dokuwiki div.pagenav-next {
 div.dokuwiki a:link,
 div.dokuwiki a:visited {
   color: __extern__;
-  text-decoration: underline;
+  text-decoration: none;
 }
 div.dokuwiki a:hover,
 div.dokuwiki a:active {
   color: __hover__;
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 div.dokuwiki h1 a,
@@ -288,7 +292,7 @@ div.dokuwiki h3 a,
 div.dokuwiki h4 a,
 div.dokuwiki h5 a,
 div.dokuwiki a.nolink {
-  color: __text__ !important;
+  color: __text_neu__ !important;
   text-decoration: none !important;
 }
 
@@ -347,7 +351,6 @@ div.dokuwiki a.wikilink1 {
 
 /* not existing wikipage */
 div.dokuwiki a.wikilink2 {
-  color: __existing__ !important;
   text-decoration: none !important;
   border-bottom: dashed 1px __missing__ !important;
 }
@@ -362,10 +365,9 @@ div.dokuwiki div.preview {
 }
 
 div.dokuwiki div.breadcrumbs {
-  background-color: __background_neu__;
   color: __text_neu__;
   font-size: 84%;
-  padding: 0 0 0 4px;
+  padding: 0.22em 0 0 0;
 }
 
 div.dokuwiki div.translation {
@@ -384,6 +386,18 @@ div.dokuwiki div.plugin_translation span {
   display: none;
 }
 
+div.dokuwiki div.translation a.action {
+  display: block;
+  float: right;
+  padding: 0.2em;
+  margin: 0 0.2em;
+  font-weight: bold;
+}
+
+div.dokuwiki div.translation a.action:first-child {
+  display: none;
+}
+
 div.dokuwiki span.user {
   color: __text_other__;
   font-size: 90%;
@@ -434,10 +448,10 @@ div.dokuwiki h3,
 div.dokuwiki h4,
 div.dokuwiki h5 {
     font-size: 100%;
-    font-weight: bold;
-    color: __extern__ !important;
+    font-weight: normal;
+    color: __text_neu__ !important;
     margin: 0 0 1em 0;
-    padding: 0.5em 0 0 0;
+    padding: 0.5em 0 0.34em 0;
     border-bottom: 1px solid __border__;
     clear: left;
 }
@@ -447,16 +461,16 @@ div.dokuwiki h2 a,
 div.dokuwiki h3 a,
 div.dokuwiki h4 a,
 div.dokuwiki h5 a {
-    color: __extern__ !important;
+    color: __text_neu__ !important;
     background-color: inherit;
 }
 
 /* special headlines */
-div.dokuwiki h1 {font-size: 160%; margin-left: 0px; font-weight: bold;}
-div.dokuwiki h2 {font-size: 150%; margin-left: 20px;}
-div.dokuwiki h3 {font-size: 140%; margin-left: 40px; border-bottom: none; font-weight: bold;}
-div.dokuwiki h4 {font-size: 120%; margin-left: 60px; border-bottom: none; font-weight: bold;}
-div.dokuwiki h5 {font-size: 100%; margin-left: 80px; border-bottom: none; font-weight: bold;}
+div.dokuwiki h1 {font-size: 180%; margin-left: 0px; }
+div.dokuwiki h2 {font-size: 170%; margin-left: 20px;}
+div.dokuwiki h3 {font-size: 160%; margin-left: 40px; border-bottom: none; }
+div.dokuwiki h4 {font-size: 150%; margin-left: 60px; border-bottom: none; }
+div.dokuwiki h5 {font-size: 120%; margin-left: 80px; border-bottom: none; }
 
 /* indent different sections */
 div.dokuwiki div.level1 { margin-left: 3px; }
@@ -467,7 +481,7 @@ div.dokuwiki div.level5 { margin-left: 83px; }
 
 /* unordered lists */
 div.dokuwiki ul {
-  line-height: 1.5em;
+  line-height: 1.7em;
   list-style-type: square;
   list-style-image: none;
   margin: 0 0 1em 3.5em;
@@ -476,7 +490,7 @@ div.dokuwiki ul {
 
 /* ordered lists */
 div.dokuwiki ol {
-  line-height: 1.5em;
+  line-height: 1.7em;
   list-style-image: none;
   margin: 0 0 1em 3.5em;
   color: __text_alt__;
@@ -647,9 +661,12 @@ div.dokuwiki ul.toc {
   margin: 0;
 }
 
-div.dokuwiki ul.toc li.level1 {
-  background: transparent url(images/bullit.gif) 0 0.6em no-repeat;
-  padding-left: 10px;
+div.dokuwiki ul.toc li.level1 > div.li span.li {
+  font-weight: bold;
+  color: __meta2__;
+}
+div.dokuwiki ul.toc li.level1 > div.li span.li:before {
+  content: "\25B6\2002";
 }
 
 div.dokuwiki ul.toc li.level1 > div.li {
@@ -663,12 +680,12 @@ div.dokuwiki ul.toc li.clear {
 
 div.dokuwiki a.toc:link,
 div.dokuwiki a.toc:visited {
-  color: __extern__;
+  color: __meta2__;
 }
 
 div.dokuwiki a.toc:hover,
 div.dokuwiki a.toc:active {
-  color: __text__;
+  color: __existing__;
 }
 
 /* ---------------------------- Diff rendering --------------------------*/
diff --git a/lib/tpl/xfce/layout.css b/lib/tpl/xfce/layout.css
index f7033de..9cb92c6 100644
--- a/lib/tpl/xfce/layout.css
+++ b/lib/tpl/xfce/layout.css
@@ -14,55 +14,33 @@ div.dokuwiki {
 }
 
 body > div.export {
-  margin-right: 180px;
+  margin-right: 210px;
 }
 
 div.dokuwiki div.page {
-  margin: 4px 180px 4px 0;
+  margin: 4px 210px 4px 0;
   min-height: 300px;
 }
 
 div.dokuwiki div.toc {
-  margin: 1.2em -180px 0 0;
-  width: 170px;
+  margin: 1.2em -210px 0 0;
+  width: 190px;
 }
 
 div.dokuwiki div.stylefoot {
-  margin-right: 170px;
-}
-
-/* -------------- top row --------------- */
-div.dokuwiki .header {
-}
-
-div.dokuwiki .header #banner {
-  height: 125px;
-  background: url(images/header.png) repeat-x;
-}
-
-div.dokuwiki .header #banner > #banner-top-left {
-  width: 350px;
-  height: 125px;
-  float: left;
-  background: url(images/header-top-left.png) no-repeat;
-}
-
-div.dokuwiki .header #banner > #banner-top-right {
-  width: 15px;
-  height: 15px;
-  float: right;
-  background: url(images/header-top-right.png) no-repeat;
+  margin-right: 210px;
 }
 
 /* ---------------  top and bottom bar ---------------- */
 div.dokuwiki #bar__top {
-  border: 1px solid __border__;
-  background: __background_bar__ url(images/bar.png) repeat-x;
-  font-size: 90%;
-  padding: 1px 3px;
+  padding: 1px 0 0.22em 0;
   clear: both;
 }
 
+div.dokuwiki div.header div.clearer {
+  padding-bottom: 8px !important;
+}
+
 div.dokuwiki #bar__top input[type="text"] {
   width: 160px;
 }
@@ -77,6 +55,10 @@ div.dokuwiki #bar__top input[type="submit"] {
   color: __text_bar__;
 }
 
+div.dokuwiki #bar__top input[type="submit"]:hover {
+  color: __existing__;
+}
+
 div.dokuwiki .bar a,
 div.dokuwiki div.breadcrumbs a {
   font-weight: bold;
@@ -86,6 +68,7 @@ div.dokuwiki div.breadcrumbs a {
 
 div.dokuwiki .bar a:hover,
 div.dokuwiki div.breadcrumbs a:hover {
+  color: __existing__ !important;
   text-decoration: none;
 }
 
@@ -99,15 +82,20 @@ div.dokuwiki #bar__top ul {
 
 div.dokuwiki #bar__top ul li:first-child {
   border-left: 0;
+  padding-left: 0;
 }
 
 div.dokuwiki #bar__top ul > li {
-  padding: 0 0.6em 0 0.8em;
+  padding: 4px 0.6em 4px 0.8em;
   display: inline;
   vertical-align: middle;
   border-left: 1px solid __border__;
 }
 
+div.dokuwiki #bar__bottom {
+  margin: 0.8em 0;
+}
+
 div.dokuwiki #bar__bottom div a:first-child {
   margin-left: 0;
   padding-left: 0;
@@ -116,7 +104,7 @@ div.dokuwiki #bar__bottom div a:first-child {
 
 div.dokuwiki #bar__bottom div a {
   margin-left: 0.8em;
-  padding-left: 0.8em;
+  padding: 4px 0 4px 0.8em;
   border-left: 1px solid __border__;
 }
 
@@ -129,10 +117,6 @@ div.dokuwiki .bar-right {
   text-align: right;
 }
 
-div.dokuwiki #bar__bottom {
-  margin-bottom: 3px;
-}
-
 /* ------------- File Metadata ----------------------- */
 
 div.dokuwiki div.meta {
diff --git a/lib/tpl/xfce/main.php b/lib/tpl/xfce/main.php
index 5da65f1..dbec82b 100644
--- a/lib/tpl/xfce/main.php
+++ b/lib/tpl/xfce/main.php
@@ -39,58 +39,52 @@ function __tpl_flush(){
 
 <body>
 
+<?php include "xfce-header.html" ?>
+
 <div class="msgarea"><?php html_msgarea()?></div>
 
-<div class="bottom-right-corner"></div>
+<div role="logo" class="bottom-right-corner"></div>
 
 <div class="dokuwiki">
 
   <div class="stylehead">
 
     <div class="header">
+
       <div class="hidden">
         <?php tpl_link(wl(),$conf['title'],'name="dokuwiki__top" id="dokuwiki__top"')?>
       </div>
-      
-      <div id="banner">
-        <div id="banner-top-left">
+
+      <div class="bar" id="bar__top">
+        <div class="bar-left" id="bar__topleft">
+          <ul>
+            <li><?php tpl_link(wl(), 'Wiki', 'class="action" accesskey="h" rel="nofollow" title="'.$conf['title'].'"')?></li>
+            <li><?php tpl_actionlink('edit')?></li>
+            <li><?php tpl_actionlink('history')?></li>
+            <li><?php tpl_actionlink('recent')?></li>
+            <li><?php tpl_actionlink('index')?></li>
+          </ul>
         </div>
-        <div id="banner-top-right">
+        <div class="bar-right" id="bar__topright">
+          <?php tpl_searchform()?>
         </div>
       </div>
-      
+
       <div class="clearer"></div>
-    </div>
 
-    <div class="bar" id="bar__top">
-      <div class="bar-left" id="bar__topleft">
-        <ul>
-          <li><?php tpl_link(wl(), 'Wiki', 'class="action" accesskey="h" rel="nofollow" title="'.$conf['title'].'"')?></li>
-          <li><?php tpl_actionlink('edit')?></li>
-          <li><?php tpl_actionlink('history')?></li>
-          <li><?php tpl_actionlink('recent')?></li>
-          <li><?php tpl_actionlink('index')?></li>
-        </ul>
+      <?php $translation = &plugin_load('helper','translation'); ?>
+      <?php if ($translation != NULL) { ?>
+      <div class="translation">
+        <?php echo $translation->showTranslations(); ?>
+        <?php tpl_link(wl('wiki:translation'), '?', 'class="action" rel="nofollow" title="Wiki Translation"')?>
       </div>
+      <?php } ?>
 
-      <div class="bar-right" id="bar__topright">
-        <?php tpl_searchform()?>
+      <div class="breadcrumbs">
+        <?php $conf['youarehere'] = true; tpl_youarehere() ?>
+        <?php //tpl_youarehere() ?>
       </div>
 
-      <div class="clearer"></div>
-    </div>
-
-    <?php $translation = &plugin_load('helper','translation'); ?>
-    <?php if ($translation != NULL) { ?>
-    <div class="translation">
-      <?php echo $translation->showTranslations(); ?>
-      <?php tpl_link(wl('wiki:translation'), '?', 'class="action" rel="nofollow" title="Wiki Translation"')?>
-    </div>
-    <?php } ?>
-
-    <div class="breadcrumbs">
-      <?php $conf['youarehere'] = true; tpl_youarehere() ?>
-      <?php //tpl_youarehere() ?>
     </div>
 
   </div>
diff --git a/lib/tpl/xfce/style.ini b/lib/tpl/xfce/style.ini
index 19c85f5..319e0b4 100644
--- a/lib/tpl/xfce/style.ini
+++ b/lib/tpl/xfce/style.ini
@@ -36,7 +36,8 @@ __background_alt__ = "#eee"
 __text_neu__       = "#666"
 __background_neu__ = "#f5f5f5"
 ; border color
-__border__         = "#b4b4b4"
+;__border__         = "#e0e0e0"
+__border__         = "#ccc"
 ;--------------------------------------------------------------------------
 
 ; other text and background colors
@@ -44,8 +45,10 @@ __text_other__       = "#ccc"
 __background_other__ = "#f7f9fa"
 
 ; these are used for links
-__extern__    = "#154374"
-__existing__  = "#154374"
+__meta__      = "#505050"
+__meta2__     = "#333"
+__extern__    = "#0C6AD4"
+__existing__  = "#0C6AD4"
 __missing__   = "#f30"
 __hover__     = "#f00"
 
diff --git a/lib/tpl/xfce/xfce-header.html b/lib/tpl/xfce/xfce-header.html
new file mode 100644
index 0000000..8963b91
--- /dev/null
+++ b/lib/tpl/xfce/xfce-header.html
@@ -0,0 +1,61 @@
+<style type="text/css">
+/*<!-- */
+div#xfce-header {
+ background-color: #333;
+ color: #fff;
+}
+div#xfce-header div#xh-left-box {
+ float: left;
+ line-height: 50px;
+}
+div#xfce-header div#xh-left-box h1 {
+ padding: 0 0.6em;
+ font-weight: normal;
+ font-size: 200%;
+ text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 3px;
+}
+div#xfce-header div#xh-right-box {
+ float: right;
+ line-height: 50px;
+ margin-right: 80px;
+ padding: 0 0.25em;
+}
+div#xfce-header div#xh-right-box ul {
+ list-style: none;
+ display: inline;
+ padding: 0;
+ margin: 0; 
+}
+div#xfce-header div#xh-right-box li {
+ display: inline;
+ padding: 0 0.6em;
+}
+div#xfce-header div#xh-right-box a {
+ font-weight: bold;
+ color: #fff;
+ text-decoration: none;
+}
+div#xfce-header div#xh-right-box a.active,
+div#xfce-header div#xh-right-box a:hover {
+ color: #69f;
+ text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px;
+}
+/* --> */
+</style>
+
+<div id="xfce-header">
+  <div id="xh-left-box"><h1>Xfce</h1></div>
+  <div id="xh-right-box">
+    <ul>
+      <li><a href="http://www.xfce.org/">Home</a></li>
+      <li><a href="http://docs.xfce.org/">Docs</a></li>
+      <li><a href="http://wiki.xfce.org/" class="active">Wiki</a></li>
+      <li><a href="http://forum.xfce.org/">Forum</a></li>
+      <li><a href="http://bugzilla.xfce.org/">Bugs</a></li>
+      <li><a href="http://blog.xfce.org/">Blog</a></li>
+      <li><a href="http://translations.xfce.org/">Translate</a></li>
+    </ul>
+  </div>
+  <div style="clear: both;"></div>
+</div>
+



More information about the Xfce4-commits mailing list