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>
This commit is contained in:
VirtualTam 2014-12-02 21:00:52 +01:00
parent fdd8fb2be2
commit c133612f32
14 changed files with 161 additions and 48 deletions

View file

@ -118,6 +118,14 @@ h1 {
cursor: pointer;
}
#pageheader #linkcount {
float: right;
font-style: italic;
color: #bbb;
text-align: right;
padding-right: 5px;
}
#pageheader {
background-color: #333333;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111));
@ -149,10 +157,19 @@ h1 {
text-decoration: none;
}
#pageheader .search {
width: 100%;
white-space: nowrap;
}
#toolsdiv a {
clear: both;
}
#toolsdiv #bookmark {
clear: none;
}
#toolsdiv a span {
color: #ffffff;
}
@ -191,6 +208,18 @@ h1 {
padding: 0;
}
.searchform #searchform_value {
width: 30%;
}
.tagfilter {
margin-left:24px;
}
.tagfilter #tagfilter_value {
width: 10%;
}
.tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
background-color: #dedede;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
@ -271,6 +300,14 @@ h1 {
padding-right: 5px;
}
#paging_linksperpage form.linksperpage {
display: inline;
}
#paging_linksperpage form.linksperpage input {
height: 15px;
}
#paging_current {
display: inline;
color: #fff;
@ -291,6 +328,10 @@ h1 {
clear: both;
}
#headerform input.linkurl {
width: 50%;
}
#toolsdiv {
color: #ffffff;
padding: 5px 5px 5px 5px;
@ -311,6 +352,10 @@ h1 {
clear: left;
}
#editlinkform textarea, #editlinkform .lf_input {
width: 100%;
}
#linklist li {
padding: 4px 10px 15px 20px;
border-top: 1px solid #bbb;
@ -339,6 +384,16 @@ h1 {
color:#E28E3F;
}
.linkqrcode {
display: inline;
position: relative;
}
a.qrcode img {
width: 13px;
height: 13px;
}
#linklist li.private {
background: url('../images/private.png') no-repeat 10px center;
padding-left: 60px;
@ -440,6 +495,12 @@ h1 {
text-decoration: none;
}
.linktag .remove {
border-left: 1px solid #aaa;
padding-left: 5px;
color:#6767A7;
}
.linkshort {
font-size: 8pt;
color: #888;
@ -466,11 +527,11 @@ h1 {
clear: both;
}
#footer a {
#footer a {
color: #486D08;
}
#footer a:hover {
#footer a:hover {
color: #000000;
}
@ -484,16 +545,41 @@ h1 {
font-size: 9pt;
}
#newversion #version_id {
text-decoration: blink;
}
#cloudtag {
padding-left: 10%;
padding-right: 10%;
}
#cloudtag .count {
color: #99f;
font-size: 9pt;
padding-left: 5px;
padding-right: 2px;
}
#cloudtag a {
font-weight:bold;
color: black;
text-decoration: none;
}
#install {
margin: 0 20px;
}
#installform {
border: 1px solid black;
padding: 10px;
}
#installform table {
border: none;
}
#installform td {
font-size: 10pt;
color: black;
@ -501,6 +587,10 @@ h1 {
clear: left;
}
#installform input.bigbutton {
float: right;
}
#changepasswordform {
color: #ccc;
padding: 10px 5px 10px 5px;
@ -513,6 +603,10 @@ h1 {
clear: left;
}
#changetag #totag {
margin-left: 40px;
}
#configform td {
color: #ccc;
font-size: 10pt;
@ -676,6 +770,14 @@ div.dailyAbout a {
color: #890500;
}
div.dailyAbout img {
position: relative;
top: 3px;
margin-right: 4px;
width: 14px;
height: 14px;
}
div.dailyTitle {
font-weight: bold;
font-size: 44pt;
@ -726,6 +828,17 @@ div.dailyEntryDescription {
overflow: auto;
}
div.dailyNoEntry {
text-align: center;
padding: 40px 0px 90px 0px;
}
.daily #closing {
clear: both;
text-align: center;
padding-bottom: 20px;
}
/* Common CSS screwdriver */
.clear {
clear: both;

View file

@ -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>
</html>

View file

@ -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 @@
</script>
{/if}
</body>
</html>
</html>

View file

@ -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>
</html>

View file

@ -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>

View file

@ -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>
</html>

View file

@ -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>
</html>

View file

@ -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">

View file

@ -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>
</div>

View file

@ -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>
</html>

View file

@ -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>

View file

@ -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>

View file

@ -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>
</html>

View file

@ -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>
</html>