Joomla Beginner Template Presentation
- 2. They Change the Design
- 3. They Change the Layout
- 4. What is a Template? The core of every template is CSS, HTML, PHP and images. Other languages like Javascript and XML are also used.
- 5. Some are simple … Bolt from Alledia.com Solar Sentinel from Rockettheme.com
- 6. Others … not so much … Beez Solar Sentinel Rockettheme.com
- 12. They Don’t Change Content
- 14. 1) Other Developers Free: www.Joomla24.com Commercial: www.BestofJoomla.com
- 15. 2) Template Design Tools Artisteer.com
- 16. 3) Hand-made
- 18. #1 Get a Good Code Editor Notepad++ (P.C.)
- 19. #2 Get Firefox More design tools than other browsers
- 20. #2 Example Firefox Plugins Webdeveloper Toolbar: Firebug:
- 22. 3 Major Platforms P.C. Mac Mobile
- 23. 4 Major Browsers
- 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
- 27. templateDetails.xml <extension version="2.5" type="template" client= "site" > <name>test</name> <files> <filename>index.php</filename> </files> </extension>
- 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" />
- 32. Adding Modules index.php: <jdoc:include type="modules" name= "position-7" /> templateDetails.xml: <positions> <position>position-7</position> </positions>
- 33. Add HTML to index.php <html> <head> </head> <body> <jdoc:include type="component" /> <jdoc:include type="modules" name= "position-7" /> </body> </html>
- 34. index.php Add our styling using CSS <head> <link rel="stylesheet" href=“/templates/test/css/template.css" type="text/css" /> </head>
- 35. Cascading Style Sheets • Create a folder called /css/ • Insert a file called template.css • Write this in the file: body { background: #EF1789; }
- 36. Cascading Style Sheets OK … you can change those colors :)
- 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/