5 <meta name=
"generator" content=
"pandoc">
6 <meta name=
"viewport" content=
"width=device-width, initial-scale=1.0, user-scalable=yes">
7 <title>Shaarli – Theming
</title>
8 <style type=
"text/css">code{white-space: pre;}
</style>
9 <style type=
"text/css">
10 div.sourceCode { overflow-x: auto; }
11 table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
12 margin:
0; padding:
0; vertical-align: baseline; border: none; }
13 table.sourceCode { width:
100%; line-height:
100%; }
14 td.lineNumbers { text-align: right; padding-right:
4px; padding-left:
4px; color: #aaaaaa; border-right:
1px solid #aaaaaa; }
15 td.sourceCode { padding-left:
5px; }
16 code
> span.kw { color: #
007020; font-weight: bold; } /* Keyword */
17 code
> span.dt { color: #
902000; } /* DataType */
18 code
> span.dv { color: #
40a070; } /* DecVal */
19 code
> span.bn { color: #
40a070; } /* BaseN */
20 code
> span.fl { color: #
40a070; } /* Float */
21 code
> span.ch { color: #
4070a0; } /* Char */
22 code
> span.st { color: #
4070a0; } /* String */
23 code
> span.co { color: #
60a0b0; font-style: italic; } /* Comment */
24 code
> span.ot { color: #
007020; } /* Other */
25 code
> span.al { color: #ff0000; font-weight: bold; } /* Alert */
26 code
> span.fu { color: #
06287e; } /* Function */
27 code
> span.er { color: #ff0000; font-weight: bold; } /* Error */
28 code
> span.wa { color: #
60a0b0; font-weight: bold; font-style: italic; } /* Warning */
29 code
> span.cn { color: #
880000; } /* Constant */
30 code
> span.sc { color: #
4070a0; } /* SpecialChar */
31 code
> span.vs { color: #
4070a0; } /* VerbatimString */
32 code
> span.ss { color: #bb6688; } /* SpecialString */
33 code
> span.im { } /* Import */
34 code
> span.va { color: #
19177c; } /* Variable */
35 code
> span.cf { color: #
007020; font-weight: bold; } /* ControlFlow */
36 code
> span.op { color: #
666666; } /* Operator */
37 code
> span.bu { } /* BuiltIn */
38 code
> span.ex { } /* Extension */
39 code
> span.pp { color: #bc7a00; } /* Preprocessor */
40 code
> span.at { color: #
7d9029; } /* Attribute */
41 code
> span.do { color: #ba2121; font-style: italic; } /* Documentation */
42 code
> span.an { color: #
60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
43 code
> span.cv { color: #
60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
44 code
> span.in { color: #
60a0b0; font-weight: bold; font-style: italic; } /* Information */
46 <link rel=
"stylesheet" href=
"github-markdown.css">
48 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
52 <div id=
"local-sidebar">
54 <li><a href=
"Home.html">Home
</a></li>
57 <li><a href=
"Download-and-Installation.html">Download and Installation
</a></li>
58 <li><a href=
"Upgrade-and-migration.html">Upgrade and migration
</a></li>
59 <li><a href=
"Server-requirements.html">Server requirements
</a></li>
60 <li><a href=
"Server-configuration.html">Server configuration
</a></li>
61 <li><a href=
"Server-security.html">Server security
</a></li>
62 <li><a href=
"Shaarli-configuration.html">Shaarli configuration
</a></li>
63 <li><a href=
"Plugins.html">Plugins
</a></li>
65 <li><a href=
"Docker.html">Docker
</a></li>
66 <li><a href=
"Usage.html">Usage
</a>
68 <li><a href=
"Sharing-button.html">Sharing button
</a> (bookmarklet)
</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>
71 <li><a href=
"RSS-feeds.html">RSS feeds
</a></li>
72 <li><a href=
"REST-API.html">REST API
</a></li>
76 <li><a href=
"Backup,-restore,-import-and-export.html">Backup, restore, import and export
</a></li>
77 <li><a href=
"Copy-an-existing-installation-over-SSH-and-serve-it-locally.html">Copy an existing installation over SSH and serve it locally
</a></li>
78 <li><a href=
"Create-and-serve-multiple-Shaarlis-(farm).html">Create and serve multiple Shaarlis (farm)
</a></li>
79 <li><a href=
"Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list
</a></li>
80 <li><a href=
"Datastore-hacks.html">Datastore hacks
</a></li>
82 <li><a href=
"Troubleshooting.html">Troubleshooting
</a></li>
83 <li><a href=
"Development.html">Development
</a>
85 <li><a href=
"GnuPG-signature.html">GnuPG signature
</a></li>
86 <li><a href=
"Coding-guidelines.html">Coding guidelines
</a></li>
87 <li><a href=
"Directory-structure.html">Directory structure
</a></li>
88 <li><a href=
"3rd-party-libraries.html">3rd party libraries
</a></li>
89 <li><a href=
"Plugin-System.html">Plugin System
</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>
92 <li><a href=
"Security.html">Security
</a></li>
93 <li><a href=
"Static-analysis.html">Static analysis
</a></li>
94 <li><a href=
"Theming.html">Theming
</a></li>
95 <li><a href=
"Unit-tests.html">Unit tests
</a></li>
99 <li><a href=
"FAQ.html">FAQ
</a></li>
100 <li><a href=
"Community-&-Related-software.html">Community
& Related software
</a></li>
104 <h1 id=
"theming">Theming
</h1>
105 <h2 id=
"foreword">Foreword
</h2>
106 <p>There are two ways of customizing how Shaarli looks:
</p>
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>
111 <h2 id=
"custom-css">Custom CSS
</h2>
112 <p>Shaarli's appearance can be modified by adding CSS rules to:
</p>
114 <li>Shaarli
< <code>v0.9
.0</code>:
<code>inc/user.css
</code></li>
115 <li>Shaarli
>=
<code>v0.9
.0</code>:
<code>data/user.css
</code></li>
117 <p>This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.
</p>
118 <p><strong>Note
</strong>: Do not edit
<code>tpl/default/css/shaarli.css
</code>! Your changes would be overridden when updating Shaarli.
</p>
119 <p>See also
<a href=
"Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list
</a></p>
120 <h2 id=
"themes">Themes
</h2>
121 <p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.
</em></p>
124 <li>find a theme you'd like to install
</li>
125 <li>copy or clone the theme folder under
<code>tpl/
<a_sweet_theme
></code></li>
126 <li>enable the theme:
128 <li>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:
<br />
129 <code>"raintpl_tpl
":
"tpl\/my-template\/
"</code></li>
130 <li>Shaarli
>=
<code>v0.9
.0</code>: select the theme through the
<em>Tools
</em> page
</li>
133 <h2 id=
"community-css-themes">Community CSS
& themes
</h2>
134 <h3 id=
"custom-css-1">Custom CSS
</h3>
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>
139 <h3 id=
"themes-1">Themes
</h3>
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>
142 <li><a href=
"https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template
</a> - A full template for Shaarli
<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>
144 <li><a href=
"https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate
</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>
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>
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>
149 <h3 id=
"shaarli-forks">Shaarli forks
</h3>
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>
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>
154 <h2 id=
"example-installation-albinomouse-theme">Example installation: AlbinoMouse theme
</h2>
155 <p>With the following configuration:
</p>
157 <li>Apache
2 / PHP
5.6</li>
158 <li>user sites are enabled, e.g.
<code>/home/user/public_html/somedir
</code> is served as
<code>http://localhost/~user/somedir
</code></li>
159 <li><code>http
</code> is the name of the Apache user
</li>
161 <div class=
"sourceCode"><pre class=
"sourceCode bash"><code class=
"sourceCode bash">$
<span class=
"bu">cd
</span> ~/public_html
163 <span class=
"co"># clone repositories
</span>
164 $
<span class=
"fu">git
</span> clone https://github.com/shaarli/Shaarli.git shaarli
165 $
<span class=
"bu">pushd
</span> shaarli/tpl
166 $
<span class=
"fu">git
</span> clone https://github.com/alexisju/albinomouse-template.git
167 $
<span class=
"bu">popd
</span>
169 <span class=
"co"># set access rights for Apache
</span>
170 $
<span class=
"fu">chgrp
</span> -R http shaarli
171 $
<span class=
"fu">chmod
</span> g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp
</code></pre></div>
172 <p>Get config written:
</p>
174 <li>go to the freshly installed site
</li>
175 <li>fill the install form
</li>
176 <li>log in to Shaarli
</li>
178 <p>Edit Shaarli's
<a href=
"configuration%7CShaarli-configuration.html">configuration|Shaarli configuration
</a>:
</p>
179 <div class=
"sourceCode"><pre class=
"sourceCode bash"><code class=
"sourceCode bash"><span class=
"co"># the file should be owned by Apache, thus not writeable =
> sudo
</span>
180 $
<span class=
"fu">sudo
</span> sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php
</code></pre></div>