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

Joomla Beginner Template Presentation

on

  • 2,185 views

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.

Statistics

Views

Total Views
2,185
Views on SlideShare
2,180
Embed Views
5

Actions

Likes
0
Downloads
26
Comments
0

4 Embeds 5

http://elearning.tadelformacion.com 2
http://elearning.fatinafar.com 1
http://www.twylah.com 1
http://www.docseek.net 1

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 Alledia.com Solar Sentinel from Rockettheme.com
  • Others … not so much …Beez Solar Sentinel Rockettheme.com
  • They Don’t Change Content
  • Positions May Change
  • 1) Other Developers Free: www.Joomla24.comCommercial: www.BestofJoomla.com
  • 2) Template Design Tools Artisteer.com
  • 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>http://ostraining.com</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/