doc/Theming.md

   1 #Theming
   2 ## Foreword
   3 There are two ways of customizing how Shaarli looks:
   4
   5 1. by using a custom CSS to override Shaarli's CSS
   6 2. by using a full theme that provides its own RainTPL templates, CSS and Javascript resources
   7
   8 ## Custom CSS
   9 Shaarli's appearance can be modified by adding CSS rules to:
  10 - Shaarli < `v0.9.0`: `inc/user.css`
  11 - Shaarli >= `v0.9.0`: `data/user.css`
  12
  13 This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.
  14
  15 **Note**: Do not edit `tpl/default/css/shaarli.css`! Your changes would be overridden when updating Shaarli.
  16
  17 See also [Download CSS styles from an OPML list](Download-CSS-styles-from-an-OPML-list.html)
  18
  19 ## Themes
  20 _WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental._
  21
  22 Installation:
  23 - find a theme you'd like to install
  24 - copy or clone the theme folder under `tpl/<a_sweet_theme>`
  25 - enable the theme:
  26     - Shaarli < `v0.9.0`: edit `data/config.json.php` and set the value of `raintpl_tpl` to the new theme name:
  27       `"raintpl_tpl": "tpl\/my-template\/"`
  28     - Shaarli >= `v0.9.0`: select the theme through the _Tools_ page
  29
  30 ## Community CSS & themes
  31 ### Custom CSS
  32 - [mrjovanovic/serious-theme-shaarli](https://github.com/mrjovanovic/serious-theme-shaarli) - A serious theme for Shaarli[](.html)
  33 - [shaarli/shaarli-themes](https://github.com/shaarli/shaarli-themes)[](.html)
  34
  35 ### Themes
  36 - [AkibaTech/Shaarli Superhero Theme](https://github.com/AkibaTech/Shaarli---SuperHero-Theme) - A template/theme for Shaarli[](.html)
  37 - [alexisju/albinomouse-template](https://github.com/alexisju/albinomouse-template) - A full template for Shaarli[](.html)
  38 - [ArthurHoaro/shaarli-launch](https://github.com/ArthurHoaro/shaarli-launch) - Customizable Shaarli theme[](.html)
  39 - [dhoko/ShaarliTemplate](https://github.com/dhoko/ShaarliTemplate) - A template/theme for Shaarli[](.html)
  40 - [kalvn/shaarli-blocks](https://github.com/kalvn/shaarli-blocks) - A template/theme for Shaarli[](.html)
  41 - [kalvn/Shaarli-Material](https://github.com/kalvn/Shaarli-Material) - A theme (template) based on Google's Material Design for Shaarli, the superfast delicious clone[](.html)
  42 - [ManufacturaInd/shaarli-2004licious-theme](https://github.com/ManufacturaInd/shaarli-2004licious-theme) - A template/theme as a humble homage to the early looks of the del.icio.us site[](.html)
  43
  44 ### Shaarli forks
  45 - [misterair/Limonade](https://github.com/misterair/limonade) - A fork of (legacy) Shaarli with a new template[](.html)
  46 - [vivienhaese/shaarlitheme](https://github.com/vivienhaese/shaarlitheme) - A Shaarli fork meant to be run in an openshift instance[](.html)
  47
  48 ## Example installation: AlbinoMouse theme
  49 With the following configuration:
  50 - Apache 2 / PHP 5.6
  51 - user sites are enabled, e.g. `/home/user/public_html/somedir` is served as `http://localhost/~user/somedir`
  52 - `http` is the name of the Apache user
  53
  54 ```bash
  55 $ cd ~/public_html
  56
  57 # clone repositories
  58 $ git clone https://github.com/shaarli/Shaarli.git shaarli
  59 $ pushd shaarli/tpl
  60 $ git clone https://github.com/alexisju/albinomouse-template.git
  61 $ popd
  62
  63 # set access rights for Apache
  64 $ chgrp -R http shaarli
  65 $ chmod g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp
  66 ```
  67
  68 Get config written:
  69 - go to the freshly installed site
  70 - fill the install form
  71 - log in to Shaarli
  72
  73 Edit Shaarli's [configuration|Shaarli configuration](configuration|Shaarli-configuration.html):
  74 ```bash
  75 # the file should be owned by Apache, thus not writeable => sudo
  76 $ sudo sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php
  77 ```