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:

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.


Permalink: http://zukakakina.com/tiki-view_blog_post.php?postId=43