History: Look_and_Feel_options_schematic

Source of version: 7 (current)

{syntax type="markdown"  editor="wysiwyg"} 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 &amp; 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:


{DIV(style='text-align: center')}{img src="img/wiki_up/Look_and_feel-key.png" }{DIV}


### 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~ 

{DIV(style='text-align: center')}{img src="img/wiki_up/Look_and_feel-customcode_and_ad.png" }{DIV}
 
~pp~(else)
   <div id="customcode">
      (Full-width custom code area here.)
   </div>
(/if)~/pp~ 

{DIV(style='text-align: center')}{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."}{DIV}
 
~pp~(else)~/pp~ 
...Look &amp; 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~ 

{DIV(style='text-align: center')}{img src="img/wiki_up/Look_and_feel-logo_and_ad.png" }{DIV}
 
~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~ 

{DIV(style='text-align: center')}{img src="img/wiki_up/Look_and_feel-ad_and_logo.png" }{DIV}
 
~pp~

~/pp~

### 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~ 

{DIV(style='text-align: center')}{img src="img/wiki_up/Look_and_feel-ad_logo_ad.png" }{DIV}
 
~pp~

~/pp~

### 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~ 

{DIV(style='text-align: center')}{img src="img/wiki_up/Look_and_feel-ad.png" }{DIV}
 
~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.
History: Look_and_Feel_options_schematic

Source of version: 7 (current)

Switch Theme

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

History: Look_and_Feel_options_schematic

Source of version: 7 (current)
