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.html">Download
</a></li>
58 <li><a href=
"Server-requirements.html">Server requirements
</a></li>
59 <li><a href=
"Server-configuration.html">Server configuration
</a></li>
60 <li><a href=
"Server-security.html">Server security
</a></li>
61 <li><a href=
"Shaarli-installation.html">Shaarli installation
</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>
75 <li><a href=
"Backup,-restore,-import-and-export.html">Backup, restore, import and export
</a></li>
76 <li><a href=
"Upgrade-from-original-sebsauvage/Shaarli.html">Upgrade from original sebsauvage/Shaarli
</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=
"Security.html">Security
</a></li>
92 <li><a href=
"Static-analysis.html">Static analysis
</a></li>
93 <li><a href=
"Theming.html">Theming
</a></li>
94 <li><a href=
"Unit-tests.html">Unit tests
</a></li>
98 <li><a href=
"FAQ.html">FAQ
</a></li>
99 <li><a href=
"Community-&-Related-software.html">Community
& Related software
</a></li>
100 <li><a href=
"TODO.html">TODO
</a></li>
104 <h1 id=
"theming">Theming
</h1>
105 <h2 id=
"user-css">User CSS
</h2>
107 <li>Shaarli's apparence can be modified by editing CSS rules in
<code>inc/user.css
</code>. This file allows to override rules defined in the main
<code>inc/shaarli.css
</code> (only add changed rules), or define a whole new theme.
</li>
108 <li>Do not edit
<code>inc/shaarli.css
</code>! Your changes would be overriden when updating Shaarli.
</li>
109 <li>Some themes are available at
<a href=
"https://github.com/shaarli/shaarli-themes" class=
"uri">https://github.com/shaarli/shaarli-themes
</a>.
</li>
113 <li><a href=
"Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list
</a></li>
115 <h2 id=
"raintpl-template">RainTPL template
</h2>
116 <p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.
</em></p>
118 <li>Find the template you'd like to install (see the list of
<a href=
"available-templates%7CTheming#community-themes--templates.html">available templates|Theming#community-themes--templates
</a>)
</li>
119 <li>Find it's git clone URL or download the zip archive for the template.
</li>
120 <li>In your Shaarli
<code>tpl/
</code> directory, run
<code>git clone https://url/of/my-template/
</code> or unpack the zip archive.
122 <li>There should now be a
<code>my-template/
</code> directory under the
<code>tpl/
</code> dir, containing directly all the template files.
</li>
124 <li><p>Edit
<code>data/config.php
</code> to have Shaarli use this template, e.g.
</p>
125 <div class=
"sourceCode"><pre class=
"sourceCode php"><code class=
"sourceCode php"><span class=
"kw">$GLOBALS
</span><span class=
"ot">[
</span><span class=
"st">'config
'</span><span class=
"ot">[
</span><span class=
"st">'RAINTPL_TPL
'</span><span class=
"ot">]
</span> =
<span class=
"st">'tpl/my-template/
'</span><span class=
"ot">;](
</span><span class=
"st">'RAINTPL_TPL
'</span><span class=
"ot">]
</span>-=-
<span class=
"st">'tpl/my-template/
'</span><span class=
"ot">;
</span>.html
<span class=
"ot">)
</span></code></pre></div></li>
127 <h2 id=
"community-themes-templates">Community themes
& templates
</h2>
129 <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>
130 <li><a href=
"https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template
</a> - A full template for Shaarli
<a href=
".html"></a></li>
131 <li><a href=
"https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate
</a> - A template/theme for Shaarli
<a href=
".html"></a></li>
132 <li><a href=
"https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks
</a> - A template/theme for Shaarli
<a href=
".html"></a></li>
133 <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>
134 <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>
135 <li><a href=
"https://github.com/Vinm/Blue-theme-for-Shaarli">Vinm/Blue-theme-for Shaarli
</a> - A template/theme for Shaarli (
<a href=
"https://github.com/Vinm/Blue-theme-for-Shaarli/issues/2">unmaintained
</a>, compatibility unknown)
<a href=
".html"></a></li>
136 <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>
138 <h3 id=
"example-installation-albinomouse-template">Example installation: AlbinoMouse template
</h3>
139 <p>With the following configuration:
</p>
141 <li>Apache
2 / PHP
5.6</li>
142 <li>user sites are enabled, e.g.
<code>/home/user/public_html/somedir
</code> is served as
<code>http://localhost/~user/somedir
</code></li>
143 <li><code>http
</code> is the name of the Apache user
</li>
145 <div class=
"sourceCode"><pre class=
"sourceCode bash"><code class=
"sourceCode bash">$
<span class=
"kw">cd
</span> ~/public_html
147 <span class=
"co"># clone repositories
</span>
148 $
<span class=
"kw">git
</span> clone https://github.com/shaarli/Shaarli.git shaarli
149 $
<span class=
"kw">pushd
</span> shaarli/tpl
150 $
<span class=
"kw">git
</span> clone https://github.com/alexisju/albinomouse-template.git
151 $
<span class=
"kw">popd
</span>
153 <span class=
"co"># set access rights for Apache
</span>
154 $
<span class=
"kw">chgrp
</span> -R http shaarli
155 $
<span class=
"kw">chmod
</span> g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp
</code></pre></div>
156 <p>Get config written:
</p>
158 <li>go to the freshly installed site
</li>
159 <li>fill the install form
</li>
160 <li>log in to Shaarli
</li>
162 <p>Edit Shaarli's
<a href=
"configuration%7CShaarli-configuration.html">configuration|Shaarli configuration
</a>:
</p>
163 <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>
164 $
<span class=
"kw">sudo
</span> sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php
</code></pre></div>