SlideShare a Scribd company logo

Joomla Templates101

•Download as PPTX, PDF•
•
Barb Ackemann
Barb Ackemann

This document provides an agenda and overview for a Joomla templates 101 workshop. The agenda includes introductions, discussing module positions and template ingredients in Joomla, building HTML/CSS templates with PHP snippets, the templateDetails.xml file, uploading and activating templates, and tips/tricks. The presenter's background is also provided. The workshop will demonstrate creating a Joomla template using various software tools and cover best practices like paths for images and the templateDetails.xml file. Resources from the workshop are available online.

1 of 15
Joomla Templates 101 Barb Ackemann Joomla Day NE May 30, 2009 NOTE: Slides, files and resources are all online – So you can listen /think hard and not worry about writing everything down!
Joomla Templates 101 – Agenda • Introduction • “ons” and “tos” • Module positions in Joomla • Ingredients of a Joomla 1.5 template • Build the html / css, add php snippets • templateDetails.xml • Upload, Activate and Tweak! • Tips and Tricks
Barb Ackemann • Public education (k-12) for 28 years • M.S.I.T MCGS 2006 • Independent web developer • Owner, Iris Lines Designs – irislines.com • Instructor MCGS – Designing with Web Standards (html and css) – Web Accessibility
Ons and Tos This workshop assumes you are able to create a static html page layout with all aspects of presentation in an external stylesheet. Html is for structuring your content with semantic markup (related to the meaning of the content) CSS is for all things presentational: color, font, layout, etc. The two files work together. There are many advantages to this separation, including: accessibility, efficiency, SEO.
Ons and Tos This workshop assumes you are familiar with working with Joomla content and modules. Joomla presents the content of your pages in various kinds of blocks. Articles or other components (photo galleries, contacts, forms, etc.) sit in one position on the page (usually the largest block). Other blocks (navigation menus, random images, most read, etc.) are assigned to module positions which are defined in the template.
Ons and Tos After this workshop, you should be able to create a simple custom Joomla 1.5 template. You’ll be able to install your custom template and make adjustments to the cssstylesheet. You’ll learn about some helpful tools and tricks.
Software Tools Graphics: PhotoShop, FireWorks or other graphics program. HTML editor or simple text editor to write HTML and CSS or Dreamweaver CS4. Firefox browser with the free Web Developer’s Tool Bar (WDTB) extension. (https://addons.mozilla.org/en-US/firefox/addon/60) Other CSS tools: CSS Edit for the Macintosh (http://macrabbit.com/cssedit/) or TopStyle for Windows (http://www.newsgator.com/individuals/topstyle/default.aspx )
Ingredients of a Joomla 1.5 template: The template “BEEZ” has these files: The ones with * are needed for even a basic template. *index.html (blank html so users won’t see the contents of folder – include one of these in every sub-folder as well!) *index.php *templateDetails.xml (start wth file from BEEZ and modify for your template) *template_thumbnail.png favicon.ico (generate one of these at http://tools.dynamicdrive.com/favicon ) *css (folder) (minimum of one template.css file can have others for ie or print) *images (folder) (images used in template or to decorate modules or components) html (folder) – (borrow whole folder from BEEZ template to use in your template!) Beez also adds: component.php images_general(folder) javascript(folder) params.ini
templateDetails.xml The templateDetails.xml file creates the installer and lists all of the files included in the template. It also includes details about the template (author, copyright, etc.) Template module positions are identified in the templateDetails.xml file. <positions> <position>left</position> <position>right</position> <position>top</position> <position>breadcrumb</position> It’s probably a good idea to <position>user1</position> use these names for module <position>user2</position> positions so you can switch <position>user3</position> between templates without <position>user4</position> having to reassign your <position>debug</position> modules to new positions. <position>syndicate</position> </positions>
Live Demonstration At this point in the workshop, Barb turned to the real tools and demonstrates the process of creating a Joomla template using FireWorks, Dreamweaver, Firefox and the Web Developer’s Tool Bar. Some of the files you’ll see are posted for you to examine ( Note: php files are saved as .txt so you can open them without restriction!) These (and more!) are available at http://iriswebs.com/JoomlaDay/ Fireworks mockup file Original html file with embedded styles First version of template file (as a text file) First version of stylesheet Second version of template file with if / else conditional code (as a text file) Second version of stylesheet Sample templateDetails.xml file A live version of the site
Live Demonstration The steps were: 1. Develop graphic design 2. Plan and develop html and css code to achieve the design. Insert “dummy” content as placeholders. Validate the code. Test in other browsers. (Now and often!) 3. Take a screen shot and save at 200px wide as template_thumbnail.png 4. Plan for module positions and names. 5. Save index.htmlas index.phpin a folder for your template. 6. Replace head code with Joomla “snippet”. 7. Replace placeholder content with Joomla “snippets”. 8. Save css as template.cssin css folder. 9. Have image folder for all template images. 10. Copy html folder from BEEZ template into your template folder. 11. Create a favicon .icofile if you want one. 12. Open BEEZ templateDetails.xmland modify to be an exact inventory of your files. 13. Zip the folder. 14. Install into your Joomla site, set as default or assign to a test page. 15. Use the Firefox Web Developer Toolbar to tweak and fine tune your css. Save copies of changes locally and copy and paste into Template Manager template.cssfile.
Things to watch out for….. Paths to images: 1. Hardcoded into template: <imgsrc=“http://domain.com/templates/<?php echo $this->template; ?>images/logo.gif” /> 2. Called by cssstylesheet: background-image:url(../images/logo.gif); 3. Called by content item: <imgsrc=“ images/stories/photo.jpg” /> Be sure to include <jdoc:include type="message" />-- usually just above your component. Be sure your templateDetails.xmlfile list matches the contents of your template folder EXACTLY! If your installation fails, it is most likely a problem of a missing file or mis-named file. Fix .xml file, re-zip and re-install until it works!
Snippets Dreamweaver Snippets: http://iriswebs.com/JoomlaDay/JOOMLA_1.5.zip Or text file of snippets: http://iriswebs.com/JoomlaDay/all-snippets.txt For Dreamweaver: Your Snippets are here (Vista) - C:Users<username>AppDataRoamingAdobeDreamweaver CS4en_USConfigurationSnippets and here (WXP) - C:Documents and Settings<username>Application DataAdobeDreamweaver CS4en_USConfigurationSnippets and here (Mac) - Library :: Application Support :: Adobe :: Dreamweaver CS4 :: en_US :: Configuration :: Snippets Be aware that the Windows location is normally HIDDEN - you would have to unhide it in the Explorer options.
Module Styles The “snippet” for adding a module position is: <jdoc:include type="modules" name="footer" style="xhtml" /> style=“xhtml” is one of five options for designating how Joomla will wrap your module content. It is the one I use the most. The options are: style=“table” – Joomla will wrap your module as a <td> in a single column <table> to place one module under another. style=“horz” – Joomla will wrap your module as a <td> in a single row <table> to place modules side by side. style=“xhtml” – Joomla gives you a single <div> wrapper. style=“rounded” – Joomla will wrap each module in four nested <div>s. style=“none” – no containing code will be added.
All resources available at: PDF Version of this slide show All files you saw today iriswebs.com/JoomlaDay Dreamweaver CS4 Snippets Joomla Snippets in a text file Book List Online Resources barb@irislines.com

More Related Content

Joomla Templates101

  • 1. Joomla Templates 101 Barb Ackemann Joomla Day NE May 30, 2009 NOTE: Slides, files and resources are all online – So you can listen /think hard and not worry about writing everything down!
  • 2. Joomla Templates 101 – Agenda • Introduction • “ons” and “tos” • Module positions in Joomla • Ingredients of a Joomla 1.5 template • Build the html / css, add php snippets • templateDetails.xml • Upload, Activate and Tweak! • Tips and Tricks
  • 3. Barb Ackemann • Public education (k-12) for 28 years • M.S.I.T MCGS 2006 • Independent web developer • Owner, Iris Lines Designs – irislines.com • Instructor MCGS – Designing with Web Standards (html and css) – Web Accessibility
  • 4. Ons and Tos This workshop assumes you are able to create a static html page layout with all aspects of presentation in an external stylesheet. Html is for structuring your content with semantic markup (related to the meaning of the content) CSS is for all things presentational: color, font, layout, etc. The two files work together. There are many advantages to this separation, including: accessibility, efficiency, SEO.
  • 5. Ons and Tos This workshop assumes you are familiar with working with Joomla content and modules. Joomla presents the content of your pages in various kinds of blocks. Articles or other components (photo galleries, contacts, forms, etc.) sit in one position on the page (usually the largest block). Other blocks (navigation menus, random images, most read, etc.) are assigned to module positions which are defined in the template.
  • 6. Ons and Tos After this workshop, you should be able to create a simple custom Joomla 1.5 template. You’ll be able to install your custom template and make adjustments to the cssstylesheet. You’ll learn about some helpful tools and tricks.
  • 7. Software Tools Graphics: PhotoShop, FireWorks or other graphics program. HTML editor or simple text editor to write HTML and CSS or Dreamweaver CS4. Firefox browser with the free Web Developer’s Tool Bar (WDTB) extension. (https://addons.mozilla.org/en-US/firefox/addon/60) Other CSS tools: CSS Edit for the Macintosh (http://macrabbit.com/cssedit/) or TopStyle for Windows (http://www.newsgator.com/individuals/topstyle/default.aspx )
  • 8. Ingredients of a Joomla 1.5 template: The template “BEEZ” has these files: The ones with * are needed for even a basic template. *index.html (blank html so users won’t see the contents of folder – include one of these in every sub-folder as well!) *index.php *templateDetails.xml (start wth file from BEEZ and modify for your template) *template_thumbnail.png favicon.ico (generate one of these at http://tools.dynamicdrive.com/favicon ) *css (folder) (minimum of one template.css file can have others for ie or print) *images (folder) (images used in template or to decorate modules or components) html (folder) – (borrow whole folder from BEEZ template to use in your template!) Beez also adds: component.php images_general(folder) javascript(folder) params.ini
  • 9. templateDetails.xml The templateDetails.xml file creates the installer and lists all of the files included in the template. It also includes details about the template (author, copyright, etc.) Template module positions are identified in the templateDetails.xml file. <positions> <position>left</position> <position>right</position> <position>top</position> <position>breadcrumb</position> It’s probably a good idea to <position>user1</position> use these names for module <position>user2</position> positions so you can switch <position>user3</position> between templates without <position>user4</position> having to reassign your <position>debug</position> modules to new positions. <position>syndicate</position> </positions>
  • 10. Live Demonstration At this point in the workshop, Barb turned to the real tools and demonstrates the process of creating a Joomla template using FireWorks, Dreamweaver, Firefox and the Web Developer’s Tool Bar. Some of the files you’ll see are posted for you to examine ( Note: php files are saved as .txt so you can open them without restriction!) These (and more!) are available at http://iriswebs.com/JoomlaDay/ Fireworks mockup file Original html file with embedded styles First version of template file (as a text file) First version of stylesheet Second version of template file with if / else conditional code (as a text file) Second version of stylesheet Sample templateDetails.xml file A live version of the site
  • 11. Live Demonstration The steps were: 1. Develop graphic design 2. Plan and develop html and css code to achieve the design. Insert “dummy” content as placeholders. Validate the code. Test in other browsers. (Now and often!) 3. Take a screen shot and save at 200px wide as template_thumbnail.png 4. Plan for module positions and names. 5. Save index.htmlas index.phpin a folder for your template. 6. Replace head code with Joomla “snippet”. 7. Replace placeholder content with Joomla “snippets”. 8. Save css as template.cssin css folder. 9. Have image folder for all template images. 10. Copy html folder from BEEZ template into your template folder. 11. Create a favicon .icofile if you want one. 12. Open BEEZ templateDetails.xmland modify to be an exact inventory of your files. 13. Zip the folder. 14. Install into your Joomla site, set as default or assign to a test page. 15. Use the Firefox Web Developer Toolbar to tweak and fine tune your css. Save copies of changes locally and copy and paste into Template Manager template.cssfile.
  • 12. Things to watch out for….. Paths to images: 1. Hardcoded into template: <imgsrc=“http://domain.com/templates/<?php echo $this->template; ?>images/logo.gif” /> 2. Called by cssstylesheet: background-image:url(../images/logo.gif); 3. Called by content item: <imgsrc=“ images/stories/photo.jpg” /> Be sure to include <jdoc:include type="message" />-- usually just above your component. Be sure your templateDetails.xmlfile list matches the contents of your template folder EXACTLY! If your installation fails, it is most likely a problem of a missing file or mis-named file. Fix .xml file, re-zip and re-install until it works!
  • 13. Snippets Dreamweaver Snippets: http://iriswebs.com/JoomlaDay/JOOMLA_1.5.zip Or text file of snippets: http://iriswebs.com/JoomlaDay/all-snippets.txt For Dreamweaver: Your Snippets are here (Vista) - C:Users<username>AppDataRoamingAdobeDreamweaver CS4en_USConfigurationSnippets and here (WXP) - C:Documents and Settings<username>Application DataAdobeDreamweaver CS4en_USConfigurationSnippets and here (Mac) - Library :: Application Support :: Adobe :: Dreamweaver CS4 :: en_US :: Configuration :: Snippets Be aware that the Windows location is normally HIDDEN - you would have to unhide it in the Explorer options.
  • 14. Module Styles The “snippet” for adding a module position is: <jdoc:include type="modules" name="footer" style="xhtml" /> style=“xhtml” is one of five options for designating how Joomla will wrap your module content. It is the one I use the most. The options are: style=“table” – Joomla will wrap your module as a <td> in a single column <table> to place one module under another. style=“horz” – Joomla will wrap your module as a <td> in a single row <table> to place modules side by side. style=“xhtml” – Joomla gives you a single <div> wrapper. style=“rounded” – Joomla will wrap each module in four nested <div>s. style=“none” – no containing code will be added.
  • 15. All resources available at: PDF Version of this slide show All files you saw today iriswebs.com/JoomlaDay Dreamweaver CS4 Snippets Joomla Snippets in a text file Book List Online Resources barb@irislines.com