Tiki Times

Making theme options true oprtion files again

Gary Monday January 5, 2015

Back and forth on the theme option idea

When the shift was made to Bootstrap and to using the Less CSS preprocessor, the idea of theme options seemed kind of retro, since minor changes can be done easily by changing a few variables. But there was a reaction to that, as some people won't be using Less and want an easy way to add a variant style to an existing theme. As a workaround while the theme option idea wasn't implemented, I made the theme options at least work in a kludgy way by adding an import-the-parent-theme line to some theme option css files, or by importing all the less files that full themes use, essentially making these regular themes.

But since we decided to have theme options again, I undid those steps today, with the exception of Didiem, which seems more appropriately a full theme since it has so much of its own code.

Going forward

I need to think through the best way to make theme options, using Less, for the Tiki docs. Maybe something like this:

  • Step 1: Identify what CSS rules are needed, i.e., what visual effects are wanted.
  • Step 2: Identify what Less file (or what rule in a Less file) produces that CSS.
  • Step 3: Make a tiki-selectors.less that contains the CSS rules, that either has values already in place, or that has variables that are defined in a variables.less file.
  • Step 4: Define the variable in the variables.less file, if used.

This is needed for Bootstrap's files and for tiki_base.less and tiki-selectors.less. What files the themeoption.less should import depends on what is needed in its stylesheet, but as a reference, a fivealive-lite the option .less file has these:

@import "../../../../../vendor/twitter/bootstrap/less/mixins.less"; // To apply variables defined in bootstrap-variables.less.
// These two files are theme-specific:
@import "bootstrap-variables.less"; // A copy of the Bootstrap variables.less file but using only color settings.
@import "tiki-selector-variables.less"; // Provides values for "legacy" Tiki CSS selectors (not covered by Bootstrap).
@import "../../../../base_files/less/tiki-color_selectors.less"; // Tiki non-Bootstrap CSS selectors related to color
// @import url("../jquery-ui/options/plum/jquery-ui.min.css"); // Currently needed for popup styling, textarea width, etc.

// These files are used/shared by all FiveAlive/FiveAlive-lite theme options:
@import "../../../less/bootstrap-less-for-options.less"; // Contains relevant Bootstrap .less file sections to expose variables for the theme options to provide values for.]
@import "../../../less/tiki-selectors-for-options.less"; // Contains CSS for styling Tiki elements not covered by Bootstrap.

It's kind of hard to find a rationale for using this method rather than just making a CSS file directly, unless maybe there is a set of theme options and it'd be convenient to use variables. But maybe my explanations can be clearer, and the process further streamlined so it doesn't look so intimidating.

Switch Theme