doc/Theming.html

   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   <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 */
  45   </style>
  46   <link rel="stylesheet" href="github-markdown.css">
  47   <!--[if lt IE 9]>
  48     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
  49   <![endif]-->
  50 </head>
  51 <body>
  52 <div id="local-sidebar">
  53 <ul>
  54 <li><a href="Home.html">Home</a></li>
  55 <li>Setup
  56 <ul>
  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>
  64 </ul></li>
  65 <li><a href="Docker.html">Docker</a></li>
  66 <li><a href="Usage.html">Usage</a>
  67 <ul>
  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>
  73 </ul></li>
  74 <li>How To
  75 <ul>
  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>
  81 </ul></li>
  82 <li><a href="Troubleshooting.html">Troubleshooting</a></li>
  83 <li><a href="Development.html">Development</a>
  84 <ul>
  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>
  96 </ul></li>
  97 <li>About
  98 <ul>
  99 <li><a href="FAQ.html">FAQ</a></li>
 100 <li><a href="Community-&amp;-Related-software.html">Community &amp; Related software</a></li>
 101 </ul></li>
 102 </ul>
 103 </div>
 104 <h1 id="theming">Theming</h1>
 105 <h2 id="foreword">Foreword</h2>
 106 <p>There are two ways of customizing how Shaarli looks:</p>
 107 <ol>
 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>
 110 </ol>
 111 <h2 id="custom-css">Custom CSS</h2>
 112 <p>Shaarli's appearance can be modified by adding CSS rules to:</p>
 113 <ul>
 114 <li>Shaarli &lt; <code>v0.9.0</code>: <code>inc/user.css</code></li>
 115 <li>Shaarli &gt;= <code>v0.9.0</code>: <code>data/user.css</code></li>
 116 </ul>
 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>
 122 <p>Installation:</p>
 123 <ul>
 124 <li>find a theme you'd like to install</li>
 125 <li>copy or clone the theme folder under <code>tpl/&lt;a_sweet_theme&gt;</code></li>
 126 <li>enable the theme:
 127 <ul>
 128 <li>Shaarli &lt; <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>&quot;raintpl_tpl&quot;: &quot;tpl\/my-template\/&quot;</code></li>
 130 <li>Shaarli &gt;= <code>v0.9.0</code>: select the theme through the <em>Tools</em> page</li>
 131 </ul></li>
 132 </ul>
 133 <h2 id="community-css-themes">Community CSS &amp; themes</h2>
 134 <h3 id="custom-css-1">Custom CSS</h3>
 135 <ul>
 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>
 138 </ul>
 139 <h3 id="themes-1">Themes</h3>
 140 <ul>
 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>
 148 </ul>
 149 <h3 id="shaarli-forks">Shaarli forks</h3>
 150 <ul>
 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>
 153 </ul>
 154 <h2 id="example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</h2>
 155 <p>With the following configuration:</p>
 156 <ul>
 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>
 160 </ul>
 161 <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="bu">cd</span> ~/public_html
 162
 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>
 168
 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>
 173 <ul>
 174 <li>go to the freshly installed site</li>
 175 <li>fill the install form</li>
 176 <li>log in to Shaarli</li>
 177 </ul>
 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 =&gt; sudo</span>
 180 $ <span class="fu">sudo</span> sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php</code></pre></div>
 181 </body>
 182 </html>