Joomla Templates

for Beginners

Created by Niels Nübel / @Niels_Nuebel

Code


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>The bad news...</title>
        
        
    </head>
<body>
    
Hello World

</body>
</html>

Stellt mir Fragen

am Ende eines Themas

Wenn die Folie
so aussieht

Links

- joomladaytemplate.niels-nuebel.de
- JDay 2016 Template
- JDay 2016 Template Download 0.0.5

Keine allgemeine Lösung

Joomla Templates

Backend Templates

Beispiel: isis

Frontend Templates

Protostar

Fahrplan

  1. Template Strucktur
  2. Module
  3. Parameter
  4. HTML Framework (z.B. Bootstrap 4)
  5. Overrides

Skills

  • XML
  • HTML
  • CSS
  • PHP
  • JavaScript
  • Joomla! API
  • Wordpress BG Image :)

Unsere Ordner Struktur

templateDetails.xml


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
		"https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3" type="template" client="site">

</extension>

Joomla Version


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
		"https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3" type="template" client="site">

</extension>

Joomla Version


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
		"https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3" type="template" client="site">

</extension>

Joomla Version


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
		"https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.5" type="template" client="site">

</extension>

Joomla Version


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
		"https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.6" type="template" client="site">

</extension>

Installations Typ


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
		"https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="site">

</extension>

Frontend Template


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
		"https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="site">

</extension>

Backend Template


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
		"https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="administrator">

</extension>

Template Info


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
</extension>

Files


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>

  
    index.php
    templateDetails.xml
  
</extension>

index.php


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>

  
    index.php
    templateDetails.xml
  
</extension>

index.php


<!doctype html>
<html>
  <head>

  </head>
  <body>



  </body>
</html>

Joomla API jdoc


<!doctype html>
<html>
  <head>

  </head>
  <body>

    <jdoc:include

  </body>
</html>

Rendertype


<!doctype html>
<html>
  <head>

  </head>
  <body>

    <jdoc:include type="component" />

  </body>
</html>

Message


<!doctype html>
<html>
  <head>

  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />

  </body>
</html>

Message

Message


<!doctype html>
<html>
  <head>

  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />

  </body>
</html>

Head


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />

  </body>
</html>

Modules


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>

Modulposition Debug


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>

templateDetails.xml


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>

  
    index.php
    templateDetails.xml
  
</extension>

Module Positions


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>

  
    index.php
    templateDetails.xml
  

  
    debug
  
</extension>

Position Debug


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>

  
    index.php
    templateDetails.xml
  

  
    debug
  
</extension>

Debug Ausgabe in Protostar

Debug anschalten

Templatebeschreibung


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
  Beschreibung

  
    index.php
    templateDetails.xml
  

  
    debug
  
</extension>

Mehrsprachigkeit


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
  TPL_JDAY2016_XML_DESCRIPTION

  
    index.php
    templateDetails.xml
  

  
    debug
  
</extension>

Language Files

en-GB.tpl_jday2016.sys.ini


TPL_JDAY2016_XML_DESCRIPTION="Joomla 3 Template als HTML5 Version"

Sprachschlüssel


TPL_JDAY2016_XML_DESCRIPTION="Joomla 3 Template als HTML5 Version"

Übersetzung


TPL_JDAY2016_XML_DESCRIPTION="Joomla 3 Template als HTML5 Version"

Modul Positionsnamen


TPL_JDAY2016_XML_DESCRIPTION="Joomla 3 Template als HTML5 Version"
TPL_JDAY2016_POSITION_DEBUG="Debug"

Modul Positionsnamen


TPL_JDAY2016_XML_DESCRIPTION="Joomla 3 Template als HTML5 Version"
TPL_JDAY2016_POSITION_DEBUG="Debug"

en-GB.tpl_jday2016.ini


TPL_JDAY2016_XML_DESCRIPTION="Joomla 3 Template als HTML5 Version"

Sprach Dateien 1/2


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
  TPL_JDAY2016_XML_DESCRIPTION

  
    index.php
    templateDetails.xml
  

  
    debug
  

  
    en-GB/en-GB.tpl_jday2016.ini
    en-GB/en-GB.tpl_jday2016.sys.ini
  
</extension>

Sprach Dateien 2/2


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
  TPL_JDAY2016_XML_DESCRIPTION

  
    language
    index.php
    templateDetails.xml
  

  
    debug
  
</extension>

Unsere neue Ordner Struktur

