Make a Less-Compiled Tiki Theme

less css

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 Less 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 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.
- less/
  - bootstrap-variables.less - A copy of the current Bootstrap less/variables.less file
  - tiki-selectors.less - For CSS outside the scope of Bootstrap, etc.
  - newtheme.less - The "root" Less 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. For more information on these files, see Tiki theme files.

The "root" Less 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.

Typical 'newtheme.less' file

//  This is a template for a new theme. Edit and compile to produce
/* The Newtheme theme for Tiki Wiki CMS Groupware */
@import "../../../vendor/twitter/bootstrap/less/bootstrap.less";
@import "../../base_files/less/tiki-selectors.less"; // Tiki non-Bootstrap CSS selectors
@import "../../base_files/less/tiki-variables"; // Contains values/definitions for Tiki variables in tiki-selectors.less.
@import "../../base_files/less/tablesorter-custom.less";
@import "tiki-selectors.less";
@import "bootstrap-variables.less";

The theme files should be 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 bootstrap-variables.less

Input the style information in the bootstrap-variables.less 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 Less 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.

bootstrap-variables.less

// This file is a copy of the default bootstrap 3.3.2 variables.less file.

// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            #222
...

Take advantage of Look & Feel and Modules configuration

A lot of flexibility in Tiki's layout and content display is provided by the Look and Feel admin (tiki-admin.php?page=look) and Modules admin (tiki-admin_modules.php) features. For example, whether to have a page-top fixed navbar or a conventional navbar style and location, whether to have a main column only or that plus one or two side columns, etc. can be configured to suit the site purpose, content and design. The desired design for the theme's might flexibly accommodate any Look and Feel or Module configuration, or might require a specific configuration.

Extend the design reach by editing tiki-selectors.less

After the site is reloaded following the revision of the bootstrap-variables.less file, usually more styling still needs to be done. Standard Bootstrap assumes the page background and content area are the same, text color is the same everywhere, and so on. For not-so-simple layouts, more CSS rules are needed. Also, because Tiki's default layout is more complicated than a standard Bootstrap layout, it has more CSS rules. See Tiki Less selectors [This is a page that describes what goes into tiki-base.css]. To add these style details, rules need to be added in the tiki-selector.less file. (Keep in mind that even though this is a Less file, as with all Less files, ordinary CSS syntax can be used.)

Typically, the tiki-selectors.less file has rules to implement things like

background gradients or images
more than one border color on buttons or panels
background shadows or glows
content-area background and foreground (text) colors different from those of the whole page (viewport)
Superfish menu styles (which get the Bootstrap coloring by default but may need more editing)
navbar styles, especially when there is some nesting
additional element properties not specified by Bootstrap variables
additional elements specific to the site, etc.

Take a look at some Tiki themes' tiki-selectors.less files to see what they contain.

Typical tiki-selectors.less file

// This file is for additional LESS rules beyond what are in variables.less.
// Image path example:
@imagePath: ~"../images/";
// body {
//	background-image: url('@{imagePath}bg.jpg');
// }
//

@topmodules-row-sidemargins: 0;
@topbar-row-sidemargins: -15px;

body {
	background: url('@{imagePath}flakesptn2.jpg');
	background-attachment: fixed;
}

header.container {
	margin-top: 20px;
}

.topbar {
	margin-bottom: 20px;
}

.layout_social .navbar-fixed-top,
.layout_social .navbar-fixed-top .container,
.navbar-default,
.topbar,
.topbar .cssmenu_horiz > ul,
.topbar .navbar-default .navbar-nav > li,
.topbar .nav > li,
.layout_social .navbar-inverse .navbar-form,
.layout_social .navbar-inverse .container {
	background: url('@{imagePath}flakesptn3.jpg');
	border: none;
}
...

To get a better idea of the Tiki page elements available for styling, please see Layout Templates in Tiki 13 to 18, which describes Tiki's total-page display options. Organization and details of Less files shows information about all the Less files used to make Tiki's style sheets (not just theme-related).

Please wait