Loading...
Skip to main content
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
History: Site Header (Page Header) Strategies
View published page
Source of version: 9
(current)
An important part of responsive web design is good site identity and navigation in all display sizes. This page demonstrates and describes several methods to configure the site header area. The site header combines concepts from the Bootstrap CSS framework and legacy Tiki page construction. This gives a lot of flexibility, but some understanding of the configuration process is needed. (Details coming soon.) !! Modules and module zones {DIV(class="row")}{DIV(class="col-sm-4")}{img fileId="179"}{DIV}{DIV(class="col-sm-8")} In Tiki terminology, a module is a box that holds information or some functionality. A module can have a title and border and other "chrome" (using the Bootstrap ''panel'' class), or it can be just an HTML div with no visible markings. Modules are used in module zones, and well as in wiki text. The page header uses either the "top" module zone or the "topbar" module zone, or both, depending on the layout template (see below). In a horizontal module zone - ''top'', ''topbar'', ''pagetop'', ''pagebottom'', and ''bottom'' - Bootstrap grid classes can be assigned to modules to give them grid widths and responsive behavior. (See [https://getbootstrap.com/examples/grid/] for the background on this.){DIV}{DIV} !! Using the Bootstrap grid Modules are 100% of the width of the space their in unless the width is limited by a pixel or percentage amount. By assigning a "col-sm-6" parameter, for example, you set the module to be half of the width of the space it's in. In the topbar module zone, for instance, if a menu module is "col-sm-7" and a search module is "col-sm-5", then they will share the topbar's space, side by side, with the menu 7/12 of the width, and the search form 5/12. Since the whole Tiki page uses the Bootstrap grid, assigning grid div classes to modules in horizontal module zones doesn't just make the modules there display nicely side by side, it also can enable them to line up with the rest of the grid in the page, such as columns in wiki pages, etc., if that's desired. !! Layout template makes a difference Switching the layout template on the Look and Feel admin page can make a difference in what modules are used in the site header. Here are the options: || __Layout template__ | __Site header module zones__ Basic Bootstrap | [[ Top module zone ]%%%[[ Topbar module zone ] Classic Tiki | [[ Top module zone ]%%%[[ Topbar module zone ] Wider Side Columns | [[ Top module zone ]%%%[[ Topbar module zone ] Fixed Top Navbar 1 | [[ Top module zone ] (fixed to browser window top)%%%[[ Topbar module zone ] (scrolls with page content) Fixed Top Navbar 2 | [[ Site icon and title ]* [[ Topbar module zone ] [[ Log-in form ] (fixed to browser window top) || * As configured on the Look & Feel admin page ** The Tiki project sites use custom JavaScript for the page header scrolling, documented ((Tiki project sites page header scrolling|here)). !!! The search form The general information about configuring the search feature is here: [https://doc.tiki.org/Search]. When used in the site header, the search form generally isn't displayed as a normal module, with box/panel border and title, etc. (appearance depending on the theme). Instead, it has the parameter ''nobox=y'' set so that only the search input and other form components are show. Update: The search form now has a Bootstrap "form-inline" class, so, if there is enough available width, all of the form's components will display inline (in one row). They will wrap if there isn't enough width for them on one line. {DIV(class="row")}{DIV(class="col-sm-4")} {img fileId="175"} If the width allotted for the search module is too small, it may take up two or more rows as the buttons are positioned below the input. To prevent this, be sure there's enough space (width) for the module. {DIV}{DIV(class="col-sm-4")} {img fileId="176"} If the "Compact mode" parameter is set to "y", and advanced features aren't activated, then the form uses only one line, which is the most compact vertically. {DIV}{DIV(class="col-sm-4")} {img fileId="177"} The buttons appear when the pointer hovers over the form. {DIV}{DIV}
Layout
Stay on this page
Default
Single Container
Classic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
Included themes
Bootstrap component sets
Materia
Ohia
Themes
Making or Updating a Theme for Tiki 27
Updating a Theme for Tiki 26
Tiki_org_family_customizations_CSS
BookStacked
Make an SCSS-Compiled Tiki Theme
...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 branch 27x
Wed 24 of Apr, 2024 11:12 GMT-0000
Site upgraded to branch 26x
Wed 21 of Jun, 2023 09:45 GMT-0000
Site upgraded to branch 25x
Sat 12 of Nov, 2022 17:00 GMT-0000
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT-0000
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT-0000
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT-0000
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT-0000
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT-0000
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT-0000