History: Organization of a theme's files
Preview of version: 5 (current)
- «
- »
Themes file tree
The visual themes in Tiki are in a directory "themes", and each theme has its own sub-directory directly under themes that contains sub-directories for content including SCSS files (if used), CSS files, images, Smarty template files, fonts, and icon sets. (Of course, the Less files are only used for compiling the CSS style sheet and, for a custom theme, don't have to be put on the server. Tiki includes the Less files with the bundled themes because all the files are distributed as a package.)
For a custom theme, only the directories that are needed must be made. At a minimum, the "themes/mynewtheme/css/" directory path, containing "mynewtheme.css" must be in place, for the theme to appear in the selector on the Look & Feel admin page. For a custom theme specified by URL, any location is fine.
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
|_ _css-variables.scss (SCSS files beginning with "_" won't be compiled into their own CSS files)
|_ mynewtheme.scss
|_ _tiki-variables.scss
|_ _variables.scss
|_ _variables-dark.scss
|_ newsletter.scss
|_ templates
|_ sometemplatefile.tpl (if needed)
css
The theme stylesheet has the name of the theme and is inside the CSS sub-directory of the theme's directory. This is the one directory that is mandatory for the theme to function. As Tiki depends on Bootstrap for layout and styling, each stylesheet is essentially an equivalent of bootstrap.css, containing all the Bootstrap rules for layout, responsiveness, page element styling, and so on. The only practical way to produce this stylesheet is to compile it from the required SCSS files. Note that there is a themes/base_files/css/tiki_base.css file but it contains rules that are global and outside the scope of a theme stylesheet.
fonts
This directory is here in case it's desired that a web font be stored locally rather than fetched from Google Fonts, etc.
icons
Tiki ships with Font Awesome and Bootstrap font icon sets, along with legacy graphic icons, but new icon sets can be added. The site administrator can switch among them on the Look & Feel admin page. If a conforming icon set file is placed in this icons directory, the theme will use it automatically (this is the design but may not be implemented yet).
images
This directory is for the background images, sprites, or any other images needed for the theme.
scss
The theme stylesheets that come with Tiki are developed in the context of a Tiki installation itself, using PhpStorm or other IDE, as Tiki includes a PHP SCSS compiling script. Of course this has the benefit of seeing the effect of each file change and re-compile within a Tiki instance, to check the appearance of page elements, etc. The compile process expects the partial files to be in particular locations. (The compiling is done in advance in the local theme development process, not on the server, so actually these files don't need to be here for the theme to function but as a practical matter it's good to keep them together.) See about using SCSS with Tiki here.
options
A theme can have a child variant, or theme option. In this case, the primary theme stylesheet and the option stylesheet are both used to style the page. Often the theme option is a color variant or otherwise overrides some of the parent theme's properties. If the theme has theme options then the hierarchy of the directories for themes repeats for the theme option(s). That is, there is a themes/mynewtheme/options/mynewthemeoption/ directory and, within it, at least the css directory, which contains the theme option stylesheet. The images, scss, and templates directories may be added if needed. Icons and fonts probably aren't supported on the theme option level.
templates
This directory is for Smarty template (.tpl) files that the theme author has customized for the theme. To avoid maintenance problems as the Smarty template files evolve, theme authors are encouraged to implement their theme using CSS only and not by modifying the templates files. But for maximum design flexibility, a template file can be modified and will be used by the theme in place of the default template if it is placed in this directory. Further subdirectories following the pattern in tikiroot/templates/... would need to be added if the modified file is, for example, templates/modules/mod-login_box.tpl.