Introduction
To have the most complete Tiki theme possible - a theme that can touch every detail of the site's appearance - the best way is to not just create a bootstrap.css-equivalent theme style sheet, but to also include Tiki-specific CSS rules that are outside the scope of Bootstrap. And the best way to do this is to use
Theme files can should be compiled within Tiki itself via the command line. See
Make a set of files for the theme, arranged like this: If you plan to make a number of themes, it's good to keep a base set of files that can be copied and renamed for each new theme. The "root" scss file, the one with the same name as the theme, imports the component files that are compiled to produce the theme's CSS style sheet. This file can also be the place for web font import statements, if web fonts are used. Alternatively to fetching fonts from the web, font files can be put in the theme's fonts directory and imported from there. The theme files should be part of or copied or uploaded to a Tiki site for development at the beginning of the theme-making process. It's good to see the effects of edits immediately, as the theme gets built in steps. Here is one approach to developing the theme. As with other design-to-website integration projects, check the design mock-ups, wire frames, specifications and so on to understand the basic elements. For example, find or decide on the information for page and content-area background colors; text color, size and font family; link colors; white space; and so on. If background images are used, they go in the theme's images directory. Input the style information in the Prepare a set of files
newtheme/ - The directory for the new theme, in the themes directory.
css/
newtheme.css -This location is required, to be recognized by the Look & Feel theme selector.fonts/ - Local storage of fonts, if preferred to web fetching.icons/ Icon set(s) used for the theme. See
images/ - Any background or border images, etc. should be put here.scss/
variables.scss - A copy of the current Bootstrap scss/variables.scss filetiki-selectors.scss - For CSS outside the scope of Bootstrap, etc.newtheme.scss - The "root" scss file for the theme, imports the other files to produce the style sheet.Get style details
Edit variables.scss
variables.scss file, replacing the default Bootstrap values with those for the theme. This is done the same way any Bootstrap style sheet is made. Save the edited file (which should trigger a scss compile), refresh the site with the updated CSS file, and check the site appearance. Some of the basic aspects of the theme should be evident already.
(More updated information coming soon)