Tiki Times

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.