History: 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:

::{img src="img/wiki_up/Look_and_feel-key.png" }::

!!! Custom code with and without a banner ad

~pp~(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>~/pp~
::{img src="img/wiki_up/Look_and_feel-customcode_and_ad.png" }::
~pp~(else)
   <div id="customcode">
      (Full-width custom code area here.)
   </div>
(/if)~/pp~
::{img src="img/wiki_up/Look_and_feel-customcode.png" desc="Absolute-positioned search, fullscreen button and login shown here are options for all configurations."}::
~pp~(else)~/pp~
...Look & Feel options with no custom code:
!!! Displaying a logo, with or without an ad banner
~pp~(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)~/pp~
::{img src="img/wiki_up/Look_and_feel-logo_and_ad.png" }::
~pp~   (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)~/pp~
::{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
~pp~   (if logo and logo is centered}
      <div class="clearfix" id="sioptionscentered">
         (if there is an ad banner)
         <div id="bannertopright" class="floatright">
            ({banner zone='topright'} ad goes here.)
         </div>
      <div id="sitead" class="floatleft">
         (Ad goes here.)
      </div>
      (/if)
   <div id="sitelogo">
      (Logo goes here.)
   </div>	
</div>
(/if)~/pp~
::{img src="img/wiki_up/Look_and_feel-ad_logo_ad.png" }::

!!! No logo but there is an ad, so ad is centered.
 ~pp~  (if no logo)
      (if there is an ad)
      <div style="text-align:center">
         (Ad goes here.)
      </div>
      (/if)
   (/if)~/pp~
::{img src="img/wiki_up/Look_and_feel-ad.png" }::~pp~
(/if)~/pp~
Finally, tiki-site_header.tpl has code for the login form:
~pp~
   (if site header login)
      (Site header log-in form goes here.)
   (/if)
(/if}~/pp~

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.