Downloaded 144 times
![Developing Joomla 1.6 Templates Chad Windnagle twitter.com/@drmmr763 [email_address] t](https://image.slidesharecdn.com/develpingjoomla1-6templates-101017012629-phpapp01/75/Developing-joomla-1-6-templates-1-2048.jpg)
Uploaded byChad Windnagle
Developing joomla 1.6 templates
1. Joomla 1.5 templates require minor modifications to work with Joomla 1.6 such as updating code and files like templateDetails.xml. 2. Developing templates for Joomla 1.6 involves using tools like MAMP, Dreamweaver, and FileZilla to edit template files which include PHP, CSS, images, and XML files that control site layout and design. 3. Key template files are index.php, templateDetails.xml, and template.css which define things like module positions, configuration options, and site styling respectively.
More Related Content
Similar to Developing joomla 1.6 templates
Developing joomla 1.6 templates
- 1. Developing Joomla 1.6 Templates Chad Windnagle twitter.com/@drmmr763 [email_address] t
- 2. The Big Question:Do Joomla! 1.5 Templates = Joomla! 1.6 Templates ???
- 3. The Big Answer:No. But almost!
- 4. Few Differences: MinorCode Changes New 1.6 Feature: Template Styles Advanced Style ACL
- 5. Few Differences: MinorModifications to templateDetails.xml Add DocType Definition Update install version number to 1.6 Optional: Template configuration params (fieldsets - saved in params.ini)
- 6. Few Differences: MinorModifications to index.php New head jdoc include available Optional: Ability to directly use param.ini values
- 7.
- 8.
- 9.
- 10. What is atemplate, anyway? “ The Joomla template is a series of files within the CMS that control the presentation of the content.” -Barrie North, CompassDesigns.net
- 11. What Tools DoI Need? Localhost or Web Hosting Local: MAMP (Mac), WAMP / XAMMP (PC) HTML / CSS Editor Dreamweaver, TextMate, Notepad++ FTP Application FileZilla (Mac/PC), Transmit (Mac) Image Editor Photoshop, Fireworks, Gimp (all platforms)
- 12. Template Elements PHPCode CSS Code Joomla API Code Images Additional Libraries (JS, JQuery, Ajax, etc.)
- 13. What, Where, &Why? index.php index.html params.ini template_thumbnail.png template_preview.png templateDetails.xml css template.css index.html css/* images index.html images/* <JoomlaRoot>/templates/tmpl_sgo
- 14. index.php – contentsDocType Header Stylesheets Libraries Header Jdoc Body HTML Module Jdoc Component Jdoc Message Jdoc PHP Code
- 15.
- 16. templateDetails.xml - contentsDocType Install Parameters Author Info Define Directory Structure (files and folders) Define all Module Positions Define all Config Elements Tells Joomla What To Do
- 17.
- 18. template.css - contents Body CSS HTML Div Class / ID CSS Menu CSS Controls the layout, look and feel
- 19.
- 20.
- 21.
- 22.
- 23. Free Resources docs.joomla.org/Template_DevelopmentDocs on all things templating Compassdesigns.net/joomla-tutorials Comprehensive template tutorial for Joomla 1.6, includes sample template files.
Editor's Notes
- #2 Talk a bit about who you are, where you’re from, etc… Ask about who your audience is. Who has built templates before? Does everyone know HTML?
- #3 So a big question that will likely come up and one tha t I’d like to address head on is, will joomla 1.5 template’s work in joomla 1.6?
- #4 The answer is no. but almost! Joomla 1.5 template’s will not be able to simply be installed in joomla 1.6 without making a few minor tweaks first. These tweaks are minor!
- #5 Some major differences between joomla 1.5 and 1.6 in the world of templating is some changes to the index.php file, and the template’s templateDetails.xml file. New features include the ability to save configurations as styles, and some advanced ACL controls.
- #6 Your templateDetails.xml file will have differences from 1.5 such as a required doctype, the 1.6 version number, and an entirely different setup for setting up template parameters, used to create different styles for the same template.
- #7 Differences in the index.php is ability to grab param.ini values with a getParams tag, and you should use the jdoc for the header.
- #8 Each template has a style, even if there’s only one. Styles save the configuration of the template’s parameters and can be assigned to different menus, users, or user groups.
- #9 You can save different styles as different names, which all have different settings in your template’s parameters. These styles can be assigned to menus – just like template’s in Joomla 1.5.X
- #10 You can save different styles as different names, which all have different settings in your template’s parameters. These styles can be assigned to menus – just like template’s in Joomla 1.5.X
- #12 There’s some basic tools that you will need to create a joomla template is some sort of host to install joomla and play with your code. A localhost is great because no hosting account is required and it’s easier to sort through directories. You’ll need some sort of code editor to edit your HTML, CSS, and a few lines of PHP. Some great tools are Dreamweaver (in code view), TextMate, and Notepad++ works great on Windows. If you do use a live host you’ll need an FTP Application. If you’re building your own template you’ll want to have some sort of design program to create images to use in your design. Photoshop, Fireworks, and Gimp will work great for this. Lastly you’ll need a fair amount of knowledge when it comes to writing basic HTML and CSS. Any PHP you’ll need you can easily copy and paste from existing templates.
- #13 A template comprises of these elements.
- #14 These are what the required files for a joomla template will be. Joomla looks for these files to put together a html page to then send to the user’s browser. Essentially joomla takes all these pieces of a page and puts them together.
- #15 And inside your index.php file you will have these elements. you are telling the Web browser what version of (X)HTML your Web page should be displayed in. Your header calls all your stylesheets, javscript or ajax libraies. Your body will contain all HTML such as div ids and classes for layout, and then also have Joomla API calls for displaying modules, your compmonent area, your user messages area such as login errors, and will be a place for you to put PHP code to dynamically load things like HTML based on whether or not a module position is being used.
- #16 The first line prevents the index.php page from being loaded directly by the browser – this is a security measure. Other things that will be in your index.php file will be calls to your template’s css file, any other libraries such as javascript, ajax, mootools etc..You’ll also call module positions, your component, and be able to use PHP to do conditional checks for loading different bits of code such as html for columns or positions.
- #17 Your templateDetails.xml file is the file that tells the Joomla template installer what to do. It tells it which files to find in the .zip package and where to put them. It also populates your “positions” drop down for module selection, and it’s where you will set up all your configuration options for your template’s styles.
- #18 The first line prevents the index.php page from being loaded directly by the browser – this is a security measure.
- #19 Your template.css file is going to hold all the css definitions to all your index.php’s html elements. You will also set up CSS in here or other CSS files to control your menus, links, and the HTML divs, spans, and paragraph html elements used in core joomla code.
- #20 You will define div classes, ids, span classes and ids, paragraph tags, link styles, menu styles, and all other HTML elements using CSS files. You do not have to use the name templat.css, but it is rather common. Alternatives might be layout.css, body.css, etc..
- #21 You should end up with a directory structure that looks identical to this. These are all the file’s we’ve talked about. If you want to distribute your
- #22 After you create a .zip file, you can log into your Joomla admin back end and install the template.
- #23 If everything goes well you’ll get this message – template successfully installed
- #24 You can check out these resources to info on