- New template for picture.tpl

- Creation of a menu bar in the picture display


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

10 files changed, 200 insertions, 150 deletions

diff --git a/template/default/default.css b/template/default/default.css
index b41fdfaf0..7e2d58e95 100644
--- a/template/default/default.css
+++ b/template/default/default.css
@@ -1,3 +1,33 @@
+/*POSITION*/
+#gauche,#droite
+{
+  float:left;
+  width:18%;
+  text-align:left;
+}
+
+#centre
+{
+  float:left;
+  width:64%;
+  text-align:center;
+}
+
+#droite
+{
+  text-align:right;
+}
+
+#left
+{
+  float:left; 
+}
+
+#right
+{
+  float:right; 
+}
+
 /* MAIN STYLES */
 
 body {
@@ -26,8 +56,17 @@ a:hover { text-decoration:none; color:#FFF48E;}
 a.none:hover { text-decoration:none;}
 a.image:hover { text-decoration:none;}
 a.thumbLink:hover { text-decoration:none;}
-/*a.adminMenu:hover{ color : #C6B78E; }
-a.adminMenu{ color : #FFF48E; }*/
+
+/* LAYOUT STYLE */
+
+.main {
+	background-color:#444444;
+	border: 1px solid #E0E0E0; 
+	width:100%;
+	padding-bottom:30px;
+	text-align:center;
+	display:block;
+}
 
 /* Navigation styles */
 
@@ -46,18 +85,12 @@ a.adminMenu{ color : #FFF48E; }*/
   text-align:center;
 }
 
-.titrePage 
+.titrePage
 {
+  font-family: 'Trebuchet MS', Verdana, sans-serif;
   text-align:left;
   font-size:16px;
-  margin-bottom:5px;
-}
-
-.titreImg{
-  text-align:center;
-  font-size:16px;
-  color:#FFF48E;
-  font-weight:600;
+  /*margin-bottom:5px;*/
 }
 
 .menu {
@@ -69,7 +102,6 @@ a.adminMenu{ color : #FFF48E; }*/
 
 ul.menu {
   text-align:left;
-  /* list-style-image : url(theme/collapsed.gif); */
   list-style-type: square ;
   padding-left:15px;
   margin:5px;
@@ -96,6 +128,47 @@ ul.menu {
 	margin : 10px 4px 10px 4px;
 }
 
+#imgBarMenu
+{
+  width:100%;
+  display:block;
+  height:25px;
+  background-image: url(theme/button_bg.gif);
+  border-bottom: 1px solid #000000;
+}
+  
+.imgMenu
+{
+  width:48px;
+  border:none;
+  float:left;
+}
+
+.imgMenu img
+{
+ border:none;
+ text-align:center;
+ margin-top:4px;
+}
+  
+.imgMenu a
+{
+  display:block;
+  background-image: url(theme/button_bg.gif);
+  height: 25px;
+  border-bottom: 1px solid #000000;
+  border-left: 1px solid #838383;
+  border-right: 1px solid #000000;
+}
+
+.imgMenu a:hover
+{
+  background-image:url(theme/tableh1_bg.gif);
+  border-bottom: 1px solid #3F3F3F;
+  border-left: 1px solid #3F3F3F;
+  border-right: 1px solid #3F3F3F;
+}
+
 .commentImage {
   text-align:justify;
   font-style:italic;
@@ -106,20 +179,10 @@ ul.menu {
 
 .nameImage {
   text-align:center;
-  font-size:24px;
-  background-color: #666666;
-  border-top: 1px solid #222222;
-  border-bottom: 1px solid #222222;
+  font-size:20px;
 }
 /* Table styles */
 
-.main {
-	background-color:#444444;
-	border: 1px solid #E0E0E0; 
-	width:100%;
-	padding-bottom:30px;
-}
-
 .table1, .home
 {
   border: 1px solid #000000;
@@ -349,22 +412,3 @@ span.update_error_element, span.update_category_error {
 .update_summary_del {
   color:#ffe1e1;
 }
-
-div.remoteOutput {
-  background-color:#444444;
-  border:1px solid black;
-  margin:10px;
-  text-align:left;
-}
-
-li.remoteInfo {
-  color:gray;
-}
-
-li.remoteWarning {
-  color:#ffe1e1;
-}
-
-li.remoteError {
-  color:orange;
-}
\ No newline at end of file
diff --git a/template/default/footer.tpl b/template/default/footer.tpl
index bceb9e234..2dfa4db57 100644
--- a/template/default/footer.tpl
+++ b/template/default/footer.tpl
@@ -1,24 +1,21 @@
-     <div class="copyright">
-     <!-- BEGIN debug -->
-     {L_GEN_TIME} {TIME} ::
-     <!-- END debug -->
+ <div class="copyright">
+ <!-- BEGIN debug -->
+ {L_GEN_TIME} {TIME} ::
+ <!-- END debug -->
 
-     <!-- Please, do not remove this copyright. If you really want to,
-          contact me pierrick@phpwebgallery.net to find a solution on how
-          to show the origin of the script...-->
+ <!-- Please, do not remove this copyright. If you really want to,
+	  contact me pierrick@phpwebgallery.net to find a solution on how
+	  to show the origin of the script...-->
 
-      Powered by <a href="http://www.phpwebgallery.net" class="back">PhpWebGallery</a>
-      {VERSION} :: 
+  Powered by <a href="http://www.phpwebgallery.net" class="back">PhpWebGallery</a>
+  {VERSION} :: 
 
-      {L_SEND_MAIL}
-      <a href="mailto:{MAIL}?subject={L_TITLE_MAIL}">
-       <span style="font-weight:bold;">{L_WEBMASTER}</span>
-      </a>
+  {L_SEND_MAIL}
+  <a href="mailto:{MAIL}?subject={L_TITLE_MAIL}">
+   <span style="font-weight:bold;">{L_WEBMASTER}</span>
+  </a>
 
-     </div>
-
-    </td>
-   </tr>
-  </table>
+ </div>
+ </div>
  </body>
 </html>
diff --git a/template/default/header.tpl b/template/default/header.tpl
index d19afdcfa..9c4d355e8 100644
--- a/template/default/header.tpl
+++ b/template/default/header.tpl
@@ -13,6 +13,4 @@
  </head>
 
  <body>
-  <table class="main">
-   <tr>
-    <td>
\ No newline at end of file
+ <div class="main">
\ No newline at end of file
diff --git a/template/default/picture.tpl b/template/default/picture.tpl
index 981174558..7a39e34be 100644
--- a/template/default/picture.tpl
+++ b/template/default/picture.tpl
@@ -1,84 +1,101 @@
-    <!-- BEGIN information -->
-    <div class="information">{information.INFORMATION}</div>
-    <!-- END information -->
-    <!-- BEGIN start_slideshow -->
-    <div style="text-align:center;margin-bottom:5px;">
-      [ {L_SLIDESHOW} :
-      <!-- BEGIN second -->
-      <a href="{start_slideshow.second.U_SLIDESHOW}" class="back" style="font-weight:bold;">{start_slideshow.second.SLIDESHOW_SPEED}</a>
-      <!-- END second -->
-      {L_TIME} ]
-    </div>
-    <!-- END start_slideshow -->
-    <!-- BEGIN stop_slideshow -->
-    <div style="text-align:center;margin-bottom:5px;">
-      [ <a href="{stop_slideshow.U_SLIDESHOW}" class="back" style="font-weight:bold;">{L_STOP_SLIDESHOW}</a> ]
-    </div>
-    <!-- END stop_slideshow -->
-    <table style="width:100%;height:100%;">
-      <tr align="center" valign="middle">
-        <td colspan="3" style="width:100%;"> 
-		<div class="table2">
-		<div class="titrePage">{CATEGORY}</div>
-		<div class="titreImg">{PHOTO}</div>
-          <a href="{U_HOME}">
-            <img class="image" src="{SRC_IMG}" style="width:{WIDTH_IMG}px;height:{HEIGHT_IMG}px;" alt="{ALT_IMG}"/>
-          </a>
-		  <div class="nameImage">{TITLE}</div>
-          <!-- BEGIN download -->
-          <div class="download">[ <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD_HINT}">{L_DOWNLOAD}</a> ]</div>
-          <!-- END download -->
-		  <!-- BEGIN legend -->
-          <div class="commentImage">{legend.COMMENT_IMG}</div>
-		  <!-- END legend -->
-		  </div>
-          <table style="width:100%;">   
-            <tr align="center" valign="middle">
-			  <td style="width:30%;">
-				<!-- BEGIN previous -->
-				<a class="none" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}">
-				<img style="border:none;" width="30" height="100" src="template/default/theme/left-arrow.jpg" alt="" />
-				  <img src="{previous.IMG}" class="thumbLink" style="margin-right:10px;margin-left:5px;" alt="{previous.TITLE_IMG}"/>
-				  </a>
-				<!-- END previous -->
-			  </td>
-			  <td style="width:40%;">
-			  <table style="margin:auto;margin-top:5px;margin-bottom:5px;">
-                  <!-- BEGIN info_line -->
-                  <tr>
-                     <td class="menu" style="font-weight:bold;">{info_line.INFO} : </td>
-                     <td class="menu" style="text-align:right;">{info_line.VALUE}</td>
-                  </tr>
-                  <!-- END info_line -->
-                </table>
-			  </td>
-			  <td style="width:30%;">
-				<!-- BEGIN next -->
-				  <a  class="none" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}">
-				  <img class="thumbLink" src="{next.IMG}" style="margin-right:10px;margin-left:5px;" alt="{next.TITLE_IMG}"/>
-				  <img style="border:none;" class="thumbLink" width="30" height="100" src="template/default/theme/right-arrow.jpg" alt="" />
-				  </a>
-				<!-- END next -->
-			  </td>
-			</tr>
-          </table>
-          <!-- BEGIN favorite -->
-          <div class="menu" style="text-align:center;margin:5px;">
-          <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}">
-  			<img src="{favorite.FAVORITE_IMG}" style="border:none;margin-left:5px;" alt="" />{favorite.FAVORITE_ALT}
-		  </a>
-          </div>
-          <!-- END favorite -->
+<!-- BEGIN information -->
+<div class="information">{information.INFORMATION}</div>
+<!-- END information -->
+<div class="titrePage">
+  <div id="gauche">{CATEGORY}</div>
+  <div id="centre" class="nameImage">{TITLE}</div>
+  <div id="droite">{PHOTO}</div>
+</div>
+
+<div id="imgBarMenu">
+<div class="imgMenu" id="left">
+  <a href="{U_HOME}" title="{L_HOME}">
+	<img src="template/default/theme/categories.gif" alt="{L_HOME}" />
+  </a>
+</div>
+<div class="imgMenu" id="left">
+  <a href="{U_SLIDESHOW}" title="{L_SLIDESHOW}">
+	<img src="template/default/theme/slideshow.gif" alt="{L_SLIDESHOW}" />
+  </a>
+</div>
+<div class="imgMenu" id="left">
+  <a href="{U_METADATA}" title="{L_PICTURE_METADATA}">
+	<img src="template/default/theme/metadata.gif" alt="{L_PICTURE_METADATA}" />
+  </a>
+</div>
+<!-- BEGIN favorite -->
+<div class="imgMenu" id="right">
+  <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}">
+	<img src="{favorite.FAVORITE_IMG}" alt="{favorite.FAVORITE_ALT}" />
+  </a>
+</div>
+<!-- END favorite -->
+<!-- BEGIN download -->
+<div class="imgMenu" id="right">
+  <a href="{download.U_DOWNLOAD}" title="{L_DOWNLOAD}">
+	<img src="template/default/theme/download.gif" alt="{L_DOWNLOAD}" />
+  </a>
+</div>
+<!-- END download -->
+<!-- BEGIN ecard -->
+<div class="imgMenu" id="right">
+  <a href="{ecard.U_ECARD}" title="{L_DOWNLOAD}">
+	<img src="template/default/theme/eCard.gif" alt="{L_DOWNLOAD}" />
+  </a>
+</div>
+<!-- END ecard -->
+<!-- BEGIN admin -->
+<div class="imgMenu" id="right">
+  <a href="{U_ADMIN}" title="{L_ADMIN}">
+	<img src="template/default/theme/properties.gif" alt="{L_ADMIN}" />
+  </a>
+</div>
+<!-- END admin -->
+</div>
 
-          <!-- BEGIN show_metadata -->
-            [ <a href="{show_metadata.URL}">{L_PICTURE_SHOW_METADATA}</a> ]
-          <!-- END show_metadata -->
+<a href="{U_HOME}">
+  <img class="image" src="{SRC_IMG}" style="width:{WIDTH_IMG}px;height:{HEIGHT_IMG}px;" alt="{ALT_IMG}"/>
+</a>
+<!-- BEGIN legend -->
+<div class="commentImage">{legend.COMMENT_IMG}</div>
+<!-- END legend -->
 
-          <!-- BEGIN hide_metadata -->          
-            [ <a href="{hide_metadata.URL}">{L_PICTURE_HIDE_METADATA}</a> ]
-          <!-- END hide_metadata -->
+<!-- BEGIN stop_slideshow -->
+<div style="text-align:center;margin-bottom:5px;">
+  [ <a href="{stop_slideshow.U_SLIDESHOW}" class="back" style="font-weight:bold;">{L_STOP_SLIDESHOW}</a> ]
+</div>
+<!-- END stop_slideshow -->
 
-          <!-- BEGIN metadata -->
+<div id="gauche">
+&nbsp;
+  <!-- BEGIN previous -->
+	<a class="none" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}">
+	<img style="border:none;" width="30" height="100" src="template/default/theme/left-arrow.jpg" alt="" />
+	  <img src="{previous.IMG}" class="thumbLink" style="margin-right:10px;margin-left:5px;" alt="{previous.TITLE_IMG}"/>
+	  </a>
+  <!-- END previous -->
+</div>
+<div id="centre">
+  <table style="margin:auto;margin-top:5px;margin-bottom:5px;">
+	  <!-- BEGIN info_line -->
+	  <tr>
+		 <td class="menu" style="font-weight:bold;">{info_line.INFO} : </td>
+		 <td class="menu" style="text-align:right;">{info_line.VALUE}</td>
+	  </tr>
+	  <!-- END info_line -->
+  </table>
+</div>
+<div id="droite">
+  <!-- BEGIN next -->
+  <a  class="none" href="{next.U_IMG}" title="{L_NEXT_IMG}{next.TITLE_IMG}">
+	  <img class="thumbLink" src="{next.IMG}" style="margin-right:10px;margin-left:5px;" alt="{next.TITLE_IMG}"/>
+	  <img style="border:none;" class="thumbLink" width="30" height="100" src="template/default/theme/right-arrow.jpg" alt="" />
+	  </a>
+  <!-- END next -->
+  &nbsp;
+</div>
+<div style="clear:both"></div>
+         <!-- BEGIN metadata -->
           <table class="metadata">
             <!-- BEGIN headline -->
             <tr>
@@ -103,15 +120,9 @@
           </div>
           <!-- END rate -->
  
-          <!-- BEGIN modification -->
-          <div class="menu" style="text-align:center;margin:5px;">
-            [ <a href="{U_ADMIN}">{L_ADMIN}</a> ]
-          </div>
-          <!-- END modification -->
+
           <div style="text-align:center;">{L_BACK}</div>
-        </td>
-        <td>&nbsp;</td>
-      </tr>
+<table class="tablecompact">
       <!-- BEGIN comments -->
       <tr align="center" valign="middle">
         <td colspan="3" class="table2">
@@ -128,7 +139,7 @@
 					  <td colspan="2" class="commentDate">
 					  {comments.comment.COMMENT_DATE}
 					<!-- BEGIN delete -->
-					  <a href="{comments.comment.delete.U_COMMENT_DELETE}" title="{L_DELETE_COMMENT}"><img src="{T_DEL_IMG}" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{L_DELETE}]"/></a>
+					  <a href="{comments.comment.delete.U_COMMENT_DELETE}" title="{L_DELETE_COMMENT}"><img src="template/default/theme/delete.gif" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{L_DELETE}]"/></a>
 					<!-- END delete -->
 					  </td>
 					</tr>
diff --git a/template/default/theme/categories.gif b/template/default/theme/categories.gif
new file mode 100644
index 000000000..cd3084434
--- /dev/null
+++ b/template/default/theme/categories.gif
diff --git a/template/default/theme/download.gif b/template/default/theme/download.gif
new file mode 100644
index 000000000..bf44419dd
--- /dev/null
+++ b/template/default/theme/download.gif
diff --git a/template/default/theme/eCard.gif b/template/default/theme/eCard.gif
new file mode 100644
index 000000000..480872c4e
--- /dev/null
+++ b/template/default/theme/eCard.gif
diff --git a/template/default/theme/metadata.gif b/template/default/theme/metadata.gif
new file mode 100644
index 000000000..69b77ec44
--- /dev/null
+++ b/template/default/theme/metadata.gif
diff --git a/template/default/theme/properties.gif b/template/default/theme/properties.gif
new file mode 100644
index 000000000..f843e0636
--- /dev/null
+++ b/template/default/theme/properties.gif
diff --git a/template/default/theme/slideshow.gif b/template/default/theme/slideshow.gif
new file mode 100644
index 000000000..79712c3ad
--- /dev/null
+++ b/template/default/theme/slideshow.gif