History: Making or Updating a Theme for Tiki 27 and Newer Versions
Preview of version: 18 (current)
New location for custom themes
One aspect of this is to put all of the custom, site-specific files in one directory to facilitate backing up the site, moving the site, and so on. In Tiki 27, the included themes are still in the /themes directory, but it's recommended to put custom theme files in this location if the theme is being developed within the Tiki instance (the files are going to be SCSS-compiled): The "top" files of the theme, mytheme.scss, for example, and newsletter.scss, are now in the While the component files of the theme are in This location works the same as All the file paths in the theme's top file ("mytheme.scss") need to be updated as shown in the Tiki 27 example, below right: As the lists above show, there are fewer files directly imported by the theme in Tiki 27 because one file import was redundant and a few other imports are now combined "upstream" in themes/base_files/scss to reduce duplication across themes and simplify each theme's top file. The theme-building workflow changed between Tiki 26 and 27. Formerly the PHP script to compile themes was part of the Tiki package, but as of Tiki 27 node.js and npm are used so these need to be installed separately from Tiki. The required npm version is between 9.0.0 and 11, and the required node.js version is between 18.0.0 and 22. Then running As described above, in the standard process of compiling the SCSS files of a Tiki theme, node.js and npm are required. If these aren't available, such as in the case of most shared hosting accounts, then the theme files will need to be compiled in a Tiki instance that does have them available. This could be on another remote server where these scripts are installed, or it could be on the theme author's local computer. Then the output of the compiling, the generated theme files, can be transferred to, preferably, the The process described above is the way to produce a complete Tiki theme, which is essentially a standard bootstrap.css file plus CSS rules for Tiki-specific features and theme-specific styling details. But the Bootstrap framework and Tiki are increasingly making use of New location for custom theme top file ("mytheme.scss")
mytheme/css directory, moved from the mytheme/scss directory. Otherwise, each custom theme still has the same sub-directories as the package themes, the same as before.New custom theme files hierarchy
tiki root
|_ themes
|_ mynewtheme
|_ css
|_ mynewtheme.css
|_ newsletter.css (normally generated during SCSS compiling)
|_ fonts
|_ icons
|_ images
|_ mynewtheme_background_image.png (if any)
|_ mynewtheme.png (screenshot thumbnail that displays on Look & Feel admin page)
|_ options
|_ mynewthemeoption
|_ css
|_ mynewthemeoption.css
|_ scss (plus other standard directories if needed)
|_ scss
|_
|_ mynewtheme.scss
|_
|
|
|
|_ templates
|_ sometemplatefile.tpl (if needed)
tiki root
|_
|
|_ themes
|_ mynewtheme
|_ css
|_ mynewtheme.scss
|_ newsletter.scss
|_ fonts
|_ icons
|_ images
|_ mynewtheme_background_image.png (if any)
|_ mynewtheme.png (screenshot thumbnail that displays on Look & Feel admin page)
|_ options
|_ mynewthemeoption
|_ css
|_ mynewthemeoption.scss
|_ ( . . . plus other standard theme sub-directories if needed)
|_ scss
|_
|_
|
|
|
|
|_ sometemplatefile.tpl (if needed)
New location for custom theme CSS files
_custom/shared/themes/ , when these are compiled, the output CSS files of the theme are generated in New file paths in top file
@import "../../base_files/scss/_tiki-bootstrap_functions";
@import "variables-dark";
@import "../../base_files/scss/_tiki-variables.scss"; // Values/definitions for Tiki variables (outside of Bootstrap variables) such as _tiki-selectors.scss.
@import "../../default/scss/variables"; // Bootstrap default variables, with a few Tiki overrides
@import "../../default/scss/variables-dark"; // Bootstrap dark mode default variables
@import "../../base_files/scss/_tiki-bootstrap_layout_and_components";
@import "css-variables"; // Needs to be loaded after default variables to override them
@import "../../base_files/scss/_tiki-pagetop_colors.scss"; // Import if needed to specify top and topbar zone colors in more detail
@import "_tiki-selectors.scss";
@import "../../base_files/scss/external-scripts.scss";
@import "../../base_files/scss/select2-tiki_colors.scss";
@import "base_files/scss/_tiki-bootstrap_functions"; // 1. Functions are included first (so colors, etc. can be manipulated).
@import "../scss/variables"; // 3. The theme's variable declarations are used when they are imported after the Bootstrap defaults (order changed for Tiki 27).
@import "default/scss/variables-dark"; //4. Values of dark variables if color modes are enabled (Order of importing this and the default variables-dark doesn't seem to make a difference).
@import "../scss/variables-dark"; // 5. Adds default dark variables for any not declared by the theme dark variables file.
@import "base_files/scss/_tiki-selectors.scss"; // 7. Tiki CSS selectors used globally.
@import "base_files/scss/_tiki-pagetop_colors.scss"; // 8. Optionally imported to group (separately) the top and topbar zone components for styling.
@import "../scss/_tiki-selectors.scss"; // 9. Tiki CSS selectors, including those of external scripts, to be styled by the theme's variables.
New theme compiling method
npm run watch in the terminal will watch for changes in SCSS files and compile them to CSS, and will report any errors.What if node.js and npm aren't available on the Tiki installation's server?
/public is already there by default.)Making a Tiki theme without SCSS compiling
History
| Information | Version | ||||||
|---|---|---|---|---|---|---|---|
| 06:22 UTC System Administrator automatic conversion | 18 | ||||||
| Mon 04 of Aug, 2025 05:51 UTC Gary Cunningham-Lee Added information on if npm and node.js aren't available, and on customizing via CSS variables. | 17 | ||||||
| Sun 23 of Mar, 2025 13:10 UTC Bernard Sfez / Tiki Specialist Adding missing space to avoid confusion | 16 | ||||||
| Sun 15 of Dec, 2024 08:20 UTC Gary Cunningham-Lee Page renamed from Making or Updating a Theme for Tiki 27 to Making or Updating a Theme for Tiki 27 and Newer Versions. Semantic alias redirect created | 15 | ||||||
| Sun 15 of Dec, 2024 08:19 UTC Gary Cunningham-Lee Updated alert info about compiling on Windows. | 14 | ||||||
| Sun 24 of Nov, 2024 11:39 UTC Gary Cunningham-Lee Updated Tiki 27 custom theme import paths | 13 | ||||||
| Wed 24 of Jul, 2024 02:12 UTC Gary Cunningham-Lee Fixed my typo. | 12 | ||||||
| Wed 24 of Jul, 2024 02:10 UTC Gary Cunningham-Lee Trying shorter URL. | 11 | ||||||
| Wed 24 of Jul, 2024 02:09 UTC Gary Cunningham-Lee Added link. | 10 | ||||||
| Wed 24 of Jul, 2024 02:08 UTC Gary Cunningham-Lee Added some clarification. | 9 | ||||||
| Sun 21 of Jul, 2024 12:23 UTC Gary Cunningham-Lee Added pre tags to make file paths in top files overflow: scroll | 8 | ||||||
| Sun 21 of Jul, 2024 11:54 UTC Gary Cunningham-Lee Corrected level of Tiki 26 theme options directory (for real this time). | 7 | ||||||
| Sun 21 of Jul, 2024 11:53 UTC Gary Cunningham-Lee Corrected level of Tiki 26 theme options directory. | 6 | ||||||
| Sun 21 of Jul, 2024 10:49 UTC Gary Cunningham-Lee Added "themes/" to "base_files/" and "default/" paths in Tiki 27 import statements (different from master). | 5 | ||||||
| Thu 18 of Jul, 2024 04:27 UTC Gary Cunningham-Lee Updated Tiki 27 custom theme import paths | 4 | ||||||
| Wed 29 of May, 2024 07:38 UTC Gary Cunningham-Lee Updated information. | 3 | ||||||
| Mon 20 of May, 2024 09:03 UTC Gary Cunningham-Lee Updated with new content. | 2 | ||||||
| Sun 04 of Feb, 2024 05:11 UTC Gary Cunningham-Lee Initial information. | 1 | ||||||