improve template : split theme from template itself

	rest of the job : template (yoga), themes (clear dark), and php to handle them


git-svn-id: http://piwigo.org/svn/trunk@960 68402e56-0260-453c-a942-63ccdbb3a9ee

22 files changed, 252 insertions, 178 deletions

diff --git a/template/yoga/about.tpl b/template/yoga/about.tpl
index 71abb3ce3..6efa0e9ee 100644
--- a/template/yoga/about.tpl
+++ b/template/yoga/about.tpl
@@ -1,8 +1,11 @@
 <div id="content">
-
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
+      <li>
+        <a href="{U_HOME}" title="{lang:return to homepage}">
+          <img src="{themeconf:icon_dir}/home.png" class="button" alt="{lang:home}"/>
+        </a>
+      </li>
     </ul>
     <h2>{lang:About}</h2>
   </div>
diff --git a/template/yoga/category.tpl b/template/yoga/category.tpl
index ae3720c2b..d4306c936 100644
--- a/template/yoga/category.tpl
+++ b/template/yoga/category.tpl
@@ -104,10 +104,10 @@
     <ul class="categoryActions">
       <li>&nbsp;</li>
       <!-- BEGIN caddie -->
-      <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/yoga/theme/caddie_add.png" class="button" alt="{lang:caddie}"/></a></li>
+      <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="{themeconf:icon_dir}/caddie_add.png" class="button" alt="{lang:caddie}"/></a></li>
       <!-- END caddie -->
       <!-- BEGIN edit -->
-      <li><a href="{edit.URL}" title="{lang:edit category informations}"><img src="./template/yoga/theme/category_edit.png" class="button" alt="{lang:edit}"/></a></li>
+      <li><a href="{edit.URL}" title="{lang:edit category informations}"><img src="{themeconf:icon_dir}/category_edit.png" class="button" alt="{lang:edit}"/></a></li>
       <!-- END edit -->
     </ul>
     <h2>{TITLE}</h2>
diff --git a/template/yoga/comments.tpl b/template/yoga/comments.tpl
index 725fb6184..6bf28d33b 100644
--- a/template/yoga/comments.tpl
+++ b/template/yoga/comments.tpl
@@ -3,7 +3,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="{themeconf:icon_dir}/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:User comments}</h2>
   </div>
diff --git a/template/yoga/content.css b/template/yoga/content.css
index f56058d5e..26182b09b 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -1,12 +1,8 @@
 /* $Id$ */
 #content {
-    margin-left: 24em;
     margin-right: 1em;
     margin-bottom: 1em; /* when it's longer than menu bar */
 }
-BODY#theAdminPage #content {
-    margin-left: 14em;
-}
 
 BODY#theCommentsPage #content,
 BODY#theRegisterPage #content,
@@ -21,33 +17,18 @@ BODY#theNotificationPage #content
   margin: 1em;
 }
 
-#content H2 {
+#content H2, H3 {
     margin-bottom: 1ex;
 }
 
 #content H3 {
-    margin-bottom: 1ex;
+    text-align: center;
 }
 
 /* Thumbnails customization */
-#content UL.thumbnails SPAN, #content UL.thumbnails SPAN.wrap2 A {
-  width: 140px;			/* max thumbnail width + 2px */
-}
-#content UL.thumbnails SPAN.wrap2 {
-  height: 140px;		/* max thumbnail height + 2px */
-}
-#content UL.thumbnails SPAN.wrap2 {
-  border: 1px solid #aaaaaa;	/* thumbnails border color and style */
-  -moz-border-radius: 4px;	/* round corners with Geko */
-  border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
-}
-#content UL.thumbnails SPAN.wrap2:hover {
-  border-color: yellow;		/* thumbnails border color when mouse cursor is over it */
-}
 #content UL.thumbnails SPAN.thumbLegend {
   font-size: 80%;		/* font size */
   height: 3em;			/* max legend height (don't set auto to be Geko friendly)*/
