Loading...
Skip to main content
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
History: Organization of a theme's files
View published page
Source of version: 5
(current)
{HTML(wiki="1")} !! 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. <div class="row"> <div class="col-md-6"> <pre> 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) </pre> </div> <div class="col-md-6"> !!!! 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 ((Make an SCSS-Compiled Tiki Theme|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''. </div></div> {HTML} ~tc~ (alias(Tiki's CSS and Smarty template organization)) ~/tc~
Layout
Stay on this page
Default
Single Container
Classic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
Included themes
Bootstrap component sets
Materia
Ohia
Themes
Making or Updating a Theme for Tiki 27
Updating a Theme for Tiki 26
Tiki_org_family_customizations_CSS
BookStacked
Make an SCSS-Compiled Tiki Theme
...more
Subscribe to Tiki Newsletters!
Delivered fresh to your email inbox!
Don't miss major announcements and other big news!
Site Config
Site upgraded to branch 27x
Wed 24 of Apr, 2024 11:12 GMT-0000
Site upgraded to branch 26x
Wed 21 of Jun, 2023 09:45 GMT-0000
Site upgraded to branch 25x
Sat 12 of Nov, 2022 17:00 GMT-0000
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT-0000
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT-0000
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT-0000
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT-0000
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT-0000
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT-0000