Joomla 1.5 Template Tutorial

Beitragsseiten
Joomla 1.5 Template Tutorial
Entwicklung eines CSS-basierten Joomla! 1.5 Template
Was ist ein Joomla! 1.5 Template?
Ein einfaches leeres Template
CSS für den Aufbau eines tabellenfreien Layout
Ein Joomla! 1.5 Template
Weitere Templateeigenschaften
Schlußwort
Alle Seiten

Seite 5 von 8

CSS für den Aufbau eines tabellenfreien Layout

Wir werden CSS einsetzen, um ein 3-spaltiges Layout für das Joomla! Template zu erzeugen. Es soll ein flexibles (fluides) Template sein. Man unterscheidet zwei Haupttypen eines Webseitenlayouts: fix und fluid, sie beschreiben die Einstellung der Breite einer Seite. Die Festlegung der Seitenbreite ist deshalb wichtig, weil diese mit unterschiedlichen Bildschirmauflösungen betrachtet wird. Obwohl abnehmend, nutzen noch ca. 17% der Surfer die Auflösung 800x600px. Die Mehrheit von ca. 79% nutzen die Auflösung von 1024x768px und höher. Ein flexibles Template aufzubauen bedeutet, daß die Seite auch auf kleineren Monitoren dargestellt werden kann.

Ein typisches Design würde für das Layout Tabellen nutzen. Sie sind deshalb nützlich, weil lediglich die Breite der Spalten in % angegeben werden muss. Aber dies hat einige Nachteile.Im Vergleich zu CSS fällt zum Beispiel eine größere Menge Code an. Dies führt zu längeren Ladezeiten (dies mögen Surfer garnicht) und zu einer schlechteren Performance bei Suchmaschinen. Der Code kann gut doppelt so groß werden, nicht unbedingt wegen des Codes an sich sondern z.B. wegen Einträgen wie "spacer gifs".

Sie sind schwieriger zu warten. Um Änderungen vorzunehmen, muss das Zusammenspiel der Tgs wie < tr>/<td> beachtet werden. Mit CSS sind nur wenige Codezeilen betroffen.
Der Inhalt kann nicht quelltextgeordnet aufgebaut werden. Viele Surfer sehen die Webseite nicht in einem Browser. Diejenigen, die sich die Seite in einem Textbrowser oder Bildschirmleser betrachten (vorlesen lassen), "lesen" die Seite von links oben nach rechts unten. Dies bedeutet, daß sie zuerst alles im Header und der linken Spalte (bei einem 3-spaltigen Layout) erfassen, und dann erst die wichtigen Inhalte in der mittleren Spalte. Ein CSS-Layout andererseits erlaubt einen quelltextgeordneten Inhalt. Das heißt, der Inhalt kann im Quelltext semantisch richtig angeordnet werden. Wahrscheinlich ist Google Ihr wichtigster Besucher, diese Suchmaschine nutzt im Grunde einen Screenreader.

Sehen wir uns ein Layout mit CSS näher an. Sie können mit CSS Elemente auf verschiedene Weisen positionieren. Eine gute Einführung: Brainjar's CSS Positioning

Wenn Sie ein Anfänger in CSS sind, empfiehlt sich "beginners guide to CSS". Hier ein paar Vorschläge:

Modernes Webdesign nutzt eher CSS als Tabellen. Es ist schwierig zu lernen, aber die Mühe wert. Es gibt viele (nicht-Joomla) Webseiten, welche hier helfen können.

Wir werden hier float benutzen, um unseren Content zu positionieren. Grundlegend sieht unser Template so wie im nächsten Bild aus. Es ist noch nicht sehr aufregend, aber sehen wir uns die verschiedenen Bestandteile einmal näher an.

Die CSS-Styles sind hier im <head> untergebracht, normalerweise befinden sie sich in der template.css Datei.

Alles ist im Element namens #wrap enthalten. Es hat eine fluide Breite im Bereich von 760px bis 960px.

9.4 Standardtemplatelayout

