diff --git a/.hgignore b/.hgignore --- a/.hgignore +++ b/.hgignore @@ -23,6 +23,7 @@ syntax: regexp ^\.pydevproject$ ^\.coverage$ ^kallithea/public/css/style\.css$ +^theme\.less$ ^kallithea\.db$ ^test\.db$ ^Kallithea\.egg-info$ diff --git a/docs/usage/customization.rst b/docs/usage/customization.rst --- a/docs/usage/customization.rst +++ b/docs/usage/customization.rst @@ -18,6 +18,29 @@ you can enter HTML code (possibly with J 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 -------------------------------------- diff --git a/kallithea/public/less/main.less b/kallithea/public/less/main.less --- a/kallithea/public/less/main.less +++ b/kallithea/public/less/main.less @@ -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";