[github/shaarli/Shaarli.git] / doc / Theming.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="pandoc">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>Shaarli – Theming</title>
  <style type="text/css">code{white-space: pre;}</style>
  <style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
  </style>
  <link rel="stylesheet" href="github-markdown.css">
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
  <![endif]-->
</head>
<body>
<div id="local-sidebar">
<ul>
<li><a href="Home.html">Home</a></li>
<li>Setup
<ul>
<li><a href="Download-and-Installation.html">Download and Installation</a></li>
<li><a href="Upgrade-and-migration.html">Upgrade and migration</a></li>
<li><a href="Server-requirements.html">Server requirements</a></li>
<li><a href="Server-configuration.html">Server configuration</a></li>
<li><a href="Server-security.html">Server security</a></li>
<li><a href="Shaarli-configuration.html">Shaarli configuration</a></li>
<li><a href="Plugins.html">Plugins</a></li>
</ul></li>
<li><a href="Docker.html">Docker</a></li>
<li><a href="Usage.html">Usage</a>
<ul>
<li><a href="Sharing-button.html">Sharing button</a> (bookmarklet)</li>
<li><a href="Browsing-and-Searching.html">Browsing and Searching</a></li>
<li><a href="Firefox-share.html">Firefox share</a></li>
<li><a href="RSS-feeds.html">RSS feeds</a></li>
</ul></li>
<li>How To
<ul>
<li><a href="Backup,-restore,-import-and-export.html">Backup, restore, import and export</a></li>
<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>
<li><a href="Create-and-serve-multiple-Shaarlis-(farm).html">Create and serve multiple Shaarlis (farm)</a></li>
<li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li>
<li><a href="Datastore-hacks.html">Datastore hacks</a></li>
</ul></li>
<li><a href="Troubleshooting.html">Troubleshooting</a></li>
<li><a href="Development.html">Development</a>
<ul>
<li><a href="GnuPG-signature.html">GnuPG signature</a></li>
<li><a href="Coding-guidelines.html">Coding guidelines</a></li>
<li><a href="Directory-structure.html">Directory structure</a></li>
<li><a href="3rd-party-libraries.html">3rd party libraries</a></li>
<li><a href="Plugin-System.html">Plugin System</a></li>
<li><a href="Release-Shaarli.html">Release Shaarli</a></li>
<li><a href="Security.html">Security</a></li>
<li><a href="Static-analysis.html">Static analysis</a></li>
<li><a href="Theming.html">Theming</a></li>
<li><a href="Unit-tests.html">Unit tests</a></li>
</ul></li>
<li>About
<ul>
<li><a href="FAQ.html">FAQ</a></li>
<li><a href="Community-&amp;-Related-software.html">Community &amp; Related software</a></li>
</ul></li>
</ul>
</div>
<h1 id="theming">Theming</h1>
<h2 id="user-css">User CSS</h2>
<ul>
<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>
<li>Do not edit <code>inc/shaarli.css</code>! Your changes would be overriden when updating Shaarli.</li>
<li>Some themes are available at <a href="https://github.com/shaarli/shaarli-themes" class="uri">https://github.com/shaarli/shaarli-themes</a>.</li>
</ul>
<p>See also:</p>
<ul>
<li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li>
</ul>
<h2 id="raintpl-template">RainTPL template</h2>
<p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p>
<ul>
<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>
<li>Find it's git clone URL or download the zip archive for the template.</li>
<li>In your Shaarli <code>tpl/</code> directory, run <code>git clone https://url/of/my-template/</code> or unpack the zip archive.
<ul>
<li>There should now be a <code>my-template/</code> directory under the <code>tpl/</code> dir, containing directly all the template files.</li>
</ul></li>
<li><p>Edit <code>data/config.json.php</code> to have Shaarli use this template, in <code>&quot;resource&quot;</code> e.g.</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json"><span class="er">&quot;raintpl_tpl&quot;:</span> <span class="er">&quot;tpl\/my-template\/&quot;,</span></code></pre></div></li>
</ul>
<h2 id="community-themes-templates">Community themes &amp; templates</h2>
<ul>
<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>
<li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli<a href=".html"></a></li>
<li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme.<a href=".html"></a></li>
<li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli<a href=".html"></a></li>
<li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli<a href=".html"></a></li>
<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>
<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>
<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>
<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>
<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>
</ul>
<h3 id="example-installation-albinomouse-template">Example installation: AlbinoMouse template</h3>
<p>With the following configuration:</p>
<ul>
<li>Apache 2 / PHP 5.6</li>
<li>user sites are enabled, e.g. <code>/home/user/public_html/somedir</code> is served as <code>http://localhost/~user/somedir</code></li>
<li><code>http</code> is the name of the Apache user</li>
</ul>
<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="bu">cd</span> ~/public_html

