]>
Commit | Line | Data |
---|---|---|
53ed6d7d | 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="../Copy-an-existing-installation-over-SSH-and-serve-it-locally/">Copy an existing installation over SSH and serve it locally</a> | |
156 | </li> | |
157 | <li class=""> | |
158 | ||
159 | <a class="" href="../Create-and-serve-multiple-Shaarlis-(farm)/">Create and serve multiple Shaarlis (farm)</a> | |
160 | </li> | |
161 | <li class=""> | |
162 | ||
163 | <a class="" href="../Download-CSS-styles-from-an-OPML-list/">Download CSS styles from an OPML list</a> | |
164 | </li> | |
165 | <li class=""> | |
166 | ||
167 | <a class="" href="../Datastore-hacks/">Datastore hacks</a> | |
168 | </li> | |
169 | </ul> | |
170 | </li> | |
171 | ||
172 | <li class="toctree-l1"> | |
173 | ||
174 | <a class="" href="../Troubleshooting/">Troubleshooting</a> | |
175 | </li> | |
176 | ||
177 | <li class="toctree-l1"> | |
178 | ||
179 | <span class="caption-text">Development</span> | |
180 | <ul class="subnav"> | |
181 | <li class=""> | |
182 | ||
183 | <a class="" href="../Development-guidelines/">Development guidelines</a> | |
184 | </li> | |
185 | <li class=""> | |
186 | ||
187 | <a class="" href="../Continuous-integration-tools/">Continuous integration tools</a> | |
188 | </li> | |
189 | <li class=""> | |
190 | ||
191 | <a class="" href="../GnuPG-signature/">GnuPG signature</a> | |
192 | </li> | |
193 | <li class=""> | |
194 | ||
195 | <a class="" href="../Coding-guidelines/">Coding guidelines</a> | |
196 | </li> | |
197 | <li class=""> | |
198 | ||
199 | <a class="" href="../Directory-structure/">Directory structure</a> | |
200 | </li> | |
201 | <li class=""> | |
202 | ||
203 | <a class="" href="../3rd-party-libraries/">3rd party libraries</a> | |
204 | </li> | |
205 | <li class=""> | |
206 | ||
207 | <a class="" href="../Plugin-System/">Plugin System</a> | |
208 | </li> | |
209 | <li class=""> | |
210 | ||
211 | <a class="" href="../Release-Shaarli/">Release Shaarli</a> | |
212 | </li> | |
213 | <li class=""> | |
214 | ||
215 | <a class="" href="../Versioning-and-Branches/">Versioning and Branches</a> | |
216 | </li> | |
217 | <li class=""> | |
218 | ||
219 | <a class="" href="../Security/">Security</a> | |
220 | </li> | |
221 | <li class=""> | |
222 | ||
223 | <a class="" href="../Static-analysis/">Static analysis</a> | |
224 | </li> | |
225 | <li class=" current"> | |
226 | ||
227 | <a class="current" href="./">Theming</a> | |
228 | <ul class="subnav"> | |
229 | ||
230 | <li class="toctree-l3"><a href="#foreword">Foreword</a></li> | |
231 | ||
232 | ||
233 | <li class="toctree-l3"><a href="#custom-css">Custom CSS</a></li> | |
234 | ||
235 | ||
236 | <li class="toctree-l3"><a href="#themes">Themes</a></li> | |
237 | ||
238 | ||
239 | <li class="toctree-l3"><a href="#community-css-themes">Community CSS & themes</a></li> | |
240 | ||
241 | <ul> | |
242 | ||
243 | <li><a class="toctree-l4" href="#custom-css_1">Custom CSS</a></li> | |
244 | ||
245 | <li><a class="toctree-l4" href="#themes_1">Themes</a></li> | |
246 | ||
247 | <li><a class="toctree-l4" href="#shaarli-forks">Shaarli forks</a></li> | |
248 | ||
249 | </ul> | |
250 | ||
251 | ||
252 | <li class="toctree-l3"><a href="#example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</a></li> | |
253 | ||
254 | ||
255 | </ul> | |
256 | </li> | |
257 | <li class=""> | |
258 | ||
259 | <a class="" href="../Unit-tests/">Unit tests</a> | |
260 | </li> | |
261 | </ul> | |
262 | </li> | |
263 | ||
264 | <li class="toctree-l1"> | |
265 | ||
266 | <span class="caption-text">About</span> | |
267 | <ul class="subnav"> | |
268 | <li class=""> | |
269 | ||
270 | <a class="" href="../FAQ/">FAQ</a> | |
271 | </li> | |
272 | <li class=""> | |
273 | ||
274 | <a class="" href="../Community-&-Related-software/">Community & Related software</a> | |
275 | </li> | |
276 | </ul> | |
277 | </li> | |
278 | ||
279 | </ul> | |
280 | </div> | |
281 | | |
282 | </nav> | |
283 | ||
284 | <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"> | |
285 | ||
286 | ||
287 | <nav class="wy-nav-top" role="navigation" aria-label="top navigation"> | |
288 | <i data-toggle="wy-nav-top" class="fa fa-bars"></i> | |
289 | <a href="..">Shaarli Documentation</a> | |
290 | </nav> | |
291 | ||
292 | ||
293 | <div class="wy-nav-content"> | |
294 | <div class="rst-content"> | |
295 | <div role="navigation" aria-label="breadcrumbs navigation"> | |
296 | <ul class="wy-breadcrumbs"> | |
297 | <li><a href="..">Docs</a> »</li> | |
298 | ||
299 | ||
300 | ||
301 | <li>Development »</li> | |
302 | ||
303 | ||
304 | ||
305 | <li>Theming</li> | |
306 | <li class="wy-breadcrumbs-aside"> | |
307 | ||
308 | <a href="https://github.com/shaarli/Shaarli/edit/master/docs/Theming.md" | |
309 | class="icon icon-github"> Edit on GitHub</a> | |
310 | ||
311 | </li> | |
312 | </ul> | |
313 | <hr/> | |
314 | </div> | |
315 | <div role="main"> | |
316 | <div class="section"> | |
317 | ||
318 | <h2 id="foreword">Foreword</h2> | |
319 | <p>There are two ways of customizing how Shaarli looks:</p> | |
320 | <ol> | |
321 | <li>by using a custom CSS to override Shaarli's CSS</li> | |
322 | <li>by using a full theme that provides its own RainTPL templates, CSS and Javascript resources</li> | |
323 | </ol> | |
324 | <h2 id="custom-css">Custom CSS</h2> | |
325 | <p>Shaarli's appearance can be modified by adding CSS rules to: | |
326 | - Shaarli < <code>v0.9.0</code>: <code>inc/user.css</code> | |
327 | - Shaarli >= <code>v0.9.0</code>: <code>data/user.css</code></p> | |
328 | <p>This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.</p> | |
329 | <p><strong>Note</strong>: Do not edit <code>tpl/default/css/shaarli.css</code>! Your changes would be overridden when updating Shaarli.</p> | |
330 | <p>See also <a href="../Download CSS styles from an OPML list">Download CSS styles from an OPML list</a></p> | |
331 | <h2 id="themes">Themes</h2> | |
332 | <p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p> | |
333 | <p>Installation: | |
334 | - find a theme you'd like to install | |
335 | - copy or clone the theme folder under <code>tpl/<a_sweet_theme></code> | |
336 | - enable the theme: | |
337 | - Shaarli < <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: | |
338 | <code>"raintpl_tpl": "tpl\/my-template\/"</code> | |
339 | - Shaarli >= <code>v0.9.0</code>: select the theme through the <em>Tools</em> page</p> | |
340 | <h2 id="community-css-themes">Community CSS & themes</h2> | |
341 | <h3 id="custom-css_1">Custom CSS</h3> | |
342 | <ul> | |
343 | <li><a href="https://github.com/mrjovanovic/serious-theme-shaarli">mrjovanovic/serious-theme-shaarli</a> - A serious theme for Shaarli</li> | |
344 | <li><a href="https://github.com/shaarli/shaarli-themes">shaarli/shaarli-themes</a></li> | |
345 | </ul> | |
346 | <h3 id="themes_1">Themes</h3> | |
347 | <ul> | |
348 | <li><a href="https://github.com/AkibaTech/Shaarli---SuperHero-Theme">AkibaTech/Shaarli Superhero Theme</a> - A template/theme for Shaarli</li> | |
349 | <li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli</li> | |
350 | <li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme</li> | |
351 | <li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli</li> | |
352 | <li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli</li> | |
353 | <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> | |
354 | <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> | |
355 | </ul> | |
356 | <h3 id="shaarli-forks">Shaarli forks</h3> | |
357 | <ul> | |
358 | <li><a href="https://github.com/misterair/limonade">misterair/Limonade</a> - A fork of (legacy) Shaarli with a new template</li> | |
359 | <li><a href="https://github.com/vivienhaese/shaarlitheme">vivienhaese/shaarlitheme</a> - A Shaarli fork meant to be run in an openshift instance</li> | |
360 | </ul> | |
361 | <h2 id="example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</h2> | |
362 | <p>With the following configuration: | |
363 | - Apache 2 / PHP 5.6 | |
364 | - user sites are enabled, e.g. <code>/home/user/public_html/somedir</code> is served as <code>http://localhost/~user/somedir</code> | |
365 | - <code>http</code> is the name of the Apache user</p> | |
366 | <pre><code class="bash">$ cd ~/public_html | |
367 | ||
368 | # clone repositories | |
369 | $ git clone https://github.com/shaarli/Shaarli.git shaarli | |
370 | $ pushd shaarli/tpl | |
371 | $ git clone https://github.com/alexisju/albinomouse-template.git | |
372 | $ popd | |
373 | ||
374 | # set access rights for Apache | |
375 | $ chgrp -R http shaarli | |
376 | $ chmod g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp | |
377 | </code></pre> | |
378 | ||
379 | <p>Get config written: | |
380 | - go to the freshly installed site | |
381 | - fill the install form | |
382 | - log in to Shaarli</p> | |
383 | <p>Edit Shaarli's <a href="../configuration|Shaarli configuration">configuration|Shaarli configuration</a>:</p> | |
384 | <pre><code class="bash"># the file should be owned by Apache, thus not writeable => sudo | |
385 | $ sudo sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php | |
386 | </code></pre> | |
387 | ||
388 | </div> | |
389 | </div> | |
390 | <footer> | |
391 | ||
392 | <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation"> | |
393 | ||
394 | <a href="../Unit-tests/" class="btn btn-neutral float-right" title="Unit tests">Next <span class="icon icon-circle-arrow-right"></span></a> | |
395 | ||
396 | ||
397 | <a href="../Static-analysis/" class="btn btn-neutral" title="Static analysis"><span class="icon icon-circle-arrow-left"></span> Previous</a> | |
398 | ||
399 | </div> | |
400 | ||
401 | ||
402 | <hr/> | |
403 | ||
404 | <div role="contentinfo"> | |
405 | <!-- Copyright etc --> | |
406 | ||
407 | </div> | |
408 | ||
409 | 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>. | |
410 | </footer> | |
411 | ||
412 | </div> | |
413 | </div> | |
414 | ||
415 | </section> | |
416 | ||
417 | </div> | |
418 | ||
419 | <div class="rst-versions" role="note" style="cursor: pointer"> | |
420 | <span class="rst-current-version" data-toggle="rst-current-version"> | |
421 | ||
422 | <a href="https://github.com/shaarli/Shaarli" class="fa fa-github" style="float: left; color: #fcfcfc"> GitHub</a> | |
423 | ||
424 | ||
425 | <span><a href="../Static-analysis/" style="color: #fcfcfc;">« Previous</a></span> | |
426 | ||
427 | ||
428 | <span style="margin-left: 15px"><a href="../Unit-tests/" style="color: #fcfcfc">Next »</a></span> | |
429 | ||
430 | </span> | |
431 | </div> | |
432 | <script src="../js/theme.js"></script> | |
433 | ||
434 | </body> | |
435 | </html> |