Eigene Templates erstellen

Grundsätzlich sind Templates (wir reden im Augenblick mal von den Haupttemplates) für PowerSite nichts anderes als ganz normale Templates - sprich Vorlagen - wie man sie überall kostenfrei bekommen kann oder selbst schreiben kann.

Unter PowerSite sind sie in die Systemstruktur einzufügen und müssen die Dateiendung .php haben, weil alles was Inhalte und Templates ist bei PowerSite immer PHP ist.

Das hat zur Folge, das Pfade im Template selbst und auch in der CSS an diese Struktur anzupassen sind.

Ein Template ist eine Vorlage in der gezielt in bestimmten Bereichen Inhalte gezeigt werden, die für die gerade aktuelle Seite vorgesehen sind.

Diese Inhalte werden über den Einsatz von Platzhaltern mit PHP eingebracht oder über Plugins und andere Templates (z.B. Menütempaltes) generiert und dargestellt.

Erforderliche Kenntnisse

HTML
CSS
Ablagestruktur und Pfaddefinition von PowerSite
PHP Basis
Funktionsweise von der Templateengine TPLE
Kenntnisse der Datenstruktur des Plugins pmenu

Demo ansehen

In dem Template der mitgelieferten Demo ist eigentlich schon alles zu sehen, was wichtig ist.
Hier mal die etwas konzentrierte Version:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" type="text/css" media="all" href="<?php echo CSS_DIR;?>layout2setup.css" />

  <link rel="stylesheet" type="text/css" media="all" href="<?php echo CSS_DIR;?>layout2text.css" />

  <?php if ($this->VARS['meta_name']):$this->display($this->VARS['meta_name']);endif;?>

  <script type="text/javascript" src="<?php echo ROOT_URL;?>/_ps_/js/menuh.js"></script>

  <?php if (isset($this->VARS['xajaxheader'])): echo $this->VARS['xajaxheader'];endif;?> 

</head>


<body>

  <!-- Main Page Container -->

  <div class="page-container">


   
<!-- A. HEADER -->      
    <div class="header">

      
      <!-- A.1 HEADER TOP -->

      <div class="header-top">

        <div class="round-border-topleft"></div><div class="round-border-topright"></div>
      
        
        <!-- Sitelogo and sitename -->

        <a class="sitelogo" href="#" title="Home"></a>

        <div class="sitename">

          <h1><a href="<?php echo ROOT_URL;?>/index.php?<?php echo QUERY_VAR;?>=start" title="Go to Start page">PowerSite&nbsp;&bull;&nbsp;V 0.982</a></h1>
 
          <h2>Schnelles Framework für Webanwendungen</h2>

        </div>

    
        <!-- Navigation Level 0 -->

        <div class="nav0">

		   <ul>

            <li><a href="<?php echo ROOT_URL;?>/index.php?<?php echo LANG_QUERY;?>=en" title="English"><img src="<?php echo IMAGE_DIR;?>cms/icon_flag_us.gif" alt="English Version" /></a></li>

            <li><a href="<?php echo ROOT_URL;?>/index.php?<?php echo LANG_QUERY;?>=" title="Deutsch"><img src="<?php echo IMAGE_DIR;?>cms/icon_flag_de.gif" alt="Deutsche Version" /></a></li>

            <li><a href="<?php echo ROOT_URL;?>/index.php?<?php echo LANG_QUERY;?>=se" title="Svenska"><img src="<?php echo IMAGE_DIR;?>cms/icon_flag_se.gif" alt="Swedish Version" /></a></li>

			       <li><a href="<?php echo ROOT_URL;?>/mininewsrss.php" title="RSS"><img src="<?php echo IMAGE_DIR;?>cms/icon_rss.gif" alt="RSS Icon" /></a></li>

          </ul>

         
</div>		
 	

        <!-- Navigation Level 1 -->

        <div class="nav1">

          <ul>

            <li><a href="<?php echo ROOT_URL;?>/index.php?<?php echo QUERY_VAR;?>=links" title="Unsere Links">Links</a></li>

            