Der linken, mittleren und rechten Spalte wird jeweils ein CSS-Element zugewiesen. Jedes ist mit float:left definiert und erhält eine Breite in %. In der Summe ergeben sich 100%. Die clear:both Anweisung am Footer Element weist den Browser an, das Umfließen zu beenden und damit den Footer sich über alle drei Spalten auszudehnen. Wenn wir später unser zweites Template entwickeln, nutzen wir eine fortgeschrittenere Clear-Technik.

Um das Layout zu verbessern und ein wenig 'Luft zum Atmen' vom Spaltenrand zum Inhalt einzubauen, fügen wir einen Spaltenzwischenraum hinzu. Dieser wird auch Gutter genannt. Leider tritt dabei ein Problem auf. Wie vielleicht bekannt, interpretiert der Internet Explorer CSS unterschiedlich. Er berechnet die Breite anders. Wir lösen dies, indem wir padding oder border Anweisungen nicht bei Elementen benutzen, die eine Breite besitzen. Um unseren Gutter zu erhalten, fügen wir ein neues <div> innerhalb der Spalten hinzu:

.inside {padding:10px;}

Der <body> code der index.php:

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <?php echo $mainframe->getCfg('sitename');?>
      <jdoc:include type="modules" name="top" />
    </div>
  </div>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" />
    </div>
  </div>
  <div id="content">     <div class="inside">
      <jdoc:include type="component" />
    </div>
  </div>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" />
    </div>
  </div>
  <div id="footer">
    <div class="inside"> Powered by <a href="http://joomla.org">Joomla!</a>.
Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </div>
  </div>
</div>
<!--end of wrap-->
</body>

Die template.css Datei:

#wrap {
min-width:760px;
max-width:960px;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}

CSS Shorthand

Es ist möglich, den CSS-Code zu reduzieren, indem "Shorthand" (Kurzsyntax) benutzt wird. Ein Beispiel mit Padding und Margin Styles:

Die Anweisung

margin-top:5px; margin-bottom:5px; margin-left:10px;margin-right:10px;

kann ersetzt werden durch

margin: 5px 10px;

Wenn Sie Ihre Styles einmal definiert haben, übernehmen Sie die Shorthand-Version und löschen die langen Schreibweisen. Die Syntax ist:

font: font-size |font-style | font-variant | font-weight | line-height | font-family

In der langen Schreibweise:

font-size:1em; font-family:Arial,Helvetica,sans-serif;font-style:italic; font-weight:bold; line-height:1.3em;

und in der Shorthandversion:

font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

Lesen Sie mehr hier: An Introduction to CSS shorthand properties

Dieses einfache Layout ist ein gutes Beispiel, um die Anwendung von CSS für Joomla! zu lernen. Zwei Vorteile genüber einem tabellenbasierten Layout: Es benötigt weniger Code und es ist leichter zu warten. Jedoch ist es noch nicht quelltextgeordnet aufgebaut. Daher müssen wir ein mehr fortgeschrittenes Layout benutzen, auch bekannt als nested float Layout. Quelltextgeordnete Layouts schneiden bei Suchmaschinen besser ab als Templates, welche den wichtigen Inhalt erst später im Code anzeigen. Aus Joomlasicht wird der wichtige Inhalt von einer Komponente erzeugt.

Default CSS

Bisher hat unser CSS nur das Layout festgelegt. Wir fügen nun einige Formatierungsanweisungen ein:

body {
text-align:center;
}

#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
text-align:left;
margin:0 auto;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}

Wir haben die Seite zentriert, indem wir einen kleinen Hack benutzt haben. Dieser ist für den Internet Explorer notwendig, weil dieser CSS nicht richtig interpretiert.

Mit den Standards entsprechenden Browsern könnten wir einfach margin:0 10%; einfügen, um die Seite zu zentrieren. Aber der IE erkennt diese Anweisung nicht. Darum zentrieren wir den Text der gesamten Seite und richten ihn innerhalb der Spalten wieder linksbündig aus.

