2015-07-22 05:02:10 +02:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "generator" content = "pandoc" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" >
2016-04-14 14:20:23 +02:00
< title > Shaarli – Theming< / title >
2015-07-22 05:02:10 +02:00
< style type = "text/css" > code { white-space : pre ; } < / style >
< style type = "text/css" >
2016-04-14 14:20:23 +02:00
div.sourceCode { overflow-x: auto; }
2015-07-22 05:02:10 +02:00
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
2016-04-14 14:20:23 +02:00
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
2015-07-22 05:02:10 +02:00
< / style >
< link rel = "stylesheet" href = "github-markdown.css" >
2016-04-14 14:20:23 +02:00
<!-- [if lt IE 9]>
< script src = "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js" > < / script >
<![endif]-->
2015-07-22 05:02:10 +02:00
< / head >
< body >
< div id = "local-sidebar" >
< ul >
< li > < a href = "Home.html" > Home< / a > < / li >
2016-10-12 12:36:59 +02:00
< li > Setup
2015-07-22 05:02:10 +02:00
< ul >
2016-10-12 12:36:59 +02:00
< li > < a href = "Download-and-Installation.html" > Download and Installation< / a > < / li >
< li > < a href = "Upgrade-and-migration.html" > Upgrade and migration< / a > < / li >
2015-07-22 05:02:10 +02:00
< li > < a href = "Server-requirements.html" > Server requirements< / a > < / li >
< li > < a href = "Server-configuration.html" > Server configuration< / a > < / li >
2016-04-14 14:20:23 +02:00
< li > < a href = "Server-security.html" > Server security< / a > < / li >
2015-07-22 05:02:10 +02:00
< li > < a href = "Shaarli-configuration.html" > Shaarli configuration< / a > < / li >
2016-05-14 11:37:28 +02:00
< li > < a href = "Plugins.html" > Plugins< / a > < / li >
2015-07-22 05:02:10 +02:00
< / ul > < / li >
2016-04-14 14:20:23 +02:00
< li > < a href = "Docker.html" > Docker< / a > < / li >
2015-07-22 05:02:10 +02:00
< li > < a href = "Usage.html" > Usage< / a >
< ul >
< li > < a href = "Sharing-button.html" > Sharing button< / a > (bookmarklet)< / li >
2016-04-14 14:20:23 +02:00
< li > < a href = "Browsing-and-Searching.html" > Browsing and Searching< / a > < / li >
2015-07-22 05:02:10 +02:00
< li > < a href = "Firefox-share.html" > Firefox share< / a > < / li >
< li > < a href = "RSS-feeds.html" > RSS feeds< / a > < / li >
2017-05-07 18:44:05 +02:00
< li > < a href = "REST-API.html" > REST API< / a > < / li >
2015-07-22 05:02:10 +02:00
< / ul > < / li >
< li > How To
< ul >
< li > < a href = "Backup,-restore,-import-and-export.html" > Backup, restore, import and export< / a > < / li >
< li > < a href = "Copy-an-existing-installation-over-SSH-and-serve-it-locally.html" > Copy an existing installation over SSH and serve it locally< / a > < / li >
2016-04-14 14:20:23 +02:00
< li > < a href = "Create-and-serve-multiple-Shaarlis-(farm).html" > Create and serve multiple Shaarlis (farm)< / a > < / li >
2015-07-22 05:02:10 +02:00
< li > < a href = "Download-CSS-styles-from-an-OPML-list.html" > Download CSS styles from an OPML list< / a > < / li >
2015-08-18 00:33:25 +02:00
< li > < a href = "Datastore-hacks.html" > Datastore hacks< / a > < / li >
2015-07-22 05:02:10 +02:00
< / ul > < / li >
< li > < a href = "Troubleshooting.html" > Troubleshooting< / a > < / li >
< li > < a href = "Development.html" > Development< / a >
< ul >
< li > < a href = "GnuPG-signature.html" > GnuPG signature< / a > < / li >
< li > < a href = "Coding-guidelines.html" > Coding guidelines< / a > < / li >
< li > < a href = "Directory-structure.html" > Directory structure< / a > < / li >
< li > < a href = "3rd-party-libraries.html" > 3rd party libraries< / a > < / li >
< li > < a href = "Plugin-System.html" > Plugin System< / a > < / li >
2016-04-14 14:20:23 +02:00
< li > < a href = "Release-Shaarli.html" > Release Shaarli< / a > < / li >
2017-05-07 18:44:05 +02:00
< li > < a href = "Versioning-and-Branches.html" > Versioning and Branches< / a > < / li >
2015-07-22 05:02:10 +02:00
< li > < a href = "Security.html" > Security< / a > < / li >
< li > < a href = "Static-analysis.html" > Static analysis< / a > < / li >
< li > < a href = "Theming.html" > Theming< / a > < / li >
< li > < a href = "Unit-tests.html" > Unit tests< / a > < / li >
< / ul > < / li >
< li > About
< ul >
< li > < a href = "FAQ.html" > FAQ< / a > < / li >
< li > < a href = "Community-&-Related-software.html" > Community & Related software< / a > < / li >
< / ul > < / li >
< / ul >
< / div >
< h1 id = "theming" > Theming< / h1 >
2017-05-07 18:44:05 +02:00
< 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:< / p >
2015-07-22 05:02:10 +02:00
< ul >
2017-05-07 18:44:05 +02:00
< li > Shaarli < < code > v0.9.0< / code > : < code > inc/user.css< / code > < / li >
< li > Shaarli > = < code > v0.9.0< / code > : < code > data/user.css< / code > < / li >
2015-07-22 05:02:10 +02:00
< / ul >
2017-05-07 18:44:05 +02:00
< 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.html" > Download CSS styles from an OPML list< / a > < / p >
< h2 id = "themes" > Themes< / h2 >
2015-07-22 05:02:10 +02:00
< p > < em > WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.< / em > < / p >
2017-05-07 18:44:05 +02:00
< p > Installation:< / p >
2015-07-22 05:02:10 +02:00
< ul >
2017-05-07 18:44:05 +02:00
< li > find a theme you'd like to install< / li >
< li > copy or clone the theme folder under < code > tpl/< a_sweet_theme> < / code > < / li >
< li > enable the theme:
2015-07-22 05:02:10 +02:00
< ul >
2017-05-07 18:44:05 +02:00
< li > 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:< br / >
< code > " raintpl_tpl" : " tpl\/my-template\/" < / code > < / li >
< li > Shaarli > = < code > v0.9.0< / code > : select the theme through the < em > Tools< / em > page< / li >
2015-07-22 05:02:10 +02:00
< / ul > < / li >
< / ul >
2017-05-07 18:44:05 +02:00
< 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< a href = ".html" > < / a > < / li >
< li > < a href = "https://github.com/shaarli/shaarli-themes" > shaarli/shaarli-themes< / a > < a href = ".html" > < / a > < / li >
< / ul >
< h3 id = "themes-1" > Themes< / h3 >
2015-07-22 05:02:10 +02:00
< ul >
< li > < a href = "https://github.com/AkibaTech/Shaarli---SuperHero-Theme" > AkibaTech/Shaarli Superhero Theme< / a > - A template/theme for Shaarli< a href = ".html" > < / a > < / li >
< li > < a href = "https://github.com/alexisju/albinomouse-template" > alexisju/albinomouse-template< / a > - A full template for Shaarli< a href = ".html" > < / a > < / li >
2017-05-07 18:44:05 +02:00
< li > < a href = "https://github.com/ArthurHoaro/shaarli-launch" > ArthurHoaro/shaarli-launch< / a > - Customizable Shaarli theme< a href = ".html" > < / a > < / li >
2015-07-22 05:02:10 +02:00
< li > < a href = "https://github.com/dhoko/ShaarliTemplate" > dhoko/ShaarliTemplate< / a > - A template/theme for Shaarli< a href = ".html" > < / a > < / li >
< li > < a href = "https://github.com/kalvn/shaarli-blocks" > kalvn/shaarli-blocks< / a > - A template/theme for Shaarli< a href = ".html" > < / a > < / li >
2017-05-07 18:44:05 +02:00
< 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< a href = ".html" > < / a > < / 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< a href = ".html" > < / a > < / li >
< / ul >
< h3 id = "shaarli-forks" > Shaarli forks< / h3 >
< ul >
2015-07-22 05:02:10 +02:00
< li > < a href = "https://github.com/misterair/limonade" > misterair/Limonade< / a > - A fork of (legacy) Shaarli with a new template< a href = ".html" > < / a > < / li >
< li > < a href = "https://github.com/vivienhaese/shaarlitheme" > vivienhaese/shaarlitheme< / a > - A Shaarli fork meant to be run in an openshift instance< a href = ".html" > < / a > < / li >
< / ul >
2017-05-07 18:44:05 +02:00
< h2 id = "example-installation-albinomouse-theme" > Example installation: AlbinoMouse theme< / h2 >
2015-07-22 05:02:10 +02:00
< p > With the following configuration:< / p >
< ul >
< li > Apache 2 / PHP 5.6< / li >
< li > user sites are enabled, e.g. < code > /home/user/public_html/somedir< / code > is served as < code > http://localhost/~user/somedir< / code > < / li >
< li > < code > http< / code > is the name of the Apache user< / li >
< / ul >
2016-10-12 12:36:59 +02:00
< div class = "sourceCode" > < pre class = "sourceCode bash" > < code class = "sourceCode bash" > $ < span class = "bu" > cd< / span > ~/public_html
2015-07-22 05:02:10 +02:00
< span class = "co" > # clone repositories< / span >
2016-10-12 12:36:59 +02:00
$ < span class = "fu" > git< / span > clone https://github.com/shaarli/Shaarli.git shaarli
$ < span class = "bu" > pushd< / span > shaarli/tpl
$ < span class = "fu" > git< / span > clone https://github.com/alexisju/albinomouse-template.git
$ < span class = "bu" > popd< / span >
2015-07-22 05:02:10 +02:00
< span class = "co" > # set access rights for Apache< / span >
2016-10-12 12:36:59 +02:00
$ < span class = "fu" > chgrp< / span > -R http shaarli
$ < span class = "fu" > chmod< / span > g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp< / code > < / pre > < / div >
2015-07-22 05:02:10 +02:00
< p > Get config written:< / p >
< ul >
< li > go to the freshly installed site< / li >
< li > fill the install form< / li >
< li > log in to Shaarli< / li >
< / ul >
2016-04-14 14:20:23 +02:00
< p > Edit Shaarli's < a href = "configuration%7CShaarli-configuration.html" > configuration|Shaarli configuration< / a > :< / p >
< div class = "sourceCode" > < pre class = "sourceCode bash" > < code class = "sourceCode bash" > < span class = "co" > # the file should be owned by Apache, thus not writeable => sudo< / span >
2016-10-12 12:36:59 +02:00
$ < span class = "fu" > sudo< / span > sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php< / code > < / pre > < / div >
2015-07-22 05:02:10 +02:00
< / body >
< / html >