I updated this site to the latest Tiki release. There are still some glitches in some themes, as not all the "add-on" themes are completely updated for this version (mostly minor color details remaining, etc.). Functionally, things should be in good shape.

By Gary on Mon, Apr. 13, 2009 23:11 EDT

Many details have changed related to themes, between Tikiwiki 2 and 3, so there could be problems for sites that are using customized themes, or themes that are no longer part of the Tikiwiki package.

Big changes in default template (.tpl) files

Page columns

In Tiki 3, the page layout method for the left, center and right columns uses floated divs, rather than an HTML table. In Tiki 2, several themes used this new method, but they had their own tiki.tpl, etc. Now this method is the default, and there are no more themes in the package that use the old table-based method.

This means that any theme at a site that previously depended on the old default templates will have broken column placement in Tiki 3 (all columns will be full page width, with the center column first, followed by left and right columns).

Site header

The page-top "site identity" area has been changed radically. Previously, Site Identity was an optional feature. Now there is no permission check for Site Identity, which was redundant since there are checks for each of the components within Site Identity. Old templates that have a Site Identity permission check won't display the contents anymore. The contents, arrangement, and location of Site Identity have changed also.

Details, details

Many small details of the template files and stylesheets have been changed. Examples include buttons, search forms, menus (PHP Layers but especially suckerfish (CSS menus)). Also there's been a lot of simplification of selectors in order to have more consistency across features — i.e., making comment posts the same for forums, page comments, blog posts, for example. This means that old stylesheets will have many mismatches when trying to work with the new templates.

Solutions

Re-implement using a Tiki 3-compatible stylesheet

Old Tiki layouts that are the full width of the page and liquid, with no empty side-margin areas, can use the default tiki.tpl, so won't need their own template. A stylesheet alone is probably all that will be needed for the theme. But it will be necessarily to create a Tiki 3-compatible stylesheet that achieves the old look of the theme. I suggest using one of the theme stylesheets in the Tiki 3 package as a starting point, renaming it, and modifying it to achieve the old look.

Theme option

But an even better solution would be to use a new feature of Tiki 3 called the theme option. When selecting a theme on Tiki 3's Look and Feel admin page or in theme-switching module, sometimes there is a second select dropdown list (such as with the Strasa or The News themes). This extra dropdown list will activate a second CSS file that appends the styling of the main one.

Site admins who want to "customize" an existing theme can now do this easily by making a small CSS file that overrides or adds properties to the primary theme. This way, in site upgrades, the main CSS file (if it is a bundled theme) will get updated, but the theme option file won't be touched, so will continue to adds its extra styling.

To use this method, in the styles/ directory, to add a new option for, e.g., the Feb12 theme, a new directory would be added like styles/feb12/options/. Then the new theme option file would be put in this options directory. If the theme option (called "green" for example) uses images, these images would go in a styles/feb12/options/green/ directory. Check the styles/strasa directory for an example of the necessary arrangment.

Coming up

Specifically, what CSS selectors no longer work, and what has replaced them? I hope to list these sometime soon. In the meantime, pointing FireFox and the Firebug add-on at a page is a great way to find out what CSS stylesheets, selectors and properties are being used for any item on the page. themes.tikiwiki.org (cache) is still running Tiki 2 and demoing older themes, so can be used as a reference for sites that have already upgraded to Tiki 3 and need to check the old layouts.

The last few days I've been working on the menus and "site header" parts of the themes.

Menus

In particular, there are problems in IE6 and, to a lesser extent, IE7 regarding the suckerfish menus. The CSS menus have become kind of a hodge podge in Tiki 3, with some work done on them prior to the last major TikiWiki release, then some refactoring and additions were done during the UI-revamp project, and finally the recent implementation of jquery has added more functionality but also another set of files. The present combination of things works, but isn't the most elegant arrangement. It will get sorted out as jquery is made a more central aspect of the code, I think.

In the meantime, my goal is to have the CSS menus look and work as well as the PHP Layers menus they're replacing. For the most part, this is already accomplished with the exception of some irritating quirks such as flickering in IE6 (apparently due to some javascript conflict).

Logos and banner ads

I was happy and relieved to see that the page-header banner ad will display properly even after the files have been worked on by various people over several months with no one, I think, actually testing the banner functionality. The main banner code seems to be broken, so as far as I can tell it isn't currently possible to configure the normal banner ad displays. But the detail of placing an ad in the header area works fine, and mainly survives the addition of new components in that area in some themes, such as the Coelesce and Strasa log-in and search forms.

