changeset 7244:8152f9e6a778

less: load optional theme.less file to allow custom styles Users can use this file to easily override the default style. For example they can override the theme main color or the logo url.
author domruf <dominikruf@gmail.com>
date Wed, 25 Oct 2017 20:37:22 +0200
parents f5f796c77337
children 6c3bb9a845d7
files .hgignore docs/usage/customization.rst kallithea/public/less/main.less
diffstat 3 files changed, 27 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- a/.hgignore	Tue Oct 24 21:41:07 2017 +0200
+++ b/.hgignore	Wed Oct 25 20:37:22 2017 +0200
@@ -23,6 +23,7 @@
 ^\.pydevproject$
 ^\.coverage$
 ^kallithea/public/css/style\.css$
+^theme\.less$
 ^kallithea\.db$
 ^test\.db$
 ^Kallithea\.egg-info$
--- a/docs/usage/customization.rst	Tue Oct 24 21:41:07 2017 +0200
+++ b/docs/usage/customization.rst	Wed Oct 25 20:37:22 2017 +0200
@@ -18,6 +18,29 @@
 block*.
 
 
+Style sheet customization with Less
+-----------------------------------
+
+Kallithea uses `Bootstrap 3`_ and Less_ for its style definitions. If you want
+to make some customizations, we recommend to do so by creating a ``theme.less``
+file. When you create a file named ``theme.less`` in the Kallithea root
+directory, you can use this file to override the default style. For example,
+you can use this to override ``@kallithea-theme-main-color``,
+``@kallithea-logo-url`` or other `Bootstrap variables`_.
+
+After creating the ``theme.less`` file, you need to regenerate the CSS files.
+Install npm for your platform and run::
+
+    npm install
+    npm run less
+
+in the Kallithea root directory.
+
+.. _bootstrap 3: https://getbootstrap.com/docs/3.3/
+.. _bootstrap variables: https://getbootstrap.com/docs/3.3/customize/#less-variables
+.. _less: http://lesscss.org/
+
+
 Behavioral customization: rcextensions
 --------------------------------------
 
--- a/kallithea/public/less/main.less	Tue Oct 24 21:41:07 2017 +0200
+++ b/kallithea/public/less/main.less	Wed Oct 25 20:37:22 2017 +0200
@@ -23,3 +23,6 @@
 @import "kallithea-select2.less";
 @import "kallithea-diff.less";
 @import "style.less";
+
+/* finally, import the optional theme file with local customizations */
+@import (optional) "theme.less";