Weil der IE7 jetzt min/max width unterstützt, können wir eine minimum und maximum width definieren. Ein kleiner Hack muss aber eingebaut werden, weil der IE6 diese Anweisungen nicht versteht. Er wird die !important Anweisung ignorieren und eine feste Weite von 960px einstellen.

Es sieht merkwürdig aus, die Spaltenbreite mit %-Werten, aber den umgebenden DIV-Container mit fester Breite zu definieren.

Erklärung:

Fluide Spalten innerhalb eines Containers mit fester Breite machen das Template sehr flexibel. Wenn wir Buttons für eine Breitenänderung einbauen, muss nur ein Wert verändert werden.
Wir haben die max-width definiert, warum dann nicht alles fluid definieren? Viele Webnutzer haben mittlerweile sehr große Bildschirme. Usabilityuntersuchen besagen, daß Textzeilen mit eine Länge von mehr als 900px schwer zu lesen sind. Die Augen müssen einen zu langen Weg bis zur nächsten Zeile zurücklegen. Das fluide Design so zu beschranken, erhöht die Usability und Accesibility.

Wir haben noch einen weiteren Style den Spalten hinzugefügt: overflow:hidden;. Dies führt zu einer höheren Konsistenz, wenn im Browser die Breite des Fensters verkleinert wird.

Zu Beginn des CSS wird ein sogenannter 'global reset' durchgeführt:

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
}

Alles erhält ein margin und ein padding von 0. Dann wird für alle Blockelemente eine "bottom margin" definiert. Dies hilft, eine konsistente Darstellung für alle Browser zu erreichen. Lesen Sie hier mehr über den "global reset'": clagnut und left-justified

Die font-size ist auf 76 % festgelegt. Dies sorgt ebenso für eine übereinstimmende Darstellung in verschiedenen Browsern. Alle Zeichengrößen sind in em angegeben. Eine line-height von 1.3em. unterstützt die Lesbarkeit. Dies bedeutet, daß die Seiten besser zugänglich sind, wenn der Leser in der Lage ist, die Zeichen in der Größe nach seinen Gewohnheiten zu verändern. Eine Besprechung dieses Themas bei An experiment in typography at The Noodle Incident (Owen Briggs).

Wenn Hintergrundfarben hinzugefügt werden, sehen wir folgendes Ergebnis:

9.5 Standardtemplate mit Typografie

Die seitlichen Spalten reichen nicht bis zum Footer. Dies liegt daran, daß diese nur soweit reichen, wie es für den dortigen Content nötig ist. Wenn wir ein Template haben, das als Hintergrundfarbe Weiß für alle Spalten definieren würde, wäre dies kein Problem. Wir verfolgen diesen Ansatz und werden um die Module eine Box definieren. Wenn Spalten mit denselben Höhen gewünscht sind und diese verschiedenfarbig sein sollen, muss ein Hintergrundbild benutzt werden, das vertikal geteilt ist. Diese Technik wird "Faux Columns" genannt und wird hier näher beschrieben von Douglas Bowman und Eric Meyer

Das Joomla-spezifische CSS

Obwohl Joomla! 1.5 in der Lage ist, die Core Ausgabe innerhalb eines Templates zu überschreiben, erzeugt die Standardausgabe viele Tabellen innerhalb des Mainbody. Diese Ausgabe kann per CSS gestyled werden. Die folgende Tabelle zeigt die derzeit verfügbaren Styles. Sie basiert auf Beiträgen einiger Community Mitglieder. Sie beinhaltet nicht Standard Styles wie H1, H2, p, ul, a, form usw.

article_separator
adminform
article_separator
author
bannerfooter
bannergroup
bannerheader
banneritem
blog
blog_more
blogsection
breadcrumbs
button
buttonheading
clr
componentheading
content_email
content_rating
content_vote
contentdescription
contentheading
contentpagetitlw

