Loading...
 

Tiki’s CSS and Smarty template organization

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.

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

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 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.



Switch Theme

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

Shoutbox

luci, 14:22 GMT, : @Bsfez: :-D
Bsfez, 09:52 GMT, : This is really a nice Tiki !
chibaguy, 10:32 GMT, : Site admins: Be careful about editing the topbar menu, which is in a small space. I had to fix an option that should be a menuSection, to prevent overflow.
Torsten, 19:44 GMT, : hidden functionality "; recommitted in trunk, tested and working. Documentation under way on [Link]
chibaguy, 16:45 GMT, : The layout template can now be changed using the "Layout" module above. :-)