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

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