Fullscreen
Loading...
 

Tiki Times

My ideas, challenges, tasks and so on related to the Tiki Wiki CMS Groupware project and software.

Enabling Bootstrap themes to color Tiki's superfish menus

Gary Wednesday January 7, 2015

I noticed that some of the themes had menu color contrast problems. Seems like two approaches to fixing this kind of problem is to make a new CSS rule, or to add a class in the HTML so that an existing rule can cover it. For stylesheets that aren't made with Tiki in mind, like the Bootswatch themes, the second method is especially useful. So in commit r53425 I added a few Bootstrap classes to the menu code and, voila, they get colored by the theme stylesheet. I also removed a few rules from the superfish menu styles because they didn't seem to be needed for Bootstrap menus, and after checking I found they weren't necessary.

There was also a 5px margin at the top and bottom of each dropdown menu, which didn't look good when the list (menu) and list item background colors weren't the same, so I removed that rule, and added top padding to the top men item and bottom padding to the bottom menu item, to preserve the extra space at each end that looks good in a list.

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.

  • 1
  • 2 (current)
  • »

Switch Theme