aboutsummaryrefslogtreecommitdiffhomepage
path: root/doc/Theming.html
diff options
context:
space:
mode:
Diffstat (limited to 'doc/Theming.html')
-rw-r--r--doc/Theming.html58
1 files changed, 37 insertions, 21 deletions
diff --git a/doc/Theming.html b/doc/Theming.html
index 7cbf7aef..6b5dac35 100644
--- a/doc/Theming.html
+++ b/doc/Theming.html
@@ -69,6 +69,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
69<li><a href="Browsing-and-Searching.html">Browsing and Searching</a></li> 69<li><a href="Browsing-and-Searching.html">Browsing and Searching</a></li>
70<li><a href="Firefox-share.html">Firefox share</a></li> 70<li><a href="Firefox-share.html">Firefox share</a></li>
71<li><a href="RSS-feeds.html">RSS feeds</a></li> 71<li><a href="RSS-feeds.html">RSS feeds</a></li>
72<li><a href="REST-API.html">REST API</a></li>
72</ul></li> 73</ul></li>
73<li>How To 74<li>How To
74<ul> 75<ul>
@@ -87,6 +88,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
87<li><a href="3rd-party-libraries.html">3rd party libraries</a></li> 88<li><a href="3rd-party-libraries.html">3rd party libraries</a></li>
88<li><a href="Plugin-System.html">Plugin System</a></li> 89<li><a href="Plugin-System.html">Plugin System</a></li>
89<li><a href="Release-Shaarli.html">Release Shaarli</a></li> 90<li><a href="Release-Shaarli.html">Release Shaarli</a></li>
91<li><a href="Versioning-and-Branches.html">Versioning and Branches</a></li>
90<li><a href="Security.html">Security</a></li> 92<li><a href="Security.html">Security</a></li>
91<li><a href="Static-analysis.html">Static analysis</a></li> 93<li><a href="Static-analysis.html">Static analysis</a></li>
92<li><a href="Theming.html">Theming</a></li> 94<li><a href="Theming.html">Theming</a></li>
@@ -100,42 +102,56 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
100</ul> 102</ul>
101</div> 103</div>
102<h1 id="theming">Theming</h1> 104<h1 id="theming">Theming</h1>
103<h2 id="user-css">User CSS</h2> 105<h2 id="foreword">Foreword</h2>
106<p>There are two ways of customizing how Shaarli looks:</p>
107<ol>
108<li>by using a custom CSS to override Shaarli's CSS</li>
109<li>by using a full theme that provides its own RainTPL templates, CSS and Javascript resources</li>
110</ol>
111<h2 id="custom-css">Custom CSS</h2>
112<p>Shaarli's appearance can be modified by adding CSS rules to:</p>
104<ul> 113<ul>
105<li>Shaarli's apparence can be modified by editing CSS rules in <code>inc/user.css</code>. This file allows to override rules defined in the main <code>inc/shaarli.css</code> (only add changed rules), or define a whole new theme.</li> 114<li>Shaarli &lt; <code>v0.9.0</code>: <code>inc/user.css</code></li>
106<li>Do not edit <code>inc/shaarli.css</code>! Your changes would be overriden when updating Shaarli.</li> 115<li>Shaarli &gt;= <code>v0.9.0</code>: <code>data/user.css</code></li>
107<li>Some themes are available at <a href="https://github.com/shaarli/shaarli-themes" class="uri">https://github.com/shaarli/shaarli-themes</a>.</li>
108</ul> 116</ul>
109<p>See also:</p> 117<p>This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.</p>
110<ul> 118<p><strong>Note</strong>: Do not edit <code>tpl/default/css/shaarli.css</code>! Your changes would be overridden when updating Shaarli.</p>
111<li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li> 119<p>See also <a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></p>
112</ul> 120<h2 id="themes">Themes</h2>
113<h2 id="raintpl-template">RainTPL template</h2>
114<p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p> 121<p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p>
122<p>Installation:</p>
115<ul> 123<ul>
116<li>Find the template you'd like to install (see the list of <a href="available-templates%7CTheming#community-themes--templates.html">available templates|Theming#community-themes--templates</a>)</li> 124<li>find a theme you'd like to install</li>
117<li>Find it's git clone URL or download the zip archive for the template.</li> 125<li>copy or clone the theme folder under <code>tpl/&lt;a_sweet_theme&gt;</code></li>
118<li>In your Shaarli <code>tpl/</code> directory, run <code>git clone https://url/of/my-template/</code> or unpack the zip archive. 126<li>enable the theme:
119<ul> 127<ul>
120<li>There should now be a <code>my-template/</code> directory under the <code>tpl/</code> dir, containing directly all the template files.</li> 128<li>Shaarli &lt; <code>v0.9.0</code>: edit <code>data/config.json.php</code> and set the value of <code>raintpl_tpl</code> to the new theme name:<br />
129<code>&quot;raintpl_tpl&quot;: &quot;tpl\/my-template\/&quot;</code></li>
130<li>Shaarli &gt;= <code>v0.9.0</code>: select the theme through the <em>Tools</em> page</li>
121</ul></li> 131</ul></li>
122<li><p>Edit <code>data/config.json.php</code> to have Shaarli use this template, in <code>&quot;resource&quot;</code> e.g.</p>
123<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json"><span class="er">&quot;raintpl_tpl&quot;:</span> <span class="er">&quot;tpl\/my-template\/&quot;,</span></code></pre></div></li>
124</ul> 132</ul>
125<h2 id="community-themes-templates">Community themes &amp; templates</h2> 133<h2 id="community-css-themes">Community CSS &amp; themes</h2>
134<h3 id="custom-css-1">Custom CSS</h3>
135<ul>
136<li><a href="https://github.com/mrjovanovic/serious-theme-shaarli">mrjovanovic/serious-theme-shaarli</a> - A serious theme for Shaarli<a href=".html"></a></li>
137<li><a href="https://github.com/shaarli/shaarli-themes">shaarli/shaarli-themes</a><a href=".html"></a></li>
138</ul>
139<h3 id="themes-1">Themes</h3>
126<ul> 140<ul>
127<li><a href="https://github.com/AkibaTech/Shaarli---SuperHero-Theme">AkibaTech/Shaarli Superhero Theme</a> - A template/theme for Shaarli<a href=".html"></a></li> 141<li><a href="https://github.com/AkibaTech/Shaarli---SuperHero-Theme">AkibaTech/Shaarli Superhero Theme</a> - A template/theme for Shaarli<a href=".html"></a></li>
128<li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli<a href=".html"></a></li> 142<li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli<a href=".html"></a></li>
129<li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme.<a href=".html"></a></li> 143<li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme<a href=".html"></a></li>
130<li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli<a href=".html"></a></li> 144<li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli<a href=".html"></a></li>
131<li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli<a href=".html"></a></li> 145<li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli<a href=".html"></a></li>
132<li><a href="https://github.com/kalvn/Shaarli-Material">kalvn/Shaarli-Material</a> - A theme (template) based on Google's Material Design for Shaarli, the superfast delicious clone.<a href=".html"></a></li> 146<li><a href="https://github.com/kalvn/Shaarli-Material">kalvn/Shaarli-Material</a> - A theme (template) based on Google's Material Design for Shaarli, the superfast delicious clone<a href=".html"></a></li>
133<li><a href="https://github.com/ManufacturaInd/shaarli-2004licious-theme">ManufacturaInd/shaarli-2004licious-theme</a> - A template/theme as a humble homage to the early looks of the del.icio.us site.<a href=".html"></a></li> 147<li><a href="https://github.com/ManufacturaInd/shaarli-2004licious-theme">ManufacturaInd/shaarli-2004licious-theme</a> - A template/theme as a humble homage to the early looks of the del.icio.us site<a href=".html"></a></li>
148</ul>
149<h3 id="shaarli-forks">Shaarli forks</h3>
150<ul>
134<li><a href="https://github.com/misterair/limonade">misterair/Limonade</a> - A fork of (legacy) Shaarli with a new template<a href=".html"></a></li> 151<li><a href="https://github.com/misterair/limonade">misterair/Limonade</a> - A fork of (legacy) Shaarli with a new template<a href=".html"></a></li>
135<li><a href="https://github.com/mrjovanovic/serious-theme-shaarli">mrjovanovic/serious-theme-shaarli</a> - A serious theme for SHaarli.<a href=".html"></a></li>
136<li><a href="https://github.com/vivienhaese/shaarlitheme">vivienhaese/shaarlitheme</a> - A Shaarli fork meant to be run in an openshift instance<a href=".html"></a></li> 152<li><a href="https://github.com/vivienhaese/shaarlitheme">vivienhaese/shaarlitheme</a> - A Shaarli fork meant to be run in an openshift instance<a href=".html"></a></li>
137</ul> 153</ul>
138<h3 id="example-installation-albinomouse-template">Example installation: AlbinoMouse template</h3> 154<h2 id="example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</h2>
139<p>With the following configuration:</p> 155<p>With the following configuration:</p>
140<ul> 156<ul>
141<li>Apache 2 / PHP 5.6</li> 157<li>Apache 2 / PHP 5.6</li>