-  display: block;		/* display: none; if you don't want legend */
   overflow: hidden;		/* oversized legend is clipped */
 }
 
@@ -179,7 +160,9 @@ ul.categoryActions {
 }
 
 #content DIV.comment BLOCKQUOTE {
-  margin: 1em 0.5em 0.5em 150px; /* margin-left corresponds to maximum thumbnail width + ~10px */
+  margin-top: 1em;
+  margin-right: 0.5em; 
+  margin-bottom: 150px; 
   padding: 0.5em;
 }
 
diff --git a/template/yoga/default-colors.css b/template/yoga/default-colors.css
index 3f26e9208..5e76de8aa 100644
--- a/template/yoga/default-colors.css
+++ b/template/yoga/default-colors.css
@@ -1,34 +1,6 @@
-BODY {
-	color:#696969; /* dimgray */
-    /*color:#111111;*/
-    background: #ffffff;
-}
-
-H1 {
-    color: #696969;
-    background: transparent;
-}
-
-H2 {
-    color: #696969;
-    background: #d3d3d3;
-}
-
-H3 {
-    color: #696969;
-    background: #ffffff;
-}
-
-A {
-    color: #005e89;
-    background: transparent;
-}
-
-A:hover {
-    color: #858460;
-}
-
+/* $Id$ */
 
+/* others */
 .pleaseNote {
     background: #9c9c9c;
     color: #ffff99;
@@ -36,45 +8,10 @@ A:hover {
     font-weight: bold;
 }
 
-#imageHeaderBar {
-    background: #d3d3d3;
-}
-#imageToolBar {
-    background: #eeeeee;
-    border: 1px solid #d3d3d3;
-}
 #imageToolBar * {
     background: inherit;
 }
 
-#imageToolBar A, #imageToolBar A:hover {
-    border-bottom: none;
-}
-#imageToolBar A:hover {
-    background: #d3d3d3;
-}
-
-#theImage IMG {
-    border: 3px solid #d3d3d3;
-}
-A.navThumb, A.navThumb:hover {
-    border-bottom: none;
-}
-
-
-#content {
-    border: 1px solid #d3d3d3;
-    background:#eeeeee;
-}
-
-#content H3 {
-    text-align: center;
-}
-
-#content UL.thumbnail IMG {
-    border: 1px solid #a0a0a0;
-}
-
 /* So that non-links are slightly greyed out */
 #content .navigationBar {
     color: #696969;
@@ -83,43 +20,10 @@ A.navThumb, A.navThumb:hover {
     color: #000000;
 }
 
-
-#menubar DL {
-    border: 1px solid #d3d3d3;
-    background: #eeeeee;
-}
-
-#menubar DT {
-    color: #696969;
-    background: #d3d3d3;
-}
-
-#menubar DD {
-    background:#eeeeee;
-}
-
-/* User comments */
-#content DIV.comment {
-  border: 1px solid gray;
-}
-
-#content DIV.comment  A.illustration IMG {
-  border: 1px solid gray;
-}
-
-#comments DIV.comment BLOCKQUOTE {
-    border: 1px solid #d3d3d3;
-    border-left: 2px solid #696969;
-}
-
 /* Tables & forms */
-.throw {
-	background-color:white;
-}
 input, select, textarea {
 	color:black;
-	background-color: lightgrey;
-        border: 1px solid gray;
+	background-color: #d3d3d3;	/* lightgrey */
 }
 
 #errors { /* Errors display */
