Joomla! Templates for Beginners

JOOMLA TMPLAT
FOR GINNR
Created by /Niels Nübel @Niels_Nuebel

DI CHLCHT
NACHRICHT

COD
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The bad news...</title>
<meta name="description" content="This is a description">
<meta name="author" content="Niels Nübel">
</head>
<body>
<p>Hello World</p>
</body>
</html>

TLLT MIR FRAGN
AM ND IN THMA

WNN DI FOLI
O AUIHT

DI R
NACHRICHT

LINK
-
-
joomladaytemplate.niels-nuebel.de
JDay 2016 Template

DI T
NACHRICHT

KIN ALLGMIN LÖUNG

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

kill
XML
HTML
CSS
PHP
JavaScript
Joomla! API
Wordpress BG Image :)

templateDetail.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 Verion
<extension version="3" type="template" client="site">
</extension>

Joomla Verion
<extension version="3.5" type="template" client="site">
</extension>

Joomla Verion
</extension>

Intallation Tp
</extension>

Frontend Template
</extension>

ackend Template
<extension version="3.1" type="template" client="administrator">
</extension>

Template Info
<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>

File
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</extension>

index.php
<files>
</files>
</extension>

index.php
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

Joomla API jdoc
<!doctype html>
<html>
<head>
</head>
<body>
<jdoc:include
</body>
</html>

Rendertpe
<!doctype html>
<html>
<head>
</head>
<body>
<jdoc:include type="component" />
</body>
</html>

Meage
<!doctype html>
<html>
<head>
</head>
<body>
<jdoc:include type="message" />
</body>
</html>

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

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

Modulpoition Deug
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

templateDetail.xml
<files>
</files>
</extension>

Module Poition
<files>
</files>
<posititons>
<position>debug</position>
</posititons>
</extension>

Poition Deug
<files>
</files>
<posititons>
</posititons>
</extension>

Deug Augae in Prototar

Templateechreiung
<description>Beschreibung</description>
<files>
</files>
<posititons>
</posititons>
</extension>

Mehrprachigkeit
<description>TPL_JDAY2016_XML_DESCRIPTION</description>
<files>
</files>
<posititons>
</posititons>
</extension>

en-G.tpl_jda2016..ini
TPL_JDAY2016_XML_DESCRIPTION="Joomla 3 Template als HTML5 Version"

prach tring

Üeretzung

Modul Poitionnamen
TPL_JDAY2016_POSITION_DEBUG="Debug"

en-G.tpl_jda2016.ini

prach Dateien 1/2
<files>
</files>
<posititons>
</posititons>
<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_jday2016.ini</language>
<language tag="en-GB">en-GB/en-GB.tpl_jday2016.sys.ini</language>
</languages>
</extension>

prach Dateien 2/2
<files>
<folder>language</folder>
</files>
<posititons>
</posititons>
</extension>

Unere neue Ordner truktur

JOOMLA TMPLAT
INTALLIRN

Template it intalliert

Template ild
<files>
</files>
<posititons>
</posititons>
</extension>

Template ild
<files>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
</files>
<posititons>
</posititons>
</extension>

_JXC
<?php defined('_JEXEC') or die; ?>

index.php
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

prache und Leerichtung
<!doctype html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction;
<head>
</head>
<body>
</body>
</html>

prache: de-de
<!doctype html>
<head>
</head>
<body>
</body>
</html>

Leerichtung: ltr
<!doctype html>
<head>
</head>
<body>
</body>
</html>

<jdoc:include tpe="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 src="/media/jui/js/jquery-noconflict.js" type="text/javascript"
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"
<script src="/media/system/js/caption.js" type="text/javascript"></
<script type="text/javascript">
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
</script>
</head>
Quelltext

tle.c
body {
background: red;
}
templates/jday2016/css/style.css

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

C & J
<files>
</files>
<posititons>
</posititons>
</extension>
templates/jday2016/templateDetails.xml

C & J Ordner
<files>
<folder>css</folder>
<folder>js</folder>
</files>
<posititons>
</posititons>
</extension>

index.php
<!doctype html>
<head>
</head>
<body>
</body>
</html>
templates/jday2016/index.php

JDocumentHtml
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
?>
<!doctype html>
<head>
</head>
<body>
</body>
</html>

Template Verzeichni
<?php
$tpath = $this->baseurl . '/templates/' . $this->template;
?>
<!doctype html>
<head>
</head>
<body>
</body>
</html>

C tle
<?php
// Add CSS
$doc->addStyleSheet($tpath . '/css/style.css');
?>
<!doctype html>
<head>
</head>
<body>

Head
<head>
<title>Home</title>
});
</script>
</head>
Quelltext

Head mit tle.c
<head>
<title>Home</title>
<link rel="stylesheet" href="/templates/jday2016/css/style.css" type
});
</script>
</head>
Quelltext

Javacript
<?php
// Add CSS and Javascript
$doc->addStyleSheet($tpath . '/css/style.css');
$doc->addScript($tpath . '/js/script.js');
?>
<!doctype html>
<head>
</head>
<body>

Head mit tle.c und cript.j
<head>
<title>Home</title>
<script src="/templates/jday2016/js/script.js" type="text/javascript"
});
</script>
</head>
Quelltext

Head aufräumen
<head>
<title>Home</title>
});
</script>
</head>
Quelltext

Headcleaner
<?php
// 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)

<head>
<title>Home</title>
</script>
</head>
Quelltext

Module Deug
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

Logo
<!doctype html>
<html>
<head>
</head>
<body>
<jdoc:include type="modules" name="logo" />
</body>
</html>

Poition Logo
<files>
</files>
<posititons>
<position>logo</position>
</posititons>
</extension>

A riute

A riute tle
<jdoc:include type="modules" name="logo" style="html5" />

Modultile: tem Template
none
html5
table
horz
xhtml
rounded
outline

html5
Für Module mit Überschri en

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

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

Logo mit Modultil
<!doctype html>
<html>
<head>
</head>
<body>
<jdoc:include type="modules" name="logo" style="jday" />
</body>
</html>

Logo
<!doctype html>
<html>
<head>
</head>
<body>
<div class="jday">
</div>
</body>
</html>

Logo
<!doctype html>
<html>
<head>
</head>
<body>
<?php if ($this->countModules('logo')) : ?>
<div class="jday">
</div>
<?php endif; ?>
</body>
</html>

Con g
<files>
</files>
<posititons>
<position>logo</position>
</posititons>
<config>
<fields name="params">
<fieldset name="advanced">
</fieldset>
</fields>
</config>
</extension>

Con g Detail
<config>
<fields name="params">
<fieldset name="advanced">

<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"
/>
</fieldset>
</fields>
</config>

Template Param
<?php
$app = JFactory::getApplication();
// Getting params from template
$params = $app->getTemplate(true)->params;
$cssfilename = $params->get('cssfilename', 'style.css');
$doc->addStyleSheet($tpath . '/css/' . $cssfilename);
$doc->addScript($tpath . '/js/script.js');
// Headcleaner
$this->setGenerator(null);

HTML FRAMWORK
OOTTRAP 4

oottrap eininden
<?php
$app = JFactory::getApplication();
// Getting params from template
$params = $app->getTemplate(true)->params;
$cssfilename = $params->get('cssfilename', 'style.css');
$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');

PHOTO CRDIT
Rayi Christian Wicaksono
Greg Rakozy
Ilya Pavlov
Markus Spiske
Faye Cornish
Ambitious Creative Co. - Rick Barrett

Joomla! Templates for Beginners

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

Joomla! Templates for Beginners