aboutsummaryrefslogtreecommitdiffhomepage
path: root/doc/html/Theming/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'doc/html/Theming/index.html')
-rw-r--r--doc/html/Theming/index.html423
1 files changed, 423 insertions, 0 deletions
diff --git a/doc/html/Theming/index.html b/doc/html/Theming/index.html
new file mode 100644
index 00000000..670dbb80
--- /dev/null
+++ b/doc/html/Theming/index.html
@@ -0,0 +1,423 @@
1<!DOCTYPE html>
2<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
3<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
9
10 <link rel="shortcut icon" href="../img/favicon.ico">
11 <title>Theming - Shaarli Documentation</title>
12 <link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700' rel='stylesheet' type='text/css'>
13
14 <link rel="stylesheet" href="../css/theme.css" type="text/css" />
15 <link rel="stylesheet" href="../css/theme_extra.css" type="text/css" />
16 <link rel="stylesheet" href="../css/highlight.css">
17 <link href="../github-markdown.css" rel="stylesheet">
18
19 <script>
20 // Current page data
21 var mkdocs_page_name = "Theming";
22 var mkdocs_page_input_path = "Theming.md";
23 var mkdocs_page_url = "/Theming/";
24 </script>
25
26 <script src="../js/jquery-2.1.1.min.js"></script>
27 <script src="../js/modernizr-2.8.3.min.js"></script>
28 <script type="text/javascript" src="../js/highlight.pack.js"></script>
29
30</head>
31
32<body class="wy-body-for-nav" role="document">
33
34 <div class="wy-grid-for-nav">
35
36
37 <nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
38 <div class="wy-side-nav-search">
39 <a href=".." class="icon icon-home"> Shaarli Documentation</a>
40 <div role="search">
41 <form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
42 <input type="text" name="q" placeholder="Search docs" />
43 </form>
44</div>
45 </div>
46
47 <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
48 <ul class="current">
49
50
51 <li class="toctree-l1">
52
53 <a class="" href="..">Home</a>
54 </li>
55
56 <li class="toctree-l1">
57
58 <span class="caption-text">Setup</span>
59 <ul class="subnav">
60 <li class="">
61
62 <a class="" href="../Download-and-Installation/">Download and Installation</a>
63 </li>
64 <li class="">
65
66 <a class="" href="../Upgrade-and-migration/">Upgrade and migration</a>
67 </li>
68 <li class="">
69
70 <a class="" href="../Server-requirements/">Server requirements</a>
71 </li>
72 <li class="">
73
74 <a class="" href="../Server-configuration/">Server configuration</a>
75 </li>
76 <li class="">
77
78 <a class="" href="../Server-security/">Server security</a>
79 </li>
80 <li class="">
81
82 <a class="" href="../Shaarli-configuration/">Shaarli configuration</a>
83 </li>
84 <li class="">
85
86 <a class="" href="../Plugins/">Plugins</a>
87 </li>
88 </ul>
89 </li>
90
91 <li class="toctree-l1">
92
93 <span class="caption-text">Docker</span>
94 <ul class="subnav">
95 <li class="">
96
97 <a class="" href="../Docker-101/">Docker 101</a>
98 </li>
99 <li class="">
100
101 <a class="" href="../Shaarli-images/">Shaarli images</a>
102 </li>
103 <li class="">
104
105 <a class="" href="../Reverse-proxy-configuration/">Reverse proxy configuration</a>
106 </li>
107 <li class="">
108
109 <a class="" href="../Docker-resources/">Docker resources</a>
110 </li>
111 </ul>
112 </li>
113
114 <li class="toctree-l1">
115
116 <span class="caption-text">Usage</span>
117 <ul class="subnav">
118 <li class="">
119
120 <a class="" href="../Features/">Features</a>
121 </li>
122 <li class="">
123
124 <a class="" href="../Bookmarklet/">Bookmarklet</a>
125 </li>
126 <li class="">
127
128 <a class="" href="../Browsing-and-searching/">Browsing and searching</a>
129 </li>
130 <li class="">
131
132 <a class="" href="../Firefox-share/">Firefox share</a>
133 </li>
134 <li class="">
135
136 <a class="" href="../RSS-feeds/">RSS feeds</a>
137 </li>
138 <li class="">
139
140 <a class="" href="../REST-API/">REST API</a>
141 </li>
142 </ul>
143 </li>
144
145 <li class="toctree-l1">
146
147 <span class="caption-text">How To</span>
148 <ul class="subnav">
149 <li class="">
150
151 <a class="" href="../Backup,-restore,-import-and-export/">Backup, restore, import and export</a>
152 </li>
153 <li class="">
154
155 <a class="" href="../Various-hacks/">Various hacks</a>
156 </li>
157 </ul>
158 </li>
159
160 <li class="toctree-l1">
161
162 <a class="" href="../Troubleshooting/">Troubleshooting</a>
163 </li>
164
165 <li class="toctree-l1">
166
167 <span class="caption-text">Development</span>
168 <ul class="subnav">
169 <li class="">
170
171 <a class="" href="../Development-guidelines/">Development guidelines</a>
172 </li>
173 <li class="">
174
175 <a class="" href="../Continuous-integration-tools/">Continuous integration tools</a>
176 </li>
177 <li class="">
178
179 <a class="" href="../GnuPG-signature/">GnuPG signature</a>
180 </li>
181 <li class="">
182
183 <a class="" href="../Coding-guidelines/">Coding guidelines</a>
184 </li>
185 <li class="">
186
187 <a class="" href="../Directory-structure/">Directory structure</a>
188 </li>
189 <li class="">
190
191 <a class="" href="../3rd-party-libraries/">3rd party libraries</a>
192 </li>
193 <li class="">
194
195 <a class="" href="../Plugin-System/">Plugin System</a>
196 </li>
197 <li class="">
198
199 <a class="" href="../Release-Shaarli/">Release Shaarli</a>
200 </li>
201 <li class="">
202
203 <a class="" href="../Versioning-and-Branches/">Versioning and Branches</a>
204 </li>
205 <li class="">
206
207 <a class="" href="../Security/">Security</a>
208 </li>
209 <li class="">
210
211 <a class="" href="../Static-analysis/">Static analysis</a>
212 </li>
213 <li class=" current">
214
215 <a class="current" href="./">Theming</a>
216 <ul class="subnav">
217
218 <li class="toctree-l3"><a href="#foreword">Foreword</a></li>
219
220
221 <li class="toctree-l3"><a href="#custom-css">Custom CSS</a></li>
222
223
224 <li class="toctree-l3"><a href="#themes">Themes</a></li>
225
226
227 <li class="toctree-l3"><a href="#community-css-themes">Community CSS &amp; themes</a></li>
228
229 <ul>
230
231 <li><a class="toctree-l4" href="#custom-css_1">Custom CSS</a></li>
232
233 <li><a class="toctree-l4" href="#themes_1">Themes</a></li>
234
235 <li><a class="toctree-l4" href="#shaarli-forks">Shaarli forks</a></li>
236
237 </ul>
238
239
240 <li class="toctree-l3"><a href="#example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</a></li>
241
242
243 </ul>
244 </li>
245 <li class="">
246
247 <a class="" href="../Unit-tests/">Unit tests</a>
248 </li>
249 </ul>
250 </li>
251
252 <li class="toctree-l1">
253
254 <span class="caption-text">About</span>
255 <ul class="subnav">
256 <li class="">
257
258 <a class="" href="../FAQ/">FAQ</a>
259 </li>
260 <li class="">
261
262 <a class="" href="../Community-&-Related-software/">Community & Related software</a>
263 </li>
264 </ul>
265 </li>
266
267 </ul>
268 </div>
269 &nbsp;
270 </nav>
271
272 <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
273
274
275 <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
276 <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
277 <a href="..">Shaarli Documentation</a>
278 </nav>
279
280
281 <div class="wy-nav-content">
282 <div class="rst-content">
283 <div role="navigation" aria-label="breadcrumbs navigation">
284 <ul class="wy-breadcrumbs">
285 <li><a href="..">Docs</a> &raquo;</li>
286
287
288
289 <li>Development &raquo;</li>
290
291
292
293 <li>Theming</li>
294 <li class="wy-breadcrumbs-aside">
295
296 <a href="https://github.com/shaarli/Shaarli/edit/master/docs/Theming.md"
297 class="icon icon-github"> Edit on GitHub</a>
298
299 </li>
300 </ul>
301 <hr/>
302</div>
303 <div role="main">
304 <div class="section">
305
306 <h2 id="foreword">Foreword</h2>
307<p>There are two ways of customizing how Shaarli looks:</p>
308<ol>
309<li>by using a custom CSS to override Shaarli's CSS</li>
310<li>by using a full theme that provides its own RainTPL templates, CSS and Javascript resources</li>
311</ol>
312<h2 id="custom-css">Custom CSS</h2>
313<p>Shaarli's appearance can be modified by adding CSS rules to:
314- Shaarli &lt; <code>v0.9.0</code>: <code>inc/user.css</code>
315- Shaarli &gt;= <code>v0.9.0</code>: <code>data/user.css</code></p>
316<p>This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.</p>
317<p><strong>Note</strong>: Do not edit <code>tpl/default/css/shaarli.css</code>! Your changes would be overridden when updating Shaarli.</p>
318<p>See also <a href="../Download CSS styles from an OPML list">Download CSS styles from an OPML list</a></p>
319<h2 id="themes">Themes</h2>
320<p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p>
321<p>Installation:
322- find a theme you'd like to install
323- copy or clone the theme folder under <code>tpl/&lt;a_sweet_theme&gt;</code>
324- enable the theme:
325 - 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:
326 <code>"raintpl_tpl": "tpl\/my-template\/"</code>
327 - Shaarli &gt;= <code>v0.9.0</code>: select the theme through the <em>Tools</em> page</p>
328<h2 id="community-css-themes">Community CSS &amp; themes</h2>
329<h3 id="custom-css_1">Custom CSS</h3>
330<ul>
331<li><a href="https://github.com/mrjovanovic/serious-theme-shaarli">mrjovanovic/serious-theme-shaarli</a> - A serious theme for Shaarli</li>
332<li><a href="https://github.com/shaarli/shaarli-themes">shaarli/shaarli-themes</a></li>
333</ul>
334<h3 id="themes_1">Themes</h3>
335<ul>
336<li><a href="https://github.com/AkibaTech/Shaarli---SuperHero-Theme">AkibaTech/Shaarli Superhero Theme</a> - A template/theme for Shaarli</li>
337<li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli</li>
338<li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme</li>
339<li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli</li>
340<li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli</li>
341<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</li>
342<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</li>
343</ul>
344<h3 id="shaarli-forks">Shaarli forks</h3>
345<ul>
346<li><a href="https://github.com/misterair/limonade">misterair/Limonade</a> - A fork of (legacy) Shaarli with a new template</li>
347<li><a href="https://github.com/vivienhaese/shaarlitheme">vivienhaese/shaarlitheme</a> - A Shaarli fork meant to be run in an openshift instance</li>
348</ul>
349<h2 id="example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</h2>
350<p>With the following configuration:
351- Apache 2 / PHP 5.6
352- user sites are enabled, e.g. <code>/home/user/public_html/somedir</code> is served as <code>http://localhost/~user/somedir</code>
353- <code>http</code> is the name of the Apache user</p>
354<pre><code class="bash">$ cd ~/public_html
355
356# clone repositories
357$ git clone https://github.com/shaarli/Shaarli.git shaarli
358$ pushd shaarli/tpl
359$ git clone https://github.com/alexisju/albinomouse-template.git
360$ popd
361
362# set access rights for Apache
363$ chgrp -R http shaarli
364$ chmod g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp
365</code></pre>
366
367<p>Get config written:
368- go to the freshly installed site
369- fill the install form
370- log in to Shaarli</p>
371<p>Edit Shaarli's <a href="../configuration|Shaarli configuration">configuration|Shaarli configuration</a>:</p>
372<pre><code class="bash"># the file should be owned by Apache, thus not writeable =&gt; sudo
373$ sudo sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php
374</code></pre>
375
376 </div>
377 </div>
378 <footer>
379
380 <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
381
382 <a href="../Unit-tests/" class="btn btn-neutral float-right" title="Unit tests">Next <span class="icon icon-circle-arrow-right"></span></a>
383
384
385 <a href="../Static-analysis/" class="btn btn-neutral" title="Static analysis"><span class="icon icon-circle-arrow-left"></span> Previous</a>
386
387 </div>
388
389
390 <hr/>
391
392 <div role="contentinfo">
393 <!-- Copyright etc -->
394
395 </div>
396
397 Built with <a href="http://www.mkdocs.org">MkDocs</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
398</footer>
399
400 </div>
401 </div>
402
403 </section>
404
405 </div>
406
407 <div class="rst-versions" role="note" style="cursor: pointer">
408 <span class="rst-current-version" data-toggle="rst-current-version">
409
410 <a href="https://github.com/shaarli/Shaarli" class="fa fa-github" style="float: left; color: #fcfcfc"> GitHub</a>
411
412
413 <span><a href="../Static-analysis/" style="color: #fcfcfc;">&laquo; Previous</a></span>
414
415
416 <span style="margin-left: 15px"><a href="../Unit-tests/" style="color: #fcfcfc">Next &raquo;</a></span>
417
418 </span>
419</div>
420 <script src="../js/theme.js"></script>
421
422</body>
423</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-13 01:29:05 +0000