luttje / ispconfig-tailwind-theme

A starting point for creating TailwindCSS themes for ISPConfig

🎨 ISPConfig Tailwind Theme #1

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.

   
   

🚀 Getting Started

All the fun is in making a theme using this starting point. But if you just want to use the theme:

1. Download the latest release from the releases page.

2. Unzip the release and place it in the themes/ directory of your ISPConfig installation.

• To configure this theme for one user:

  1. Login to ISPConfig and go to Tools > User Settings > Design.

  2. Select the tailwindone theme and save the changes.

• To configure this theme for all users (including on the login screen):

  1. Open the config.inc.php file in the interface/lib directory of your ISPConfig installation.

  2. Find the $conf['theme'] setting and change it to tailwindone:

     $conf['theme'] = 'tailwindone';

  3. Save the file.

  4. 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/

🔨 Making a theme

This repository is mainly a starting point for creating a custom theme for ISPConfig.

1. Clone the repository

2. Install the dependencies

   npm install

3. Start the Tailwind CLI:

   npm run dev

4. Symlink the dist/ directory into ISPConfig's themes/ directory:

   ln -s /path/to/ispconfig-tailwind/dist/ /usr/local/ispconfig/interface/web/themes/tailwindone

5. For setting up ISPConfig, see:

   • 📚 The ISPConfig docs for Ubuntu/Debian instructions
   • 🤖 Our guide for setting up ISPConfig in WSL2

🔎 About ISPConfig themes

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.

• 💧 Read more about Liquidish in it's docs
• 📚 Or check out how to migrate an ISPConfig template to Liquidish

ispconfig-tailwind-theme's Issues

Finish theme

Although this is more supposed to be an example/starting point, the theme isn't finished.

For it to be finished I'd like to:

• Replace inputs on all screens with components (currently only done for 'edit client' form
• Most buttons have been replaced with components
• Style all tables on indexes with components (double-check that the footer counters are correct)
• Replace Select2 with custom implementation using AlpineJS (to allow more customized styling)
• Replace datetimepicker with browser default (or custom AlpineJS implementation)
• Remove jQuery dependency
• ... ?