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-101/">Docker 101</a>
  98                 </li>
  99                 <li class="">
 100
 101     <a class="" href="../Shaarli-images/">Shaarli images</a>
 102                 </li>
 103                 <li class="">
 104
 105     <a class="" href="../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="../Copy-an-existing-installation-over-SSH-and-serve-it-locally/">Copy an existing installation over SSH and serve it locally</a>
 156                 </li>
 157                 <li class="">
 158
 159     <a class="" href="../Create-and-serve-multiple-Shaarlis-(farm)/">Create and serve multiple Shaarlis (farm)</a>
 160                 </li>
 161                 <li class="">
 162
 163     <a class="" href="../Download-CSS-styles-from-an-OPML-list/">Download CSS styles from an OPML list</a>
 164                 </li>
 165                 <li class="">
 166
 167     <a class="" href="../Datastore-hacks/">Datastore hacks</a>
 168                 </li>
 169     </ul>
 170             </li>
 171
 172             <li class="toctree-l1">
 173
 174     <a class="" href="../Troubleshooting/">Troubleshooting</a>
 175             </li>
 176
 177             <li class="toctree-l1">
 178
 179     <span class="caption-text">Development</span>
 180     <ul class="subnav">
 181                 <li class="">
 182
 183     <a class="" href="../Development-guidelines/">Development guidelines</a>
 184                 </li>
 185                 <li class="">
 186
 187     <a class="" href="../Continuous-integration-tools/">Continuous integration tools</a>
 188                 </li>
 189                 <li class="">
 190
 191     <a class="" href="../GnuPG-signature/">GnuPG signature</a>
 192                 </li>
 193                 <li class="">
 194
 195     <a class="" href="../Coding-guidelines/">Coding guidelines</a>
 196                 </li>
 197                 <li class="">
 198
 199     <a class="" href="../Directory-structure/">Directory structure</a>
 200                 </li>
 201                 <li class="">
 202
 203     <a class="" href="../3rd-party-libraries/">3rd party libraries</a>
 204                 </li>
 205                 <li class="">
 206
 207     <a class="" href="../Plugin-System/">Plugin System</a>
 208                 </li>
 209                 <li class="">
 210
 211     <a class="" href="../Release-Shaarli/">Release Shaarli</a>
 212                 </li>
 213                 <li class="">
 214
 215     <a class="" href="../Versioning-and-Branches/">Versioning and Branches</a>
 216                 </li>
 217                 <li class="">
 218
 219     <a class="" href="../Security/">Security</a>
 220                 </li>
 221                 <li class="">
 222
 223     <a class="" href="../Static-analysis/">Static analysis</a>
 224                 </li>
 225                 <li class=" current">
 226
 227     <a class="current" href="./">Theming</a>
 228     <ul class="subnav">
 229
 230     <li class="toctree-l3"><a href="#foreword">Foreword</a></li>
 231
 232
 233     <li class="toctree-l3"><a href="#custom-css">Custom CSS</a></li>
 234
 235
 236     <li class="toctree-l3"><a href="#themes">Themes</a></li>
 237
 238
 239     <li class="toctree-l3"><a href="#community-css-themes">Community CSS &amp; themes</a></li>
 240
 241         <ul>
 242
 243             <li><a class="toctree-l4" href="#custom-css_1">Custom CSS</a></li>
 244
 245             <li><a class="toctree-l4" href="#themes_1">Themes</a></li>
 246
 247             <li><a class="toctree-l4" href="#shaarli-forks">Shaarli forks</a></li>
 248
 249         </ul>
 250
 251
 252     <li class="toctree-l3"><a href="#example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</a></li>
 253
 254
 255     </ul>
 256                 </li>
 257                 <li class="">
 258
 259     <a class="" href="../Unit-tests/">Unit tests</a>
 260                 </li>
 261     </ul>
 262             </li>
 263
 264             <li class="toctree-l1">
 265
 266     <span class="caption-text">About</span>
 267     <ul class="subnav">
 268                 <li class="">
 269
 270     <a class="" href="../FAQ/">FAQ</a>
 271                 </li>
 272                 <li class="">
 273
 274     <a class="" href="../Community-&-Related-software/">Community & Related software</a>
 275                 </li>
 276     </ul>
 277             </li>
 278
 279         </ul>
 280       </div>
 281       &nbsp;
 282     </nav>
 283
 284     <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
 285
 286
 287       <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
 288         <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
 289         <a href="..">Shaarli Documentation</a>
 290       </nav>
 291
 292
 293       <div class="wy-nav-content">
 294         <div class="rst-content">
 295           <div role="navigation" aria-label="breadcrumbs navigation">
 296   <ul class="wy-breadcrumbs">
 297     <li><a href="..">Docs</a> &raquo;</li>
 298
 299
 300
 301           <li>Development &raquo;</li>
 302
 303
 304
 305     <li>Theming</li>
 306     <li class="wy-breadcrumbs-aside">
 307
 308         <a href="https://github.com/shaarli/Shaarli/edit/master/docs/Theming.md"
 309           class="icon icon-github"> Edit on GitHub</a>
 310
 311     </li>
 312   </ul>
 313   <hr/>
 314 </div>
 315           <div role="main">
 316             <div class="section">
 317
 318                 <h2 id="foreword">Foreword</h2>
 319 <p>There are two ways of customizing how Shaarli looks:</p>
 320 <ol>
 321 <li>by using a custom CSS to override Shaarli's CSS</li>
 322 <li>by using a full theme that provides its own RainTPL templates, CSS and Javascript resources</li>
 323 </ol>
 324 <h2 id="custom-css">Custom CSS</h2>
 325 <p>Shaarli's appearance can be modified by adding CSS rules to:
 326 - Shaarli &lt; <code>v0.9.0</code>: <code>inc/user.css</code>
 327 - Shaarli &gt;= <code>v0.9.0</code>: <code>data/user.css</code></p>
 328 <p>This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.</p>
 329 <p><strong>Note</strong>: Do not edit <code>tpl/default/css/shaarli.css</code>! Your changes would be overridden when updating Shaarli.</p>
 330 <p>See also <a href="../Download CSS styles from an OPML list">Download CSS styles from an OPML list</a></p>
 331 <h2 id="themes">Themes</h2>
 332 <p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p>
 333 <p>Installation:
 334 - find a theme you'd like to install
 335 - copy or clone the theme folder under <code>tpl/&lt;a_sweet_theme&gt;</code>
 336 - enable the theme:
 337     - 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:
 338       <code>"raintpl_tpl": "tpl\/my-template\/"</code>
 339     - Shaarli &gt;= <code>v0.9.0</code>: select the theme through the <em>Tools</em> page</p>
 340 <h2 id="community-css-themes">Community CSS &amp; themes</h2>
 341 <h3 id="custom-css_1">Custom CSS</h3>
 342 <ul>
 343 <li><a href="https://github.com/mrjovanovic/serious-theme-shaarli">mrjovanovic/serious-theme-shaarli</a> - A serious theme for Shaarli</li>
 344 <li><a href="https://github.com/shaarli/shaarli-themes">shaarli/shaarli-themes</a></li>
 345 </ul>
 346 <h3 id="themes_1">Themes</h3>
 347 <ul>
 348 <li><a href="https://github.com/AkibaTech/Shaarli---SuperHero-Theme">AkibaTech/Shaarli Superhero Theme</a> - A template/theme for Shaarli</li>
 349 <li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli</li>
 350 <li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme</li>
 351 <li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli</li>
 352 <li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli</li>
 353 <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>
 354 <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>
 355 </ul>
 356 <h3 id="shaarli-forks">Shaarli forks</h3>
 357 <ul>
 358 <li><a href="https://github.com/misterair/limonade">misterair/Limonade</a> - A fork of (legacy) Shaarli with a new template</li>
 359 <li><a href="https://github.com/vivienhaese/shaarlitheme">vivienhaese/shaarlitheme</a> - A Shaarli fork meant to be run in an openshift instance</li>
 360 </ul>
 361 <h2 id="example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</h2>
 362 <p>With the following configuration:
 363 - Apache 2 / PHP 5.6
 364 - user sites are enabled, e.g. <code>/home/user/public_html/somedir</code> is served as <code>http://localhost/~user/somedir</code>
 365 - <code>http</code> is the name of the Apache user</p>
 366 <pre><code class="bash">$ cd ~/public_html
 367
 368 # clone repositories
 369 $ git clone https://github.com/shaarli/Shaarli.git shaarli
 370 $ pushd shaarli/tpl
 371 $ git clone https://github.com/alexisju/albinomouse-template.git
 372 $ popd
 373
 374 # set access rights for Apache
 375 $ chgrp -R http shaarli
 376 $ chmod g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp
 377 </code></pre>
 378
 379 <p>Get config written:
 380 - go to the freshly installed site
 381 - fill the install form
 382 - log in to Shaarli</p>
 383 <p>Edit Shaarli's <a href="../configuration|Shaarli configuration">configuration|Shaarli configuration</a>:</p>
 384 <pre><code class="bash"># the file should be owned by Apache, thus not writeable =&gt; sudo
 385 $ sudo sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php
 386 </code></pre>
 387
 388             </div>
 389           </div>
 390           <footer>
 391
 392     <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
 393
 394         <a href="../Unit-tests/" class="btn btn-neutral float-right" title="Unit tests">Next <span class="icon icon-circle-arrow-right"></span></a>
 395
 396
 397         <a href="../Static-analysis/" class="btn btn-neutral" title="Static analysis"><span class="icon icon-circle-arrow-left"></span> Previous</a>
 398
 399     </div>
 400
 401
 402   <hr/>
 403
 404   <div role="contentinfo">
 405     <!-- Copyright etc -->
 406
 407   </div>
 408
 409   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>.
 410 </footer>
 411
 412         </div>
 413       </div>
 414
 415     </section>
 416
 417   </div>
 418
 419   <div class="rst-versions" role="note" style="cursor: pointer">
 420     <span class="rst-current-version" data-toggle="rst-current-version">
 421
 422           <a href="https://github.com/shaarli/Shaarli" class="fa fa-github" style="float: left; color: #fcfcfc"> GitHub</a>
 423
 424
 425         <span><a href="../Static-analysis/" style="color: #fcfcfc;">&laquo; Previous</a></span>
 426
 427
 428         <span style="margin-left: 15px"><a href="../Unit-tests/" style="color: #fcfcfc">Next &raquo;</a></span>
 429
 430     </span>
 431 </div>
 432     <script src="../js/theme.js"></script>
 433
 434 </body>
 435 </html>