<span class="co"># clone repositories</span>
$ <span class="fu">git</span> clone https://github.com/shaarli/Shaarli.git shaarli
$ <span class="bu">pushd</span> shaarli/tpl
$ <span class="fu">git</span> clone https://github.com/alexisju/albinomouse-template.git
$ <span class="bu">popd</span>

<span class="co"># set access rights for Apache</span>
$ <span class="fu">chgrp</span> -R http shaarli
$ <span class="fu">chmod</span> g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp</code></pre></div>
<p>Get config written:</p>
<ul>
<li>go to the freshly installed site</li>
<li>fill the install form</li>
<li>log in to Shaarli</li>
</ul>
<p>Edit Shaarli's <a href="configuration%7CShaarli-configuration.html">configuration|Shaarli configuration</a>:</p>
<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="co"># the file should be owned by Apache, thus not writeable =&gt; sudo</span>
$ <span class="fu">sudo</span> sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php</code></pre></div>
</body>
</html>
Commit	Line	Data
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">
5409ade2	7	<title>Shaarli – Theming</title>
992af0b9	8	<style type="text/css">code{white-space: pre;}</style>
992af0b9	9	<style type="text/css">
5409ade2	10	div.sourceCode { overflow-x: auto; }
992af0b9 V	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; }
5409ade2 A	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 */
992af0b9 V	45	</style>
992af0b9 V	46	<link rel="stylesheet" href="github-markdown.css">
5409ade2 A	47	<!--[if lt IE 9]>
	48	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
	49	<![endif]-->
992af0b9 V	50	</head>
	51	<body>
	52	<div id="local-sidebar">
	53	<ul>
	54	<li><a href="Home.html">Home</a></li>
fdf88d19	55	<li>Setup
992af0b9	56	<ul>
fdf88d19 A	57	<li><a href="Download-and-Installation.html">Download and Installation</a></li>
fdf88d19 A	58	<li><a href="Upgrade-and-migration.html">Upgrade and migration</a></li>
992af0b9 V	59	<li><a href="Server-requirements.html">Server requirements</a></li>
992af0b9 V	60	<li><a href="Server-configuration.html">Server configuration</a></li>
5409ade2	61	<li><a href="Server-security.html">Server security</a></li>
992af0b9	62	<li><a href="Shaarli-configuration.html">Shaarli configuration</a></li>
08dcd8ea	63	<li><a href="Plugins.html">Plugins</a></li>
992af0b9	64	</ul></li>
5409ade2	65	<li><a href="Docker.html">Docker</a></li>
992af0b9 V	66	<li><a href="Usage.html">Usage</a>
	67	<ul>
	68	<li><a href="Sharing-button.html">Sharing button</a> (bookmarklet)</li>
5409ade2	69	<li><a href="Browsing-and-Searching.html">Browsing and Searching</a></li>
992af0b9 V	70	<li><a href="Firefox-share.html">Firefox share</a></li>
	71	<li><a href="RSS-feeds.html">RSS feeds</a></li>
	72	</ul></li>
	73	<li>How To
	74	<ul>
	75	<li><a href="Backup,-restore,-import-and-export.html">Backup, restore, import and export</a></li>
	76	<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>
5409ade2	77	<li><a href="Create-and-serve-multiple-Shaarlis-(farm).html">Create and serve multiple Shaarlis (farm)</a></li>
992af0b9	78	<li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li>
6335a0fc	79	<li><a href="Datastore-hacks.html">Datastore hacks</a></li>
992af0b9 V	80	</ul></li>
	81	<li><a href="Troubleshooting.html">Troubleshooting</a></li>
	82	<li><a href="Development.html">Development</a>
	83	<ul>
	84	<li><a href="GnuPG-signature.html">GnuPG signature</a></li>
	85	<li><a href="Coding-guidelines.html">Coding guidelines</a></li>
	86	<li><a href="Directory-structure.html">Directory structure</a></li>
	87	<li><a href="3rd-party-libraries.html">3rd party libraries</a></li>
	88	<li><a href="Plugin-System.html">Plugin System</a></li>