<li><a href="<?php echo ROOT_URL;?>/index.php?<?php echo QUERY_VAR;?>=sitemap" title="Sitemap">SiteMap</a></li>								
            <li><a href="<?php echo ROOT_URL;?>/index.php?<?php echo QUERY_VAR;?>=impressum" title="Impressum">Impressum</a></li>
		                   
						            
			    </ul>

        </div>
              
      </div>

            
      <!-- A.3 HEADER BOTTOM -->

      <div class="header-bottom">

      
        <!-- Navigation Level 2 -->

        <?php #$this->display(TEMPLATE_DIR.$this->VARS[LANG_QUERY].'-menu_horizontal_ebene1.tpl.php');?>

        <?php $this->display(TEMPLATE_DIR.'menuh.tpl.php');?>

	  </div>


      <!-- A.4 HEADER BREADCRUMBS -->


      <!-- Breadcrumbs -->

      <div class="header-breadcrumbs">
       	
       <?php  $this->display(TEMPLATE_DIR.$this->VARS[LANG_QUERY].'-breadcrumbs.tpl.php') ?>

      </div>

    </div>


   <!--  END COPY here -->


    <!-- B. MAIN -->

    <div class="main">

 
      <!-- B.1 MAIN NAVIGATION -->

      <div class="main-navigation">

        <!-- Navigation Level 3 -->

        <div class="round-border-topright"></div>

        <h1 class="first">Suchen</h1>

        <p>&nbsp;</p>

<div>

		<form class="search" id="suchform" action="javascript:void(null)" onsubmit="xajax_suchen(xajax.getFormValues(this.id));">

		<fieldset>

			<input  class="field" type="text" name="pisearch" value="Suchbegriffe ..."  onblur="if(this.value=='') this.value='Suchbegriffe ...';" onfocus="if(this.value=='Suchbegriffe ...') this.value='';"/>

			<input type="hidden" name="action" value="showresults" />

			<input type="hidden" name="levi" value="1" />

			<input type="hidden" name="special" value="2" />

			<input type="hidden" name="ajax" value="1" />

			<!-- nachfolgenden Input auf 1 setzen wenn mit Mysql in der Demo gesucht werden soll -->

			<input type="hidden" name="m" value="0" />

			<input type="submit" value="Los" name="button" class="button" />

			</fieldset>

      </form></div>

        <br />

       <p>Hier wäre Platz für News oder Nebeninhalte.</p>
 
		<?php echo $this->VARS['inhalt_a'];?>

		
	  </div>

      <!-- B.1 MAIN CONTENT -->

      <div class="main-content">

      
  <div id="suchdiv"></div>

<div id="allgemein"></div> 



      <?php  $this->display($this->VARS['inhalt']); ?>


 <p><?php if ($this->VARS['modified'] <> false):?><br />&nbsp;

	  Bearbeitung dieser Seite am: <?php date_default_timezone_set('Europe/Paris');echo date('d.m.y H:i:s',$this->VARS['modified']);?><br />

	<?php endif;?><?php $this->display(TEMPLATE_DIR.$this->VARS[LANG_QUERY].'-nextprev.tpl.php'); ?></p>

	    

	  </div>

	 </div>

	
	
      
    <!-- C. FOOTER AREA -->
      

    <div class="footer">

      <p>Copyright &copy; 2008 -Ihre Seite-</p>

      <p class="credits">Template von <a href="http://1234.info/" title="Designer Homepage">1234.info</a> | Modifziert für PowerSite von <a href="http://power-site.org" title="PowerSite">Darien</a> | Erstellt mit <a href="http://powersite.powercms.org" title="PowerSite">PowerSite</a> |
 
	  <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML code">XHTML 1.0</a></p>

    </div> 

   	
  </div> 

  <script type="text/javascript">

	var menu=new menu.dd("menu");

	menu.init("menu","menuhover");

</script>


</body>

</html>

Die in der index.php von Powersite definierten Konstanten sind gut zu erkennen - sie sind grundsätzlich in Großschrift definiert und auch so in das Template zu schreiben.

Auch die Art und Weise wie Variable und Plugins über TPLE zum Einsatz gelangen, ist gut zu erkennen.

pmenu und Menüaufbau

Ein Template funktioniert im Gegensatz zum HTML - Standard unter Powersite dynamisch und nicht statisch.

Ein Mangel vieler freier Templates besteht darin, das da nur eine einzige statische Seite gezeigt wird und man sich letzten Endes vollständig zurück hält was die Funktionsweise des Menüs betrifft.

Das ist auch der Punkt wo sich hier (und auch bei einem CMS) Spreu und Weizen trennen wird.

Es ist wichtig zu wissen, wie ein Menüfile aufgebaut wird, bevor es über pmenu in die Vearbeitung und die Aufbereitung geht.

Zum Menüfile gibt es bereits einige Hinweise.

Eigene Templates erstellen

Horizontales Auswahlmenü