CSS: remove hardcoded style from templates

Fixes shaarli/Shaarli#29

Style elements refactored as follows:
- use existing ids and classes if possible,
- else, define new ones and stick with the existing naming convention,
- remove hardcoded style attributes from RainTPL templates.

Exception:
In tpl/tagcloud.html, the display size of each tag is computed at page
generation.

Signed-off-by: VirtualTam <virtualtam@flibidi.org>

13 files changed, 46 insertions, 46 deletions

diff --git a/tpl/addlink.html b/tpl/addlink.html
index 853715dc..da50f45e 100644
--- a/tpl/addlink.html
+++ b/tpl/addlink.html
@@ -6,11 +6,11 @@
         {include="page.header"}
         <div id="headerform">
                 <form method="GET" action="" name="addform" class="addform">
-                        <input type="text" name="post" style="width:50%;"> 
+                        <input type="text" name="post" class="linkurl">
                         <input type="submit" value="Add link" class="bigbutton">
                 </form>
         </div>
 </div>
 {include="page.footer"}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tpl/changetag.html b/tpl/changetag.html
index b22bddea..79fea9a9 100644
--- a/tpl/changetag.html
+++ b/tpl/changetag.html
@@ -9,7 +9,8 @@
         <form method="POST" action="" name="changetag" id="changetag">
         <input type="hidden" name="token" value="{$token}">
         Tag: <input type="text" name="fromtag" id="fromtag">
-        <input type="text" name="totag" style="margin-left:40px;"><input type="submit" name="renametag" value="Rename tag" class="bigbutton">
+        <input type="text" name="totag" id="totag">
+        <input type="submit" name="renametag" value="Rename tag" class="bigbutton">
         &nbsp;&nbsp;or&nbsp; <input type="submit" name="deletetag" value="Delete tag" class="bigbutton" onClick="return confirmDeleteTag();"><br>(Case sensitive)</form>
 <script language="JavaScript">function confirmDeleteTag() { var agree=confirm("Are you sure you want to delete this tag from all links ?"); if (agree) return true ; else return false ; }</script>
 </div>
