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: How To Add a New Theme
View published page
Collapse Into Edit Sessions
Source of version: 11
«
»
{REMARKSBOX(type="info" title="Revamped theme organization from Tiki14")} In Tiki13, the Twitter Bootstrap CSS framework was integrated as base for Tiki's layout and design. From Tiki14 (trunk pre-14 as of Sept 12, 2014) there is a new directory structure for themes, as described on this page. ''For Tiki12 LTS please visit ((How To Add a New Theme - until Tiki12))''{REMARKSBOX} ! Theme components A Tiki theme can be made of several components. as there is at least a CSS style sheet, as well as background images, fonts and, in the future, icons, and possibly one or more theme-specific Smarty templates although having customized templates is not encouraged due to potential compatibility problems. As Tiki contains a full set of default templates, the minimum requirement to create a custom theme is a custom CSS stylesheet. As of Tiki 14, themes are deployed in the directory "themes," which is a subdirectory of the Tiki root installation directory. Every theme has its own directory that contains the components of the theme. The name of the theme's directory is the same as the name of the theme. The following is an example of the directory structure: * {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} themes ** {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} mytheme *** {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} css **** mytheme.css ***** The .CSS file has to be named the same as the theme's directory, eg: "mytheme.css" - Tiki names the theme from the containing theme-specific folder. ***** The mytheme.css is usually compiled from the less files which are in the less directory. **** custom.css ***** The custom.css file contents override and complete mytheme.css. This is the place for hand-made CSS changes. *** {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} fonts **** This is the place to store your fonts which have to be provided for webmasters who do not want to use a font-API *** {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} icons **** This is not in use yet, but will likely be the place for .SVG icon sets, if no glyphs will be used. Alternative glyphs might be stored here or in fonts, which is not desided yet. To be updated, please contact the [https://lists.sourceforge.net/mailman/listinfo/tikiwiki-artwork| Tiki artwork-list on sourceforge] *** {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} images **** This is the place to store theme-related images for backgrounds and other purposes. *** {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} less **** tiki.less **** This directory contains the Less files from which, along with global Less files, are compiled the theme style sheet. *** {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} options **** Themes can have options by adding a css file (eg: myoption.css) in the option folder which could easily be created with less and then would be loaded additionally to the main theme's css file. To be updated, please contact the [https://lists.sourceforge.net/mailman/listinfo/tikiwiki-artwork| Tiki artwork-list on sourceforge] *** {img src=https://themes.tiki.org/show_image.php?id=59 responsive="n"} templates **** Any customised template stored in this directory overwrites the default template with the same name. {REMARKSBOX(type="info" title="hint")}In Tiki pre-14 trunk, the old structure ''"styles/mytheme.css - styles/mytheme/*" - "templates/styles/mytheme"'' is not working anymore, it became deprecated for the release of Tiki14. "templates/styles/mytheme" files should be moved manually to "themes/mytheme/templates" folder. In case of questions please contact the Tiki artwork-list on sourceforge: [https://lists.sourceforge.net/mailman/listinfo/tikiwiki-artwork] {REMARKSBOX} ! Activating your new theme Once you create a directory structure and add it to the Tiki file structure in the location described above, which contains at least a style sheet file named as the theme's folder (eg: mytheme.css) in the folder themes/mytheme/css, you will find the theme in the "Theme selection" selector in Admin -> Look&Feel -> Theme. Please mind to reload the page after you add the theme to the server and to clear the Tiki caches each time you apply a different theme ''(/tiki-admin_system.php?do=all)''. -=Alias=- (alias(How To Add a New Bootstrap Theme))
History
Enable pagination
rows per page
HTML diff
Side-by-side diff
Side-by-side diff by characters
Inline diff
Inline diff by characters
Full side-by-side diff
Full side-by-side diff by characters
Full inline diff
Full inline diff by characters
Unified diff
Side-by-side view
HTML diff
Side-by-side diff
Advanced
Information
Version
Mon 24 of Jan, 2022 11:53 GMT-0000
Gary Cunningham-Lee
Small corrections.
16
Mon 24 of Jan, 2022 11:45 GMT-0000
Gary Cunningham-Lee
15
Mon 24 of Jan, 2022 11:44 GMT-0000
Gary Cunningham-Lee
Removed ancient info and adjusted heading sizes.
14
Mon 24 of Jan, 2022 11:43 GMT-0000
Gary Cunningham-Lee
Replaced missing images with icon plugin. Updated text.
13
Mon 11 of Feb, 2019 12:43 GMT-0000
Serge Kishiko
Add the js folder in the default theme layout and the explanation of its purpose
12
Thu 28 of Jan, 2016 10:28 GMT-0000
Gary Cunningham-Lee
Gave the folder images the responsive=n parameter so they will be inline. Minor text clarifications. The page seems to have some duplicate information compared to at least one other page.
11
Thu 28 of Jan, 2016 00:18 GMT-0000
Jean-Marc Libs
10
Sun 25 of Jan, 2015 13:23 GMT-0000
gezza
update to recent changes in the theme concept
9
Sat 13 of Sep, 2014 13:01 GMT-0000
Gary Cunningham-Lee
Corrected info about LESS files and minor editing.
8
Fri 12 of Sep, 2014 20:55 GMT-0000
Torsten Fabricius
Apllying your new theme
7
Fri 12 of Sep, 2014 20:36 GMT-0000
Torsten Fabricius
found more typos ... sorry
6
Fri 12 of Sep, 2014 20:32 GMT-0000
Torsten Fabricius
typo
5
Fri 12 of Sep, 2014 20:31 GMT-0000
Torsten Fabricius
typos and added minor hints
4
Fri 12 of Sep, 2014 20:29 GMT-0000
Torsten Fabricius
adde basic information about the themes directory structure
3
Fri 12 of Sep, 2014 19:40 GMT-0000
Torsten Fabricius
closing tag of remarksbox was missing
2
Fri 12 of Sep, 2014 19:39 GMT-0000
Torsten Fabricius
created page with remarksbox and alias
1
Select action to perform with checked...
Remove
OK
Layout
Stay on this page
Default
Single Container
Classic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
Tiki_org_family_customizations_CSS
Included themes
Bootstrap component sets
Materia
Ohia
Themes
Making or Updating a Theme for Tiki 27
Updating a Theme for Tiki 26
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