Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (10)
Similar to Joomla Beginner Template Presentation
Similar to Joomla Beginner Template Presentation (20)
More from alledia
More from alledia (14)
Recently uploaded
Recently uploaded (20)
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/
Editor's Notes
- 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