Joomla Template installieren

Template ist installiert

Template Previews

template_thumbnail.png

template_thumbnail.png

template_preview.png

template_thumbnail.png

Template Bild


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
  TPL_JDAY2016_XML_DESCRIPTION

  
    language
    index.php
    templateDetails.xml
  

  
    debug
  
</extension>

Template Bild


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
  TPL_JDAY2016_XML_DESCRIPTION

  
    language
    index.php
    template_preview.png
    template_thumbnail.png
    templateDetails.xml
  

  
    debug
  
</extension>

Startseite

PHP

_JEXEC


<?php defined('_JEXEC') or die; ?>

_JEXEC


<?php defined('_JEXEC') or die; ?>

_JEXEC


<?php defined('_JEXEC') or die; ?>

index.php


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>

index.php


<?php defined('_JEXEC') or die; ?>
<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>

Sprache und Leserichtung


<?php defined('_JEXEC') or die; ?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>

Sprache: de-de


<?php defined('_JEXEC') or die; ?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>

Leserichtung: ltr


<?php defined('_JEXEC') or die; ?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>

Fragen?

CSS & Javascript

<jdoc:include type="head" />


<head>
    <base href="http://jdaytemplate.dev/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Joomla! - Open Source Content Management" />
    <title>Home</title>
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="/media/system/js/caption.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).on('load',  function() {
        new JCaption('img.caption');
    });
    </script>
</head>
Quelltext

style.css


body {
  background: red;
}
templates/jday2016/css/style.css

script.js


(function($){
  $(document).ready(function(){
    alert('Wird geladen');
  });
})(this.jQuery);
templates/jday2016/js/script.js

CSS & JS


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
  TPL_JDAY2016_XML_DESCRIPTION

  
    language
    index.php
    templateDetails.xml
  

  
    debug
  
</extension>
templates/jday2016/templateDetails.xml

CSS & JS Ordner


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>
  TPL_JDAY2016_XML_DESCRIPTION

  
    css
    js
    language
    index.php
    templateDetails.xml
  

  
    debug
  
</extension>
templates/jday2016/templateDetails.xml

index.php


<?php defined('_JEXEC') or die; ?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

JDocumentHtml


<?php
defined('_JEXEC') or die;

$doc = JFactory::getDocument();
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Template Verzeichnis


<?php
defined('_JEXEC') or die;

$doc = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

CSS Style


<?php
defined('_JEXEC') or die;

$doc = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;

// Add CSS
$doc->addStyleSheet($tpath . '/css/style.css');
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Head


<head>
    <base href="http://jdaytemplate.dev/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Joomla! - Open Source Content Management" />
    <title>Home</title>
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="/media/system/js/caption.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).on('load',  function() {
        new JCaption('img.caption');
    });
    </script>
</head>
Quelltext

Head mit style.css


<head>
    <base href="http://jdaytemplate.dev/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Joomla! - Open Source Content Management" />
    <title>Home</title>
    <link rel="stylesheet" href="/templates/jday2016/css/style.css" type="text/css" />
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="/media/system/js/caption.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).on('load',  function() {
        new JCaption('img.caption');
    });
    </script>
</head>
Quelltext

Style.css

CSS Style


<?php
defined('_JEXEC') or die;

$doc = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;

// Add CSS
$doc->addStyleSheet($tpath . '/css/style.css');
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Javascript

Javascript


<?php
defined('_JEXEC') or die;

$doc = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;

// Add CSS and Javascript
$doc->addStyleSheet($tpath . '/css/style.css');
$doc->addScript($tpath . '/js/script.js');
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Head mit style.css


<head>
    <base href="http://jdaytemplate.dev/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Joomla! - Open Source Content Management" />
    <title>Home</title>
    <link rel="stylesheet" href="/templates/jday2016/css/style.css" type="text/css" />
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="/media/system/js/caption.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).on('load',  function() {
        new JCaption('img.caption');
    });
    </script>
</head>
Quelltext

Head mit style.css und script.js


<head>
    <base href="http://jdaytemplate.dev/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Joomla! - Open Source Content Management" />
    <title>Home</title>
    <link rel="stylesheet" href="/templates/jday2016/css/style.css" type="text/css" />
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="/media/system/js/caption.js" type="text/javascript"></script>
    <script src="/templates/jday2016/js/script.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).on('load',  function() {
        new JCaption('img.caption');
    });
    </script>
</head>
Quelltext

script.js

