Loading...
 
Space-sensitive layout of page-top options

Look_and_Feel_options_schematic

TikiWiki has had an admin interface to display site identity options flexibly, but in previous releases these items were generally just added in a vertical stack, since there wasn't any particular "top" to the page.

But for themes that have a specific area for site identity items, stacking won't work. Instead, the items must be placed side-by-side. This page describes the method being used to place these items, which include the logo, banner ad, search form, log-in form Look & Feel options, and the div that holds custom code data.

Following the logic of the tiki-site_header.tpl template file, this is how items are displayed:

Image

Custom code with and without a banner ad

(if custom code is used)
   (if there is an ad banner)
   <div id="sitead" class="floatright">
      (Banner is displayed here.)
   </div>
   <div id="customcodewith_ad">
      (Here will be parsed the 400px-wide custom site header code.}
   </div>
Image
(else)
   <div id="customcode">
      (Full-width custom code area here.)
   </div>
(/if)
Absolute-positioned search, fullscreen button and login shown here are options for all configurations.
Absolute-positioned search, fullscreen button and login shown here are options for all configurations.
(else)

...Look & Feel options with no custom code:

Displaying a logo, with or without an ad banner

(if there is a logo and the logo left or right)
   <div class="clearfix" id="sioptions">
   (if logo is at left)
      (if there is an ad)
         <div id="sitead" class="floatright">
           (Ad goes here.)
         </div>
      (/if)
      <div id="sitelogo" class="floatleft">
         (Logo goes here.)
      </div>
   (/if)
Image
   (if logo is at right)
      {if there is an ad)
         <div id="sitead" class="floatleft">
            (Ad goes here.)
         </div>
      (/if)
      <div id="sitelogo" class="floatright">
            (Logo goes here.)
      </div>
   (/if)
   </div>
(/if)
{img src="img/wiki_up/Look_and_feel-ad_and_logo.png" }

Logo centered, and there is an ad: to work in small vertical space, the ad (halfbanner) is floated left; a second banner zone is floated right

   (if logo and logo is centered}
      <div class="clearfix" id="sioptionscentered">
         (if there is an ad banner)
         <div id="bannertopright" class="floatright">
            ( ad goes here.)
         </div>
      <div id="sitead" class="floatleft">
         (Ad goes here.)
      </div>
      (/if)
   <div id="sitelogo">
      (Logo goes here.)
   </div>	
</div>
(/if)
Image

No logo but there is an ad, so ad is centered.

  (if no logo)
      (if there is an ad)
      <div style="text-align:center">
         (Ad goes here.)
      </div>
      (/if)
   (/if)
Image
(/if)

Finally, tiki-site_header.tpl has code for the login form:

   (if site header login)
      (Site header log-in form goes here.)
   (/if)
(/if}


This is the method used for new themes including Darkroom, Feb12, The News, and Tikinewt, in Branch 2.0, and for themes listed on http://themes.tikiwiki.org/Themes_for_TW2. There are variations in some cases due to theme-specific space configurations, etc.

Very possibly this code could be improved, and I'd welcome that.


Page last modified on Wednesday 15 of October, 2008 08:16:46 GMT

Switch Theme

Layout

Latest Changes

No records to display ...more

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config