Skip to main content

Tutorial

Foreword​

This quick tutorial shows you all necessary steps to create a custom HumHub theme.

caution

If you have installed HumHub via Git, make sure you have done the following steps first: Git Installation

Step 1: Create an own theme folder​

  • Go to the HumHub installation directory
  • Switch to the directory themes
  • Copy the folder HumHub and rename it to Example
  • Enable the new Example theme under Administration -> Settings -> Appearance

Step 2: Adjust colors and build CSS​

Installing prerequisites​

Install NodeJS

See: https://nodejs.org/en/download/

Install LESS

Open the command console and execute:

npm install less less-plugin-clean-css -g

Modify theme colors​

Add modifed color variables to the file /themes/Example/less/variables.less.

@default: #ededed;
@primary: #A66F00;
@info: #FFAA00;
@success: #97d271;
@warning: #fdd198;
@danger: #FFD073;

Compile LESS file​

Open the command console and change to the themes less directory

cd /path/to/HumHub/themes/Example/less

Build the CSS package

lessc --clean-css build.less ../css/theme.css

Test the result​

  • Flush your browsers cache
  • Flush the HumHub cache (if enabled): Administration -> Settings -> Advanced -> Cache -> Flush
  • Fully reload the page

Example

Step 3: Modify login template​

In this step we're adding some text to the login template.

Create a themed view file​

Copy the view file humhub/modules/user/views/auth/login.php to Example/views/user/auth/login.php

Modify the view file​

Add some additional text below the application name.

<span style="width:100px; color:white;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br />
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<br />
<br />
<br />

Text Example: Example Text

Result​

Result