Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

+ Follow

Developing joomla 1.6 templates

by Chad Windnagle

10,053 views

This is a presentation I gave on Joomla 1.6 template development for JoomlaDay DC 2010

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

File a copyright complaint

5 Embeds 56

http://www.justprogrammer.tk	50
http://chadtec.com	2
http://www.slideshare.net	2
http://www.c-site.ru	1
http://j-programmer.blogspot.com	1

Statistics

Likes: 0
Downloads: 124
Comments: 0
Embed Views: 56
Views on SlideShare: 9,997
Total Views: 10,053

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?
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?
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!
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.
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.
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.
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.
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
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
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.
A template comprises of these elements.
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.
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.
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.
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.
The first line prevents the index.php page from being loaded directly by the browser – this is a security measure.
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.
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..
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
After you create a .zip file, you can log into your Joomla admin back end and install the template.
If everything goes well you’ll get this message – template successfully installed
You can check out these resources to info on

Developing joomla 1.6 templates Presentation Transcript

Developing Joomla 1.6 Templates Chad Windnagle twitter.com/@drmmr763 [email_address] t
The Big Question: Do Joomla! 1.5 Templates = Joomla! 1.6 Templates ???
The Big Answer: No. But almost!
Few Differences:
Few Differences:
- Minor Modifications to templateDetails.xml
- Add DocType Definition
- Update install version number to 1.6
- Optional: Template configuration params (fieldsets - saved in params.ini)
Few Differences:
- Minor Modifications to index.php
- New head jdoc include available
- Optional: Ability to directly use param.ini values
Few Differences:
Editing Template Parameters
Editing Template Parameters
What is a template, anyway? “ The Joomla template is a series of files within the CMS that control the presentation of the content.” -Barrie North, CompassDesigns.net
What Tools Do I 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)
Template Elements
- PHP Code
- CSS Code
- Joomla API Code
- Images
- Additional Libraries (JS, JQuery, Ajax, etc.)
What, Where, & Why?
- index.php
- index.html
- params.ini
- template_thumbnail.png
- template_preview.png
- templateDetails.xml
- css
- images
<JoomlaRoot>/templates/tmpl_sgo
index.php – contents
- DocType
- Header
- Body
index.php
templateDetails.xml - contents
- DocType
- Install Parameters
Tells Joomla What To Do
templateDetails.xml
template.css - contents
- Body CSS
- HTML Div Class / ID CSS
- Menu CSS
Controls the layout, look and feel
template.css
Packaging
Installing
Installing
Free Resources
- docs.joomla.org/Template_Development
- Docs on all things templating
- Compassdesigns.net/joomla-tutorials
- Comprehensive template tutorial for Joomla 1.6, includes sample template files.

Developing joomla 1.6 templates

by Chad Windnagle

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 56

Statistics

Developing joomla 1.6 templates Presentation Transcript