Joomla Beginner Template Presentation

2,605 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,605
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. Joomla! Templates
    2. 2. They Change the Design
    3. 3. They Change the Layout
    4. 4. What is a Template?The core of everytemplate is CSS,HTML, PHP andimages.Other languages likeJavascript and XMLare also used.
    5. 5. Some are simple …Bolt from Alledia.com Solar Sentinel from Rockettheme.com
    6. 6. Others … not so much …Beez Solar Sentinel Rockettheme.com
    7. 7. They Don’t Change Content
    8. 8. Positions May Change
    9. 9. 1) Other Developers Free: www.Joomla24.comCommercial: www.BestofJoomla.com
    10. 10. 2) Template Design Tools Artisteer.com
    11. 11. 3) Hand-made
    12. 12. Template Design Tools
    13. 13. #1 Get a Good Code Editor Notepad++ (P.C.)
    14. 14. #2 Get FirefoxMore design tools than other browsers
    15. 15. #2 Example Firefox Plugins Webdeveloper Toolbar: Firebug:
    16. 16. #3 Cross Browser-Testing
    17. 17. 3 Major PlatformsP.C. Mac Mobile
    18. 18. 4 Major Browsers
    19. 19. A Hint for Internet ExplorerMore headaches than any other browser. Multiple IE Tester:
    20. 20. Your 4 Building Blocks templateDetails.xml index.php /css/ /images/
    21. 21. 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
    22. 22. templateDetails.xml<extension version="2.5" type="template" client= "site" > <name>test</name> <files> <filename>index.php</filename> </files></extension>
    23. 23. Install• Zip up your /test/ folder• Go to your Joomla admin area• Enable your new “test” theme.
    24. 24. templateDetails.xmlWe can also add further information such as:<creationDate>10/16/10</creationDate><author>Steve Burge</author><authorURL>http://ostraining.com</authorURL>
    25. 25. index.phpThis is the framework for your template Insert “hello mom!” and visit your site
    26. 26. index.php Let’s create some output:<jdoc:include type="component" />
    27. 27. Adding Modules index.php:<jdoc:include type="modules" name= "position-7" /> templateDetails.xml: <positions><position>position-7</position> </positions>
    28. 28. Add HTML to index.php <html> <head> </head> <body> <jdoc:include type="component" /><jdoc:include type="modules" name= "position-7" /> </body> </html>
    29. 29. index.php Add our styling using CSS <head> <link rel="stylesheet"href=“/templates/test/css/template.css" type="text/css" /> </head>
    30. 30. Cascading Style Sheets• Create a folder called /css/• Insert a file called template.css• Write this in the file: body { background: #EF1789; }
    31. 31. Cascading Style SheetsOK … you canchange those colors :)
    32. 32. 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; }
    33. 33. Your 4 Building Blocks templateDetails.xml index.php /css/ /images/

    ×