Reworking the background image assignments is preventing nasty alignment problems when there's a large logo or logo + text site title + banner. Now the area simply expands, and the navbar, etc. move farther down but with their backgrounds intact and in place. (Well some of the themes being upgraded for Tiki 3 still have some problems, but these'll be fixed before long.)

There'll be a few more days of testing themes and browsers and combinations of items up in the site header area.

The last few days I've been updating the new themes at mods.tw.o, to be compatible with Tiki 3, which will be released soon. There are a dozen or so themes that I've made and added to Tiki's Subversion repository, as "aftermarket" themes that can be installed either with the Admin Mods feature or manually via download and ftp transfers. These have been at the Tiki 2 compatibility level, but with Tiki 3 on the way, they need to be brought up to speed.

File reduction

One nice thing is that a number of the themes' template files are no longer needed, since now the default files coincide. So anyone updating these themes at their site should be careful not to just add the new template files, but to remove any files that are left over in the theme template directory from before; they are outdated now. For instance, the absE theme for Tiki 2 has seven template files, mostly for page layout; for Tiki 3, it has only one - the credits.tpl file that contains the theme author information.

New features

It's really cool seeing the old themes brought to life with new Tiki functionality. In particular, I'm happy to see the old PHP Layers menu replaced by CSS (suckerfish) menus. The newer menu method is an option, and PHP Layers can still be used, but I think the consensus will be to use the new, lighter-weight menu method as soon as they are proven in Tiki. And they are already looking really good IMHO, particularly with jquery activated for "Superfish" results.

Speaking of jquery, in Tiki 3 it's available as an "experimental" feature, but is also very solid already in a typical Tiki installation. The motion of module boxes, menu folders, and column hiding/showing is so nice and smooth with jquery that I think it will be very common to see Tiki sites with this activated.

Main theme update points

What I've done so far with the outside themes is remove the redundant template files, and update the CSS (mostly adding CSS for the suckerfish menus, and adding the new button styling). I'll make another pass through the themes to be sure the CSS validates, and to check for miscellaneous updates, etc. that are needed.

Tikipedia longing for Pagecontrols

Tikipedia is the last of the themes to go through the initial Tiki2 to 3 update, because it requires the most work. It has several template files that position the tabs at the page top Mediawiki-style and so on, and it takes time to make these edits. The work in the ui-revamp experimental branch would have been great for Tikipedia, I was thinking, because the optional tabs interface would probably have been an easier way to implement the Mediawiki look, but the Pagecontrols feature didn't make it into this branch or release. So I'm back to kludging the implementation by manually moving things around in the templates. This should be finished today or tomorrow.

TikiWiki tasks at this time for me fall basically into two areas:

1. Help get theme-related items of 3.0beta into shape, toward release 3.0
2. Prepare the alternative themes, mostly in svn mods, for 3.0

For item 1, this includes

• Site header details: I want to be sure the Look and Feel options work smoothly in all the themes.
• CSS menu details: these should work properly in general
• Check IE6 and IE7 again. Things have worked in these browsers at one time or another, but need to be rechecked as files change, etc. (And some problems have never been fixed for IE, noteably JavaScript errors.)
• Misc. theme details: check out bug reports, etc. and fix as much as possible.
• Related area: profiles. Check the small business presence profile for further improvement. Be thinking/working on additional profiles and profile methods.

For item 2

