Starting point for creating a custom theme for ISPConfig, using Tailwind CSS. The provided theme closely resembles the default ISPConfig theme, but with a few changes to the layout and styles.
Warning
This is a start, and not a finished product. It's a work in progress.
All the fun is in making a theme using this starting point. But if you just want to use the theme:
-
Download the latest release from the releases page.
-
Unzip the release and place it in the
themes/
directory of your ISPConfig installation.
-
To configure this theme for one user:
-
Login to ISPConfig and go to
Tools
>User Settings
>Design
. -
Select the
tailwindone
theme and save the changes.
-
-
To configure this theme for all users (including on the login screen):
-
Open the
config.inc.php
file in theinterface/lib
directory of your ISPConfig installation. -
Find the
$conf['theme']
setting and change it totailwindone
:$conf['theme'] = 'tailwindone';
-
Save the file.
-
You should also change the
server/lib/server.inc.php
file to make the change update-safe. (source)
[!WARNING] At the moment a workaround is necessary to style the login form: https://forum.howtoforge.com/threads/override-login-form-from-theme.92018/
-
This repository is mainly a starting point for creating a custom theme for ISPConfig.
-
Clone the repository
-
Install the dependencies
npm install
-
Start the Tailwind CLI:
npm run dev
-
Symlink the
dist/
directory into ISPConfig'sthemes/
directory:ln -s /path/to/ispconfig-tailwind/dist/ /usr/local/ispconfig/interface/web/themes/tailwindone
-
For setting up ISPConfig, see:
ISPConfig will override the default templates with the ones in our theme. We gathered all the .htm
files from ISPConfig in the src/templates/
directory. From there we can modify the files to our liking.
In order to get better IDE support when working with ISPConfig's tpl
files, we created a Liquid-like templating language we call Liquidish
. It is somewhat like Liquid, but with a few differences.
When building the theme, it is compiled to .tpl.htm
files for ISPConfig.