Skip to main content

Theme Structure

Overview​

Here are a few important tidbits:

  • All themes have their files located in the /themes root or module folder.
  • Each theme has its own sub-folder, in the main themes folder.
  • Each theme is made of template files, image files, one or more LESS/CSS files, and sometimes even JavaScript files (.js).

Create Own Theme Folder​

Note: Do not edit the default HumHub themes directly. All changes may overwritten on updates.

The best way to start is to copy the default theme folder HumHub.

Select a preferably unqiue theme name (e.g. MyCompanyName) for your new theme folder.

** Example: Copy theme folder (Linux)**

cd /path/to/HumHub
cp -rfa themes/HumHub themes/MyCompany

** Enable the theme **

Once you created an own theme folder, you need to enable it in the administration section of HumHub: Administration -> Settings -> Appeareance

Folder Structure Example​

This overview shows a complete theme folder structure including own less and view files.

    /themes/
        /mytheme/                       - My Theme Name
            /css/                       - Your theme css files (optional)
                theme.css               - Your actual theme css file
            /less/                      - Contains less files used to build your theme.css (optional)
                build.less              - Used to build your theme.css
                variables.less          - Contains theme variables as text and background colors
                mixins.less             - Used to define own mixins
                theme.less              - Contains your own theme definitions
            /js/                        - Additional javascript files (optional)
            /font/                      - Additional fonts (optional)
            /img/                       - Images (optional)         
            /views/                     - Overwritten Views
                /moduleId/              - Id of Module (module_core Id, module Id, or base controller id)
                    /controllerId/      - Id of Controller
                        index.php       - Overwritten View File
                    /widgets/           - Links to /someModule/widgets/views/
                        someWidget.php  - Overwritten widget view
                /widgets/               - Links to /protected/widget/views