@@ -129,7 +33,7 @@ input, select, textarea {
   text-align: left;
   margin: 5px;
   border: 1px solid red;
-  background-image: url(admin/images/errors.png);
+  background-image: url(../../template-common/icons/admin/errors.png);
   background-repeat: no-repeat;
   background-position: top right;
   padding: 10px 50px 10px 10px;
@@ -146,20 +50,15 @@ input, select, textarea {
 #infos {
   text-align: left;
   background-color: palegreen;
-  background-image: url(admin/images/infos.png);
+  background-image: url(../../template-common/icons/admin/infos.png);
   background-repeat: no-repeat;
   background-position: top right;
   color: darkgreen;
   font-weight: bold;
   margin: 5px;
-  border:1px solid gray;
   padding: 10px 50px 10px 10px;
 }
 
 LEGEND {
   font-style: italic;
 }
-
-FIELDSET {
-  border: 1px solid gray;
-}
diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css
index 6b5c32122..bbfd46006 100644
--- a/template/yoga/default-layout.css
+++ b/template/yoga/default-layout.css
@@ -3,6 +3,7 @@
 @import "content.css";
 @import "image.css";
 @import "popuphelp.css";
+@import "../../template-common/default-layout.css";
 
 /* $Id$ */
 
diff --git a/template/yoga/header.tpl b/template/yoga/header.tpl
index 5bead6cfc..612fa0121 100644
--- a/template/yoga/header.tpl
+++ b/template/yoga/header.tpl
@@ -4,19 +4,13 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset={CONTENT_ENCODING}">
 <!-- BIG FIX ME BELOW (paths) -->
-<link rel="stylesheet" type="text/css" href="template/yoga/default-layout.css">
-<link rel="stylesheet" type="text/css" href="template/yoga/default-colors.css">
+<link rel="stylesheet" type="text/css" href="template/{themeconf:template}/default-layout.css">
 <!-- the next css is used to fix khtml (Konqueror/Safari) issue
-the "text/nonsense" prevents geko based browsers to load it -->
-<link rel="stylesheet" type="text/nonsense" href="template/yoga/fix-khtml.css">
-<link rel="stylesheet" type="text/css" media="print" href="template/yoga/print.css">
-<!-- AN OTHER FIX ME -->
-<style type="text/css">
-.notDoneYet {
-        background: yellow;
-        color: red;
-}
-</style>
+the "text/nonsense" prevents gecko based browsers to load it -->
+<link rel="stylesheet" type="text/nonsense" href="template/{themeconf:template}/fix-khtml.css">
+<link rel="stylesheet" type="text/css" media="print" href="template/{themeconf:template}/print.css">
+<link rel="stylesheet" type="text/css" href="template/{themeconf:template}/default-colors.css">
+<link rel="stylesheet" type="text/css" href="template/{themeconf:template}/theme/{themeconf:theme}/theme.css">
 <!-- BEGIN refresh -->
 <meta http-equiv="refresh" content="{REFRESH_TIME};url={U_REFRESH}">
 <!-- END refresh -->
diff --git a/template/yoga/identification.tpl b/template/yoga/identification.tpl
index 93e425a28..f5195e011 100644
--- a/template/yoga/identification.tpl
+++ b/template/yoga/identification.tpl
@@ -3,9 +3,9 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_LOST_PASSWORD}" title="{lang:Forgot your password?}"><img src="template/yoga/theme/lost_password.png" class="button" alt="{lang:Forgot your password?}"></a></li>
-      <li><a href="{U_REGISTER}" title="{lang:Create a new account}"><img src="./template/yoga/theme/register.png" class="button" alt="{lang:register}"/></a></li>
-      <li><a href="{U_HOME}" title="{lang:Go through the gallery as a visitor}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
+      <li><a href="{U_LOST_PASSWORD}" title="{lang:Forgot your password?}"><img src="{themeconf:icon_dir}/lost_password.png" class="button" alt="{lang:Forgot your password?}"></a></li>
+      <li><a href="{U_REGISTER}" title="{lang:Create a new account}"><img src="{themeconf:icon_dir}/register.png" class="button" alt="{lang:register}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:Go through the gallery as a visitor}"><img src="{themeconf:icon_dir}/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Identification}</h2>
   </div>
@@ -48,8 +48,8 @@
 </form>
  
   <p>
