TailwindCSS Theme - Dev Starting Point

Discussion in 'Tips/Tricks/Mods' started by luttje, Mar 11, 2024.

  1. luttje

    luttje New Member

    Hey all,

    Just dropping by to contribute a bit to this great project! ISPConfig really makes my life a lot easier.

    Now then, on to the reason why I'm sharing a theme, which is also a starting point for developing themes:
    I had some trouble getting started making a theme for ISPConfig because it's templating engine seemed lacking IDE support. It had messed up syntax highlighting and formatting in VSCode. Furthermore I was missing a lightweight 'include' with which I could render components.

    The code seemed fun to write and I had a blast making the following:
    • A theme made with TailwindCSS (not finished yet)
    • The theme has both light & dark mode
    • The project serves as a starting point for anyone wanting to create a theme with TailwindCSS
    • The source templates are written in a (custom) Liquid-like templating engine (pretty much finished)
    • The source templates can contain components which are rendered into the output at compile time (so no <?php include '...' ?>, but it's just copy-pasted for you)
    • The source templates are compiled to ISPConfig tpl templating language with Vite

    The big advantage of this is that this allows you to move all common logic to components. That way you can easily modify those components, without having to scour through the files to change those identical parts of the site everywhere.

    I've published the theme and instructions on how to use it on my GitHub. I haven't proof-read it very well, so there may be some errors in the documentation or other things might be broken. If you want to contribute then feel free to make an issue or PR.

    I hope this helps!
    till likes this.
  2. till

    till Super Moderator Staff Member ISPConfig Developer

    The ISPConfig template system has an include that you can use directly in the theme files as well if you want to use modules in your themes. The syntax is:

    {tmpl_include name="path/to/include/file.htm"}
    or alternatively:

    <tmpl_include name="path/to/include/file.htm">
    you can always use either <....> syntax or {....} for all template rules or structures.
  3. luttje

    luttje New Member

    That's great, I should've looked better before starting work on this. :)

    Luckily it's a fun project which provides other benefits as well.
    webguyz and pyte like this.
  4. pyte

    pyte Well-Known Member HowtoForge Supporter

    Thank you for the contribution. This is quiet nice as a learning point and i may use this when it is finished :)

Share This Page