Theming

Setting up your environment

In order to theme converse.js, you first need to set up a Development environment.

You’ll also want to preview the changes you make in your browser, for which a webserver will be useful.

To both set up the development environment and also start up a web browser to serve the files for you, simply run:

make serve

Note

To run the “make” commands, you’ll need GNUMake installed on your computer. If you use GNU/Linux or *BSD, it should be installed or available via your package manager. For Mac, I think you need to install XCode and in Windows you can use Chocolatey.

After running make serve you can open http://localhost:8000 in your webbrowser you’ll see the converse.js website.

However, when developing or changing the theme, you’ll want to load all the unminified JS and CSS resources as separate files. 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 in small .html files in the ./src/templates directory.

You can modify HTML markup that converse.js generates by modifying these files.

Modifying the CSS

The CSS files are generated from Sass files in the ./sass directory.

To generate the CSS you can run:

make css

Creating dist files

Once you’ve themed converse.js, you’ll want to create new minified distribution files of all the JavaScript and CSS.

Please refer to the Creating builds section for information on how this is done.