• Check again which template files are no longer needed. header.tpl for sure can be removed in all themes except (and these aren't in mods yet) themes that use special css/js for custom corner boxes.
• Buttons need to be styled for release 3. Strasa has a pretty good method that can be used in general.
• Check/add the tabs and css menu styles.
• Check the transitions stylesheet and add what can be added to improve the themes.
• Check for new/strange behavior of themes in 3.0beta. The (missing) menu folder icons in Planetfall are one thing I noticed so far.
• Run the theme stylesheets through the validator and eliminate errors.
• Where appropriate, make use of the new theme options. Logical candidates include LiteJazz (which already has gray, green, and red flavors) and Andreas09 (which already has several color variants).
• Make (or adapt, since most already exist) thumbnails and add to the themes' style directories, for the new L&F theme selection preview feature.

Longer term, these are areas I want to work on:

• Profiles - improve existing and add new fully functional profiles.
• English strings in interface need to be improved. I'll be editing the dev.tw.o page for these, to work with J-M's string replacement script.
• Additional themes - I have many that are fairly far along, and can be ready for distribution probably during the period from Tiki 3 to Tiki 4 releases.
• Revamp CSS organization - as discussed with Nyloth and with other ideas, have a layout.css that contains most selectors and properties for positioning and so on, that's imported by the theme stylesheet, which adds just the coloring and other style details unique to the theme, along with any layout.css overrides. This arrangement should enable a theme author to more easily create a new theme or modify an existing one.

Since working with Tiki version 1.10, it's almost painful to go back to the 1.9 version. This is probably partly due to the way I have things organized now. I've been trying out and adjusting various aspects of 1.10 theme files, being pretty much immersed in this version. But there are also tangible differences in the way the two versions do things, and 1.10 does make things easier.

For one thing, there's no separate error.tpl file, so the routine procedure of duplicating tiki.tpl and switching in the error-specific content is eliminated — not a big thing but one I'm glad to not have to think about.

In version 1.10, some of the templates that have caused a problem for *litecss-based themes have been fixed. The problem was usually a missing or misplaced closing div tag, which doesn't bother table-based layouts but usually caused the columns to be staggered or something with the liquid themes.

Also with the new version the emphasis is on using as few theme-specific custom templates as possible, and the flip side of this is that the default templates will be adjusted as necessary if there are problems. Most of the new theme versions I'm working on have only one or two unique template files, and the differences aren't major, so maintenance will be pretty easy.

Things are gradually getting done for themes for 1.10. Most of the themes/theme ports I did earlier are now pretty well updated for use with Tiki 1.10, but there are still details to finish up. I'm trying to improve the methods used before, where I can. For example, the Kubrick header section uses just one image now instead of maybe three separate files. And I intend to have all the themes use Site Identity for the configuration of the page top. This is taking some time to work out but, once it is done, the theme files will be simpler and it will be easier for site admins to personalize their sites, using the Look and Feel admin panel rather than editing template files.

Also the 1.10 versions will incorporate the new features such as Fullscreen mode and Ajax for page editing. I'm also putting the column-flipping code back into the themes that previously I left it out of, since it works well now and especially in the narrow-page themes it is quite useful.

To figure out some basic tiki.tpl approaches, I have used several themes as examples (which have various looks and graphic treatments/requirements, etc.). I wanted to see how well one or two tiki.tpl variants can be used as the basis for a wide range of theme styles. A good outcome of this is that I've gotten a number of new themes done that are a little on the 'unique' side and that will be available after Tiki 1.10 is released. These can be seen on Type1 Themes and Type2 Themes.

I'll also get some documentation pages together on approaches to Tiki theme creation. Though we are still far from the "theme generator" stage, I think the process can be fairly systematic. For sure I've had to think about these things quite a bit, so hopefully this can be shared for others to use.

Another goal is to reduce the number of custom files needed by a theme. Using Site Identity helps in this regard, since it moves the customizing from the template files to the Tiki Admin input. Also probably some of the "reduced-tables" files I've made might go into the core code, so won't have to be kept as theme-specific files.

Here's a weird one: In a multilevel menu (with subitems), if it's used as a normal Tiki menu and not PHP Layers menu (and so the subitems don't show), when an option item follows a subitem, its div class is set as "optionline" rather than "option". I don't know where this comes from. I can't find "optionline" in the Tiki archive other than in a few css files not related to this situation. Where does the CSS class for a menu item type get specified?

Most themes don't style the option divs so the problem may not show up, but for those that do, an "optionline" class should be defined in the CSS to be the same as div class="option". Also this is only a problem for menus for PHP Layers that have multilevel subitems but are used as normal Tiki menus instead/also.

Heh, I haven't posted here in a while, but I have been very busy with Tiki. Most days I help with questions at the tikiwiki (cache) forums. And I've also been busy working on a new Tiki site with some people that I can't talk about yet. The new site has a lot of customization and is quite a departure for Tiki sites, so good things will be coming out of the project, and not only for that site itself.

Unfortunately, it has kept me away from working on other things, such as Tiki themes. I feel bad about that, but the new site should be going live before too long, and then I can back to finishing up the themes, like Zuka, that are pretty close to being ready for release.

And I've been collecting ideas and working up initial prototypes for new themes that I hope will progress rapidly once I have the time to spend on them. All in all, I'm looking forward to the coming weeks and months. With the Tiki devs also bringing the core Tiki program along and adding new things, the future for Tiki should be very interesting.