Loading...
 
Skip to main content

History: Look_and_Feel_options_schematic

View published page Collapse Into Edit Sessions

Preview of version: 7 (current)

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:

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>

(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)

   (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)

{DIV(style='text-align: center')}Image {DIV}

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)

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)

(/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

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

History

Information Version
06:26 UTC System Administrator automatic conversion 7
Wed 15 of Oct, 2008 08:16 UTC Gary Cunningham-Lee 6
Wed 15 of Oct, 2008 08:10 UTC Gary Cunningham-Lee 4
Wed 15 of Oct, 2008 08:09 UTC Gary Cunningham-Lee Typo fixed. 3
Wed 15 of Oct, 2008 08:04 UTC Gary Cunningham-Lee Page created. 1
Collapse/expand modules below