History: Organization of a theme's files

• «
• »

            {HTML(wiki="1")}
!! Themes file tree
In Tiki 14, the file hierarchy of Tiki themes has been changed. Now there is a directory "themes", and each theme has its own subdirectory directly under ''themes'' that contains everything the theme may need, including Less files (if used), CSS files, images, Smarty template files, 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.
<div class="row">
<div class="col-md-6">
<pre>
tiki root
  |_themes
        |_ mynewtheme
              |_ css
                    |_ mynewtheme.css
              |_ fonts
              |_ icons
              |_ images
                    |_ mynewtheme_background_image.png
              |_ less
                    |_ mynewtheme.less
                    |_ bootstrap-variables.less
                    |_ tiki-variables.less
                    |_ tiki-selectors.less
              |_ options
                    |_ mynewthemeoption
                             |_ css
                             |_ ....
              |_ templates
                    |_ sometemplatefile.tpl
</pre>
</div>
<div class="col-md-6">
!!!! CSS 
The theme stylesheet has the name of the theme, as before, but is inside a subdirectory of ''themes'' that also has the theme's name. This stylesheet needs to contain all the Bootstrap rules for layout, responsiveness, page element styling, and so on, as these aren't set by any underlying or imported CSS file. There is a ''themes/base_files/css/tiki_base.css'' file but it contains rules that are outside of Bootstrap's scope.

!!!! 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
As of Tiki 14, icon sets can be switched and added. Tiki 14 comes with the Glyphicons that are distributed with Bootstrap, Font Awesome icons, and the Tiki "legacy" image icons. 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 others needed for the theme.

!!!! less
If the pre-compiler is used and if the author wants to keep the .less files together with the other files of the theme, they can go in this directory. (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.) See about using Less with Tiki ((Using Less with Tiki|here)).

!!!! options
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, less, and templates directories may be added if needed. Icons and fonts probably aren't supported on the theme option level.

!!!! templates
To avoid maintenance problems as Tiki's 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''.
</div></div>
{HTML}