-    <a href="{U_REGISTER}"><img src="template/yoga/theme/register.png" class="button" alt=""> {L_REGISTER}</a>
-    <a href="{U_LOST_PASSWORD}"><img src="template/yoga/theme/lost_password.png" class="button" alt=""> {lang:Forgot your password?}</a>
+    <a href="{U_REGISTER}"><img src="{themeconf:icon_dir}/register.png" class="button" alt=""> {L_REGISTER}</a>
+    <a href="{U_LOST_PASSWORD}"><img src="{themeconf:icon_dir}/lost_password.png" class="button" alt=""> {lang:Forgot your password?}</a>
   </p>
 
 </div> <!-- content -->
diff --git a/template/yoga/menubar.css b/template/yoga/menubar.css
index f5a7c80a3..3b136fced 100644
--- a/template/yoga/menubar.css
+++ b/template/yoga/menubar.css
@@ -1,10 +1,5 @@
 #menubar {
-    /* Do not put font-size: 90% here for it makes it harder to have correct
-       margin for contentarea */
     float: left;
-    left: 0px;
-
-    width: 22em;
     margin: 0 0 10px 1em;
     padding: 0;
     /* Fix against the "double margin of a floated item" IE bug */
@@ -13,10 +8,6 @@
     text-align: left; /* follow-up of the "be nice to IE5" rule */
 }
 
-BODY#theAdminPage #menubar {
-    width: 12em;
-}
-
 #menubar DL, #menubar DT, #menubar DD {
     margin: 0; padding: 0; display: block;
 }
@@ -24,11 +15,9 @@ BODY#theAdminPage #menubar {
 /* H2 properties copied here */
 #menubar DT {
     font-weight: bold; /* default for h2 */
-
     margin: 0;
     padding: 5px 10px;
     font-size: 120%;
-
     text-align: center;
 }
 
diff --git a/template/yoga/notification.tpl b/template/yoga/notification.tpl
index 721b13982..d4b178b42 100644
--- a/template/yoga/notification.tpl
+++ b/template/yoga/notification.tpl
@@ -2,7 +2,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="{themeconf:icon_dir}/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Notification}</h2>
   </div>
diff --git a/template/yoga/password.tpl b/template/yoga/password.tpl
index 685e4e605..081722cc1 100644
--- a/template/yoga/password.tpl
+++ b/template/yoga/password.tpl
@@ -3,7 +3,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:Go through the gallery as a visitor}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:Go through the gallery as a visitor}"><img src="{themeconf:icon_dir}/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Password forgotten}</h2>
   </div>
diff --git a/template/yoga/picture.tpl b/template/yoga/picture.tpl
index 04b5b6ff5..6932eb1f6 100644
--- a/template/yoga/picture.tpl
+++ b/template/yoga/picture.tpl
@@ -14,32 +14,32 @@
 <div id="imageToolBar">
 
 <div class="randomButtons">
-  <a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}"><img src="template/yoga/theme/slideshow.png" class="button" alt="{L_SLIDESHOW}"></a>
-  <a href="{U_METADATA}" title="{L_PICTURE_METADATA}"><img src="template/yoga/theme/metadata.png" class="button" alt="{L_PICTURE_METADATA}"></a>
+  <a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}"><img src="{themeconf:icon_dir}/slideshow.png" class="button" alt="{L_SLIDESHOW}"></a>
+  <a href="{U_METADATA}" title="{L_PICTURE_METADATA}"><img src="{themeconf:icon_dir}/metadata.png" class="button" alt="{L_PICTURE_METADATA}"></a>
 <!-- BEGIN representative -->
-  <a href="{representative.URL}" title="{lang:set as category representative}"><img src="template/yoga/theme/representative.png" class="button" alt="{lang:representative}" /></a>
+  <a href="{representative.URL}" title="{lang:set as category representative}"><img src="{themeconf:icon_dir}/representative.png" class="button" alt="{lang:representative}" /></a>
 <!-- END representative -->
 <!-- BEGIN favorite -->
   <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" alt="{favorite.FAVORITE_ALT}"></a>
 <!-- END favorite -->
 <!-- BEGIN download -->