Head aufräumen


<head>
    <base href="http://jdaytemplate.dev/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Joomla! - Open Source Content Management" />
    <title>Home</title>
    <link rel="stylesheet" href="/templates/jday2016/css/style.css" type="text/css" />
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="/media/system/js/caption.js" type="text/javascript"></script>
    <script src="/templates/jday2016/js/script.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).on('load',  function() {
        new JCaption('img.caption');
    });
    </script>
</head>
Quelltext

Head aufräumen


<head>
    <base href="http://jdaytemplate.dev/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Joomla! - Open Source Content Management" />
    <title>Home</title>
    <link rel="stylesheet" href="/templates/jday2016/css/style.css" type="text/css" />
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="/media/system/js/caption.js" type="text/javascript"></script>
    <script src="/templates/jday2016/js/script.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).on('load',  function() {
        new JCaption('img.caption');
    });
    </script>
</head>
Quelltext

Headcleaner


<?php
defined('_JEXEC') or die;

$doc = JFactory::getDocument();

// Headcleaner
$this->setGenerator(null);

$filesjs = array(
  "media/jui/js/jquery.min.js",
  "media/jui/js/jquery-noconflict.js",
  "media/jui/js/jquery-migrate.min.js",
  "media/system/js/caption.js"
);
$scripts = array();

foreach ($doc->_scripts as $name => $details)
  {
    $add = true;

    foreach ($filesjs as $dis)
    {
      if (strpos($name, $dis) !== false)
      {
        $add = false;
        break;
      }
    }

    if ($add)
    {
      $scripts[$name] = $details;
    }
}

$doc->_scripts = $scripts;

$doc->_script['text/javascript'] = str_replace(
  "jQuery(window).on('load',  function() {\n\t\t\t\tnew JCaption('img.caption');\n\t\t\t});",
  '',
  $doc->_script['text/javascript']
);

$tpath = $this->baseurl . '/templates/' . $this->template;

// Add CSS and Javascript
$doc->addStyleSheet($tpath . '/css/style.css');
$doc->addScript($tpath . '/js/script.js');
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php 

<head>
    <base href="http://jdaytemplate.dev/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Home</title>
    <link rel="stylesheet" href="/templates/jday2016/css/style.css" type="text/css" />
    <script src="/templates/jday2016/js/script.js" type="text/javascript"></script>
    <script type="text/javascript">

    </script>
</head>
Quelltext

Head aufgeräumt!!!

Module

Module Debug


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Logo


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="modules" name="logo" />
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Position Logo


<extension version="3.1" type="template" client="site">
  <name>jday2016</name>
  <creationDate>16.09.2016</creationDate>
  <author>Niels Nübel</author>
  <authorEmail>niels@niels-nuebel.de</authorEmail>
  <authorUrl>http://www.niels-nuebel.de</authorUrl>
  <version>0.0.1</version>

  
    index.php
    templateDetails.xml
  

  
    logo
    debug
  
</extension>
templates/jday2016/templateDetails.xml

Attribute


<jdoc:include type="modules" name="logo" />
templates/jday2016/index.php

Attribute style


<jdoc:include type="modules" name="logo" style="html5" />
templates/jday2016/index.php

Modulstile: System Template

  • none
  • html5
  • table
  • horz
  • xhtml
  • rounded
  • outline

html5

Für Module mit Überschriften

eigener Modulstil


<?php
defined('_JEXEC') or die;

/*
 * jday
 */
function modChrome_jday($module, &$params, &$attribs)
{
  echo '<div class="jday">';
  echo $module->content;
  echo '</div>';
}
templates/jday2016/html/modules.php

Modulstile


<jdoc:include type="modules" name="logo" style="jday" />

Logo mit Modulstil


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="modules" name="logo" style="jday" />
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Logo


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <div class="jday">
    <jdoc:include type="modules" name="logo" />
    </div>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Logo


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <?php if ($this->countModules('logo')) : ?>
      <div class="jday">
      <jdoc:include type="modules" name="logo" />
      </div>
    <?php endif; ?>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Logo


<!doctype html>
<html>
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <?php if ($this->countModules('logo')) : ?>
      <div class="jday">
      <jdoc:include type="modules" name="logo" />
      </div>
    <?php endif; ?>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

<!-- Module -->

Params

Config


<extension version="3.1" type="template" client="site">
  
    index.php
    templateDetails.xml
  

  
    logo
    debug
  

  
    
      

      

    
  
