doc/html/Theming/index.html

   1 <!DOCTYPE html>
   2 <!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
   3 <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
   4 <head>
   5   <meta charset="utf-8">
   6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   8
   9
  10   <link rel="shortcut icon" href="../img/favicon.ico">
  11   <title>Theming - Shaarli Documentation</title>
  12   <link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700' rel='stylesheet' type='text/css'>
  13
  14   <link rel="stylesheet" href="../css/theme.css" type="text/css" />
  15   <link rel="stylesheet" href="../css/theme_extra.css" type="text/css" />
  16   <link rel="stylesheet" href="../css/highlight.css">
  17   <link href="../github-markdown.css" rel="stylesheet">
  18
  19   <script>
  20     // Current page data
  21     var mkdocs_page_name = "Theming";
  22     var mkdocs_page_input_path = "Theming.md";
  23     var mkdocs_page_url = "/Theming/";
  24   </script>
  25
  26   <script src="../js/jquery-2.1.1.min.js"></script>
  27   <script src="../js/modernizr-2.8.3.min.js"></script>
  28   <script type="text/javascript" src="../js/highlight.pack.js"></script>
  29
  30 </head>
  31
  32 <body class="wy-body-for-nav" role="document">
  33
  34   <div class="wy-grid-for-nav">
  35
  36
  37     <nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
  38       <div class="wy-side-nav-search">
  39         <a href=".." class="icon icon-home"> Shaarli Documentation</a>
  40         <div role="search">
  41   <form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
  42     <input type="text" name="q" placeholder="Search docs" />
  43   </form>
  44 </div>
  45       </div>
  46
  47       <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
  48         <ul class="current">
  49
  50
  51             <li class="toctree-l1">
  52
  53     <a class="" href="..">Home</a>
  54             </li>
  55
  56             <li class="toctree-l1">
  57
  58     <span class="caption-text">Setup</span>
  59     <ul class="subnav">
  60                 <li class="">
  61
  62     <a class="" href="../Download-and-Installation/">Download and Installation</a>
  63                 </li>
  64                 <li class="">
  65
  66     <a class="" href="../Upgrade-and-migration/">Upgrade and migration</a>
  67                 </li>
  68                 <li class="">
  69
  70     <a class="" href="../Server-requirements/">Server requirements</a>
  71                 </li>
  72                 <li class="">
  73
  74     <a class="" href="../Server-configuration/">Server configuration</a>
  75                 </li>
  76                 <li class="">
  77
  78     <a class="" href="../Server-security/">Server security</a>
  79                 </li>
  80                 <li class="">
  81
  82     <a class="" href="../Shaarli-configuration/">Shaarli configuration</a>
  83                 </li>
  84                 <li class="">
  85
  86     <a class="" href="../Plugins/">Plugins</a>
  87                 </li>
  88     </ul>
  89             </li>
  90
  91             <li class="toctree-l1">
  92
  93     <span class="caption-text">Docker</span>
  94     <ul class="subnav">
  95                 <li class="">
  96
  97     <a class="" href="../docker/docker-101/">Docker 101</a>
  98                 </li>
  99                 <li class="">
 100
 101     <a class="" href="../docker/shaarli-images/">Shaarli images</a>
 102                 </li>
 103                 <li class="">
 104
 105     <a class="" href="../docker/reverse-proxy-configuration/">Reverse proxy configuration</a>
 106                 </li>
 107                 <li class="">
 108
 109     <a class="" href="../docker/resources/">Docker resources</a>
 110                 </li>
 111     </ul>
 112             </li>
 113
 114             <li class="toctree-l1">
 115
 116     <span class="caption-text">Usage</span>
 117     <ul class="subnav">
 118                 <li class="">
 119
 120     <a class="" href="../Features/">Features</a>
 121                 </li>
 122                 <li class="">
 123
 124     <a class="" href="../Bookmarklet/">Bookmarklet</a>
 125                 </li>
 126                 <li class="">
 127
 128     <a class="" href="../Browsing-and-searching/">Browsing and searching</a>
 129                 </li>
 130                 <li class="">
 131
 132     <a class="" href="../Firefox-share/">Firefox share</a>
 133                 </li>
 134                 <li class="">
 135
 136     <a class="" href="../RSS-feeds/">RSS feeds</a>
 137                 </li>
 138                 <li class="">
 139
 140     <a class="" href="../REST-API/">REST API</a>
 141                 </li>
 142     </ul>
 143             </li>
 144
 145             <li class="toctree-l1">
 146
 147     <span class="caption-text">How To</span>
 148     <ul class="subnav">
 149                 <li class="">
 150
 151     <a class="" href="../Backup,-restore,-import-and-export/">Backup, restore, import and export</a>
 152                 </li>
 153                 <li class="">
 154
 155     <a class="" href="../Various-hacks/">Various hacks</a>
 156                 </li>
 157     </ul>
 158             </li>
 159
 160             <li class="toctree-l1">
 161
 162     <a class="" href="../Troubleshooting/">Troubleshooting</a>
 163             </li>
 164
 165             <li class="toctree-l1">
 166
 167     <span class="caption-text">Development</span>
 168     <ul class="subnav">
 169                 <li class="">
 170
 171     <a class="" href="../Development-guidelines/">Development guidelines</a>
 172                 </li>
 173                 <li class="">
 174
 175     <a class="" href="../Continuous-integration-tools/">Continuous integration tools</a>
 176                 </li>
 177                 <li class="">
 178
 179     <a class="" href="../GnuPG-signature/">GnuPG signature</a>
 180                 </li>
 181                 <li class="">
 182
 183     <a class="" href="../Coding-guidelines/">Coding guidelines</a>
 184                 </li>
 185                 <li class="">
 186
 187     <a class="" href="../Directory-structure/">Directory structure</a>
 188                 </li>
 189                 <li class="">
 190
 191     <a class="" href="../3rd-party-libraries/">3rd party libraries</a>
 192                 </li>
 193                 <li class="">
 194
 195     <a class="" href="../Plugin-System/">Plugin System</a>
 196                 </li>
 197                 <li class="">
 198
 199     <a class="" href="../Release-Shaarli/">Release Shaarli</a>
 200                 </li>
 201                 <li class="">
 202
 203     <a class="" href="../Versioning-and-Branches/">Versioning and Branches</a>
 204                 </li>
 205                 <li class="">
 206
 207     <a class="" href="../Security/">Security</a>
 208                 </li>
 209                 <li class="">
 210
 211     <a class="" href="../Static-analysis/">Static analysis</a>
 212                 </li>
 213                 <li class=" current">
 214
 215     <a class="current" href="./">Theming</a>
 216     <ul class="subnav">
 217
 218     <li class="toctree-l3"><a href="#foreword">Foreword</a></li>
 219
 220
 221     <li class="toctree-l3"><a href="#custom-css">Custom CSS</a></li>
 222
 223
 224     <li class="toctree-l3"><a href="#themes">Themes</a></li>
 225
 226
 227     <li class="toctree-l3"><a href="#community-css-themes">Community CSS &amp; themes</a></li>
 228
 229         <ul>
 230
 231             <li><a class="toctree-l4" href="#custom-css_1">Custom CSS</a></li>
 232
 233             <li><a class="toctree-l4" href="#themes_1">Themes</a></li>
 234
 235             <li><a class="toctree-l4" href="#shaarli-forks">Shaarli forks</a></li>
 236
 237         </ul>
 238
 239
 240     <li class="toctree-l3"><a href="#example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</a></li>
 241
 242
 243     </ul>
 244                 </li>
 245                 <li class="">
 246
 247     <a class="" href="../Unit-tests/">Unit tests</a>
 248                 </li>
 249     </ul>
 250             </li>
 251
 252             <li class="toctree-l1">
 253
 254     <span class="caption-text">About</span>
 255     <ul class="subnav">
 256                 <li class="">
 257
 258     <a class="" href="../FAQ/">FAQ</a>
 259                 </li>
 260                 <li class="">
 261
 262     <a class="" href="../Community-&-Related-software/">Community & Related software</a>
 263                 </li>
 264     </ul>
 265             </li>
 266
 267         </ul>
 268       </div>
 269       &nbsp;
 270     </nav>
 271
 272     <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
 273
 274
 275       <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
 276         <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
 277         <a href="..">Shaarli Documentation</a>
 278       </nav>
 279
 280
 281       <div class="wy-nav-content">
 282         <div class="rst-content">
 283           <div role="navigation" aria-label="breadcrumbs navigation">
 284   <ul class="wy-breadcrumbs">
 285     <li><a href="..">Docs</a> &raquo;</li>
 286
 287
 288
 289           <li>Development &raquo;</li>
 290
 291
 292
 293     <li>Theming</li>
 294     <li class="wy-breadcrumbs-aside">
 295
 296         <a href="https://github.com/shaarli/Shaarli/edit/master/docs/Theming.md"
 297           class="icon icon-github"> Edit on GitHub</a>
 298
 299     </li>
 300   </ul>
 301   <hr/>
 302 </div>
 303           <div role="main">
 304             <div class="section">
 305
 306                 <h2 id="foreword">Foreword</h2>
 307 <p>There are two ways of customizing how Shaarli looks:</p>
 308 <ol>
 309 <li>by using a custom CSS to override Shaarli's CSS</li>
 310 <li>by using a full theme that provides its own RainTPL templates, CSS and Javascript resources</li>
 311 </ol>
 312 <h2 id="custom-css">Custom CSS</h2>
 313 <p>Shaarli's appearance can be modified by adding CSS rules to:
 314 - Shaarli &lt; <code>v0.9.0</code>: <code>inc/user.css</code>
 315 - Shaarli &gt;= <code>v0.9.0</code>: <code>data/user.css</code></p>
 316 <p>This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.</p>
 317 <p><strong>Note</strong>: Do not edit <code>tpl/default/css/shaarli.css</code>! Your changes would be overridden when updating Shaarli.</p>
 318 <p>See also <a href="../Download CSS styles from an OPML list">Download CSS styles from an OPML list</a></p>
 319 <h2 id="themes">Themes</h2>
 320 <p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p>
 321 <p>Installation:
 322 - find a theme you'd like to install
 323 - copy or clone the theme folder under <code>tpl/&lt;a_sweet_theme&gt;</code>
 324 - enable the theme:
 325     - 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:
 326       <code>"raintpl_tpl": "tpl\/my-template\/"</code>
 327     - Shaarli &gt;= <code>v0.9.0</code>: select the theme through the <em>Tools</em> page</p>
 328 <h2 id="community-css-themes">Community CSS &amp; themes</h2>
 329 <h3 id="custom-css_1">Custom CSS</h3>
 330 <ul>
 331 <li><a href="https://github.com/mrjovanovic/serious-theme-shaarli">mrjovanovic/serious-theme-shaarli</a> - A serious theme for Shaarli</li>
 332 <li><a href="https://github.com/shaarli/shaarli-themes">shaarli/shaarli-themes</a></li>
 333 </ul>
 334 <h3 id="themes_1">Themes</h3>
 335 <ul>
 336 <li><a href="https://github.com/AkibaTech/Shaarli---SuperHero-Theme">AkibaTech/Shaarli Superhero Theme</a> - A template/theme for Shaarli</li>
 337 <li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli</li>
 338 <li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme</li>
 339 <li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli</li>
 340 <li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli</li>
 341 <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</li>
 342 <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</li>
 343 </ul>
 344 <h3 id="shaarli-forks">Shaarli forks</h3>
 345 <ul>
 346 <li><a href="https://github.com/misterair/limonade">misterair/Limonade</a> - A fork of (legacy) Shaarli with a new template</li>
 347 <li><a href="https://github.com/vivienhaese/shaarlitheme">vivienhaese/shaarlitheme</a> - A Shaarli fork meant to be run in an openshift instance</li>
 348 </ul>
 349 <h2 id="example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</h2>
 350 <p>With the following configuration:
 351 - Apache 2 / PHP 5.6
 352 - user sites are enabled, e.g. <code>/home/user/public_html/somedir</code> is served as <code>http://localhost/~user/somedir</code>
 353 - <code>http</code> is the name of the Apache user</p>
 354 <pre><code class="bash">$ cd ~/public_html
 355
 356 # clone repositories
 357 $ git clone https://github.com/shaarli/Shaarli.git shaarli
 358 $ pushd shaarli/tpl
 359 $ git clone https://github.com/alexisju/albinomouse-template.git
 360 $ popd
 361
 362 # set access rights for Apache
 363 $ chgrp -R http shaarli
 364 $ chmod g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp
 365 </code></pre>
 366
 367 <p>Get config written:
 368 - go to the freshly installed site
 369 - fill the install form
 370 - log in to Shaarli</p>
 371 <p>Edit Shaarli's <a href="../configuration|Shaarli configuration">configuration|Shaarli configuration</a>:</p>
 372 <pre><code class="bash"># the file should be owned by Apache, thus not writeable =&gt; sudo
 373 $ sudo sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php
 374 </code></pre>
 375
 376             </div>
 377           </div>
 378           <footer>
 379
 380     <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
 381
 382         <a href="../Unit-tests/" class="btn btn-neutral float-right" title="Unit tests">Next <span class="icon icon-circle-arrow-right"></span></a>
 383
 384
 385         <a href="../Static-analysis/" class="btn btn-neutral" title="Static analysis"><span class="icon icon-circle-arrow-left"></span> Previous</a>
 386
 387     </div>
 388
 389
 390   <hr/>
 391
 392   <div role="contentinfo">
 393     <!-- Copyright etc -->
 394
 395   </div>
 396
 397   Built with <a href="http://www.mkdocs.org">MkDocs</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
 398 </footer>
 399
 400         </div>
 401       </div>
 402
 403     </section>
 404
 405   </div>
 406
 407   <div class="rst-versions" role="note" style="cursor: pointer">
 408     <span class="rst-current-version" data-toggle="rst-current-version">
 409
 410           <a href="https://github.com/shaarli/Shaarli" class="fa fa-github" style="float: left; color: #fcfcfc"> GitHub</a>
 411
 412
 413         <span><a href="../Static-analysis/" style="color: #fcfcfc;">&laquo; Previous</a></span>
 414
 415
 416         <span style="margin-left: 15px"><a href="../Unit-tests/" style="color: #fcfcfc">Next &raquo;</a></span>
 417
 418     </span>
 419 </div>
 420     <script src="../js/theme.js"></script>
 421
 422 </body>
 423 </html>