]>
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 | ||
0433c688 | 155 | <a class="" href="../Various-hacks/">Various hacks</a> |
53ed6d7d | 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 & 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 | | |
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> »</li> | |
286 | ||
287 | ||
288 | ||
289 | <li>Development »</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 < <code>v0.9.0</code>: <code>inc/user.css</code> | |
315 | - Shaarli >= <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/<a_sweet_theme></code> | |
324 | - enable the theme: | |
325 | - 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: | |
326 | <code>"raintpl_tpl": "tpl\/my-template\/"</code> | |
327 | - Shaarli >= <code>v0.9.0</code>: select the theme through the <em>Tools</em> page</p> | |
328 | <h2 id="community-css-themes">Community CSS & 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 => 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;">« Previous</a></span> | |
414 | ||
415 | ||
416 | <span style="margin-left: 15px"><a href="../Unit-tests/" style="color: #fcfcfc">Next »</a></span> | |
417 | ||
418 | </span> | |
419 | </div> | |
420 | <script src="../js/theme.js"></script> | |
421 | ||
422 | </body> | |
423 | </html> |