diff options
Diffstat (limited to 'doc/Theming.html')
-rw-r--r-- | doc/Theming.html | 58 |
1 files changed, 37 insertions, 21 deletions
diff --git a/doc/Theming.html b/doc/Theming.html index 7cbf7aef..6b5dac35 100644 --- a/doc/Theming.html +++ b/doc/Theming.html | |||
@@ -69,6 +69,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf | |||
69 | <li><a href="Browsing-and-Searching.html">Browsing and Searching</a></li> | 69 | <li><a href="Browsing-and-Searching.html">Browsing and Searching</a></li> |
70 | <li><a href="Firefox-share.html">Firefox share</a></li> | 70 | <li><a href="Firefox-share.html">Firefox share</a></li> |
71 | <li><a href="RSS-feeds.html">RSS feeds</a></li> | 71 | <li><a href="RSS-feeds.html">RSS feeds</a></li> |
72 | <li><a href="REST-API.html">REST API</a></li> | ||
72 | </ul></li> | 73 | </ul></li> |
73 | <li>How To | 74 | <li>How To |
74 | <ul> | 75 | <ul> |
@@ -87,6 +88,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf | |||
87 | <li><a href="3rd-party-libraries.html">3rd party libraries</a></li> | 88 | <li><a href="3rd-party-libraries.html">3rd party libraries</a></li> |
88 | <li><a href="Plugin-System.html">Plugin System</a></li> | 89 | <li><a href="Plugin-System.html">Plugin System</a></li> |
89 | <li><a href="Release-Shaarli.html">Release Shaarli</a></li> | 90 | <li><a href="Release-Shaarli.html">Release Shaarli</a></li> |
91 | <li><a href="Versioning-and-Branches.html">Versioning and Branches</a></li> | ||
90 | <li><a href="Security.html">Security</a></li> | 92 | <li><a href="Security.html">Security</a></li> |
91 | <li><a href="Static-analysis.html">Static analysis</a></li> | 93 | <li><a href="Static-analysis.html">Static analysis</a></li> |
92 | <li><a href="Theming.html">Theming</a></li> | 94 | <li><a href="Theming.html">Theming</a></li> |
@@ -100,42 +102,56 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf | |||
100 | </ul> | 102 | </ul> |
101 | </div> | 103 | </div> |
102 | <h1 id="theming">Theming</h1> | 104 | <h1 id="theming">Theming</h1> |
103 | <h2 id="user-css">User CSS</h2> | 105 | <h2 id="foreword">Foreword</h2> |
106 | <p>There are two ways of customizing how Shaarli looks:</p> | ||
107 | <ol> | ||
108 | <li>by using a custom CSS to override Shaarli's CSS</li> | ||
109 | <li>by using a full theme that provides its own RainTPL templates, CSS and Javascript resources</li> | ||
110 | </ol> | ||
111 | <h2 id="custom-css">Custom CSS</h2> | ||
112 | <p>Shaarli's appearance can be modified by adding CSS rules to:</p> | ||
104 | <ul> | 113 | <ul> |
105 | <li>Shaarli's apparence can be modified by editing CSS rules in <code>inc/user.css</code>. This file allows to override rules defined in the main <code>inc/shaarli.css</code> (only add changed rules), or define a whole new theme.</li> | 114 | <li>Shaarli < <code>v0.9.0</code>: <code>inc/user.css</code></li> |
106 | <li>Do not edit <code>inc/shaarli.css</code>! Your changes would be overriden when updating Shaarli.</li> | 115 | <li>Shaarli >= <code>v0.9.0</code>: <code>data/user.css</code></li> |
107 | <li>Some themes are available at <a href="https://github.com/shaarli/shaarli-themes" class="uri">https://github.com/shaarli/shaarli-themes</a>.</li> | ||
108 | </ul> | 116 | </ul> |
109 | <p>See also:</p> | 117 | <p>This file allows overriding rules defined in the template CSS files (only add changed rules), or define a whole new theme.</p> |
110 | <ul> | 118 | <p><strong>Note</strong>: Do not edit <code>tpl/default/css/shaarli.css</code>! Your changes would be overridden when updating Shaarli.</p> |
111 | <li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li> | 119 | <p>See also <a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></p> |
112 | </ul> | 120 | <h2 id="themes">Themes</h2> |
113 | <h2 id="raintpl-template">RainTPL template</h2> | ||
114 | <p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p> | 121 | <p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p> |
122 | <p>Installation:</p> | ||
115 | <ul> | 123 | <ul> |
116 | <li>Find the template you'd like to install (see the list of <a href="available-templates%7CTheming#community-themes--templates.html">available templates|Theming#community-themes--templates</a>)</li> | 124 | <li>find a theme you'd like to install</li> |
117 | <li>Find it's git clone URL or download the zip archive for the template.</li> | 125 | <li>copy or clone the theme folder under <code>tpl/<a_sweet_theme></code></li> |
118 | <li>In your Shaarli <code>tpl/</code> directory, run <code>git clone https://url/of/my-template/</code> or unpack the zip archive. | 126 | <li>enable the theme: |
119 | <ul> | 127 | <ul> |
120 | <li>There should now be a <code>my-template/</code> directory under the <code>tpl/</code> dir, containing directly all the template files.</li> | 128 | <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 /> |
129 | <code>"raintpl_tpl": "tpl\/my-template\/"</code></li> | ||
130 | <li>Shaarli >= <code>v0.9.0</code>: select the theme through the <em>Tools</em> page</li> | ||
121 | </ul></li> | 131 | </ul></li> |
122 | <li><p>Edit <code>data/config.json.php</code> to have Shaarli use this template, in <code>"resource"</code> e.g.</p> | ||
123 | <div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json"><span class="er">"raintpl_tpl":</span> <span class="er">"tpl\/my-template\/",</span></code></pre></div></li> | ||
124 | </ul> | 132 | </ul> |
125 | <h2 id="community-themes-templates">Community themes & templates</h2> | 133 | <h2 id="community-css-themes">Community CSS & themes</h2> |
134 | <h3 id="custom-css-1">Custom CSS</h3> | ||
135 | <ul> | ||
136 | <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> | ||
137 | <li><a href="https://github.com/shaarli/shaarli-themes">shaarli/shaarli-themes</a><a href=".html"></a></li> | ||
138 | </ul> | ||
139 | <h3 id="themes-1">Themes</h3> | ||
126 | <ul> | 140 | <ul> |
127 | <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> | 141 | <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> |
128 | <li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli<a href=".html"></a></li> | 142 | <li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli<a href=".html"></a></li> |
129 | <li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme.<a href=".html"></a></li> | 143 | <li><a href="https://github.com/ArthurHoaro/shaarli-launch">ArthurHoaro/shaarli-launch</a> - Customizable Shaarli theme<a href=".html"></a></li> |
130 | <li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli<a href=".html"></a></li> | 144 | <li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli<a href=".html"></a></li> |
131 | <li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli<a href=".html"></a></li> | 145 | <li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli<a href=".html"></a></li> |
132 | <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> | 146 | <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> |
133 | <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> | 147 | <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> |
148 | </ul> | ||
149 | <h3 id="shaarli-forks">Shaarli forks</h3> | ||
150 | <ul> | ||
134 | <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> | 151 | <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> |
135 | <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> | ||
136 | <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> | 152 | <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> |
137 | </ul> | 153 | </ul> |
138 | <h3 id="example-installation-albinomouse-template">Example installation: AlbinoMouse template</h3> | 154 | <h2 id="example-installation-albinomouse-theme">Example installation: AlbinoMouse theme</h2> |
139 | <p>With the following configuration:</p> | 155 | <p>With the following configuration:</p> |
140 | <ul> | 156 | <ul> |
141 | <li>Apache 2 / PHP 5.6</li> | 157 | <li>Apache 2 / PHP 5.6</li> |