5409ade2	89	<li><a href="Release-Shaarli.html">Release Shaarli</a></li>
992af0b9 V	90	<li><a href="Security.html">Security</a></li>
	91	<li><a href="Static-analysis.html">Static analysis</a></li>
	92	<li><a href="Theming.html">Theming</a></li>
	93	<li><a href="Unit-tests.html">Unit tests</a></li>
	94	</ul></li>
	95	<li>About
	96	<ul>
	97	<li><a href="FAQ.html">FAQ</a></li>
	98	<li><a href="Community-&-Related-software.html">Community & Related software</a></li>
992af0b9 V	99	</ul></li>
	100	</ul>
	101	</div>
	102	<h1 id="theming">Theming</h1>
	103	<h2 id="user-css">User CSS</h2>
	104	<ul>
	105	<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>
	106	<li>Do not edit <code>inc/shaarli.css</code>! Your changes would be overriden when updating Shaarli.</li>
	107	<li>Some themes are available at <a href="https://github.com/shaarli/shaarli-themes" class="uri">https://github.com/shaarli/shaarli-themes</a>.</li>
	108	</ul>
	109	<p>See also:</p>
	110	<ul>
	111	<li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li>
	112	</ul>
	113	<h2 id="raintpl-template">RainTPL template</h2>
	114	<p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p>
	115	<ul>
5409ade2	116	<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>
992af0b9 V	117	<li>Find it's git clone URL or download the zip archive for the template.</li>
	118	<li>In your Shaarli <code>tpl/</code> directory, run <code>git clone https://url/of/my-template/</code> or unpack the zip archive.
	119	<ul>
	120	<li>There should now be a <code>my-template/</code> directory under the <code>tpl/</code> dir, containing directly all the template files.</li>
	121	</ul></li>
3cc8c898 A	122	<li><p>Edit <code>data/config.json.php</code> to have Shaarli use this template, in <code>"resource"</code> e.g.</p>
3cc8c898 A	123	<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json"><span class="er">"raintpl_tpl":</span> <span class="er">"tpl\/my-template\/",</span></code></pre></div></li>
992af0b9 V	124	</ul>
	125	<h2 id="community-themes-templates">Community themes & templates</h2>
	126	<ul>
	127	<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>
	128	<li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli<a href=".html"></a></li>
3cc8c898	129	<li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme.<a href=".html"></a></li>
992af0b9 V	130	<li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli<a href=".html"></a></li>
	131	<li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli<a href=".html"></a></li>
	132	<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>
3cc8c898	133	<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>
992af0b9	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>
fdf88d19	135	<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>
992af0b9 V	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>
	137	</ul>
	138	<h3 id="example-installation-albinomouse-template">Example installation: AlbinoMouse template</h3>
	139	<p>With the following configuration:</p>
	140	<ul>
	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>
	144	</ul>
fdf88d19	145	<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="bu">cd</span> ~/public_html
992af0b9 V	146
992af0b9 V	147	<span class="co"># clone repositories</span>
fdf88d19 A	148	$ <span class="fu">git</span> clone https://github.com/shaarli/Shaarli.git shaarli
	149	$ <span class="bu">pushd</span> shaarli/tpl
	150	$ <span class="fu">git</span> clone https://github.com/alexisju/albinomouse-template.git
	151	$ <span class="bu">popd</span>
992af0b9 V	152
992af0b9 V	153	<span class="co"># set access rights for Apache</span>
fdf88d19 A	154	$ <span class="fu">chgrp</span> -R http shaarli
fdf88d19 A	155	$ <span class="fu">chmod</span> g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp</code></pre></div>
992af0b9 V	156	<p>Get config written:</p>
	157	<ul>
	158	<li>go to the freshly installed site</li>
	159	<li>fill the install form</li>
	160	<li>log in to Shaarli</li>
	161	</ul>
5409ade2 A	162	<p>Edit Shaarli's <a href="configuration%7CShaarli-configuration.html">configuration\|Shaarli configuration</a>:</p>
5409ade2 A	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>
fdf88d19	164	$ <span class="fu">sudo</span> sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php</code></pre></div>
992af0b9 V	165	</body>
992af0b9 V	166	</html>