Joomla Beginner Template Presentation
Upcoming SlideShare
Loading in...5

Joomla Beginner Template Presentation



This is an introduction to Jooomla templates. It was given to the Atlanta Joomla group in March 2012.

This is an introduction to Jooomla templates. It was given to the Atlanta Joomla group in March 2012.



Total Views
Views on SlideShare
Embed Views



4 Embeds 5 2 1 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Discuss the module position This is one that is more for a magazine
  • From rocket theme
  • Discuss the different module positions
  • Discuss the different module positions

Joomla Beginner Template Presentation Joomla Beginner Template Presentation Presentation Transcript

  • Joomla! Templates
  • They Change the Design
  • They Change the Layout
  • What is a Template?The core of everytemplate is CSS,HTML, PHP andimages.Other languages likeJavascript and XMLare also used.
  • Some are simple …Bolt from Solar Sentinel from
  • Others … not so much …Beez Solar Sentinel
  • They Don’t Change Content
  • Positions May Change
  • 1) Other Developers Free: www.Joomla24.comCommercial:
  • 2) Template Design Tools
  • 3) Hand-made
  • Template Design Tools
  • #1 Get a Good Code Editor Notepad++ (P.C.)
  • #2 Get FirefoxMore design tools than other browsers
  • #2 Example Firefox Plugins Webdeveloper Toolbar: Firebug:
  • #3 Cross Browser-Testing
  • 3 Major PlatformsP.C. Mac Mobile
  • 4 Major Browsers
  • A Hint for Internet ExplorerMore headaches than any other browser. Multiple IE Tester:
  • Your 4 Building Blocks templateDetails.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></authorURL>
  • index.phpThis is the framework for your template Insert “hello mom!” and visit your site
  • index.php Let’s create some output:<jdoc:include type="component" />
  • Adding Modules index.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.php Add 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 SheetsOK … you canchange 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 Blocks templateDetails.xml index.php /css/ /images/