@@ -23,4 +24,4 @@ $(document).ready(function()
 </script>
 {/if}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tpl/daily.html b/tpl/daily.html
index 4bc8568b..c15a7062 100644
--- a/tpl/daily.html
+++ b/tpl/daily.html
@@ -10,17 +10,17 @@
           - 
           {if="$nextday"}<a href="?do=daily&day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
       <br><br>
-          <a href="?do=dailyrss" title="1 RSS entry per day"><img src="images/feed-icon-14x14.png#" width="14" height="14" style="position:relative;top:3px; margin-right:4px;">Daily RSS Feed</a>
+          <a href="?do=dailyrss" title="1 RSS entry per day"><img src="images/feed-icon-14x14.png#">Daily RSS Feed</a>
     </div>
     <div class="dailyTitle"><img src="../images/floral_left.png" width="51" height="50" class="nomobile"> The Daily Shaarli <img src="../images/floral_right.png" width="51" height="50" class="nomobile"></div>
     <div class="dailyDate"><span class="nomobile">&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;</span> {$day} <span class="nomobile">&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;&#x0097;</span></div>
-    <div style="clear:both;"></div>
+    <div class="clear"></div>
     
     {if="$linksToDisplay"}
         <div id="daily_col1">
         {loop="col1"}
         <div class="dailyEntry">
-            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
+            <div class="dailyEntryPermalink"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
             {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
             <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
             {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
@@ -32,7 +32,7 @@
         <div id="daily_col2">
         {loop="col2"}
         <div class="dailyEntry">
-            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
+            <div class="dailyEntryPermalink"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
             {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
             <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
             {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
@@ -44,7 +44,7 @@
         <div id="daily_col3">
         {loop="col3"}
         <div class="dailyEntry">
-            <div style="float:right;position:relative;top:-1px;"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
+            <div class="dailyEntryPermalink"><a href="?{$value.linkdate|smallHash}"><img src="../images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink"></a></div>
             {if="$value.tags"}<div class="dailyEntryTags">{loop="value.taglist"}{$value|htmlspecialchars} - {/loop}</div>{/if}
             <div class="dailyEntryTitle"><a href="{$value.url}">{$value.title|htmlspecialchars}</a></div>
             {if="$value.thumbnail"}<div class="dailyEntryThumbnail">{$value.thumbnail}</div>{/if}
@@ -53,11 +53,10 @@
         {/loop}
         </div>        
     {else}
-         <div style="text-align:center; padding:40px 0px 90px 0px;">No articles on this day.</div>
+         <div class="dailyNoEntry">No articles on this day.</div>
     {/if}
-    <div style="clear:both;"></div>
-    <div style="text-align:center; padding-bottom:20px;"><img src="../images/squiggle_closing.png" width="66" height="61" alt="-"></div>
+    <div id="closing"><img src="../images/squiggle_closing.png" width="66" height="61" alt="-"></div>
 </div>
 {include="page.footer"}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tpl/editlink.html b/tpl/editlink.html
index 48945a30..454dfff4 100644
--- a/tpl/editlink.html
+++ b/tpl/editlink.html
@@ -12,10 +12,10 @@
         <div id="editlinkform">
             <form method="post" name="linkform">
                 <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
-                <i>URL</i><br><input type="text" name="lf_url" value="{$link.url|htmlspecialchars}" style="width:100%"><br>
-                <i>Title</i><br><input type="text" name="lf_title" value="{$link.title|htmlspecialchars}" style="width:100%"><br>
-                <i>Description</i><br><textarea name="lf_description" rows="4" cols="25" style="width:100%">{$link.description|htmlspecialchars}</textarea><br>
-                <i>Tags</i><br><input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}" style="width:100%"><br>
+                <i>URL</i><br><input type="text" name="lf_url" value="{$link.url|htmlspecialchars}" class="lf_input"><br>
+                <i>Title</i><br><input type="text" name="lf_title" value="{$link.title|htmlspecialchars}" class="lf_input"><br>
+                <i>Description</i><br><textarea name="lf_description" rows="4" cols="25">{$link.description|htmlspecialchars}</textarea><br>
+                <i>Tags</i><br><input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}" class="lf_input"><br>
                 {if="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
             <input type="checkbox" checked="checked" name="lf_private" id="lf_private">
             &nbsp;<label for="lf_private"><i>Private</i></label><br>
@@ -23,9 +23,9 @@
             <input type="checkbox"  name="lf_private" id="lf_private">
             &nbsp;<label for="lf_private"><i>Private</i></label><br>
             {/if}
-                <input type="submit" value="Save" name="save_edit" class="bigbutton" style="margin-left:40px;">
-                <input type="submit" value="Cancel" name="cancel_edit" class="bigbutton" style="margin-left:40px;">
-                {if="!$link_is_new"}<input type="submit" value="Delete" name="delete_link" class="bigbutton" style="margin-left:180px;" onClick="return confirmDeleteLink();">{/if}
+                <input type="submit" value="Save" name="save_edit" class="bigbutton">
+                <input type="submit" value="Cancel" name="cancel_edit" class="bigbutton">
+                {if="!$link_is_new"}<input type="submit" value="Delete" name="delete_link" class="bigbutton delete" onClick="return confirmDeleteLink();">{/if}
                 <input type="hidden" name="token" value="{$token}">
                 {if="$http_referer"}<input type="hidden" name="returnurl" value="{$http_referer|htmlspecialchars}">{/if}
             </form>
diff --git a/tpl/export.html b/tpl/export.html
index 938cbe64..911b02c1 100644
--- a/tpl/export.html
+++ b/tpl/export.html
@@ -7,9 +7,10 @@
         <div id="toolsdiv">
             <a href="?do=export&what=all"><b>Export all</b> <span>: Export all links</span></a><br><br>
             <a href="?do=export&what=public"><b>Export public</b> <span>: Export public links only</a><br><br>
-            <a href="?do=export&what=private"><b>Export private</b> <span>: Export private links only</a><br><br style="clear:both;">
+            <a href="?do=export&what=private"><b>Export private</b> <span>: Export private links only</a>
+            <div class="clear"></div>
         </div>
 </div>
 {include="page.footer"}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tpl/install.html b/tpl/install.html
index 4034ef1b..32b8811b 100644
--- a/tpl/install.html
+++ b/tpl/install.html
@@ -2,20 +2,19 @@
 <html>
 <head>{include="includes"}{$timezone_js}</head>
 <body onload="document.installform.setlogin.focus();">
-<div style="margin-left:20px;">
+<div id="install">
 <h1>Shaarli</h1>        
 It looks like it's the first time you run Shaarli. Please configure it:<br>
-<div style="color:white !important;">
-<form method="POST" action="" name="installform" id="installform" style="border:1px solid black; padding:10 10 10 10;">
-<table border="0" cellpadding="20">
+<form method="POST" action="" name="installform" id="installform">
+<table>
 <tr><td><b>Login:</b></td><td><input type="text" name="setlogin" size="30"></td></tr>
 <tr><td><b>Password:</b></td><td><input type="password" name="setpassword" size="30"></td></tr>
 {$timezone_html}
 <tr><td><b>Page title:</b></td><td><input type="text" name="title" size="30"></td></tr>
-<tr><td></td><td align="right"><input type="submit" name="Save" value="Save config" class="bigbutton"></td></tr>
+<tr><td colspan="2"><input type="submit" name="Save" value="Save config" class="bigbutton"></td></tr>
 </table>
 </form>
 </div>
 {include="page.footer"}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tpl/linklist.html b/tpl/linklist.html
index d33fc3c3..eadbc4cd 100644
--- a/tpl/linklist.html
+++ b/tpl/linklist.html
@@ -4,9 +4,9 @@
 <body>
 <div id="pageheader">
     {include="page.header"}
-    <div id="headerform" style="width:100%; white-space:nowrap;">
-        <form method="GET" class="searchform" name="searchform" style="display:inline;"><input type="text" id="searchform_value" name="searchterm" style="width:30%" value=""> <input type="submit" value="Search" class="bigbutton"></form>
-        <form method="GET" class="tagfilter" name="tagfilter" style="display:inline;margin-left:24px;"><input type="text" name="searchtags" id="tagfilter_value" style="width:10%" value=""> <input type="submit" value="Filter by tag" class="bigbutton"></form>
+    <div id="headerform" class="search">
+        <form method="GET" class="searchform" name="searchform"><input type="text" id="searchform_value" name="searchterm" value=""> <input type="submit" value="Search" class="bigbutton"></form>
+        <form method="GET" class="tagfilter" name="tagfilter"><input type="text" name="searchtags" id="tagfilter_value" value=""> <input type="submit" value="Filter by tag" class="bigbutton"></form>
     </div>
 </div>
 
@@ -23,7 +23,7 @@
         {if="$search_type=='tags'"}
             <div id="searchcriteria">{$result_count} results for tags <i>
             {loop="search_crits"}
-                <span class="linktag" title="Remove tag"><a href="?removetag={$value|htmlspecialchars}">{$value|htmlspecialchars} <span style="border-left:1px solid #aaa; padding-left:5px; color:#6767A7;">x</span></a></span>
+                <span class="linktag" title="Remove tag"><a href="?removetag={$value|htmlspecialchars}">{$value|htmlspecialchars} <span class="remove">x</span></a></span>
             {/loop}</i></div>
         {/if}
     {/if}
@@ -42,7 +42,7 @@
                 {/if}
                 <span class="linktitle"><a href="{$redirector}{$value.url|htmlspecialchars}">{$value.title|htmlspecialchars}</a></span>
                 <br>
-                {if="$value.description"}<div class="linkdescription"{if="$search_type=='permalink'"} style="max-height:none !important;"{/if}>{$value.description}</div>{/if}
+                {if="$value.description"}<div class="linkdescription">{$value.description}</div>{/if}
                 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
                     <span class="linkdate" title="Permalink"><a href="?{$value.linkdate|smallHash}">{$value.localdate|htmlspecialchars} - permalink</a> - </span>
                 {else}
@@ -51,8 +51,8 @@
                 {if="$GLOBALS['config']['ARCHIVE_ORG']"}
                 <span class="linkarchive"><a href="https://web.archive.org/web/{$value.url|htmlspecialchars}">archive</a> - </span>
                 {/if}
-                <div style="position:relative;display:inline;"><a href="http://qrfree.kaywa.com/?l=1&s=8&d={$scripturl|urlencode}%3F{$value.linkdate|smallHash}"
-                    onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div> -
+                <div class="linkqrcode"><a href="http://qrfree.kaywa.com/?l=1&s=8&d={$scripturl|urlencode}%3F{$value.linkdate|smallHash}"
+                    onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" title="QR-Code"></a></div> -
                 <a href={$value.url|htmlspecialchars}><span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span></a><br>
                 {if="$value.tags"}
                     <div class="linktaglist">
diff --git a/tpl/linklist.paging.html b/tpl/linklist.paging.html
index b0c119d9..c2b98971 100644
--- a/tpl/linklist.paging.html
+++ b/tpl/linklist.paging.html
@@ -12,9 +12,9 @@
 {/if}
     <div id="paging_linksperpage">
         Links per page: <a href="?linksperpage=20">20</a> <a href="?linksperpage=50">50</a> <a href="?linksperpage=100">100</a>
-        <form method="GET" style="display:inline;" class="linksperpage"><input type="text" name="linksperpage" size="2" style="height:15px;"></form>
+        <form method="GET" class="linksperpage"><input type="text" name="linksperpage" size="2"></form>
     </div>
     {if="$previous_page_url"} <a href="{$previous_page_url}" id="paging_older">&#x25C4;Older</a> {/if}
     <div id="paging_current">page {$page_current} / {$page_max} </div>
     {if="$next_page_url"} <a href="{$next_page_url}" id="paging_newer">Newer&#x25BA;</a> {/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/tpl/loginform.html b/tpl/loginform.html
index 805a0148..954f6f1f 100644
--- a/tpl/loginform.html
+++ b/tpl/loginform.html
@@ -13,7 +13,7 @@
     Login: <input type="text" name="login" tabindex="1">&nbsp;&nbsp;&nbsp;
     Password : <input type="password" name="password" tabindex="2">
     <input type="submit" value="Login" class="bigbutton" tabindex="4"><br>
-    <input style="margin:10 0 0 40;" type="checkbox" name="longlastingsession" id="longlastingsession"  tabindex="3"><label for="longlastingsession">&nbsp;Stay signed in (Do not check on public computers)</label>
+    <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="3"><label for="longlastingsession">&nbsp;Stay signed in (Do not check on public computers)</label>
     <input type="hidden" name="token" value="{$token}">
     {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl|htmlspecialchars}">{/if}
     </form>
@@ -23,4 +23,4 @@
 
 {include="page.footer"}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tpl/page.footer.html b/tpl/page.footer.html
index 8e5869c5..b494bf7d 100644
--- a/tpl/page.footer.html
+++ b/tpl/page.footer.html
@@ -2,7 +2,7 @@
     <b><a href="http://sebsauvage.net/wiki/doku.php?id=php:shaarli">Shaarli {$version|htmlspecialchars}</a></b> - The personal, minimalist, super-fast, no-database delicious clone. By <a href="http://sebsauvage.net" target="_blank">sebsauvage.net</a>. Theme by <a href="http://blog.idleman.fr" target="_blank">idleman.fr</a>.
 </div>
 {if="$newversion"}
-    <div id="newversion"><span style="text-decoration:blink;">&#x25CF;</span> Shaarli {$newversion|htmlspecialchars} is <a href="http://sebsauvage.net/wiki/doku.php?id=php:shaarli#download">available</a>.</div>
+    <div id="newversion"><span id="version_id">&#x25CF;</span> Shaarli {$newversion|htmlspecialchars} is <a href="http://sebsauvage.net/wiki/doku.php?id=php:shaarli#download">available</a>.</div>
 {/if}
 {if="isLoggedIn()"}
 <script language="JavaScript">function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
diff --git a/tpl/page.header.html b/tpl/page.header.html
index 654a551d..17c0c75c 100644
--- a/tpl/page.header.html
+++ b/tpl/page.header.html
@@ -1,6 +1,6 @@
 
     <div id="logo" title="Share your links !" onclick="document.location='?';"></div>
-    <div style="float:right; font-style:italic; color:#bbb; text-align:right; padding:0 5 0 0;" class="nomobile">Shaare your links...<br>
+    <div id="linkcount" class="nomobile">Shaare your links...<br>
         {if="!empty($linkcount)"}{$linkcount} links{/if}</div>
     <span id="shaarli_title"><a href="{$titleLink}">{$shaarlititle|htmlspecialchars}</a></span>
   
@@ -17,7 +17,7 @@
     {/if}
     <a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a>
     {if="$GLOBALS['config']['SHOW_ATOM']"}
-        <a href="{$feedurl}?do=atom{$searchcrits}" style="padding-left:10px;" class="nomobile">ATOM Feed</a>
+        <a href="{$feedurl}?do=atom{$searchcrits}" class="nomobile">ATOM Feed</a>
     {/if}
     <a href="?do=tagcloud">Tag cloud</a>
     <a href="?do=picwall{$searchcrits}">Picture wall</a>
diff --git a/tpl/tagcloud.html b/tpl/tagcloud.html
index 0dd2c0d3..9418e248 100644
--- a/tpl/tagcloud.html
+++ b/tpl/tagcloud.html
@@ -6,10 +6,10 @@
 <center>
 <div id="cloudtag">
     {loop="tags"}
-    <span style="color:#99f; font-size:9pt; padding-left:5px; padding-right:2px;">{$value.count}</span><a href="?searchtags={$key|urlencode}" style="font-size:{$value.size}pt; font-weight:bold; color:black; text-decoration:none">{$key|htmlspecialchars}</a>
+    <span class="count">{$value.count}</span><a href="?searchtags={$key|urlencode}" style="font-size:{$value.size}pt;">{$key|htmlspecialchars}</a>
     {/loop}
 </div>
 </center>
 {include="page.footer"}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tpl/tools.html b/tpl/tools.html
index ba1c1e8e..ae31902b 100644
--- a/tpl/tools.html
+++ b/tpl/tools.html
@@ -10,10 +10,10 @@
             <a href="?do=changetag"><b>Rename/delete tags</b> <span>:  Rename or delete a tag in all links</span></a><br><br>
             <a href="?do=import"><b>Import</b> <span>:  Import Netscape html bookmarks (as exported from Firefox, Chrome, Opera, delicious...)</span></a> <br><br>
             <a href="?do=export"><b>Export</b> <span>:  Export Netscape html bookmarks (which can be imported in Firefox, Chrome, Opera, delicious...)</span></a><br><br>
-        <a class="smallbutton" onclick="alert('Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link...');return false;" href="javascript:javascript:(function(){var%20url%20=%20location.href;var%20title%20=%20document.title%20||%20url;window.open('{$pageabsaddr}?post='%20+%20encodeURIComponent(url)+'&amp;title='%20+%20encodeURIComponent(title)+'&amp;description='%20+%20encodeURIComponent(document.getSelection())+'&amp;source=bookmarklet','_blank','menubar=no,height=390,width=600,toolbar=no,scrollbars=no,status=no,dialog=1');})();"><b>Shaare link</b></a> <a href="#" style="clear:none;"><span>&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).<br>&nbsp;&nbsp;&nbsp;&nbsp;Then click "Shaare link" button in any page you want to share.</span></a><br><br>
+        <a class="smallbutton" onclick="alert('Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link...');return false;" href="javascript:javascript:(function(){var%20url%20=%20location.href;var%20title%20=%20document.title%20||%20url;window.open('{$pageabsaddr}?post='%20+%20encodeURIComponent(url)+'&amp;title='%20+%20encodeURIComponent(title)+'&amp;description='%20+%20encodeURIComponent(document.getSelection())+'&amp;source=bookmarklet','_blank','menubar=no,height=390,width=600,toolbar=no,scrollbars=no,status=no,dialog=1');})();"><b>Shaare link</b></a> <a href="#" id="bookmark"><span>&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).<br>&nbsp;&nbsp;&nbsp;&nbsp;Then click "Shaare link" button in any page you want to share.</span></a><br><br>
             <div class="clear"></div>
         </div>
 </div>
 {include="page.footer"}
 </body>
-</html>
\ No newline at end of file
+</html>