Templates Cheat Sheet 2

Ingredients

Module Positions
Template module positions are identified in the templateDetails.xml file. The following template positions are fairly standard, and by using these, your content will have somewhere to go in one of the supplied templates. <positions> <position>left</position> <position>right</position> <position>top</position> <position>breadcrumb</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>debug</position> <position>syndicate</position> </positions>

Making Beez Better

I copy the entire beez/html folder into my template and then modify 5 files: templateX/html/com_content/article/default.php Change <div id=page> to <div class=page <?php echo $this->escape($this->params>get(pageclass_sfx)); ?>> templateX/html/com_content/category/default. php AND templateX/html/com_content/section/default.php Wrap all but the first and last <php> blocks in a div: <div class=cat-list <?php echo $this->escape($this->params>get(pageclass_sfx)); ?>> using class=sect-list... for the section/default. php file.

Joomla! 1.5

The template BEEZ has these files: The ones with * are required for even a basic template. *index.html (blank html so users wont see the contents of folder include one of these in every sub-folder as well!) *index.php (Start with your html and replace blocks with snippets from the Templates Cheat Sheet.) *css (folder) (A minimum of one template.css file, you can have others for ie or print.) *images (folder) (Include all images used in template or to decorate modules or components.) html (folder) (Borrow whole folder from Beez to use in your template - and make it better!) *templateDetails.xml (Start wth file from Beez and modify for your template.) *template_thumbnail.png (Take a screenshot of your html design, then reduce to 206px wide.) favicon.ico (Generate one of these at http:// tools.dynamicdrive.com/favicon. ) component.php (Used by Joomla! print button - to print component without other layout divs - overrides system/component.php.) images_general (folder) javascript (folder) params.ini (needed if you define parameters for your template.)

Template Overrides
Joomla! out of the box writes less than optimal html code, wrapping things in tables and using table data cells where wed rather have an h1 or h2 heading. Template overrides are files you include in the html folder of your template that will be used instead of the core Joomla! code when html is generated. The Beez template was created to improve the html for web standards and for accessiblity and the html folder from Beez is a common starting point for Joomla! template development. Side 2 of this card has tips on creating your own template overrides.

templateX/html/category/blog.php AND templateX/html/com_content/section/blog.php Move this line up to enclose the php that generates the h1: <div class=blog<?php echo $this->escape($this->params>get(pageclass_sfx)); ?>> and change the class from blog... to cat-blog... or sect-blog... These 5 changes give me styling handles that CAN be made more specific through the use of page class suffixes so that any article, blog or list page can be styled uniquely.

Making your own Template Overrides

Any component or module in the core Joomla! code, as well as some extensions, including K2, can be overridden by copying the core tmpl file into your templates html folder and making changes to the html or php in the copy. This process means your changes will not be lost when a Joomla! upgrade is installed and that you are not risking breaking the original code. If your override doesnt work, you can just delete it - or temporarily disable it by adding an x in the file name. Viewing a page url without sef-urls gives you good information about the tmpl file you need to locate. i.e. index.php?option=com_weblinks&view=category points you to components/com_weblinks/views/category/tmpl/ where youll find two files: default.php and default_items.php. Create a directory in your template html folder and insert a copy of the .php file. The path in your template file is shortened. (You dont need /views/ or /tmpl/.) templates/your-template/com_weblinks/category/default_items.php You can make changes to this file to change the html that Joomla! will generate.

Making your template flexible with conditional statements and variables

Using conditional statements you can control whether your template creates a div and module position for a left or right sidebar depending on whether a module exists for any given page. But this does not cause the content to stretch to fill that available space when no module is present. It is possible to use conditional statements in the opening php block of your template to set values of variables which are then used in the template to create divs with different ids depending on the modules present. For this example Im using a liquid design with a left column width of 20%, and a right column width of 30%. The content area will be either 50%, 70%, 80% or 100% depending on the presence of modules for the left or right columns. I add these 4 lines to the opening php block: if($this->countModules(left) + $this->countModules(right) > 0) $layout=50; if($this->countModules(right) <=0) $layout=80; if($this->countModules(left) <=0) $layout=70; if($this->countModules(left) + $this->countModules(right) <= 0) $layout=100; and in my htm I reference that variable wherever needed like this: <div id=content class=content-<?php echo $layout; ?>> Then I can write css rules: .content-50 {width:50%;} .content-70 {width:70%;} .content-80 {width:80%;} .content-100 {width:100%;} 20% 20% 50% 80% 70% 30% 30%

Styling by the Active Top Nav Item...

It often comes up that a site design calls for a different color scheme or a different banner image for each section of the site.Bill Tomczak helped me with this code which allows me to append a class on a containing div, giving me the handles I need to call different styles for different top menu items. Include this in your opening php block of the index.php file: $menu = JFactory::getApplication ()->getMenu(); $active = $menu->getActive(); $top = $active ? $menu->getItem($active->tree[0]) : null; Then, in the template html you can add this as a class to your top level div: <div id=container class=<?php echo $top->alias; ?> and in your stylesheet you can call for different images depending on top level menu: .section-image {background-image:url(../images/generic.jpg); } .about .section-image {background-image:url(../images/about.jpg);} .products .section-image {background-image:url(../images/products. jpg);} Section-image is a module class suffix for a placeholder custom html module which can safely be activated for all pages - the css will load the proper image or a generic image in case no top menu applies - as on search results page. You could also use this for background color of a nav bar, colors of modules or any design element on the page.

100%

What component is loading? Another variable that can be created within your template is one that identifies the component being called for any given page. Your non-sef urls show you this: index. php?option=com_content..... or index.php?option=com_virtuemart... or... Add this to opening php block: $pageoption = JRequest::getVar( option, ); and then append $pageoption to a containing div to give you handles for styling different kinds of pages with different css rules. (See Cory Webbs, howtoJoomla.net 4.17.2008 blog post for other ideas using this variable.)

Barb Ackemann Iris Lines Designs Brattleboro, Vermont , USA 802 257 7391 irislines.com