Der <head> Bereich:
Eigentlich können wir die index.php frei nach unseren Vorstellungen gestalten, es gibt jedoch einige Codzeilen, die diese Datei unbedingt enthalten muss um später einwandfrei zu funktionieren. Öffnen Sie dazu am besten eine php Datei mit Ihrem Editor und löschen sie einfach den gesammten Quellcode. Fügen Sie dann den nebenstehenden Code ein.
Wichtig ist hier auch den Pfad in <link href=" <?php echo $mosConfig_live_site; ?>/templates/wunschname/css/ template_css.css" rel="stylesheet" type="text/css" /> entsprechend des Namens Ihres Templates zu ändern. In unserem Fall steht dort mambomango.
| <?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<?php echo "<?xml version=\"1.0\"?>"; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $mosConfig_sitename; ?></title>
<meta http-equiv="Content-Type" content= "text/html; <?php echo _ISO; ?>" />
<?php
if ($my->id) {
include ("editor/editor.php");
initEditor();
}
?>
<?php mosShowHead(); ?>
<link href="<?php echo $mosConfig_live_site; ?>/templates/wunschname/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
</head>
|
Der <body> Bereich:
Nach dem <head> Bereich der Datei folgt nun der <body> Bereich. Dieser betimmt den Aufbau des Templates und kann von uns frei gewählt werden. An einzelnen Stellen werden wir jedoch bestimmte php Funktionen von Joomla aufrufen um z.B. das Hauptmenü, den Contentbereich oder auch Umfragen einbauen zu können. Die so bestimmten Bereiche beinhalten dann später die von Ihnen gewählten Module. In unseren Fall reichen uns erstmal 2 Bereiche (left und right) aus. Nun fangen wir also an, den Aufbau unseres Templates zu gestalten.
| |
Dieser Code erzeugt als erstes einen Bereich mit dem Namen „container“, der die ganze Seite umschließt. Danach wird ein Bereich namens „title“ erstellt. Dieser ist der Header unserer Seite. Die php Variable $mosConfig_sitename enthält den Namen unserer Seite und <?php echo $mosConfig_sitename; ?> sorgt dafür, dass der Name im Header angezeigt wird. Das <h1> Tag bestimmt das Aussehen des Seitennamens. Die Einstellungen dazu werden in der template_css.css vorgenommen. Merken Sie sich jetzt schonmal, dass eigentlich alle Einstellungen, die das Aussehen des Templates betreffen wie z.B. Hintergrundfarbe, Schrifgröße, Schriftfarbe, Rahmen, Bilder usw. in der gerade genannten css Datei zu finden sind. Der Bereich „search“ ist ein Unterbereich des Headers und sorgt dafür, dass dort später das Modul angezeigt wird, das der Modulposition user4 zugewiesen ist. Das ist im Normalfall das Suchmodul. Die Funktion mosLoadModules ( "user4" ) ruft dies auf und blendet es an der von uns gewählten Position ein.
| <body>
<center>
<div id="container">
<div id="title">
<h1><?php echo $mosConfig_sitename; ?> </h1>
<div id="search"><?php mosLoadModules ( "user4" ); ?> </div>
</div>
|
Der Bereich „center_table“ umschließt die Bereiche „left“, „content“ und „right“. Dem Bereich „left“ wird durch den Aufruf der php Funktion mosLoadModules ( 'left' ) die Modulposition „left“ zugewiesen. Durch diese Zuweisung sorgen wir dafür, dass alle Module denen im Backend von Joomla diese Position zugewiesen wird, dort (auf der linken Seite des Templates) angezeigt werden. Im Normalfall ist das Login Modul mit Menü, Login und Syndicate dieser Position zugewiesen.
| <div id="center_table">
<div id="left" style="clear:right;">
<?php mosLoadModules ( 'left' ); ?>
</div>
|
Nun legen wir den Bereich „right“ für die Modulposition „right“ fest. Die Funktion mosLoadModules ( "right" ) sorgt dafür, dass alle Module mit der Modulposition „right“ auf der rechten Seite unseres Templates angezeigt werden.
| <div id="right">
<?php mosLoadModules ( "right" ); ?>
</div>
|
Wir haben nun den Bereich „content“ erstellt. Die Funktion mosPathWay() sorgt dafür, dass der aktuelle Pfad des Benutzers oben im Contentbereich angezeigt wird. Die beiden <br/> Tags sorgen für den nötigen Abstand zum eigentlichen Inhalt.
Dieser wird mit der Funktion mosMainBody() aufgerufen und in der Mitte der Seite angezeigt. Mit </div> schließen wir den Bereich „content“ und mit dem folgenden </div> wird der Bereich „center_table“ geschlossen.
| <div id="content">
<?php mosPathWay(); ?><br/><br/>
<?php mosMainBody(); ?><br/><br/>
</div>
</div> |
Dieser Bereich heisst „bottom“ und beinhaltet den Unterbereich „bottom_text“, der auch den Seitennamen beinhaltet. Dieser wird durch <a href="<?php echo $mosConfig_live_site;?>" accesskey="1"> <?php echo $mosConfig_sitename; ?> </a> als Link ausgegeben.
| <div id="bottom"><div id="bottom_text">
Copyright ©
<a href=" <?php echo $mosConfig_live_site;?>" accesskey="1">
<?php echo $mosConfig_sitename; ?>
</a>
</div>
</div> |
Der Aufbau unserer Seite ist nun abgeschlossen und wir können nun mit der eigentlichen Gestaltung des Templates beginnen. Dazu werden wir im nächsten Schritt die template_css.css mit Inhalt füllen.
| </div>
</center>
</body>
</html> |