Make an SCSS-Compiled Tiki Theme

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 Sass (SCSS) CSS pre-processing. This is how the themes included in the Tiki package are made. The standard Bootstrap variables get new values, and CSS rules can be added for page elements that aren't covered by standard Bootstrap, with the new theme variables being used in both the Bootstrap and the Tiki CSS that's additional to Bootstrap.

Theme files can should be compiled within Tiki itself via the command line. See https://dev.tiki.org/Using+Less+CSS+with+Tiki (soon to be updated) and https://dev.tiki.org/Improving-the-Tiki-Bootstrap-SCSS-File-Arrangement for details on how to compile manually or automatically using PhpStorm.

Prepare a set of files

Make a set of files for the theme, arranged like this:

• 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 https://dev.tiki.org/Icons#Theme_specific_icon_set.
  • images/ - Any background or border images, etc. should be put here.
  • scss/
    • variables.scss - A copy of the current Bootstrap scss/variables.scss file
    • tiki-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.

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.

(update coming soon)

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.

Get style details

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.

Edit variables.scss

Input the style information in the 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.

(updated info coming soon)

(More updated information coming soon)