Loading...
 
Skip to main content

History: Organization of a theme's files

Preview of version: 4

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.




History

Advanced
Information Version
Fri 07 of Jul, 2023 16:54 GMT-0000 Gary Cunningham-Lee Make directory name headings consistent 5
Mon 03 of Jul, 2023 08:16 GMT-0000 Gary Cunningham-Lee Added missing paths to organization outline. 4
Fri 30 of Jun, 2023 12:40 GMT-0000 Gary Cunningham-Lee Page renamed from Tiki's CSS and Smarty template organization to Organization of a theme's files. Semantic alias redirect created 3
Fri 30 of Jun, 2023 12:38 GMT-0000 Gary Cunningham-Lee Updated for, um, SCSS . . . and CSS variables and color modes. ;-) 2
Tue 14 of Apr, 2015 16:02 GMT-0000 Gary Cunningham-Lee Page created. 1

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config