Theme Migration to HumHub 1.2 ¶
Use of new Theming ¶
HumHub 1.2 introduced an enhanced theming structure, which allows you to overwrite only the style definitions you want to change. This leads to smaller and cleaner themes without the need to manually maintain each small style change or addition of a new release. Please refer to the Theming Guide for more details about the new theme structure.
Note: You can still use your old theme, but you'll have to maintain your theme manually as before. You should at least create your themes
variables.lessfile as described in the following, since these variables are used within your mails.
The steps below, describe how to merge your old theme to the new theming structure:
- Download HumHub 1.2.
- Copy your theme folder to
humhub\themesof your HumHub 1.2 project folder.
- Copy the following directory into your theme
- Seperate your theme variables into
humhub\themes\yourTheme\less\variables.less. Use the new variable names used in
- Ideally, only add the differences between your theme and the default theme to
- Build your theme with
lessc -x build.less css/theme.css.
If your theme overwrites major parts of the defalt theme, you can disable the import of some default less files by setting variables as for example
@prev-login: true; to disable the import of
humhub/static/less/login.less. Please see the Theming Guide for more information about this technique.
Info: You should rebuild your theme after each HumHub release to adopt new theme changes automatically.
Info: If your theme directory resides outside the
themesdirectory, you'll have to edit the
@HUMHUBvariable within the
build.lessfile to point to the
static/lessdirectory of your HumHub v1.2 directory.
Please check the following files for changes, in case your theme does overwrite those files:
The same applies to the activity stream:
Legacy Themes ¶
Old themes, should check the following file for changes:
Note: This file will not be maintained in the future.
$(document).ready, this code is only
executed once if pjax is enabled, even if you navigate to another page.
For this purpose you can either listen to
$(document).on('humhub:ready',...) which is fired after a full page load and pjax page loads, or preferably implement a
humhub module with an
init function for your initialization logic.
You can also disable pjax by using the following configuration param in your
'params' => [ 'enablePjax' => false, ]
Note: Since pjax provides a major performance boost, you should consider merging your Theme to the new pjax logic.
- We cleaned up the themes main.php
- Add 'top-menu-nav' to main.php layout. This is required for pjax page loads.
- We added the icon definition etc to the themes head.php
The old ekko lighbox was replaced by the blueimp gallery. If your theme does overwrite a view with gallery images, you'll have to use the new data-ui-gallery attribute instead of the data-toggle and data-gallery attributes. Please check the following files:
JS Rewrite: ¶
- General Rewrite:
- Richtext rewrite:
- UserPicker rewrite:
- Space Picker