kallithea Changeset - 8152f9e6a778

Changeset - 8152f9e6a778

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

domruf - 8 years ago 2017-10-25 20:37:22
dominikruf@gmail.com

Grafted from: 584355a34b18

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.

3 files changed with 27 insertions and 0 deletions:

.hgignore

docs/usage/customization.rst

kallithea/public/less/main.less

0 comments (0 inline, 0 general)

.hgignore

➞

Show inline comments

@@ @@ -2,32 +2,33 @@ syntax: glob @@
 *.pyc
 *.swp
 *.sqlite
 *.tox
 *.egg-info
 *.egg
 *.mo
 .eggs/
 tarballcache/
 node_modules/
 syntax: regexp
 ^rcextensions
 ^build
 ^dist/
 ^docs/build/
 ^docs/_build/
 ^data$
 ^sql_dumps/
 ^\.settings$
 ^\.project$
 ^\.pydevproject$
 ^\.coverage$
 ^kallithea/public/css/style\.css$
 ^theme\.less$
 ^kallithea\.db$
 ^test\.db$
 ^Kallithea\.egg-info$
 ^my\.ini$
 ^fabfile.py
 ^\.idea$
 ^\.cache$
 /__pycache__$

docs/usage/customization.rst

➞

Show inline comments

 .. _customization:
 =============
 Customization
 =============
 There are several ways to customize Kallithea to your needs depending on what
 you want to achieve.
 HTML/JavaScript/CSS customization
 ---------------------------------
 To customize the look-and-feel of the web interface (for example to add a
 company banner or some JavaScript widget or to tweak the CSS style definitions)
 you can enter HTML code (possibly with JavaScript and/or CSS) directly via the
 *Admin > Settings > Global > HTML/JavaScript customization
 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
 --------------------------------------
 Some behavioral customization can be done in Python using ``rcextensions``, a
 custom Python package that can extend Kallithea functionality.
 With ``rcextensions`` it's possible to add additional mappings for Whoosh
 indexing and statistics, to add additional code into the push/pull/create/delete
 repository hooks (for example to send signals to build bots such as Jenkins) and
 even to monkey-patch certain parts of the Kallithea source code (for example
 overwrite an entire function, change a global variable, ...).
 To generate a skeleton extensions package, run::
     gearbox make-rcext -c my.ini
 This will create an ``rcextensions`` package next to the specified ``ini`` file.
 See the ``__init__.py`` file inside the generated ``rcextensions`` package
 for more details.
 Behavioral customization: code changes
 --------------------------------------

kallithea/public/less/main.less

➞

Show inline comments

@@ @@ -2,24 +2,27 @@ @@
  * Don't edit the css file directly.
+ *
  * Instead, edit the less file(s) and regenerate the css:
+ *
  * npm install
  * npm run less
+ *
  */
 /* 3rd party styles */
 @import "node_modules/bootstrap/less/bootstrap.less";
 @import (inline) "3rd-party/dataTables.bootstrap.css";
 @import (less) "../js/select2/select2.css";
 @import (less) "../js/select2/select2-bootstrap.css";
 @import (less) "../css/pygments.css";
 @import (less) "../fontello/css/kallithea.css";
 /* kallithea styles */
 @import "kallithea-variables.less";
 @import "kallithea-labels.less";
 @import "yui-ac.less";
 @import "kallithea-select2.less";
 @import "kallithea-diff.less";
 @import "style.less";
 /* finally, import the optional theme file with local customizations */
 @import (optional) "theme.less";

0 comments (0 inline, 0 general)