-  <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}"><img src="template/yoga/theme/save.png" class="button" alt="{L_DOWNLOAD}"></a>
+  <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}"><img src="{themeconf:icon_dir}/save.png" class="button" alt="{L_DOWNLOAD}"></a>
 <!-- END download -->
 <!-- BEGIN admin -->
-  <a href="{U_ADMIN}" title="{L_ADMIN}"><img src="template/yoga/theme/preferences.png" class="button" alt="{L_ADMIN}"></a>
+  <a href="{U_ADMIN}" title="{L_ADMIN}"><img src="{themeconf:icon_dir}/preferences.png" class="button" alt="{L_ADMIN}"></a>
 <!-- END admin -->
 <!-- BEGIN caddie -->
-  <a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/yoga/theme/caddie_add.png" class="button" alt="{lang:caddie}"/></a>
+  <a href="{caddie.URL}" title="{lang:add to caddie}"><img src="{themeconf:icon_dir}/caddie_add.png" class="button" alt="{lang:caddie}"/></a>
 <!-- END caddie -->
 </div>
 
 <div class="navButtons">
 <!-- BEGIN next -->
-  <a class="navButton next" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}"><img src="template/yoga/theme/right.png" class="button" alt="next"></a>
+  <a class="navButton next" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}"><img src="{themeconf:icon_dir}/right.png" class="button" alt="next"></a>
 <!-- END next -->
-  <a class="navButton up" href="{U_UP}" title="{L_UP_HINT}"><img src="template/yoga/theme/up.png" class="button" alt="{L_UP_ALT}"></a>
+  <a class="navButton up" href="{U_UP}" title="{L_UP_HINT}"><img src="{themeconf:icon_dir}/up.png" class="button" alt="{L_UP_ALT}"></a>
 <!-- BEGIN previous -->
-  <a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}"><img src="template/yoga/theme/left.png" class="button" alt="previous"></a>
+  <a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}"><img src="{themeconf:icon_dir}/left.png" class="button" alt="previous"></a>
 <!-- END previous -->
 </div>
 
@@ -164,7 +164,7 @@
   <!-- BEGIN delete -->
   <p class="userCommentDelete">
   <a href="{comments.comment.delete.U_COMMENT_DELETE}" title="{L_DELETE_COMMENT}">
-    <img src="template/yoga/theme/delete.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{L_DELETE}]"/>
+    <img src="{themeconf:icon_dir}/delete.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{L_DELETE}]"/>
   </a>
   </p>
   <!-- END delete -->
diff --git a/template/yoga/popuphelp.tpl b/template/yoga/popuphelp.tpl
index 6c892312f..3b3e27328 100644
--- a/template/yoga/popuphelp.tpl
+++ b/template/yoga/popuphelp.tpl
@@ -2,4 +2,4 @@
 {HELP_CONTENT}
 </div> <!-- content -->
 
-<p id="pageBottomActions"><a href="#" onclick="window.close();" title="{lang:Close this window}"><img src="template/yoga/theme/exit.png" class="button" alt="close"></a></p>
+<p id="pageBottomActions"><a href="#" onclick="window.close();" title="{lang:Close this window}"><img src="{themeconf:icon_dir}/exit.png" class="button" alt="close"></a></p>
diff --git a/template/yoga/profile.tpl b/template/yoga/profile.tpl
index a800cc142..3a40df5bc 100644
--- a/template/yoga/profile.tpl
+++ b/template/yoga/profile.tpl
@@ -12,7 +12,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_RETURN}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
+      <li><a href="{U_RETURN}" title="{lang:return to homepage}"><img src="{themeconf:icon_dir}/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Profile}</h2>
   </div>