contentpane
contentpaneopen
contenttoc
createdate
created-date
date
input
inputbox
intro
latestnews
loclink
mainlevel
message
metadata
modifydate
module
moduletable
mosimage
mosimage_caption
mostread
newsfeed

outline
pagenav
pagenav_next
pagenav_prev
pagenavbar
pagenavcounter
pathway
pollstableborder
read
search
searchintro
sections
sectiontable_footer
sectiontableentry
sectiontablefooter
sectiontableheader
small
smalldark
sublevel
title
wrapper

Viele Designs beinhalten CSS Styles, die in ihrer Definition spezifischer sind, so daß eine solche Regel eine weniger spezifische Regel überschreiben würde.

Beispiel:

a {color:blue;}
a:link {color:red;}
.contentheading {color:blue;}
div.contentheading {color:red;}

Die Farbe eines Links und die Farbe eines .contentheading wird rot dargestellt, weil diese Regel mehr spezifisch ist (.contentheading befindet sich innerhalb eines <div>)

Bei einem Joomla! Template werden Sie häufig auf solche Regeln treffen. Dies geschieht, wenn z.b. eine Tabelle einer class zugeordnet ist. Mehr Beispiele:

.moduletable table.moduletable

.moduletable ist der Name des <div>, welches das Modul umgibt. table.moduletable wird nur den Style einer Tabelle beeinflussen, welche die Definition class="moduletable" hat
.moduletable wird den Style beeinflussen, unabhängig davon, welche class dem Element zugewiesen wurde

a.contentpagetitle:link .contentpagetitle a:link

a.contentpagetitle:link bezieht sich auf die Styles von "a" Tags, für die eine .contentpagetitle class definiert wurde, die ein Link ist
.contentpagetitle a:link wirkt sich auf alle Elemente INNERHALB von .contentpagetitle aus, wenn sie ein Links sind

Diese spezifischen Einstellungen sind nicht leicht zu verstehen. Es ist einfacher mit den grundlegenden Einstellungen zu beginnen und dann spezifische Regeln aufzubauen, wenn Sie mit dem Ergebnis nicht zufrieden sind.

Links:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.meyerweb.com/eric/css/link-specificity.html
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Joomla! gibt bestimmte Elemente, IDs und Class Tags im Code der Webseite aus. Diese können mit CSS gestyled werden.

Module in Templates

Für die Ausgabe eines Moduls stehen verschiedene Optionen zur Verfügung. Die allgemeine Syntax:

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Der optionale Parameter style ist in der Datei templates/system/html/modules.php definiert. Derzeit werden folgende Layouts unterstützt.

OPTION="table" (Default)

Das Module wird in einer Tabellenspalte dargestellt. Beispiel:

 <table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
 <?php if ($module->showtitle != 0) : ?>
  <tr>
   <th valign="top">
    <?php echo $module->title; ?>
   </th>
  </tr>
 <?php endif; ?>
  <tr>
   <td>
    <?php echo $module->content; ?>
   </td>
  </tr>
  </table>

OPTION="horz"

Das Modul wird horizontal angezeigt. Jedes Modul wird in der Zelle einer umgebenden Tabelle ausgegeben. Beispiel:

<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td valign="top">
    <?php modChrome_table($module, $params, $attribs); ?>
    </td>
  </tr>
</table>

OPTION="xhtml"

Das Modul wird in einem einfachen DIV Element ausgegeben. Beispiel:

<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
  <?php if ($module->showtitle != 0) : ?>
   <h3><?php echo $module->title; ?></h3>
  <?php endif; ?>
   <?php echo $module->content; ?>
</div>

OPTION="rounded"

Die Ausgabe erfolgt in einem Format daß zum Beispiel runde Ecken ermöglicht. In diesem Fall ändert sich der Name des <div> von moduletable zu module. Beispiel:

<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
 <div>
  <div>
   <div>
    <?php if ($module->showtitle != 0) : ?>
     <h3><?php echo $module->title; ?></h3>
    <?php endif; ?>
   <?php echo $module->content; ?>
   </div>
  </div>
 </div>
