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