64 lines
1.6 KiB
ReStructuredText
64 lines
1.6 KiB
ReStructuredText
|
=======
|
||
|
|
Theming
|
||
|
|
=======
|
||
|
|
|
||
|
|
.. contents:: Table of Contents
|
||
|
|
:depth: 2
|
||
|
|
:local:
|
||
|
|
|
||
|
|
Setting up your environment
|
||
|
|
===========================
|
||
|
|
|
||
|
|
In order to theme converse.js, you'll first need to set up a `development_` environment.
|
||
|
|
|
||
|
|
You'll also want to preview the changes you make in the browser.
|
||
|
|
|
||
|
|
To set up the development environment and also start up a web browser which
|
||
|
|
will serve the files for you, simply run::
|
||
|
|
|
||
|
|
make serve
|
||
|
|
|
||
|
|
You can now open http://localhost:8000 in your webbrowser to see the
|
||
|
|
converse.js website.
|
||
|
|
|
||
|
|
However, when developing or changing the theme, you'll want to load all the
|
||
|
|
unminified JS and CSS resources. To do this, open http://localhost:8000/dev.html
|
||
|
|
instead.
|
||
|
|
|
||
|
|
Mockups
|
||
|
|
=======
|
||
|
|
|
||
|
|
Converse.js contains some mockups in the ``./mockup`` directory against which you
|
||
|
|
can preview and tweak your changes.
|
||
|
|
|
||
|
|
The ``./mockup/index.html`` file contains the most comprehensive mockup, while
|
||
|
|
the other files focus on particular UI aspects.
|
||
|
|
|
||
|
|
To see it in your browser, simply open: http://localhost:8000/mockup
|
||
|
|
|
||
|
|
|
||
|
|
Modifying the HTML templates of Converse.js
|
||
|
|
===========================================
|
||
|
|
|
||
|
|
The HTML markup of converse.js is contained small ``.html`` files in the
|
||
|
|
``./src/templates`` directory.
|
||
|
|
|
||
|
|
Modifying the CSS
|
||
|
|
=================
|
||
|
|
|
||
|
|
The CSS files are generated from `Sass <http://sass-lang.com>`_ files in
|
||
|
|
the ``./sass`` directory.
|
||
|
|
|
||
|
|
To generate the CSS you can run::
|
||
|
|
|
||
|
|
make css
|
||
|
|
|
||
|
|
Creating builds
|
||
|
|
===============
|
||
|
|
|
||
|
|
Once you've themed converse.js, you'll want to create new minified builds of
|
||
|
|
the Javascript and CSS files.
|
||
|
|
|
||
|
|
Please refer to the :doc:`builds` section for information on how this is done.
|
||
|
|
|