Alle Template-Quelltexte aus dem Buch zum einfachen Copy&Paste.
26.1.2 Bootstrap kennenlernen
Einfaches HTML5-Grundgerüst
<body>
<div class="container">
<header>
Websitename
</header>
<nav class="navbar">
<div class="navbar-inner">
Menünavigation
</div>
</nav>
<div class="row-fluid">
<main class="span9">Contentbereich</main>
<div class="span3">Seitenleiste</div>
</div>
<footer>
Fußzeile
</footer>
</div>
</body>
26.2.2 XML-Manifest – »templateDetails.xml«
„templateDetails.xml“: erste Version des Template-XML-Manifests mit Modulpositionen und Referenzen zu im Templatepaket enthaltenen Dateien
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>IhrTemplateName</name>
<creationDate>2015-06-20</creationDate>
<author>Vorname Nachname</author>
<authorEmail>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!</authorEmail>
<authorUrl>http://IhrDomainName.de</authorUrl>
<copyright>Vorname Nachname 2015</copyright>
<license>GNU/GPL</license>
<version>0.1.0</version>
<description>IhrTemplateName</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>sidebar</position>
<position>footer</position>
</positions>
</extension>
26.2.3 HTML-Templatebasis – »index.php«
„index.php“: fundamentales Template mit PHP- und Joomla-spezifischen Includes per „<?php echo $variable; ?>“ und „<jdoc:include>“. Beachten Sie die Joomla-3.5-Aktualisierung im Vergleich zum Buch: Statt $this->baseurl
wird JURI::base()
eingesetzt zur Ermittlung der Domain-URL.
<?php defined( '_JEXEC' ) or die; ?> <!DOCTYPE html> <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="/<?php echo
JURI::base(); ?>templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> </head> <body> <jdoc:include type="modules" name="header" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="sidebar" /> <jdoc:include type="modules" name="footer" /> </body> </html>
26.2.5 HTML5 und Bootstrap einsetzen
„index.php“: erweiterte Templatedatei mit HTML5-Elementen und Bootstrap-Klassen. Beachten Sie die Joomla-3.5-Aktualisierung im Vergleich zum Buch: Statt $this->baseurl
wird JURI::base()
eingesetzt zur Ermittlung der Domain-URL.
<?php defined( '_JEXEC' ) or die; $app = JFactory::getApplication(); $sitetitle = $app->get('sitename'); ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <?php JHtmlBootstrap::loadCss(); $doc = JFactory::getDocument(); $doc->addStyleSheet(
JURI::base() . 'templates/' . $this->template . '/css/template.css'); ?> <jdoc:include type="head" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> </head> <body> <div class="container"> <header> <p class="sitetitle"><a href="/" title="Home"><?php echo $sitetitle; ?></a></p> </header> <nav class="navbar"> <div class="navbar-inner"> <jdoc:include type="modules" name="header" /> </div> </nav> <div class="row-fluid"> <main class="span9"><jdoc:include type="component" /></main> <div class="span3 sidebar"><jdoc:include type="modules" name="sidebar" /></div> </div> <footer> <jdoc:include type="modules" name="footer" /> </footer> </div> </body> </html>
26.2.6 CSS-Datei – »template.css«
„template.css“: Beispielstyles des Reisetemplates V0.2.0
.navbar {
margin-top: 36px;
}
p.sitetitle {
margin-top: 36px;
font-size: 42px;
font-weight: bold;
text-shadow: 1px 1px 2px #000000;
}
main {
padding: 12px;
}
.sidebar,
footer {
margin-bottom: 12px;
padding: 24px;
border-radius: 4px;
border: 1px solid #D4D4D4;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.067);
background-color: #FAFAFA;
}
main img {
margin-bottom: 12px;
width: 100%;
}
main p {
clear: both;
}
26.3.1 Templatekonfiguration integrieren
„templateDetails.xml“: Konfigurationsergänzung des Reisetemplates V0.2.0
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>IhrTemplateName</name>
<creationDate>2015-06-20</creationDate>
<author>Vorname Nachname</author>
<authorEmail>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!</authorEmail>
<authorUrl>http://IhrDomainName.de</authorUrl>
<copyright>Vorname Nachname 2015</copyright>
<license>GNU/GPL</license>
<version>0.1.0</version>
<description>IhrTemplateName</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
<positions>
<position>header</position>
<position>sidebar</position>
<position>footer</position>
</positions>
<config>
<fields name="params">
<fieldset name="advanced">
<field name="googleFontName"
class=""
type="text"
default="Cardo|Source+Sans+Pro"
label="Google Font"
description="Type in any Google font combination separated by a pipe sysmbol, e.g Cardo|Source+Sans+Pro" />
<field name="logoFile"
class=""
type="media"
default=""
label="Site Logo"
description="Pick a site logo from the media library" />
</fieldset>
</fields>
</config>
</extension >
„index.php“: Version 0.3.0 des Reisetemplates liest Parameter aus der Templatekonfiguration aus. Beachten Sie die Joomla-3.5-Aktualisierung im Vergleich zum Buch: Statt $this->baseurl
wird JURI::base()
eingesetzt zur Ermittlung der Domain-URL.
<?php defined( '_JEXEC' ) or die; $app = JFactory::getApplication(); $sitetitle = $app->get('sitename'); $logo = $this->params->get('logoFile'); $logoHtml = ($logo) ? '<img src="' . $logo . '" alt="' . $sitetitle . '" style="vertical-align: text-bottom;" /> ' : ''; ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <?php JHtmlBootstrap::loadCss(); $doc = JFactory::getDocument(); $doc->addStyleSheet(
JURI::base() . 'templates/' . $this->template . '/css/template.css'); ?> <jdoc:include type="head" /> <link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>' rel='stylesheet' type='text/css' /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> </head> <body> <div class="container"> <header> <p class="sitetitle"><a href="/" title="Home"><?php echo $logoHtml; ?><?php echo $sitetitle; ?></a></p> </header> <nav class="navbar"> <div class="navbar-inner"> <jdoc:include type="modules" name="header" /> </div> </nav> <div class="row-fluid"> <main class="span9"><jdoc:include type="component" /></main> <div class="span3 sidebar"><jdoc:include type="modules" name="sidebar" /></div> </div> <footer> <jdoc:include type="modules" name="footer" /> </footer> </div> </body> </html>
„template.css“: Zuordnung der per „<link>“ importierten Google-Schriften zu HTML-Elementen
body {
font-family: "Source Sans Pro", serif;
}
h1,
h2,
h3 {
font-family: "Special Elite", serif;
}
.navbar {
margin-top: 36px;
}
p.sitetitle {
margin-top: 36px;
font-size: 42px;
font-weight: bold;
text-shadow: 1px 1px 2px #000000;
font-family: "Special Elite", serif;
}
main {
padding: 12px;
}
.sidebar,
footer {
margin-bottom: 12px;
padding: 24px;
border-radius: 4px;
border: 1px solid #D4D4D4;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.067);
background-color: #FAFAFA;
}
main img {
margin-bottom: 12px;
width: 100%;
}
main p {
clear: both;
}