</extension>
templates/jday2016/templateDetails.xml

blue.css

Config Details




  
    

      
      <field name="cssfilename"
             type="filelist"
             default="style.css"
             label="TPL_JDAY2016_PARAMETER_CSSFILENAME_LABEL"
             description="TPL_JDAY2016_PARAMETER_CSSFILENAME_DESC"
             directory="templates/jday2016/css"
             filter="\.css"
             striptext="true"
             hide_none="true"
      />
templates/jday2016/templateDetails.xml

Parameter im Template

Template Params


<?php
defined('_JEXEC') or die;

$app   = JFactory::getApplication();
$doc   = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;

// Getting params from template
$params             = $app->getTemplate(true)->params;
$cssfilename        = $params->get('cssfilename', 'style.css');

// Add CSS and Javascript
$doc->addStyleSheet($tpath . '/css/' . $cssfilename);
$doc->addScript($tpath . '/js/script.js');

// Headcleaner
$this->setGenerator(null);

$filesjs = array(
  "media/jui/js/jquery.min.js",
  "media/jui/js/jquery-noconflict.js",
  "media/jui/js/jquery-migrate.min.js",
  "media/system/js/caption.js"
);
$scripts = array();

foreach ($doc->_scripts as $name => $details)
{
  $add = true;

  foreach ($filesjs as $dis)
  {
    if (strpos($name, $dis) !== false)
    {
      $add = false;
      break;
    }
  }

  if ($add)
  {
    $scripts[$name] = $details;
  }
}

$doc->_scripts = $scripts;

$doc->_script['text/javascript'] = str_replace(
  "jQuery(window).on('load',  function() {\n\t\t\t\tnew JCaption('img.caption');\n\t\t\t});",
  '',
  $doc->_script['text/javascript']
);
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  <head>
    <jdoc:include type="head" />
  </head>
  <body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="debug" />
  </body>
</html>
templates/jday2016/index.php

Blue.css

<!-- Params -->

HTML Framework

Bootstrap 4

Bootstrap Dateien

Bootstrap einbinden


<?php
defined('_JEXEC') or die;

$app   = JFactory::getApplication();
$doc   = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;

// Getting params from template
$params             = $app->getTemplate(true)->params;
$cssfilename        = $params->get('cssfilename', 'style.css');

// Add CSS and Javascript
$doc->addStyleSheet($tpath . '/css/bootstrap.min.css');
$doc->addStyleSheet($tpath . '/css/' . $cssfilename);
$doc->addScript($tpath . '/js/jquery.min.js');
$doc->addScript($tpath . '/js/tether.min.js');
$doc->addScript($tpath . '/js/bootstrap.min.js');

$doc->setMetadata('x-ua-compatible','IE=edge,chrome=1');
$doc->setMetaData('viewport', 'width=device-width, initial-scale=1, shrink-to-fit=no');


// Headcleaner
$this->setGenerator(null);

$filesjs = array(
  "media/jui/js/jquery.min.js",
  "media/jui/js/jquery-noconflict.js",
  "media/jui/js/jquery-migrate.min.js",
  "media/system/js/caption.js"
);
$scripts = array();

foreach ($doc->_scripts as $name => $details)
{
  $add = true;

  foreach ($filesjs as $dis)
  {
    if (strpos($name, $dis) !== false)
    {
      $add = false;
      break;
    }
  }

  if ($add)
  {
    $scripts[$name] = $details;
  }
}

$doc->_scripts = $scripts;

$doc->_script['text/javascript'] = str_replace(
  "jQuery(window).on('load',  function() {\n\t\t\t\tnew JCaption('img.caption');\n\t\t\t});",
  '',
  $doc->_script['text/javascript']
);
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
    <jdoc:include type="head" />
</head>
<body>
<?php if ($this->countModules('menu')) : ?>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand" href="<?= $this->baseurl; ?>"><?= $app->get('sitename'); ?></a>
    <jdoc:include type="modules" name="menu" />
</nav>
<?php endif; ?>
<div class="container">
    <jdoc:include type="message" />
    <div class="starter-template">
        <jdoc:include type="component" />
    </div>
</div>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>
templates/jday2016/index.php

Override

mod_menu

Fragen?

@Niels_Nuebel

Vielen Dank!

Photo Credits

Rayi Christian Wicaksono
Greg Rakozy
Ilya Pavlov
Markus Spiske
Faye Cornish
Ambitious Creative Co. - Rick Barrett