Groundwork to implement FiveAlive-lite enhancements

Gary Tuesday January 27, 2015

As of last week's webinar, I had made style sheet changes in the FiveAlive-lite theme and its options based on luci's images, toward improving the theme for use on the Tiki project sites. Although we already have the "social networking style" layout template, I wanted a method that relied completely on module admin, and not have any hardcoded content display code in the template. But the method i used to place the modules at the page top, for the static header, wasn't really practical. It involved making a custom module zone and then putting that module zone's name in a layout template. Obviously we don't want people to have to do that, so I retreated and put together a couple of layout template strategies that are actually workable in real life.

Of course at the webinar the view was expressed that the static header could/should be done using a custom module zone and not requiring a special layout template. I'm open to that if it can work (and I'll help to make it work), but what i like about the layout templates is that it's an easy site administrator one-click step to switch layouts.

Things got a bit nutty over the weekend as I worked out some trial methods. With cautions against making new templates firmly in mind, I did one template method that appears to be a new layout in the L&F selector, but in fact it's just a new layout directory whose layout_view.tpl only Smarty-includes an existing layout_view.tpl. But by virture of being in a new directory, it gets a new listing in the selector and a new CSS class on the body tag. So the admin selects "Moving headers" (the new layout template directory name) and actually is using the not-new layouts/header_middle_footer_containers_3-6-3/layout_view.tpl and, voila, gets a new layout. CSS makes all the changes. Any differences in the display of the top and topbar modules in the "normal" layout and "fixed header" layout can be handled with CSS rules. So this kind of combines the benefits of template switching and reliance on CSS for distinct layouts. In the layout selector in the Tiki trunk demo at this site, you can select "Moving headers" to see how this looks. (The "moving" aspect mostly isn't there yet.)

I made a second method trial because I noticed, when checking around for ways to do the header moving, most of the examples showed the elements being moved were all on the same level in the DOM. I didn't know if it'd work with our current layout which has the topbar menu within the middle div. So I modified our three-containers, three-columns template to have four containers: the topbar module zone I moved out of the middle div to a new "topbar container" div. The template now has header, topbar, middle and footer containers. This provides another option for the coming javascript part of the project. I tried briefly to get things to move with Scroll to Fixed, but hit a JavaScript error and didn't spend time to figure out the problem.