Loading...
Find
Log in
Username:
Password:
CapsLock is on.
Remember me (for 1 week)
Log in
Stay in SSL mode
History: Tiki project site theme revamp
View page
Source of version: 1
(current)
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.
Switch Theme
Site theme (fivealive-lite/grape)
Default
Amelia
Business
Cerulean
Cosmo
Cyborg
Darkly
Darkroom
Darkshine
Feb12
Fivealive-lite
Fivealive
Flatly
Greenvalley
Journal
Jqui
Lighty
Litera
Lumen
Lux
Materia
Minty
Morph
Ohia
Pulse
Quartz
Sandstone
Simplex
Sketchy
Slate
Solar
Spacelab
Strasa
Superhero
Thenews
Tikicorp
Tikinewt
Tikipedia
United
Utopias
Vapor
Yeti
None
Akebi
Grape
Kiwi
Lemon
Orange
Plum
Raspberry
Watermelon
Switch
Layout
Stay on this page
Default
Fixed top navbar (uses site icon + "topbar" module zone)
Basic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
No records to display
...more
Subscribe to Tiki Newsletters!
Delivered fresh to your email inbox!
Don't miss major announcements and other big news!
Site Config
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT
Upgraded to Tiki 15.0alpha
Tue 08 of Mar, 2016 13:34 GMT
Site updated to Tiki 14 beta
Tue 21 of Apr, 2015 00:01 GMT
Testing Tiki10
Thu 15 of Nov, 2012 23:06 GMT
Configurable header buttons in XtratoVeil layout
Wed 17 of Oct, 2012 14:54 GMT