css sprites

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

1 files changed, 77 insertions, 68 deletions

diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl
index 37f577f84..8c68cfd8b 100644
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@@ -1,76 +1,85 @@
 {$MENUBAR}
 {if !empty($PLUGIN_INDEX_CONTENT_BEFORE)}{$PLUGIN_INDEX_CONTENT_BEFORE}{/if}
 <div id="content" class="content">
-  <div class="titrePage">
-    <ul class="categoryActions">
-      {if !empty($image_orders) }
-      <li>
-      {'Sort order'|@translate}:
-      <select onchange="document.location = this.options[this.selectedIndex].value;">
-        {foreach from=$image_orders item=image_order }
-        <option value="{$image_order.URL}"{if $image_order.SELECTED} selected="selected"{/if}>{$image_order.DISPLAY}</option>
-        {/foreach}
-      </select>
-      </li>
-      {/if}
-
-      {if isset($favorite) }
-      <li><a href="{$favorite.U_FAVORITE}" title="{'delete all images from your favorites'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/del_all_favorites.png" class="button" alt="favorite" title="{'delete all images from your favorites'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_CADDIE) }
-      <li><a href="{$U_CADDIE}" title="{'add to caddie'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/caddie_add.png" class="button" alt="{'caddie'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_EDIT) }
-      <li><a href="{$U_EDIT}" title="{'edit'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/category_edit.png" class="button" alt="{'edit'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_SEARCH_RULES) }
-			{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
-      <li><a href="{$U_SEARCH_RULES}" onclick="popuphelp(this.href); return false;" title="{'Search rules'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/search_rules.png" class="button" alt="(?)"></a></li>
-      {/if}
-
-      {if isset($U_SLIDESHOW) }
-      <li><a href="{$U_SLIDESHOW}" title="{'slideshow'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/start_slideshow.png" class="button" alt="{'slideshow'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_MODE_FLAT) }
-      <li><a href="{$U_MODE_FLAT}" title="{'display all elements in all sub-albums'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/flat.png" class="button" alt="{'display all elements in all sub-albums'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_MODE_NORMAL) }
-      <li><a href="{$U_MODE_NORMAL}" title="{'return to normal view mode'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/normal_mode.png" class="button" alt="{'return to normal view mode'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_MODE_POSTED) }
-      <li><a href="{$U_MODE_POSTED}" title="{'display a calendar by posted date'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/calendar.png" class="button" alt="{'display a calendar by posted date'|@translate}"></a></li>
-      {/if}
-      
-      {if isset($U_MODE_CREATED) }
-      <li><a href="{$U_MODE_CREATED}" title="{'display a calendar by creation date'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/calendar_created.png" class="button" alt="{'display a calendar by creation date'|@translate}"></a></li>
-      {/if}
-      
-      {if !empty($PLUGIN_INDEX_ACTIONS)}{$PLUGIN_INDEX_ACTIONS}{/if}
-    </ul>
-
-  <h2>{$TITLE}</h2>
-
-  {if isset($chronology_views) }
-  <div class="calendarViews">{'View'|@translate}:
-    <select onchange="document.location = this.options[this.selectedIndex].value;">
-      {foreach from=$chronology_views item=view}
-      <option value="{$view.VALUE}"{if $view.SELECTED} selected="selected"{/if}>{$view.CONTENT}</option>
-      {/foreach}
-    </select>
-  </div>
-  {/if}
+<div class="titrePage">
+	<ul class="categoryActions">
+		{if !empty($image_orders) }
+		<li>
+		{'Sort order'|@translate}:
+		<select onchange="document.location = this.options[this.selectedIndex].value;">
+			{foreach from=$image_orders item=image_order }
+			<option value="{$image_order.URL}"{if $image_order.SELECTED} selected="selected"{/if}>{$image_order.DISPLAY}</option>
+			{/foreach}
+		</select>
+		</li>
+		{/if}
+
+{if isset($favorite)}
+		<li><a href="{$favorite.U_FAVORITE}" title="{'delete all images from your favorites'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon pwg-icon-favorite-del">&nbsp;</span><span class="pwg-button-text">{'delete all images from your favorites'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_CADDIE)}
+		<li><a href="{$U_CADDIE}" title="{'add to caddie'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-caddie-add">&nbsp;</span><span class="pwg-button-text">{'caddie'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_EDIT)}
+		<li><a href="{$U_EDIT}" title="{'edit'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-category-edit">&nbsp;</span><span class="pwg-button-text">{'edit'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_SEARCH_RULES)}
+		{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
+		<li><a href="{$U_SEARCH_RULES}" onclick="popuphelp(this.href); return false;" title="{'Search rules'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon pwg-icon-help">&nbsp;</span><span class="pwg-button-text">(?)</span>
+		</a></li>
+{/if}
+{if isset($U_SLIDESHOW)}
+		<li><a href="{$U_SLIDESHOW}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'slideshow'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_MODE_FLAT)}
+		<li><a href="{$U_MODE_FLAT}" title="{'display all elements in all sub-albums'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon pwg-icon-category-view-flat">&nbsp;</span><span class="pwg-button-text">{'display all elements in all sub-albums'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_MODE_NORMAL)}
+		<li><a href="{$U_MODE_NORMAL}" title="{'return to normal view mode'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-category-view-normal">&nbsp;</span><span class="pwg-button-text">{'return to normal view mode'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_MODE_POSTED)}
+		<li><a href="{$U_MODE_POSTED}" title="{'display a calendar by posted date'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-camera-calendar">&nbsp;</span><span class="pwg-button-text">{'Calendar'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_MODE_CREATED)}
+		<li><a href="{$U_MODE_CREATED}" title="{'display a calendar by creation date'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-camera-calendar">&nbsp;</span><span class="pwg-button-text">{'Calendar'|@translate}</span>
+		</a></li>
+{/if}
+{if !empty($PLUGIN_INDEX_ACTIONS)}{$PLUGIN_INDEX_ACTIONS}{/if}
+	</ul>
+
+<h2>{$TITLE}</h2>
+
+{if isset($chronology_views)}
+<div class="calendarViews">{'View'|@translate}:
+	<select onchange="document.location = this.options[this.selectedIndex].value;">
+		{foreach from=$chronology_views item=view}
+		<option value="{$view.VALUE}"{if $view.SELECTED} selected="selected"{/if}>{$view.CONTENT}</option>
+		{/foreach}
+	</select>
+</div>
+{/if}
 
-  {if isset($chronology.TITLE) }
-  <h2>{$chronology.TITLE}</h2>
-  {/if}
+{if isset($chronology.TITLE) }
+<h2>{$chronology.TITLE}</h2>
+{/if}
 
-  </div> <!-- titrePage -->
+</div> <!-- titrePage -->
 
 {if !empty($PLUGIN_INDEX_CONTENT_BEGIN)}{$PLUGIN_INDEX_CONTENT_BEGIN}{/if}