History: Make a Less-Compiled Tiki Theme

Source of version: 4 (current)

!! 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 [http://lesscss.org/|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. {CODE(caption="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"; {CODE} 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. {CODE(caption="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 ... {CODE} !! 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. {CODE(caption="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; } ... {CODE} 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).