Improve workflow for theming

I’m trying to build a custom theme (templates+css) for Conversejs, that will use Bootstrap and Fontawesome, and even after reading the documentation for theming here I don’t really understand how I’m supposed to work, and what is the workflow for creating a new theme. Here are a couple of issues I noticed:

1. The mockups are fairly useless when modifying the templates, mainly because they are completely static. Is there a way to generate mockups files from the templates files (e.g. a script that concatenates all the files into one static html)? Or better, is there a way to make the mockups files more dynamic (e.g. make them render the javascript templates with placeholder values)?
2. There is no make templates in the Makefile. The only way is to make build which also triggers jsmin, which takes forever. I have found that I can run ./node_modules/.bin/grunt jst to rebuild the templates.js, but this isn’t documented anywhere. A watch task (similar to compass watch) to rebuild templates.js everytime a file is changed could be very useful here.
3. Some things are hardcoded in converse.js file. For example, I am trying to use a Bootstrap nav for the controlbox tabs, but it needs a class named “active” on the li element, whereas Conversejs uses a class named “current” on the a element.
4. I am a bit concerned as to the maintenance of the theme. As the moment, the only way I can think of is to maintain my own github fork, make my own custom build, and tell Bower to install Conversejs from my fork. I will have to rebase my fork from upstream on a regular basis to stay up-to-date. I don’t see how custom themes can be easily distributed with this workflow. So is this the right way? Couldn’t the themes be separated from the main build (e.g. with two files: converse.js and converse-theme-X.js that contains the templates, and possibly custom js for the theme)?
5. This last point isn’t strictly about theming, but I think it’s related to the general workflow: it’s quite difficult to remove unwanted locales, and redundant dependencies (such as typeahead.js, already included in my site), without modifying some core files (namely main.js and some others), which again makes maintenance more difficult (this is related to #82).

So what is the correct workflow for creating and maintaining a custom theme? If I’m doing something wrong, please feel free to point me to the right direction. I’m also willing to help if needed, but I’m not a JS dev so I’ll need some directions.

List of template-related things hardcoded in the JS

• Tabs (don’t know yet how to fix this)
• pure-button in renderConfigurationForm and renderRegistrationForm. Could be replaced by a template (like the form_* templates)
• display:none form the roster filter form. It would be nice to have a class instead, so I can customize the appearance (e.g. instead of hiding it completely, I would like to dim it)

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

<bountysource-plugin>

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[jcbrand]

You make some good points and suggestions. I’d be keen to improve things further, but currently all work on this have to be done in my free time, unless people contract me to do something.

I’m seriously considering making a proprietary, paid-for add-on for converse.js which might help me fund more development on this project.

[jcbrand]

Yes, I think in light of that, this ticket can be closed.

Tabs are no longer there, the contact add form is in a modal and the pure-button class is no longer used.