2017-01-26 18:52:54 +01:00
<!DOCTYPE html>
<!-- [if IE 8]><html class="no - js lt - ie9" lang="en" > <![endif] -->
<!-- [if gt IE 8]><! --> < html class = "no-js" lang = "en" > <!-- <![endif] -->
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "shortcut icon" href = "../img/favicon.ico" >
< title > Theming - Shaarli Documentation< / title >
< link href = 'https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700' rel = 'stylesheet' type = 'text/css' >
< link rel = "stylesheet" href = "../css/theme.css" type = "text/css" / >
< link rel = "stylesheet" href = "../css/theme_extra.css" type = "text/css" / >
< link rel = "stylesheet" href = "../css/highlight.css" >
< link href = "../github-markdown.css" rel = "stylesheet" >
< script >
// Current page data
var mkdocs_page_name = "Theming";
var mkdocs_page_input_path = "Theming.md";
var mkdocs_page_url = "/Theming/";
< / script >
< script src = "../js/jquery-2.1.1.min.js" > < / script >
< script src = "../js/modernizr-2.8.3.min.js" > < / script >
< script type = "text/javascript" src = "../js/highlight.pack.js" > < / script >
< / head >
< body class = "wy-body-for-nav" role = "document" >
< div class = "wy-grid-for-nav" >
< nav data-toggle = "wy-nav-shift" class = "wy-nav-side stickynav" >
< div class = "wy-side-nav-search" >
< a href = ".." class = "icon icon-home" > Shaarli Documentation< / a >
< div role = "search" >
< form id = "rtd-search-form" class = "wy-form" action = "../search.html" method = "get" >
< input type = "text" name = "q" placeholder = "Search docs" / >
< / form >
< / div >
< / div >
< div class = "wy-menu wy-menu-vertical" data-spy = "affix" role = "navigation" aria-label = "main navigation" >
< ul class = "current" >
< li class = "toctree-l1" >
< a class = "" href = ".." > Home< / a >
< / li >
< li class = "toctree-l1" >
< span class = "caption-text" > Setup< / span >
< ul class = "subnav" >
< li class = "" >
< a class = "" href = "../Download-and-Installation/" > Download and Installation< / a >
< / li >
< li class = "" >
< a class = "" href = "../Upgrade-and-migration/" > Upgrade and migration< / a >
< / li >
< li class = "" >
< a class = "" href = "../Server-requirements/" > Server requirements< / a >
< / li >
< li class = "" >
< a class = "" href = "../Server-configuration/" > Server configuration< / a >
< / li >
< li class = "" >
< a class = "" href = "../Server-security/" > Server security< / a >
< / li >
< li class = "" >
< a class = "" href = "../Shaarli-configuration/" > Shaarli configuration< / a >
< / li >
< li class = "" >
< a class = "" href = "../Plugins/" > Plugins< / a >
< / li >
< / ul >
< / li >
< li class = "toctree-l1" >
< span class = "caption-text" > Docker< / span >
< ul class = "subnav" >
< li class = "" >
2017-07-29 15:29:54 +02:00
< a class = "" href = "../docker/docker-101/" > Docker 101< / a >
2017-01-26 18:52:54 +01:00
< / li >
< li class = "" >
2017-07-29 15:29:54 +02:00
< a class = "" href = "../docker/shaarli-images/" > Shaarli images< / a >
2017-01-26 18:52:54 +01:00
< / li >
< li class = "" >
2017-07-29 15:29:54 +02:00
< a class = "" href = "../docker/reverse-proxy-configuration/" > Reverse proxy configuration< / a >
2017-01-26 18:52:54 +01:00
< / li >
< li class = "" >
2017-07-29 15:29:54 +02:00
< a class = "" href = "../docker/resources/" > Docker resources< / a >
2017-01-26 18:52:54 +01:00
< / li >
< / ul >
< / li >
< li class = "toctree-l1" >
< span class = "caption-text" > Usage< / span >
< ul class = "subnav" >
< li class = "" >
< a class = "" href = "../Features/" > Features< / a >
< / li >
< li class = "" >
< a class = "" href = "../Bookmarklet/" > Bookmarklet< / a >
< / li >
< li class = "" >
< a class = "" href = "../Browsing-and-searching/" > Browsing and searching< / a >
< / li >
< li class = "" >
< a class = "" href = "../Firefox-share/" > Firefox share< / a >
< / li >
< li class = "" >
< a class = "" href = "../RSS-feeds/" > RSS feeds< / a >
< / li >
< li class = "" >
< a class = "" href = "../REST-API/" > REST API< / a >
< / li >
< / ul >
< / li >
< li class = "toctree-l1" >
< span class = "caption-text" > How To< / span >
< ul class = "subnav" >
< li class = "" >
< a class = "" href = "../Backup,-restore,-import-and-export/" > Backup, restore, import and export< / a >
< / li >
< li class = "" >
2017-06-18 06:32:30 +02:00
< a class = "" href = "../Various-hacks/" > Various hacks< / a >
2017-01-26 18:52:54 +01:00
< / li >
< / ul >
< / li >
< li class = "toctree-l1" >
< a class = "" href = "../Troubleshooting/" > Troubleshooting< / a >
< / li >
< li class = "toctree-l1" >
< span class = "caption-text" > Development< / span >
< ul class = "subnav" >
< li class = "" >
< a class = "" href = "../Development-guidelines/" > Development guidelines< / a >
< / li >
< li class = "" >
< a class = "" href = "../Continuous-integration-tools/" > Continuous integration tools< / a >
< / li >
< li class = "" >
< a class = "" href = "../GnuPG-signature/" > GnuPG signature< / a >
< / li >
< li class = "" >
< a class = "" href = "../Coding-guidelines/" > Coding guidelines< / a >
< / li >
< li class = "" >
< a class = "" href = "../Directory-structure/" > Directory structure< / a >
< / li >
< li class = "" >
< a class = "" href = "../3rd-party-libraries/" > 3rd party libraries< / a >
< / li >
< li class = "" >
< a class = "" href = "../Plugin-System/" > Plugin System< / a >
< / li >
< li class = "" >
< a class = "" href = "../Release-Shaarli/" > Release Shaarli< / a >
< / li >
< li class = "" >
< a class = "" href = "../Versioning-and-Branches/" > Versioning and Branches< / a >
< / li >
< li class = "" >
< a class = "" href = "../Security/" > Security< / a >
< / li >
< li class = "" >
< a class = "" href = "../Static-analysis/" > Static analysis< / a >
< / li >
< li class = " current" >
< a class = "current" href = "./" > Theming< / a >
< ul class = "subnav" >
< li class = "toctree-l3" > < a href = "#foreword" > Foreword< / a > < / li >
< li class = "toctree-l3" > < a href = "#custom-css" > Custom CSS< / a > < / li >
< li class = "toctree-l3" > < a href = "#themes" > Themes< / a > < / li >
< li class = "toctree-l3" > < a href = "#community-css-themes" > Community CSS & themes< / a > < / li >
< ul >
< li > < a class = "toctree-l4" href = "#custom-css_1" > Custom CSS< / a > < / li >
< li > < a class = "toctree-l4" href = "#themes_1" > Themes< / a > < / li >
< li > < a class = "toctree-l4" href = "#shaarli-forks" > Shaarli forks< / a > < / li >
< / ul >
< li class = "toctree-l3" > < a href = "#example-installation-albinomouse-theme" > Example installation: AlbinoMouse theme< / a > < / li >
< / ul >
< / li >
< li class = "" >
< a class = "" href = "../Unit-tests/" > Unit tests< / a >
< / li >
< / ul >
< / li >
< li class = "toctree-l1" >
< span class = "caption-text" > About< / span >
< ul class = "subnav" >
< li class = "" >
< a class = "" href = "../FAQ/" > FAQ< / a >
< / li >
< li class = "" >
< a class = "" href = "../Community-&-Related-software/" > Community & Related software< / a >
< / li >
< / ul >
< / li >
< / ul >
< / div >
< / nav >
< section data-toggle = "wy-nav-shift" class = "wy-nav-content-wrap" >
< nav class = "wy-nav-top" role = "navigation" aria-label = "top navigation" >
< i data-toggle = "wy-nav-top" class = "fa fa-bars" > < / i >
< a href = ".." > Shaarli Documentation< / a >
< / nav >
< div class = "wy-nav-content" >
< div class = "rst-content" >
< div role = "navigation" aria-label = "breadcrumbs navigation" >
< ul class = "wy-breadcrumbs" >
< li > < a href = ".." > Docs< / a > » < / li >
< li > Development » < / li >
< li > Theming< / li >
< li class = "wy-breadcrumbs-aside" >
< a href = "https://github.com/shaarli/Shaarli/edit/master/docs/Theming.md"
class="icon icon-github"> Edit on GitHub< / a >
< / li >
< / ul >
< hr / >
< / div >
< div role = "main" >
< div class = "section" >
< h2 id = "foreword" > Foreword< / h2 >
< p > There are two ways of customizing how Shaarli looks:< / p >
< ol >
< li > by using a custom CSS to override Shaarli's CSS< / li >
< li > by using a full theme that provides its own RainTPL templates, CSS and Javascript resources< / li >
< / ol >
< h2 id = "custom-css" > Custom CSS< / h2 >
< p > Shaarli's appearance can be modified by adding CSS rules to:
- Shaarli < < code > v0.9.0< / code > : < code > inc/user.css< / code >
- Shaarli > = < code > v0.9.0< / code > : < code > data/user.css< / code > < / p >
< p > This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.< / p >
< p > < strong > Note< / strong > : Do not edit < code > tpl/default/css/shaarli.css< / code > ! Your changes would be overridden when updating Shaarli.< / p >
< p > See also < a href = "../Download CSS styles from an OPML list" > Download CSS styles from an OPML list< / a > < / p >
< h2 id = "themes" > Themes< / h2 >
< p > < em > WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.< / em > < / p >
< p > Installation:
- find a theme you'd like to install
- copy or clone the theme folder under < code > tpl/< a_sweet_theme> < / code >
- enable the theme:
- Shaarli < < 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:
< code > "raintpl_tpl": "tpl\/my-template\/"< / code >
- Shaarli > = < code > v0.9.0< / code > : select the theme through the < em > Tools< / em > page< / p >
< h2 id = "community-css-themes" > Community CSS & themes< / h2 >
< h3 id = "custom-css_1" > Custom CSS< / h3 >
< ul >
< li > < a href = "https://github.com/mrjovanovic/serious-theme-shaarli" > mrjovanovic/serious-theme-shaarli< / a > - A serious theme for Shaarli< / li >
< li > < a href = "https://github.com/shaarli/shaarli-themes" > shaarli/shaarli-themes< / a > < / li >
< / ul >
< h3 id = "themes_1" > Themes< / h3 >
< ul >
< li > < a href = "https://github.com/AkibaTech/Shaarli---SuperHero-Theme" > AkibaTech/Shaarli Superhero Theme< / a > - A template/theme for Shaarli< / li >
< li > < a href = "https://github.com/alexisju/albinomouse-template" > alexisju/albinomouse-template< / a > - A full template for Shaarli< / li >
< li > < a href = "https://github.com/ArthurHoaro/shaarli-launch" > ArthurHoaro/shaarli-launch< / a > - Customizable Shaarli theme< / li >
< li > < a href = "https://github.com/dhoko/ShaarliTemplate" > dhoko/ShaarliTemplate< / a > - A template/theme for Shaarli< / li >
< li > < a href = "https://github.com/kalvn/shaarli-blocks" > kalvn/shaarli-blocks< / a > - A template/theme for Shaarli< / li >
< 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 >
< 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 >
< / ul >
< h3 id = "shaarli-forks" > Shaarli forks< / h3 >
< ul >
< li > < a href = "https://github.com/misterair/limonade" > misterair/Limonade< / a > - A fork of (legacy) Shaarli with a new template< / li >
< li > < a href = "https://github.com/vivienhaese/shaarlitheme" > vivienhaese/shaarlitheme< / a > - A Shaarli fork meant to be run in an openshift instance< / li >
< / ul >
< h2 id = "example-installation-albinomouse-theme" > Example installation: AlbinoMouse theme< / h2 >
< p > With the following configuration:
- Apache 2 / PHP 5.6
- user sites are enabled, e.g. < code > /home/user/public_html/somedir< / code > is served as < code > http://localhost/~user/somedir< / code >
- < code > http< / code > is the name of the Apache user< / p >
< pre > < code class = "bash" > $ 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
< / code > < / pre >
< p > Get config written:
- go to the freshly installed site
- fill the install form
- log in to Shaarli< / p >
< p > Edit Shaarli's < a href = "../configuration|Shaarli configuration" > configuration|Shaarli configuration< / a > :< / p >
< pre > < code class = "bash" > # the file should be owned by Apache, thus not writeable => sudo
$ sudo sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php
< / code > < / pre >
< / div >
< / div >
< footer >
< div class = "rst-footer-buttons" role = "navigation" aria-label = "footer navigation" >
< a href = "../Unit-tests/" class = "btn btn-neutral float-right" title = "Unit tests" > Next < span class = "icon icon-circle-arrow-right" > < / span > < / a >
< a href = "../Static-analysis/" class = "btn btn-neutral" title = "Static analysis" > < span class = "icon icon-circle-arrow-left" > < / span > Previous< / a >
< / div >
< hr / >
< div role = "contentinfo" >
<!-- Copyright etc -->
< / div >
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 > .
< / footer >
< / div >
< / div >
< / section >
< / div >
< div class = "rst-versions" role = "note" style = "cursor: pointer" >
< span class = "rst-current-version" data-toggle = "rst-current-version" >
< a href = "https://github.com/shaarli/Shaarli" class = "fa fa-github" style = "float: left; color: #fcfcfc" > GitHub< / a >
< span > < a href = "../Static-analysis/" style = "color: #fcfcfc;" > « Previous< / a > < / span >
< span style = "margin-left: 15px" > < a href = "../Unit-tests/" style = "color: #fcfcfc" > Next » < / a > < / span >
< / span >
< / div >
< script src = "../js/theme.js" > < / script >
< / body >
< / html >