</div>

OPTION="none"

Das Modul wird pur ohne Titel und ohne weitere Formatierung ausgegeben. Beispiel:

echo $module->content;

Wie Sie sehen, erzeugen die CSS-Optionen xhtml und rounded einen deutlich schlankeren Code. Dies erleichtert das Styling der Website. Die Default-Einstellung bzw. horz sollten nur wenn nötig verwendet werden.

Hier eine wirklich gute Neuerung:
Wenn Sie sich die Datei module.php genauer ansehen, werden Sie dort alle möglichen Optionen für ein Modul finden. Es ist einfach, hier eine eigene Option einzubauen, dies ist ein Teil des Templatingsystems von Joomla! 1.5. Wir werden uns dies später detailliert ansehen.

Für die Entwicklung unseres Templates stellen wir für alle Module die Option xhtml ein.

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <div id="content">
    <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
  </div>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div>
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div>
  </div>
<!--end of wrap-->
</body>

Dies Optionen können nicht für <jdoc:include type="component" /> verwendet werden, weil es sich nicht um ein Modul handelt.

In Joomla! 1.5 kann die Ausgabe von Modulen individuell angepasst werden, oder Sie können die eingebauten Optionen verwenden. Diese heißen auch Module Chrome.

Wir haben den Seitentitel mit einem <H1> Tag umgeben. Dies ist semantisch korrekter und hilfreich für SEO. Wir entfernen nun den Hintergund von den Layout-DIVs. Außerdem fügen wir CSS Styles für die Module hinzu, ein Rahmen und ein Hintergrund für die Modultitel. Unser CSS sieht nun so aus:

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
#wrap {
border:1px solid #999;
}
#header {
border-bottom:1px solid #999;
}
#footer {
border-top:1px solid #999;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
h1,.componentheading {
font-size:1.7em;
}
h2,.contentheading {
font-size:1.5em;
}
h3 {
font-size:1.3em;
}
h4 {
font-size:1.2em;
}
h5 {
font-size:1.1em;
}
h6 {
font-size:1em;
font-weight:700;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption {
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable {
margin-bottom:1em;
border:1px #CCC solid;
padding:0 10px;
}
.moduletable h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em;
padding:0.25em 0;
}

Für mehrere Menüs wird in der Standardinstallation ein Menüsuffix in den Eigenschaften des Moduls _menu definiert. Damit alles richtig funktioniert, habe ich diesen Parameter gelöscht.

Das Ergebnis:

9.6 Standardtemplate mit Modultitel Styling

Menüs in Templates

Wir haben in Kapitel 5 "Creating Menus and Navigation"gesehen, daß einige Einstellungen für die Darstellung des menüs vorhanden sind. Wieder führt auch hier die Verwendung von CSS zu einem kleineren und einfacher zu verstehenden Code. Nachdem wir alle Menüs so eingestellt haben, werden nur noch 12 Tabellen ausgegeben. Bei der Besprechung des Override Feature werden wir sehen, wie auch diese entfernt werden können.

Die List Einstellung ist neu in Joomla! 1.5, die Flat List Einstellung der Version 1.0.x gilt als veraltet. Sie ist besser als eine Tabellendarstellung, weil Textbrowser, Screenreader, Browser ohne CSS Unterstützung, Browser mit abgeschaltetem CSS und Suchbots die Inhalte viel einfacher darstellen bzw. interpretieren können. Ein anderer Vorteil in der Nutzung von CSS Menüs: Es gibt eine Menge von Beispielcode auf diversen Entwicklerseiten. Wir sehen uns eines an und werden sehen, wie es benutzt werden kann. Auf der Website von maxdesign gibt es eine Auswahl von über 30 Menüs, die alle den gleichen Code benutzen. Sie heissen 'Listamatic'. Wir nehmen eine kleine Änderung im Code vor, um ein solches Menü an Joomla! anzupassen:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-
template-tutorial_4.html">Item two</a></li>
<li><a xhref="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.
5-template-tutorial_4.html">Item three</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-
template-tutorial_4.html">Item four</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-
template-tutorial_4.html">Item five</a></li>
</ul>
</div>

Der umschliesende <div> Container wird navcontainer genannt, und die <ul> hat eine id mit dem Namen navlist. Um diesen Effekt in Joomla! zu erzeugen, benötigen wir ein ähnliches Konstrukt. Wir erreichen dies durch Vergabe eines Modul Suffix. Wenn Sie sich erinnern, die Ausgabe eines Moduls mit XHTML Style sieht so aus:

<div class="moduletable">
  <h3>modChrome_xhtml</h3>
  modChrome_xhtml
</div>

Wenn wir einem Modul ein Suffix hinzufügen, wird es der Class moduletable angehängt:

<div class="moduletablesuffix">
  <h3>modChrome_xhtml</h3>
  modChrome_xhtml
</div>

Wenn wir also ein Listamatic auswählen, muss die Class navcontainer durch das moduletable Suffix im CSS ersetzt werden.

Modul Suffixe eines bestimmten Elements verwischen die Grenze zwischen Seitendesign und Seitenadministration. Eines der Ziele der Joomla! Entwicklung ist es, diese Rollen klar zu trennen. Die Folge davon ist wahrscheinlich, daß dieses Feature in zukünftigen Versionen nicht mehr unterstützt wird.

Die Benutzung des Modul Suffix ist sinnvoll, weil es zum Beispiel farbige Boxen durch einfache Auswahl eines Suffix ermöglicht.

Es ist am besten, die bulleted oder flat List für die Menüausgabe zu verwenden. Für das CSS-Styling gibt es viele Quellen im Web.

Für unsere Seite nutzen wir List 10 von Mark Newhouse. Das CSS:

.moduletablemenu {
color:#333;
margin-bottom:1em;
padding:0;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
border-bottom:1px solid #fff;
margin:0;
padding:0.25em 0;
}
.moduletablemenu ul {
list-style:none;
margin:0;
padding:0;
}
.moduletablemenu li {
border-bottom:1px solid #ccc;
margin:0;
}
.moduletablemenu li a {
display:block;
border-left:10px solid #333;
border-right:10px solid #9D9D9D;
background-color:#666;
color:#fff;
text-decoration:none;
padding:3px 5px 3px 0.5em;
}
html>body .moduletablemenu li a {
width:auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited {
border-left:10px solid #1c64d1;
border-right:10px solid #5ba3e0;
background-color:#2586d7;
color:#fff;
}

Wir ergänzen den Modul Suffix (kein Unterstrich in diesem Fall verwenden) für jedes Modul, daß wir verändern wollen. Dies erzeugt ein Menü wie in folgender Grafik. Jedem Menü, das wir so verändern wollen, fügen wir das Suffix menu hinzu.

Standardtemplate mit Menuestyling

Um ein einzelnes Menü zu entwickeln, hier ein Tipp: Bauen Sie eine Standard Joomla! Installation auf und sehen Sie sich den Code des mainmenu näher an. Fügen Sie diesen Code in Ihren HTML Editor ein. Ersetzen Sie alle Links durch ein # und fügen Sie dann entsprechende CSS Styles hinzu, bis der gewünschte Effekt erreicht ist.

Der Code für das Menü:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!-- .astyle { } -->
</style>
</head>
<body>
<div class="moduletable">
<h3>Main Menu</h3>
<ul class="mainmenu">
  <li id="current" class="item1 active"><a href="http://www.compassdesigns.
  net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Home</a><
  /li>
  <li class="item2"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">Joomla! Overview</a></li>
  <li class="item3"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">What's New in 1.5?</a></li>
  <li class="item4"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">Joomla! License</a></li>
  <li class="item5"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">More about Joomla!</a></li>
  <li class="item6"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">FAQ</a></li>
  <li class="item7"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">The News</a></li>
  <li class="item8"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">Web Links</a></li>
  <li class="item9"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">News Feeds</a></li>
</ul>
</div>
</body>
</html>

Spalten verstecken

Wir haben jetzt ein Layout, das immer 3 Spalten anzeigt, egal, ob in diesem Inhalte angezeigt werden oder nicht. Aus Sicht eines CMS Templates ist dies nicht sehr nützlich. In einer statischen Seite ändern sich die Inhalte nie, aber wir wollen dem Administrator die Möglichkeit geben, Inhalte beliebig zu platzieren, ohne mühsam das CSS zu ändern. Eine Spalte sollte sich automatisch 'abschalten' oder in sich zusammenfallen (collapse), wenn sich in dieser keine Inhalte befinden. Die Templating Engine von Joomla! 1.5 hat einige Neuentwicklungen und Verbesserungen erfahren. Ein Zitat aus dem Joomla! Development Blog:

"The changes to the template system in Joomla 1.5 can be divided into two categories. First of all there are changes to the way things where done in Joomla 1.0, for example the new way modules are loaded, and second there are also a bunch of extra features, like template parameters[el]a quick overview:

mosCountModules
The mosCountModules function has been replaced by the $this->countModules function and support for conditions has been added. This allows designers to easily count the total number of modules in multiple template positions in just one line of code, for example $this->countModules('user1 + user2'); which will return the total number of modules in position user1 and user2."

Mehr Informationen erhalten Sie im Joomla! Forum.

Allgemeiner Aufruf von mosCountModules:

<?php if($this->countModules('condition')) : ?>
   do something
<?php else : ?>
   do something else
<?php endif; ?>

Es gibt vier mögliche Bedingungen für die Abfrage. Als Beispiel zählen wir die Module aus Bild 9.7. Wir können diesen Code in der index.php einfügen.

left=<?php echo $this->countModules('left');?><br />
left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?>

countModules('left')
Ergibt 4, 4 Module links

countModules('left and right')
ergibt 1, ein Modul ist in der Position rechts und links

countModules('left or right')
ergibt 1, ein Modul ist in der Position links oder rechts

countModules('left + right')
ergibt 7, Anzahl der Module in der Position links und rechts

In unserem Beispiel benötigen wir die Funktion, welche die Anzahl der Module in einer bestimmten Position zählt. Befindet sich in der rechten Spalte kein Content, können wir die Spaltengrößen einstellen um den freien Platz auszufüllen. Es gibt mehrere Möglichkeiten, dies zu lösen. Wir könnten die Abfragen in den body des Templates platzieren, um abhängig von der Spaltenanzahl unterschiedliche Styles aufzubauen. Um es so einfach wie möglich zu machen, habe ich im <head> einige Bedingungen eingebaut, welche das CSS entsprechend verändern.

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

Erklärung: Wenn sich links ODER rechts nichts befindet, ergibt dies eine Breite von 100%. Wenn etwas links ODER rechts befindet, wird 80% festgelegt. Wenn sich etwas links UND etwas rechts befindet, ergibt dies 60%. Wir ändern noch in der index.php folgendes:

<div id="content<?php echo $contentwidth; ?>">

Änderungen im Layout CSS:

#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}

Die PHP Anweisungen im <head> müssen nach der Zeile mit dem Link zum template.css eingefügt werden. Dies liegt daran, daß bei Vorliegen zweier identischer CSS die letzte Regel alle anderen überschreibt. Dies kann ähnlich erledigt werden, indem ein if für den Import eines CSS verwendet wird.

Bei der Fehlersuche in Ihren Conditional Statements können Sie folgende Codezeile in Ihre index.php einfügen, um den Wert anzuzeigen:

Die Spaltenbreite ist: <?php echo $contentwidth; ?>%

Wir sind jetzt zur Hälfte fertig, wir sehen aber noch leere <div> Container für die Spalten.

Modul-Code verstecken

Für sich verbergende Spalten ist es eine gute Angewohnheit, Module nichts ausgeben zu lassen, wenn von diesen auch kein Inhalt ausgegeben wird. Sonst würden leere <divs> erzeugt werden, die bei einigen Browsern Probleme machen könnten. Um diese leeren <div> zu verstecken:

<?php if($this->countModules('left')) : ?>
<div id="sidebar">
  <div class="inside">
    <jdoc:include type="modules" name="left" style="xhtml" />
  </div>
</div>
<?php endif; ?>

Wenn links keine Inhalte angezeigt werden, wird <div id="sidebar"> nicht ausgegeben. Mit dieser Technik auf unsere rechten und linken Spalten angewandt sieht die index.php dann wie folgt aus. Wir haben dort auch einen Aufruf des breadcrumb Moduls eingebaut, es zeigt die aktuelle Seite und den Pfad an. Denken Sie daran, daß dies jetzt als Modul eingebunden werden muss.

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>
          /css/template.css" type="text/css" />
<?php if($this->countModules('left and right') == 0) $contentwidth = "100";

      if($this->countModules('left or right') == 1) $contentwidth = "80";
      if($this->countModules('left and right') == 1) $contentwidth = "60"; ?>
</head>
<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
      <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div>
  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>
  <div id="content<?php echo $contentwidth; ?>">
    <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
    </div>
    <?php if($this->countModules('right')) : ?>
    <div id="sidebar-2">
      <div class="inside">
        <jdoc:include type="modules" name="right" style="xhtml" />
      </div>
    </div>
    <?php endif; ?>
    <?php if($this->countModules('footer')) : ?>
    <div id="footer">
      <div class="inside">
        <jdoc:include type="modules" name="footer" style="xhtml" />
      </div>
    </div>
    <?php endif; ?>
<!--end of wrap-->
</body>
</html>

Elemente wie zum Beispiel Spalten- oder Modulpositionen können versteckt werden oder in sich zusammen fallen, wenn sich dort keine Inhalte befinden. Dies wird durch PHP-Anweisungen erledigt, die wiederum auf verschiedene CSS Styles verweisen.

Noch eine Empfehlung zu dem Footer. Wie hier gezeigt ist er in der index.php fest codiert, welches Änderungen nur schwer ermöglicht. Das footer Modul zeigt das Joomla! Copyright an und kann nur mühsam verändert werden. Es würde sehr viel mehr Sinn machen, ein eigenes (X)HTML-Modul in der footer Position einzubauen, um diese Änderungen zu ermöglichen. Setzen Sie also das Modul auf unpublish und erzeugen Sie ein eigenes Modul mit beliebigem Inhalt:

In diesm Fall ersetzen Sie:

<jdoc:include type="modules" name="footer" style="xhtml" />

durch:

<jdoc:include type="modules" name="bottom" style="xhtml" />

Denken Sie daran, diese neue Position in der templateDetails.xml Datei zu ergänzen.

Es gibt verschiedene Namen für die Position eines Moduls in Joomla!: banner, left, right, user1, footer usw. Bitte beachten Sie, daß diese Namen nichts mit dem tatsächlichen Ort innerhalb des Templates zu tun haben. Die Positionierung wird vom Template Designer vorgegeben. Es ist kundenfreundlicher, sie an einem Ort unterzubringen, der auch mit dem Namen korrespondiert., aber es ist nicht notwendig. Dieses Grundtemplate zeigt einige der Grundprinzipien für die Entwicklung eines Joomla! Templates.

CSSTemplateTutorialStep2

Wir haben nun ein einfaches aber funktionierendes Template. Eine einfache Typographie wurde hinzugefügt. Noch wichtiger ist, daß wir ein rein auf CSS basierendes Template mit dynamisch faltbaren Spalten erstellt haben. Ich habe ein installtionsfähiges Template erstellt, daß in der Compass library verfügbar ist: CSSTemplateTutorialStep2.zip

Lassen Sie uns nun ein attraktiveres Template bauen, indem wir die vorher erlernten Techniken anwenden.

<< Zurück - Weiter >>

Joomla-Tipps.net