diff --git a/template/yoga/register.tpl b/template/yoga/register.tpl
index 92f647ff7..ee69ae021 100644
--- a/template/yoga/register.tpl
+++ b/template/yoga/register.tpl
@@ -4,7 +4,7 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="{themeconf:icon_dir}/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Registration}</h2>
   </div>
diff --git a/template/yoga/search.tpl b/template/yoga/search.tpl
index 1867cb2c5..648fa12c9 100644
--- a/template/yoga/search.tpl
+++ b/template/yoga/search.tpl
@@ -2,8 +2,8 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="template/yoga/theme/help.png" class="button" alt="(?)"></a></li>
-      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/yoga/theme/home.png" class="button" alt="{lang:home}"/></a></li>
+      <li><a href="{U_HELP}" onclick="popuphelp(this.href); return false;" title="{lang:Help}"><img src="{themeconf:icon_dir}/help.png" class="button" alt="(?)"></a></li>
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="{themeconf:icon_dir}/home.png" class="button" alt="{lang:home}"/></a></li>
     </ul>
     <h2>{lang:Search}</h2>
   </div>
diff --git a/template/yoga/theme/clear/theme.css b/template/yoga/theme/clear/theme.css
new file mode 100644
index 000000000..1489ae26c
--- /dev/null
+++ b/template/yoga/theme/clear/theme.css
@@ -0,0 +1,78 @@
+/* $Id$ */
+
+/* text color */
+BODY, H1, H2, H3, DT {
+  color:#696969;	/* dimgray */
+}
+
+/* backgrounds */
+BODY, H3, .throw {
+  background-color: #ffffff;	/* white */
+}
+
+H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover {
+  background-color: #d3d3d3;
+}
+
+#menubar DL, #content, #imageToolBar {
+  background-color: #eeeeee;
+}
+
+/* borders */
+#menubar DL, #content, #imageToolBar, #theImage IMG,
+#comments DIV.comment BLOCKQUOTE {
+  border: 1px solid #d3d3d3;
+}
+
+#theImage IMG {
+  border-width: 3px;
+}
+
+#content UL.thumbnail IMG {
+    border: 1px solid #a0a0a0;
+}
+
+FIELDSET, INPUT, SELECT, TEXTAREA,
+#content DIV.comment  A.illustration IMG, #infos {
+  border: 1px solid gray;
+}
+
+#comments DIV.comment BLOCKQUOTE {
+  border-left: 2px solid #696969;
+}
+
+#content UL.thumbnails SPAN.wrap2 {
+  border: 1px solid #aaaaaa;	/* thumbnails border color and style */
+  -moz-border-radius: 4px;	/* round corners with Geko */
+  border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
+}
+#content UL.thumbnails SPAN.wrap2:hover {
+  border-color: yellow;		/* thumbnails border color when mouse cursor is over it */
+}
+
+/* links */
+A {
+    color: #005e89;
+    background: transparent;
+}
+
+A:hover {
+    color: #858460;
+}
+
+#imageToolBar A, #imageToolBar A:hover {
+    border-bottom: none;
+}
+
+A.navThumb, A.navThumb:hover {
+    border-bottom: none;
+}
+
+/* others */
+.pleaseNote {
+    background: #9c9c9c;
+    color: #ffff99;
+    padding: 1ex;
+    font-weight: bold;
+}
+
diff --git a/template/yoga/theme/clear/themeconf.inc.php b/template/yoga/theme/clear/themeconf.inc.php
new file mode 100644
index 000000000..0a96b94aa
--- /dev/null
+++ b/template/yoga/theme/clear/themeconf.inc.php
@@ -0,0 +1,9 @@
+<?php
+$themeconf = array(
+  'template' => 'yoga',
+  'theme' => 'clear',
+  'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon',
+  'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/admin',
+  'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mymetypes'
+);
+?>
diff --git a/template/yoga/theme/dark/images/tableh1_bg.png b/template/yoga/theme/dark/images/tableh1_bg.png
new file mode 100644
index 000000000..c7785d0f6
--- /dev/null
+++ b/template/yoga/theme/dark/images/tableh1_bg.png
diff --git a/template/yoga/theme/dark/images/tableh2_bg.png b/template/yoga/theme/dark/images/tableh2_bg.png
new file mode 100644
index 000000000..d8c29f93d
--- /dev/null
+++ b/template/yoga/theme/dark/images/tableh2_bg.png
diff --git a/template/yoga/theme/dark/theme.css b/template/yoga/theme/dark/theme.css
new file mode 100644
index 000000000..c3c9f6a45
--- /dev/null
+++ b/template/yoga/theme/dark/theme.css
@@ -0,0 +1,109 @@
+/* $Id$ */
+
+/* text color */
+BODY, H1, H3, DT {
+  color:#e0e0e0;
+}
+
+H2, #menubar DT, .throw {
+    color: #fff48e;
+}
+
+#content .navigationBar {
+    color: #aaaaaa;
+}
+#content .pageNumberSelected {
+    color: #000000;
+}
+
+/* backgrounds */
+BODY {
+  background-color: #000000;
+}
+
+H2, H3, #menubar DT, #imageHeaderBar, #imageToolBar A:hover, .throw {
+  background-color: #3f3f3f;
+}
+
+#menubar DL, #content, #imageToolBar {
+  background-color: #5f5f5f;
+}
+
+H2, #menubar DT, .throw  {
+    background-image: url(images/tableh1_bg.png);
+}
+
+#imageHeaderBar {
+    background-image: url(images/tableh2_bg.png);
+    background-repeat: repeat-x;
+    background-position: center;
+}
+
+/* borders */
+#menubar DL, #content, #imageToolBar, #theImage IMG,
+#comments DIV.comment BLOCKQUOTE {
+  border: 1px solid #000000;
+}
+
+#theImage IMG {
+  border-width: 3px;
+}
+
+#content UL.thumbnail IMG {
+    border: 1px solid #a0a0a0;
+}
+
+FIELDSET, INPUT, SELECT, TEXTAREA,
+#content DIV.comment  A.illustration IMG, #infos {
+  border: 1px solid gray;
+}
+
+#comments DIV.comment BLOCKQUOTE {
+  border-left: 2px solid #696969;
+}
+
+#content UL.thumbnails SPAN.wrap2 {
+  border: 1px solid #aaaaaa;	/* thumbnails border color and style */
+  -moz-border-radius: 4px;	/* round corners with Geko */
+  border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
+}
+#content UL.thumbnails SPAN.wrap2:hover {
+  border-color: yellow;		/* thumbnails border color when mouse cursor is over it */
+}
+
+H2, #menubar DT, #imageHeaderBar {
+    border-bottom: 1px solid #000000;
+}
+
+/* links */
+A {
+    color: #FFFFFF;
+}
+
+A:hover {
+    color: #FFF48E;
+}
+
+#imageToolBar A, #imageToolBar A:hover {
+    border-bottom: none;
+}
+
+A.navThumb, A.navThumb:hover {
+    border-bottom: none;
+}
+
+/* others */
+.pleaseNote {
+    background: #9c9c9c;
+    color: #ffff99;
+    padding: 1ex;
+    font-weight: bold;
+}
+#the_page {
+    border: 1px solid #e0e0e0;
+    padding-top: 5px;	
+    padding-bottom:30px;
+    text-align:center;
+    display:block;
+    background:#3f3f3f;
+}
diff --git a/template/yoga/theme/dark/themeconf.inc.php b/template/yoga/theme/dark/themeconf.inc.php
new file mode 100644
index 000000000..1d2fb319e
--- /dev/null
+++ b/template/yoga/theme/dark/themeconf.inc.php
@@ -0,0 +1,9 @@
+<?php
+$themeconf = array(
+  'template' => 'yoga',
+  'theme' => 'dark',
+  'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon',
+  'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/admin',
+  'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mymetypes'
+);
+?>