MyShaarli/doc/md/dev/Theming.md
nodiscc add670b8ab
doc: fix mkdocs build warnings/relative links
INFO    -  Cleaning site directory
INFO    -  Building documentation to directory: /home/live/GIT/Shaarli/doc/html
INFO    -  Doc file 'index.md' contains an unrecognized relative link 'Usage#tag-cloud', it was left
           as is. Did you mean 'Usage.md#tag-cloud'?
INFO    -  Doc file 'index.md' contains an unrecognized relative link 'Usage#picture-wall', it was
           left as is. Did you mean 'Usage.md#picture-wall'?
INFO    -  Doc file 'index.md' contains an unrecognized relative link 'Usage#import-export', it was
           left as is. Did you mean 'Usage.md#import-export'?
INFO    -  Doc file 'Community-and-related-software.md' contains an unrecognized relative link
           'REST-API', it was left as is. Did you mean 'REST-API.md'?
INFO    -  Doc file 'Community-and-related-software.md' contains an unrecognized relative link
           'Theming', it was left as is.
INFO    -  Doc file 'Installation.md' contains an unrecognized relative link
           'dev/Development#third-party-libraries', it was left as is. Did you mean
           'dev/Development.md#third-party-libraries'?
INFO    -  Doc file 'Installation.md' contains an unrecognized relative link
           'Upgrade-and-migration', it was left as is. Did you mean 'Upgrade-and-migration.md'?
INFO    -  Doc file 'Plugins.md' contains an unrecognized relative link 'Shaarli-configuration', it
           was left as is. Did you mean 'Shaarli-configuration.md'?
INFO    -  Doc file 'REST-API.md' contains an unrecognized relative link 'Server-configuration', it
           was left as is. Did you mean 'Server-configuration.md'?
INFO    -  Doc file 'Reverse-proxy.md' contains an unrecognized relative link
           'Shaarli-configuration', it was left as is. Did you mean 'Shaarli-configuration.md'?
INFO    -  Doc file 'Server-configuration.md' contains an unrecognized relative link
           'Directory-structure', it was left as is.
INFO    -  Doc file 'Shaarli-configuration.md' contains an unrecognized relative link
           'Translations', it was left as is.
INFO    -  Doc file 'dev/Development.md' contains an unrecognized relative link 'Unit-tests', it was
           left as is. Did you mean 'Unit-tests.md'?
INFO    -  Doc file 'dev/Development.md' contains an unrecognized relative link 'GnuPG-signature',
           it was left as is. Did you mean 'GnuPG-signature.md'?
INFO    -  Doc file 'dev/GnuPG-signature.md' contains an unrecognized relative link 'Release
           Shaarli', it was left as is.
INFO    -  Doc file 'dev/Theming.md' contains an unrecognized relative link 'Shaarli-configuration',
           it was left as is.
INFO    -  Doc file 'dev/Translations.md' contains an unrecognized relative link 'Theming', it was
           left as is. Did you mean 'Theming.md'?
INFO    -  Documentation built in 0.40 seconds
2023-08-20 23:13:59 +02:00

3.3 KiB

Theming

Foreword

There are two ways of customizing how Shaarli looks:

  1. by using a custom CSS to override Shaarli's CSS
  2. by using a full theme that provides its own RainTPL templates, CSS and Javascript resources

Custom CSS

Shaarli's appearance can be modified by adding CSS rules to:

  • Shaarli < v0.9.0: inc/user.css
  • Shaarli >= v0.9.0: data/user.css

This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.

Note: Do not edit tpl/default/css/shaarli.css! Your changes would be overridden when updating Shaarli.

Themes

Installation:

  • find a theme you'd like to install
  • copy or clone the theme folder under tpl/<a_sweet_theme>
  • enable the theme:
    • Shaarli < v0.9.0: edit data/config.json.php and set the value of raintpl_tpl to the new theme name: "raintpl_tpl": "tpl\/my-template\/"
    • Shaarli >= v0.9.0: select the theme through the Tools page

Community CSS & themes

Custom CSS

Themes

Shaarli forks

Example installation: AlbinoMouse theme

With the following configuration:

  • Apache 2 / PHP 5.6
  • user sites are enabled, e.g. /home/user/public_html/somedir is served as http://localhost/~user/somedir
  • http is the name of the Apache user
$ cd ~/public_html

# clone repositories
$ git clone https://github.com/shaarli/Shaarli.git shaarli
$ pushd shaarli/tpl
$ git clone https://github.com/alexisju/albinomouse-template.git
$ popd

# set access rights for Apache
$ chgrp -R http shaarli
$ chmod g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp

Get config written:

  • go to the freshly installed site
  • fill the install form
  • log in to Shaarli

Edit Shaarli's configuration:

# the file should be owned by Apache, thus not writeable => sudo
$ sudo sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php