]> git.immae.eu Git - github/shaarli/Shaarli.git/blame - doc/Theming.html
Fixes #325 - Shaarli does not recognize saved links
[github/shaarli/Shaarli.git] / doc / Theming.html
CommitLineData
992af0b9
V
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
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 <!--[if lt IE 9]>
10 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
11 <![endif]-->
12 <style type="text/css">
13table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
14 margin: 0; padding: 0; vertical-align: baseline; border: none; }
15table.sourceCode { width: 100%; line-height: 100%; }
16td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
17td.sourceCode { padding-left: 5px; }
18code > span.kw { color: #007020; font-weight: bold; }
19code > span.dt { color: #902000; }
20code > span.dv { color: #40a070; }
21code > span.bn { color: #40a070; }
22code > span.fl { color: #40a070; }
23code > span.ch { color: #4070a0; }
24code > span.st { color: #4070a0; }
25code > span.co { color: #60a0b0; font-style: italic; }
26code > span.ot { color: #007020; }
27code > span.al { color: #ff0000; font-weight: bold; }
28code > span.fu { color: #06287e; }
29code > span.er { color: #ff0000; font-weight: bold; }
30 </style>
31 <link rel="stylesheet" href="github-markdown.css">
32</head>
33<body>
34<div id="local-sidebar">
35<ul>
36<li><a href="Home.html">Home</a></li>
37<li>Installation
38<ul>
39<li><a href="Server-requirements.html">Server requirements</a></li>
40<li><a href="Server-configuration.html">Server configuration</a></li>
41<li><a href="Shaarli-configuration.html">Shaarli configuration</a></li>
42</ul></li>
43<li><a href="Usage.html">Usage</a>
44<ul>
45<li><a href="Sharing-button.html">Sharing button</a> (bookmarklet)</li>
46<li><a href="Firefox-share.html">Firefox share</a></li>
47<li><a href="RSS-feeds.html">RSS feeds</a></li>
48</ul></li>
49<li>How To
50<ul>
51<li><a href="Backup,-restore,-import-and-export.html">Backup, restore, import and export</a></li>
52<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>
53<li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li>
6335a0fc 54<li><a href="Datastore-hacks.html">Datastore hacks</a></li>
992af0b9
V
55</ul></li>
56<li><a href="Troubleshooting.html">Troubleshooting</a></li>
57<li><a href="Development.html">Development</a>
58<ul>
59<li><a href="GnuPG-signature.html">GnuPG signature</a></li>
60<li><a href="Coding-guidelines.html">Coding guidelines</a></li>
61<li><a href="Directory-structure.html">Directory structure</a></li>
62<li><a href="3rd-party-libraries.html">3rd party libraries</a></li>
63<li><a href="Plugin-System.html">Plugin System</a></li>
64<li><a href="Security.html">Security</a></li>
65<li><a href="Static-analysis.html">Static analysis</a></li>
66<li><a href="Theming.html">Theming</a></li>
67<li><a href="Unit-tests.html">Unit tests</a></li>
68</ul></li>
69<li>About
70<ul>
71<li><a href="FAQ.html">FAQ</a></li>
72<li><a href="Community-&amp;-Related-software.html">Community &amp; Related software</a></li>
73<li><a href="TODO.html">TODO</a></li>
74</ul></li>
75</ul>
76</div>
77<h1 id="theming">Theming</h1>
78<h2 id="user-css">User CSS</h2>
79<ul>
80<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>
81<li>Do not edit <code>inc/shaarli.css</code>! Your changes would be overriden when updating Shaarli.</li>
82<li>Some themes are available at <a href="https://github.com/shaarli/shaarli-themes" class="uri">https://github.com/shaarli/shaarli-themes</a>.</li>
83</ul>
84<p>See also:</p>
85<ul>
86<li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li>
87</ul>
88<h2 id="raintpl-template">RainTPL template</h2>
89<p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p>
90<ul>
91<li>Find the template you'd like to install (see the list of <a href="available-templates|Theming#community-themes--templates.html">available templates|Theming#community-themes--templates</a>)</li>
92<li>Find it's git clone URL or download the zip archive for the template.</li>
93<li>In your Shaarli <code>tpl/</code> directory, run <code>git clone https://url/of/my-template/</code> or unpack the zip archive.
94<ul>
95<li>There should now be a <code>my-template/</code> directory under the <code>tpl/</code> dir, containing directly all the template files.</li>
96</ul></li>
97<li><p>Edit <code>data/config.php</code> to have Shaarli use this template, e.g.</p>
98<pre class="sourceCode php"><code class="sourceCode php"><span class="kw">$GLOBALS</span><span class="ot">[</span><span class="st">&#39;config&#39;</span><span class="ot">[</span><span class="st">&#39;RAINTPL_TPL&#39;</span><span class="ot">]</span> = <span class="st">&#39;tpl/my-template/&#39;</span><span class="ot">;](</span><span class="st">&#39;RAINTPL_TPL&#39;</span><span class="ot">]</span>-=-<span class="st">&#39;tpl/my-template/&#39;</span><span class="ot">;</span>.html<span class="ot">)</span></code></pre></li>
99</ul>
100<h2 id="community-themes-templates">Community themes &amp; templates</h2>
101<ul>
102<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>
103<li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli<a href=".html"></a></li>
104<li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli<a href=".html"></a></li>
105<li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli<a href=".html"></a></li>
106<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>
107<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>
108<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>
109<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>
110</ul>
111<h3 id="example-installation-albinomouse-template">Example installation: AlbinoMouse template</h3>
112<p>With the following configuration:</p>
113<ul>
114<li>Apache 2 / PHP 5.6</li>
115<li>user sites are enabled, e.g. <code>/home/user/public_html/somedir</code> is served as <code>http://localhost/~user/somedir</code></li>
116<li><code>http</code> is the name of the Apache user</li>
117</ul>
118<pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="kw">cd</span> ~/public_html
119
120<span class="co"># clone repositories</span>
121$ <span class="kw">git</span> clone https://github.com/shaarli/Shaarli.git shaarli
122$ <span class="kw">pushd</span> shaarli/tpl
123$ <span class="kw">git</span> clone https://github.com/alexisju/albinomouse-template.git
124$ <span class="kw">popd</span>
125
126<span class="co"># set access rights for Apache</span>
127$ <span class="kw">chgrp</span> -R http shaarli
128$ <span class="kw">chmod</span> g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp</code></pre>
129<p>Get config written:</p>
130<ul>
131<li>go to the freshly installed site</li>
132<li>fill the install form</li>
133<li>log in to Shaarli</li>
134</ul>
135<p>Edit Shaarli's <a href="configuration|Shaarli-configuration.html">configuration|Shaarli configuration</a>:</p>
136<pre class="sourceCode bash"><code class="sourceCode bash"><span class="co"># the file should be owned by Apache, thus not writeable =&gt; sudo</span>
137$ <span class="kw">sudo</span> sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php</code></pre>
138</body>
139</html>