Joomla templates change the design and layout of a site but not the content. Templates use CSS, HTML, PHP and images primarily but can also use other languages like JavaScript. Templates position modules and components on the page. Template designers can use free and commercial template design tools or code templates by hand. The basic building blocks of a Joomla template are the templateDetails.xml file, index.php file, CSS folder, and images folder.
24. A Hint for Internet Explorer
More headaches than any other browser.
Multiple IE Tester:
25. Your 4 Building Blocks
templateDetails.xml
index.php
/css/
/images/
26. Your First Joomla Template
• Step 1: Create a folder called /test/
• Step 2: Create a file inside that folder
called index.php
• Step 3: Create a file called inside that
folder called templateDetails.xml
28. Install
• Zip up your /test/ folder
• Go to your Joomla admin area
• Enable your new “test” theme.
29. templateDetails.xml
We can also add further information such as:
<creationDate>10/16/10</creationDate>
<author>Steve Burge</author>
<authorURL>http://ostraining.com</authorURL>
30. index.php
This is the framework for your template
Insert “hello mom!” and visit your site
31. index.php
Let’s create some output:
<jdoc:include type="component" />
37. Images
• Create a folder called /images/
• Take bg.png from /Template Resource/Sample
Images/ and upload it to /images/
• Change your CSS to:
body {
background: url(../images/bg.png) repeat;
}
38. Your 4 Building Blocks
templateDetails.xml
index.php
/css/
/images/
Notes de l'éditeur
Discuss the module position This is one that is more for a magazine