View
111
Download
3
Category
Preview:
DESCRIPTION
This is an introduction to Jooomla templates. It was given to the Atlanta Joomla group in March 2012.
Citation preview
Joomla! Templates
They Change the Design
They Change the Layout
What is a Template?
The core of every template is CSS, HTML, PHP and images.
Other languages like Javascript and XML are also used.
Some are simple …Bolt from Alledia.com Solar Sentinel from
Rockettheme.com
Others … not so much … Beez Solar Sentinel
Rockettheme.com
They Don’t Change Content
Positions May Change
2) Template Design ToolsArtisteer.com
3) Hand-made
Template Design Tools
#1 Get a Good Code Editor
Notepad++ (P.C.)
#2 Get Firefox
More design tools than other browsers
#2 Example Firefox Plugins
Webdeveloper Toolbar:
Firebug:
#3 Cross Browser-Testing
3 Major Platforms
P.C. Mac Mobile
4 Major Browsers
A Hint for Internet Explorer
More headaches than any other browser.
Multiple IE Tester:
Your 4 Building BlockstemplateDetails.xml
index.php/css/
/images/
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
templateDetails.xml<extension
version="2.5" type="template" client= "site" >
<name>test</name><files>
<filename>index.php</filename></files>
</extension>
Install• Zip up your /test/ folder • Go to your Joomla admin area• Enable your new “test” theme.
templateDetails.xmlWe can also add further information such as:
<creationDate>10/16/10</creationDate>
<author>Steve Burge</author>
<authorURL>http://ostraining.com</authorURL>
index.phpThis is the framework for your templateInsert “hello mom!” and visit your site
index.phpLet’s create some output:
<jdoc:include type="component" />
Adding Modulesindex.php:
<jdoc:include type="modules" name= "position-7" />
templateDetails.xml:<positions>
<position>position-7</position></positions>
Add HTML to index.php<html>
<head> </head><body>
<jdoc:include type="component" /><jdoc:include type="modules" name=
"position-7" /></body></html>
index.phpAdd our styling using CSS
<head><link rel="stylesheet"
href=“/templates/test/css/template.css" type="text/css" />
</head>
Cascading Style Sheets• Create a folder called /css/• Insert a file called template.css• Write this in the file:
body {background: #EF1789;}
Cascading Style Sheets
OK … you can change those colors :)
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; }
Your 4 Building BlockstemplateDetails.xml
index.php/css/
/images/
Recommended