Bold and bright with smooth scrolling
A bold, bright theme that features a centered fly-in navbar with sections that activate when scrolling. This theme also includes page-section fixed-image backgrounds.
While Tiki Wiki CMS Groupware is best known as a web application with depth, sometimes a rich-experience easy-scrolling front page can be a good face for the website. The Happy Scroll theme, originally created by the Bootply team as a one-page scroller, is now adapted to Tiki to meet the requests for an easy click-and-scroll "landing page". The original theme has been extended, of course, to cover Tiki's sections and features. The scroll motion used on the front page is also used in the "autotoc" in-page table of contents feature, and of course can be used elsewhere in the site as long as the script (themes/Happy_Scroll/js/custom.js) is updated to include the relevant page element id.
Installation
When the theme archive is expanded, its files will be in a directory (folder) that contains all the theme files in their necessary subdirectories. Install the theme by transferring this directory to the Tiki site's "themes" directory. After refreshing the site's Look and Feel admin page, the theme name will appear in the theme selector, and can be selected.
The Homepage
About the construction of the Homepage, of course it can be done in various ways including having all the content in one page (and optionally turning on section editing) but, at the demo site, each page section is actually a separate wiki page, fetched by the Include plugin to complete the page. One section can be edited easily without worrying about breaking the layout or content of the full page. Or replace a section with another completely different one by simply changing the Include plugin's directive.
{include page="Homepage_Section1" page_edit_icon="n"} {include page="Homepage_Section2" page_edit_icon="n"} {include page="Homepage_Section3" page_edit_icon="n"} {include page="Homepage_Section4" page_edit_icon="n"} {include page="Homepage_Section5" page_edit_icon="n"}
The wiki pages involved with the configuration of the Happy Scroll theme have been put in a zip archive and included with the theme files (Happy_Scroll_wiki_pages-xml.zip). These can be imported at the Tiki site were the theme is being installed by calling "tiki-import_xml_zip.php". The pages are the ones used at the demo site, which can be a model for setting up your own content.
The wiki pages include a couple that are used with modules to display some elements. The cog icon in the page header opens a menu whose contents are a wiki page - HappyScroll_Homepage_links, which is displayed via a menupage module (which has parameters nobox=y and topclass ("Containing Class" under the "Appearance" tab) = col-xs-6 at the demo site).
The "back to top" chevron icon at the bottom of the page is also set up using a menupage module. The wiki page is HappyScroll_scroll-up-icon and it is assigned to the Bottom module zone, and has a nobox=y parameter.
There is a custom CSS file (themes/Happy_Scroll/css/custom.css) that contains the rules for the Homepage, or other page where the full-width background images are used. These CSS rules use the id of the page to make exceptions to the normal content container width. By default this is #page_1 - the initial wiki page of the site. You may want to change this if you are using another wiki page for your site's homepage, or if otherwise you want to have the full-width background treatment on a different page (or pages). You can find the page id by looking at the page source in your browser. Line 2 will be something like <html lang="en" id="page_24"> Instances of #page_1 in custom.css should be replaced with #page_24 , for example, or whatever is the id number for the page you want the full-width background images to appear.
This custom.css file also is what sets the large height of the page-header on the homepage. This height (550 pixels) is a design element retained from the original Bootply design. You can leave this as is or change the pixel value, or remove the rule entirely if you want the height to be determined dynamically by the page header (top module zone) contents.
The menu is edited with Tiki's Admin Menus feature. The menu items link to numbered sections of the Homepage, so updating the menu is fast and simple. A sample menu is included with the theme files (themes/Happy_Scroll/menu_Happy_Scroll_Homepage.csv). This can be menu-options-imported at the Tiki where Happy Scroll is being installed.
optionId,type,name,url,position,section,perm,groupname,userlevel,class,remove 0,o,Home,#,10,,,,"0""",,n 0,o,Happylanding,#section2,20,,,,"0""",,n 0,o,Tiki,#section3,30,,,,"0""",,n 0,o,Power,#section1,40,,,,"0""",,n 0,o,Easy,#section4,50,,,,"0""",,n 0,o,Intouch,#section5,60,,,,"0""",,n 0,s,More,,70,,,,"0""",,n 0,o,StyleSamples,((TikiandBootstrapSampleElements)),80,,,,"0""",,n 0,o,Blog,blog1-Example-Blog,90,,,,"0""",,n 0,o,GalleryOne,file4,100,,,,"0""",,n 0,o,GalleryOne-Browse,file4?view=browse,110,,,,"0""",,n
This menu file, which can be seen in use at demo.zukathemes.com/Happy+Scroll, can be edited and then imported.
The module (in the topbar module zone) that contains that menu needs parameters like these:
id=43 type=horiz navbar_toggle=y navbar_class ("CSS class for the menu nav element" under "Module" tab) = container css=y nobox=y page=Happy Scroll topclass ("Containing class", under "Appearance" tab) = navbar-custom navbar-inverse navbar-static-top nav-justified
Of course the page parameter should be changed to "Homepage" or whatever the name of the page is where the menu is to be used.
| Author | Zukathemes (Gary Cunningham-Lee) |
| Author's website | https://zukathemes.com |
| License | MIT |
| Bootstrap version compatibility Note: Bootstrap 3 ( Tiki 13 18) Bootstrap 4 (Tiki 19 24) |
Bootstrap 3 |
| If adapted from another theme... | |
| Source theme author | Bootply |
| Source theme website | https://www.bootstrapzero.com/bootstrap-template/happy-scroll |
| Source theme license | MIT |
Download
For Bootstrap 3 | Download |
Note: Screenshots of Admin Modules page for the scrolling page menu: