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]-->
6 <meta http-equiv=
"X-UA-Compatible" content=
"IE=edge">
7 <meta name=
"viewport" content=
"width=device-width, initial-scale=1.0">
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'
>
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">
21 var mkdocs_page_name = "Theming";
22 var mkdocs_page_input_path = "Theming.md";
23 var mkdocs_page_url = "/Theming/";
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>
32 <body class=
"wy-body-for-nav" role=
"document">
34 <div class=
"wy-grid-for-nav">
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>
41 <form id =
"rtd-search-form" class=
"wy-form" action=
"../search.html" method=
"get">
42 <input type=
"text" name=
"q" placeholder=
"Search docs" />
47 <div class=
"wy-menu wy-menu-vertical" data-spy=
"affix" role=
"navigation" aria-label=
"main navigation">
51 <li class=
"toctree-l1">
53 <a class=
"" href=
"..">Home
</a>
56 <li class=
"toctree-l1">
58 <span class=
"caption-text">Setup
</span>
62 <a class=
"" href=
"../Download-and-Installation/">Download and Installation
</a>
66 <a class=
"" href=
"../Upgrade-and-migration/">Upgrade and migration
</a>
70 <a class=
"" href=
"../Server-requirements/">Server requirements
</a>
74 <a class=
"" href=
"../Server-configuration/">Server configuration
</a>
78 <a class=
"" href=
"../Server-security/">Server security
</a>
82 <a class=
"" href=
"../Shaarli-configuration/">Shaarli configuration
</a>
86 <a class=
"" href=
"../Plugins/">Plugins
</a>
91 <li class=
"toctree-l1">
93 <span class=
"caption-text">Docker
</span>
97 <a class=
"" href=
"../Docker-101/">Docker
101</a>
101 <a class=
"" href=
"../Shaarli-images/">Shaarli images
</a>
105 <a class=
"" href=
"../Reverse-proxy-configuration/">Reverse proxy configuration
</a>
109 <a class=
"" href=
"../Docker-resources/">Docker resources
</a>
114 <li class=
"toctree-l1">
116 <span class=
"caption-text">Usage
</span>
120 <a class=
"" href=
"../Features/">Features
</a>
124 <a class=
"" href=
"../Bookmarklet/">Bookmarklet
</a>
128 <a class=
"" href=
"../Browsing-and-searching/">Browsing and searching
</a>
132 <a class=
"" href=
"../Firefox-share/">Firefox share
</a>
136 <a class=
"" href=
"../RSS-feeds/">RSS feeds
</a>
140 <a class=
"" href=
"../REST-API/">REST API
</a>
145 <li class=
"toctree-l1">
147 <span class=
"caption-text">How To
</span>
151 <a class=
"" href=
"../Backup,-restore,-import-and-export/">Backup, restore, import and export
</a>
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>
159 <a class=
"" href=
"../Create-and-serve-multiple-Shaarlis-(farm)/">Create and serve multiple Shaarlis (farm)
</a>
163 <a class=
"" href=
"../Download-CSS-styles-from-an-OPML-list/">Download CSS styles from an OPML list
</a>
167 <a class=
"" href=
"../Datastore-hacks/">Datastore hacks
</a>
172 <li class=
"toctree-l1">
174 <a class=
"" href=
"../Troubleshooting/">Troubleshooting
</a>
177 <li class=
"toctree-l1">
179 <span class=
"caption-text">Development
</span>
183 <a class=
"" href=
"../Development-guidelines/">Development guidelines
</a>
187 <a class=
"" href=
"../Continuous-integration-tools/">Continuous integration tools
</a>
191 <a class=
"" href=
"../GnuPG-signature/">GnuPG signature
</a>
195 <a class=
"" href=
"../Coding-guidelines/">Coding guidelines
</a>
199 <a class=
"" href=
"../Directory-structure/">Directory structure
</a>
203 <a class=
"" href=
"../3rd-party-libraries/">3rd party libraries
</a>
207 <a class=
"" href=
"../Plugin-System/">Plugin System
</a>
211 <a class=
"" href=
"../Release-Shaarli/">Release Shaarli
</a>
215 <a class=
"" href=
"../Versioning-and-Branches/">Versioning and Branches
</a>
219 <a class=
"" href=
"../Security/">Security
</a>
223 <a class=
"" href=
"../Static-analysis/">Static analysis
</a>
225 <li class=
" current">
227 <a class=
"current" href=
"./">Theming
</a>
230 <li class=
"toctree-l3"><a href=
"#foreword">Foreword
</a></li>
233 <li class=
"toctree-l3"><a href=
"#custom-css">Custom CSS
</a></li>
236 <li class=
"toctree-l3"><a href=
"#themes">Themes
</a></li>
239 <li class=
"toctree-l3"><a href=
"#community-css-themes">Community CSS
& themes
</a></li>
243 <li><a class=
"toctree-l4" href=
"#custom-css_1">Custom CSS
</a></li>
245 <li><a class=
"toctree-l4" href=
"#themes_1">Themes
</a></li>
247 <li><a class=
"toctree-l4" href=
"#shaarli-forks">Shaarli forks
</a></li>
252 <li class=
"toctree-l3"><a href=
"#example-installation-albinomouse-theme">Example installation: AlbinoMouse theme
</a></li>
259 <a class=
"" href=
"../Unit-tests/">Unit tests
</a>
264 <li class=
"toctree-l1">
266 <span class=
"caption-text">About
</span>
270 <a class=
"" href=
"../FAQ/">FAQ
</a>
274 <a class=
"" href=
"../Community-&-Related-software/">Community & Related software
</a>
284 <section data-toggle=
"wy-nav-shift" class=
"wy-nav-content-wrap">
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>
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>
301 <li>Development
»</li>
306 <li class=
"wy-breadcrumbs-aside">
308 <a href=
"https://github.com/shaarli/Shaarli/edit/master/docs/Theming.md"
309 class=
"icon icon-github"> Edit on GitHub
</a>
316 <div class=
"section">
318 <h2 id=
"foreword">Foreword
</h2>
319 <p>There are two ways of customizing how Shaarli looks:
</p>
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>
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>
334 - find a theme you'd like to install
335 - copy or clone the theme folder under
<code>tpl/
<a_sweet_theme
></code>
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>
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>
346 <h3 id=
"themes_1">Themes
</h3>
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>
356 <h3 id=
"shaarli-forks">Shaarli forks
</h3>
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>
361 <h2 id=
"example-installation-albinomouse-theme">Example installation: AlbinoMouse theme
</h2>
362 <p>With the following configuration:
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
369 $ git clone https://github.com/shaarli/Shaarli.git shaarli
371 $ git clone https://github.com/alexisju/albinomouse-template.git
374 # set access rights for Apache
375 $ chgrp -R http shaarli
376 $ chmod g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp
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
392 <div class=
"rst-footer-buttons" role=
"navigation" aria-label=
"footer navigation">
394 <a href=
"../Unit-tests/" class=
"btn btn-neutral float-right" title=
"Unit tests">Next
<span class=
"icon icon-circle-arrow-right"></span></a>
397 <a href=
"../Static-analysis/" class=
"btn btn-neutral" title=
"Static analysis"><span class=
"icon icon-circle-arrow-left"></span> Previous
</a>
404 <div role=
"contentinfo">
405 <!-- Copyright etc -->
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>.
419 <div class=
"rst-versions" role=
"note" style=
"cursor: pointer">
420 <span class=
"rst-current-version" data-toggle=
"rst-current-version">
422 <a href=
"https://github.com/shaarli/Shaarli" class=
"fa fa-github" style=
"float: left; color: #fcfcfc"> GitHub
</a>
425 <span><a href=
"../Static-analysis/" style=
"color: #fcfcfc;">« Previous
</a></span>
428 <span style=
"margin-left: 15px"><a href=
"../Unit-tests/" style=
"color: #fcfcfc">Next
»</a></span>
432 <script src=
"../js/theme.js"></script>