History: How To Add a New Theme

Source of version: 7

{REMARKSBOX(type="info" title="Self contained Bootstrap themes from Tiki14")} In Tiki13 we integrated the 'Twitter Bootstrap' framework as base of Tiki's design. From Tiki14 (trunk pre-14 as of 12th of Sept 2014) the new directory structure described on this page applies for themes. ''For Tiki12 LTS please visit ((How To Add a New Theme - until Tiki12))''{REMARKSBOX} ! Theme components A Tiki theme generally contains out of several components. as there are a .CSS stylesheet, a set of .TPL Smarty templates, icons, fonts, images etc.. As Tiki contains a full set of default templates, the minimum requirement to create a custom theme is a custom .CSS stylesheet. Themes are deployed in the directory "themes" which is a subdirectory of the tikiroot installation directory. Every theme has it's own directory which contains the components of the theme. The name of this directory represents the name of the theme. Following an example of the directory structure: * {img src=https://themes.tiki.org/show_image.php?id=59} themes ** {img src=https://themes.tiki.org/show_image.php?id=59} mytheme *** {img src=https://themes.tiki.org/show_image.php?id=59} css **** tiki.css **** The .CSS file has to be named "tiki.css" - Tiki names the theme from the containing theme-specific folder (and not anymore from the filename, like it was in the old system). *** {img src=https://themes.tiki.org/show_image.php?id=59} 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} 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} images **** This would be the place to deploy images for your theme for backgrounds and other purposes. *** {img src=https://themes.tiki.org/show_image.php?id=59} less **** tiki.less **** Maybe further .LESS files if necessary. *** {img src=https://themes.tiki.org/show_image.php?id=59} options **** At the time of creating this wikipage (12th Sept. 2014) the old way of using options is depricated for the new system. This is to avoid loading several nested .CSS files and to avoid server side minifying on the fly. There has been a discussion to anyway allow options by adding complete tiki.css files (name optionname.css) in this options folder which could easily be created with less and then would be loaded __instead__ of css/tiki.css . 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} 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 still working, but might become depricated before the release of Tiki14 or Tiki15 ... in case of questions please contact the Tiki artwork-list on sourceforge: [https://lists.sourceforge.net/mailman/listinfo/tikiwiki-artwork] {REMARKSBOX} ! Applying your new theme Once you created the directory structure described above, which contains at least one file named tiki.css in the folder themes/mytheme/css, you find the theme in the themes dropdown menu in Admin -> Look&Feel -> Theme. Please mind to reload the page after you added the theme to the server and to clear the Tiki caches each time you applied 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 chibaguy Small corrections.	16
Mon 24 of Jan, 2022 11:45 GMT chibaguy	15
Mon 24 of Jan, 2022 11:44 GMT chibaguy Removed ancient info and adjusted heading sizes.	14
Mon 24 of Jan, 2022 11:43 GMT chibaguy Replaced missing images with icon plugin. Updated text.	13
Mon 11 of Feb, 2019 12:43 GMT 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 chibaguy 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 Jyhem	10
Sun 25 of Jan, 2015 13:23 GMT gezza update to recent changes in the theme concept	9
Sat 13 of Sep, 2014 13:01 GMT chibaguy Corrected info about LESS files and minor editing.	8
Fri 12 of Sep, 2014 20:55 GMT Torsten Apllying your new theme	7
Fri 12 of Sep, 2014 20:36 GMT Torsten found more typos ... sorry	6
Fri 12 of Sep, 2014 20:32 GMT Torsten typo	5
Fri 12 of Sep, 2014 20:31 GMT Torsten typos and added minor hints	4
Fri 12 of Sep, 2014 20:29 GMT Torsten adde basic information about the themes directory structure	3
Fri 12 of Sep, 2014 19:40 GMT Torsten closing tag of remarksbox was missing	2
Fri 12 of Sep, 2014 19:39 GMT Torsten created page with remarksbox and alias	1

Select action to perform with checked... Remove OK