diff options
Diffstat (limited to 'doc/Theming.html')
-rw-r--r-- | doc/Theming.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/doc/Theming.html b/doc/Theming.html new file mode 100644 index 00000000..e814dadf --- /dev/null +++ b/doc/Theming.html | |||
@@ -0,0 +1,138 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html> | ||
3 | <head> | ||
4 | <meta charset="utf-8"> | ||
5 | <meta name="generator" content="pandoc"> | ||
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> | ||
7 | <title>Shaarli - Theming</title> | ||
8 | <style type="text/css">code{white-space: pre;}</style> | ||
9 | <!--[if lt IE 9]> | ||
10 | <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | ||
11 | <![endif]--> | ||
12 | <style type="text/css"> | ||
13 | table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode { | ||
14 | margin: 0; padding: 0; vertical-align: baseline; border: none; } | ||
15 | table.sourceCode { width: 100%; line-height: 100%; } | ||
16 | td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; } | ||
17 | td.sourceCode { padding-left: 5px; } | ||
18 | code > span.kw { color: #007020; font-weight: bold; } | ||
19 | code > span.dt { color: #902000; } | ||
20 | code > span.dv { color: #40a070; } | ||
21 | code > span.bn { color: #40a070; } | ||
22 | code > span.fl { color: #40a070; } | ||
23 | code > span.ch { color: #4070a0; } | ||
24 | code > span.st { color: #4070a0; } | ||
25 | code > span.co { color: #60a0b0; font-style: italic; } | ||
26 | code > span.ot { color: #007020; } | ||
27 | code > span.al { color: #ff0000; font-weight: bold; } | ||
28 | code > span.fu { color: #06287e; } | ||
29 | code > span.er { color: #ff0000; font-weight: bold; } | ||
30 | </style> | ||
31 | <link rel="stylesheet" href="github-markdown.css"> | ||
32 | </head> | ||
33 | <body> | ||
34 | <div id="local-sidebar"> | ||
35 | <ul> | ||
36 | <li><a href="Home.html">Home</a></li> | ||
37 | <li>Installation | ||
38 | <ul> | ||
39 | <li><a href="Server-requirements.html">Server requirements</a></li> | ||
40 | <li><a href="Server-configuration.html">Server configuration</a></li> | ||
41 | <li><a href="Shaarli-configuration.html">Shaarli configuration</a></li> | ||
42 | </ul></li> | ||
43 | <li><a href="Usage.html">Usage</a> | ||
44 | <ul> | ||
45 | <li><a href="Sharing-button.html">Sharing button</a> (bookmarklet)</li> | ||
46 | <li><a href="Firefox-share.html">Firefox share</a></li> | ||
47 | <li><a href="RSS-feeds.html">RSS feeds</a></li> | ||
48 | </ul></li> | ||
49 | <li>How To | ||
50 | <ul> | ||
51 | <li><a href="Backup,-restore,-import-and-export.html">Backup, restore, import and export</a></li> | ||
52 | <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> | ||
53 | <li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li> | ||
54 | </ul></li> | ||
55 | <li><a href="Troubleshooting.html">Troubleshooting</a></li> | ||
56 | <li><a href="Development.html">Development</a> | ||
57 | <ul> | ||
58 | <li><a href="GnuPG-signature.html">GnuPG signature</a></li> | ||
59 | <li><a href="Coding-guidelines.html">Coding guidelines</a></li> | ||
60 | <li><a href="Directory-structure.html">Directory structure</a></li> | ||
61 | <li><a href="3rd-party-libraries.html">3rd party libraries</a></li> | ||
62 | <li><a href="Plugin-System.html">Plugin System</a></li> | ||
63 | <li><a href="Security.html">Security</a></li> | ||
64 | <li><a href="Static-analysis.html">Static analysis</a></li> | ||
65 | <li><a href="Theming.html">Theming</a></li> | ||
66 | <li><a href="Unit-tests.html">Unit tests</a></li> | ||
67 | </ul></li> | ||
68 | <li>About | ||
69 | <ul> | ||
70 | <li><a href="FAQ.html">FAQ</a></li> | ||
71 | <li><a href="Community-&-Related-software.html">Community & Related software</a></li> | ||
72 | <li><a href="TODO.html">TODO</a></li> | ||
73 | </ul></li> | ||
74 | </ul> | ||
75 | </div> | ||
76 | <h1 id="theming">Theming</h1> | ||
77 | <h2 id="user-css">User CSS</h2> | ||
78 | <ul> | ||
79 | <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> | ||
80 | <li>Do not edit <code>inc/shaarli.css</code>! Your changes would be overriden when updating Shaarli.</li> | ||
81 | <li>Some themes are available at <a href="https://github.com/shaarli/shaarli-themes" class="uri">https://github.com/shaarli/shaarli-themes</a>.</li> | ||
82 | </ul> | ||
83 | <p>See also:</p> | ||
84 | <ul> | ||
85 | <li><a href="Download-CSS-styles-from-an-OPML-list.html">Download CSS styles from an OPML list</a></li> | ||
86 | </ul> | ||
87 | <h2 id="raintpl-template">RainTPL template</h2> | ||
88 | <p><em>WARNING - This feature is currently being worked on and will be improved in the next releases. Experimental.</em></p> | ||
89 | <ul> | ||
90 | <li>Find the template you'd like to install (see the list of <a href="available-templates|Theming#community-themes--templates.html">available templates|Theming#community-themes--templates</a>)</li> | ||
91 | <li>Find it's git clone URL or download the zip archive for the template.</li> | ||
92 | <li>In your Shaarli <code>tpl/</code> directory, run <code>git clone https://url/of/my-template/</code> or unpack the zip archive. | ||
93 | <ul> | ||
94 | <li>There should now be a <code>my-template/</code> directory under the <code>tpl/</code> dir, containing directly all the template files.</li> | ||
95 | </ul></li> | ||
96 | <li><p>Edit <code>data/config.php</code> to have Shaarli use this template, e.g.</p> | ||
97 | <pre class="sourceCode php"><code class="sourceCode php"><span class="kw">$GLOBALS</span><span class="ot">[</span><span class="st">'config'</span><span class="ot">[</span><span class="st">'RAINTPL_TPL'</span><span class="ot">]</span> = <span class="st">'tpl/my-template/'</span><span class="ot">;](</span><span class="st">'RAINTPL_TPL'</span><span class="ot">]</span>-=-<span class="st">'tpl/my-template/'</span><span class="ot">;</span>.html<span class="ot">)</span></code></pre></li> | ||
98 | </ul> | ||
99 | <h2 id="community-themes-templates">Community themes & templates</h2> | ||
100 | <ul> | ||
101 | <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> | ||
102 | <li><a href="https://github.com/alexisju/albinomouse-template">alexisju/albinomouse-template</a> - A full template for Shaarli<a href=".html"></a></li> | ||
103 | <li><a href="https://github.com/dhoko/ShaarliTemplate">dhoko/ShaarliTemplate</a> - A template/theme for Shaarli<a href=".html"></a></li> | ||
104 | <li><a href="https://github.com/kalvn/shaarli-blocks">kalvn/shaarli-blocks</a> - A template/theme for Shaarli<a href=".html"></a></li> | ||
105 | <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> | ||
106 | <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> | ||
107 | <li><a href="https://github.com/Vinm/Blue-theme-for-Shaarli">Vinm/Blue-theme-for Shaarli</a> - A template/theme for Shaarli (<a href="https://github.com/Vinm/Blue-theme-for-Shaarli/issues/2">unmaintained</a>, compatibility unknown)<a href=".html"></a></li> | ||
108 | <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> | ||
109 | </ul> | ||
110 | <h3 id="example-installation-albinomouse-template">Example installation: AlbinoMouse template</h3> | ||
111 | <p>With the following configuration:</p> | ||
112 | <ul> | ||
113 | <li>Apache 2 / PHP 5.6</li> | ||
114 | <li>user sites are enabled, e.g. <code>/home/user/public_html/somedir</code> is served as <code>http://localhost/~user/somedir</code></li> | ||
115 | <li><code>http</code> is the name of the Apache user</li> | ||
116 | </ul> | ||
117 | <pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="kw">cd</span> ~/public_html | ||
118 | |||
119 | <span class="co"># clone repositories</span> | ||
120 | $ <span class="kw">git</span> clone https://github.com/shaarli/Shaarli.git shaarli | ||
121 | $ <span class="kw">pushd</span> shaarli/tpl | ||
122 | $ <span class="kw">git</span> clone https://github.com/alexisju/albinomouse-template.git | ||
123 | $ <span class="kw">popd</span> | ||
124 | |||
125 | <span class="co"># set access rights for Apache</span> | ||
126 | $ <span class="kw">chgrp</span> -R http shaarli | ||
127 | $ <span class="kw">chmod</span> g+rwx shaarli shaarli/cache shaarli/data shaarli/pagecache shaarli/tmp</code></pre> | ||
128 | <p>Get config written:</p> | ||
129 | <ul> | ||
130 | <li>go to the freshly installed site</li> | ||
131 | <li>fill the install form</li> | ||
132 | <li>log in to Shaarli</li> | ||
133 | </ul> | ||
134 | <p>Edit Shaarli's <a href="configuration|Shaarli-configuration.html">configuration|Shaarli configuration</a>:</p> | ||
135 | <pre class="sourceCode bash"><code class="sourceCode bash"><span class="co"># the file should be owned by Apache, thus not writeable => sudo</span> | ||
136 | $ <span class="kw">sudo</span> sed -i s=tpl=tpl/albinomouse-template=g shaarli/data/config.php</code></pre> | ||
137 | </body> | ||
138 | </html> | ||