The concept for the Tiki project site theme design is to be a more evolved form of how the site pages look now with Tiki 13, and done with standard Tiki files and configuration rather than custom code at the sites. Like the current site look, there will be a page-top header, containing the site logo/icon and some links, etc., but also a narrow header (topbar) containing a horizontal menu.
(Choices about what content to display and how to display it are another aspect of the project site revamp, but this page is about the theme and layout template.)
The design idea is for these headers to move in response to page scrolling. The top header would scroll upward out of sight as the page is scrolled downward, and the narrower header would scroll up to the top margin and stick there.
To facilitate this, I added a couple of layout template directories for testing and working out the styling and the header movements.
New, maybe temporary, layout templates
Moving headers
"Moving headers" is the layout template that was called "Social_modules" at first. This layout is just the "Header_middle_footer_containers_3-6-3" layout but with its own layout template class added to the body tag. What this does is use the normal top_modules and topbar_modules zones but any CSS rules applied to them can have a body.layout_moving_headers class for unique styling. When the site is switched from the normal three-containers layout to the moving-headers layout, a new group of CSS selectors is applied, to style the narrower "social-networking-layout" type header.
Originally I made a custom module zone and put its name in the layout template, but this method is a dead end because we don't expect people to be doing that at production sites. So I switched to just using the standard module zones but with the unique body-class selector added. (A Smarty filter was also added in the existing template file to add a class to a div when the moving_headers layout is active.)
Header_topbar_middle_footer_containers_3-6-3
(The name is shortened to mostly initials for convenience in the file name and CSS, etc.) Looking at scripts for sticky or scrolling headers, I thought most of them expected the divs involved to be all at the same level in the DOM, so this layout template moves the topbar div out of div.middle and up to the level of the header and middle divs. Actually I tried for a while to get this to work with Scroll to Fixed (https://github.com/bigspotteddog/ScrollToFixed) - demo at http://bigspotteddog.github.io/ScrollToFixed/ but some Javascript error prevented it from working in my quick try.
Useful for any theme
My idea is that the look and behavior we're shooting for with this theme revamp would be useful for other themes as well. I aimed for general compatibility when choosing element classes and so on, so far in the process, and checked in all the available themes.
Next
I need to work out style details that aren't right yet, as files are adjusted, etc., and luci I believe is going to work on the scrolling and header position behavior.