reading

Daniel Koch

Joomla!-Templates. Professionelle Vorlagen mit CSS

ISBN: 978-3-86802-661-0

Bibliografische Information Der Deutschen Bibliothek
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen
Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.

Ihr Kontakt zum Verlag und Lektorat:
Software & Support Media GmbH
entwickler.press
Darmstädter Landstraße 108
60598 Frankfurt am Main
Tel.: +49 (0)69 630089-0
Fax: +49 (0)69 630089-89
lektorat@entwickler-press.de
http://www.entwickler-press.de

Lektorat: Theresa Vögle, Corinna Neu
Korrektorat: Frauke Pesch
Copy-Editor: Nicole Bechtel
Satz: Franziska Sponer
Umschlaggestaltung: Maria Rudi
Cover: Joomla!®: Das Joomla!-Logo ist ein eingetragenes Warenzeichen von Open Source Matter, Inc. und The Joomla! Project, Nutzung unter Conditional Use License. Dieses Buch wird nicht durch Open Source Matter, Inc. oder The Joomla! Project unterstützt.

Alle Rechte, auch für Übersetzungen, sind vorbehalten. Reproduktion jeglicher Art (Fotokopie, Nachdruck, Mikrofilm, Erfassung auf elektronischen Datenträgern oder anderen Verfahren) nur mit schriftlicher Genehmigung des Verlags. Jegliche Haftung für die Richtigkeit des gesamten Werks kann, trotz sorgfältiger Prüfung durch Autor und Verlag, nicht übernommen werden. Die im Buch genannten Produkte, Warenzeichen und Firmennamen sind in der Regel durch deren Inhaber geschützt.

1 Das Grundlayout entwerfen

Die Funktionsweise von Joomla! basiert auf Templates. Bevor gezeigt wird, wie sich Templates entwickeln lassen, werfen wir einen Blick auf deren Funktionsweise. Am besten stellen Sie sich ein Template wie eine Schablone vor. Diese Schablone dient als Vorlage, in die dann die relevanten Inhalte geladen werden. Das Template definiert das HTML-Layout der Webseite. An den Stellen, an denen die Joomla!-Funktionalitäten hinzukommen sollen, stehen Platzhalter. Diese Platzhalter werden, wenn die Webseite im Frontend generiert wird, durch echte Inhalte ausgetauscht.

Ein solches Template-System hat für Sie als Seitenbetreiber enorme Vorteile. Denn schließlich können Sie ein und dieselbe Seite per Mausklick in völlig verschiedenen Designs anbieten.

So sieht das Beispiel-Template aus

Die folgende Syntax zeigt eine vollständige HTML-CSS-Kombination, die im weiteren Verlauf dieses Buchs als Grundlage dienen wird.

Abb_1.1.png

Abbildung 1.1: Ein einfaches Grundlayout für den Aufbau des Templates

Wichtig sind beim Anlegen einer solchen Datei zwei Dinge:

Strukturieren Sie die Datei
Kommentieren Sie die Datei

Das gilt übrigens sowohl für die HTML- als auch für die CSS-Datei. Und einen weiteren Punkt gibt es noch. Es ist bereits mehrfach angeklungen, dass tabellenlose Layouts eigentlich die Königsdisziplin in Sachen CSS sind. Da es sich um ein Joomla!-Template-Buch und eben nicht um eines zum Thema CSS handelt, finden Sie nachfolgend eine CSS-Datei, die Sie als Basis für Ihr eigenes Template-Spaltenlayout verwenden können. Das erleichtert erfahrungsgemäß den Einstieg in die Thematik.

Dabei werden im folgenden Listing ausschließlich solche Elemente berücksichtigt, die für das Layout des Templates entscheidend sind.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
<title>Planbar</title>
<link rel="stylesheet" href="css/template.css" type="text/css" />
</head>
<body>
<!-- Das ist der äußere Container -->
<div id="wrapper">
<!-- Das ist der Kopfbereich -->
<div id="topwrapper">
    <div id="corporatelogo"></div>
    <div id="topright">
      <div id="topmen">Das obere Men&uuml;</div>
      <div id="toplogo"></div>
    </div>
    <div class="clear"></div>
  </div>  
<!-- Das ist das Ende des Kopfbereichs -->
<!--Das ist der mittlere Hauptbereich -->
<div id="mainwrapper_full">
    <div id="leftwrapper">
      <div id="men">
        <div class="moduletable_menu">
          <ul class="menu">
            Linke Spalte
          </ul>
        </div>
      </div>
    </div>
    <div id="contentwrapper_full">      
<div id="content">Das ist der eigentliche Inhalt</div>    
</div>
    <div id="rightwrapper">
      <div class="moduletable">Die rechte Spalte</div>
    </div>
    <div class="clear"></div>  
</div>
  <!--Das ist das Ende des mittleren Hauptbereichs -->
<!-- Das ist der Fußbereich -->
  <div id="footer">&copy; PlanBar 2014</div>
<!-- Das ist das Ende des Fußbereichs -->
</div>
<!--Ende des äußeren Containers -->
</body>
</html>

Die CSS-Syntax sieht folgendermaßen aus:

/*
#########################################################
### TEMPLATE FÜR JOOMLA #####
#########################################################
*/
html, body {
   font: 100.01% trebuchet ms, arial, helvetica, sans
serif;
   line-height:15px;
   background-color:#72bed9;
   color:#272727;
}
/*
##########################################################
### ALLGEMEINE EINSTELLUNGEN #####
##########################################################
*/
* {
   margin:0px;
   padding:0px;
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
}
img, table {
   border: none;
}
/*
#########################################################
### CONTAINTERSTRUKTUR #####
#########################################################
*/
#wrapper {
   width:860px;
   margin:auto;
   min-height:350px;
   padding-top:10px;
   padding-bottom:10px;
   font-size:0.9em;
   line-height:1.1em;
}
#topwrapper {
   width:860px;
   height:220px;
}
#corporatelogo {
   width:180px;
   height:100%;
   background:transparent 
   url('../images/firmenlogo.jpg') no-repeat left top;
   float:left;
}


#topright {
   width:670px;
   margin-left:10px;
   height:100%;
   float:left;
}
#topmen {
   width:670px;
   margin-bottom:10px;
   height:50px;
   background-color:#0081af;
   color:#fff;
   text-align:right;
}
#toplogo {
   width:670px;
   height:160px;
   background:transparent 
   url('../images/toplogo.jpg') no-repeat left top;
   color:#fff;
}
#mainwrapper_full {
   margin-top:10px;
   width:860px;
   min-height:260px;
   background:transparent 
   url('../images/bg_02.gif') repeat-y left top;
}
#leftwrapper {
   width:180px;
   float:left;
}
#men {
   color:#fff;
   width:100%;
   text-align:center;
}
#contentwrapper {
   width:630px;
   float:left;
   margin-left:30px;
   padding-bottom:10px;
}
#contentwrapper_full {
   width:440px;
   float:left;
   margin-left:30px;
   padding-bottom:10px;
}
#rightwrapper {
   margin-left:40px;
   width:160px;
   float:left;
   color:#fff;
   padding-top:10px;
}
#footer {
   margin-top:10px;
   background-color:#0081af;
   color:#fff;
   font-size:0.9em;
   width:100%;
   text-align:center;
   padding-top:10px;
   padding-bottom:10px;
}
/* Zum Abschließen von Float-Konstrukten */
.clear {
   clear:both;
   height:0px;
   width:0px;
   font-size:0.0em;
   visibility:hidden;
}
/*
/* Ende */