Loading...
 

History: Three Ways to Make a New Theme

Preview of version: 2

(from http://doc.tikiwiki.org/tiki-index.php?page=Styles and Themes)

Creating a Custom Theme

Tiki themes control both the layout or structure of a site and its overall look. You can alter the position of elements on your Web pages (adding/subtracting components) and you can modify stylistic elements like color and font. Thus, by creating or modifying a theme, you can define:

  • The application layout (basic structure)
  • The presentation of elements in the layout (style)

File arrangements

In Tiki discussions and descriptions, the terms style and theme are used pretty interchangeably, though there are places where one word is always used, such as styles in the file directory.


First, establish the basic file arrangement of your new theme.

  1. Pick a name for the theme. Check the styles directory to make sure there's not an existing theme (i.e., *.css file) with the same name.
    • For this example, we are creating a theme called screensite.
  2. Create a new CSS file with the theme name you chose and place it in the styles directory (like styles/screensite.css). (See CSS Overview for more details.)
  3. If your new theme uses customized templates, create a sub-directory in the templates/styles directory and give it the same name as your theme (like templates/styles/screensite).
  4. Copy any needed files from the templates directory or from an existing theme's templates directory to your theme directory.
    • For example, if you are basing your new theme on moreneat, copy the files from templates/styles/moreneat to templates/styles/screensite. Otherwise use copies of default template files. See Template Overview for more details.


At this point, your new theme has been created! If you go to User Preferences and check the drop-down menu for Theme, you'll find your theme listed (e.g., screensite). But, without changing the TPL files, your new theme will look just the same as the pre-existing theme you based it on.

See next: Template Overview
CSS Overview

Related Information

Allow User to Set Theme

Under Admin > Login you can activate "Reg users can change theme".

Once activated users can change their theme in their Preferences page under My Tiki menu.

Under Modules you can also activate the switch_theme module which makes it super easy for users to change themes.

Using multiple Themes / Styles on your Tiki site

ThemeControlDoc on Tikiwiki.org is all about how to assign Themes to

  • A tiki category
  • A tiki section
  • A tiki individual object (i.e. an individual Wiki page, Blog, Gallery, etc.)


If you enable the theme control center you will see a link to Theme Control in the Admin section of the application menu.

History

Advanced
Information Version
Tue 26 of Jan, 2016 08:45 GMT chibaguy Added tags. 16
Tue 26 of Jan, 2016 07:48 GMT chibaguy Updated for Bootstrap methods 15
Mon 20 of Apr, 2015 14:30 GMT chibaguy 14
Mon 20 of Apr, 2015 10:03 GMT chibaguy Corrected Bootstrap customize URL. 13
Fri 03 of Apr, 2015 14:35 GMT chibaguy More details added. 12
Fri 03 of Apr, 2015 14:29 GMT chibaguy Updated with Tiki 14 information. 11
Sat 23 of May, 2009 05:03 GMT chibaguy 10
Tue 27 of Jan, 2009 12:18 GMT chibaguy Some updating. 9
Thu 12 of Jul, 2007 03:57 GMT marclaporte fix link 8
Mon 23 of Jul, 2007 14:05 GMT chibaguy 7
Mon 23 of Jul, 2007 14:01 GMT chibaguy 6
Thu 12 of Jul, 2007 03:57 GMT marclaporte fix link 5
Mon 20 of Feb, 2006 03:47 GMT chibaguy Minor edits. 4
Mon 20 of Feb, 2006 03:46 GMT chibaguy MInor edits. 3
Mon 20 of Feb, 2006 03:13 GMT chibaguy Content clarified. 2
Fri 17 of Feb, 2006 07:04 GMT admin 1

Switch Theme

Layout

Latest Changes

No records to display ...more

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