Joomla templates are a fundamental part of a successful Joomla site. We've gathered some helpful guides to get you on the road to becoming proficient using them.
A. What is SqueezeBox? SqueezeBox is Joomla's implementation of Lightbox, a Javascript application designed to display content using transparent boxes (fig. A) in an elegant and simple manner. SqueezeBox can display a wide variety of content, from images to webpages. However, SqueezeBox does have some limitations, such as the fact that multiple content dialogs cannot be displayed at the same time and that tooltips break when SqueezeBox is being used. Also, SqueezeBox currently cannot display an image gallery. Although setup may seem slightly complicated at first, this guide will provide you with everything you will need to setup SqueezeBox. In order to get the desired results, you need to know basic HTML and use Joomla 1.5RC4 or later. The content in this guide is based off of the Joomla Default Sample Data. This guide is designed to be simple and easy to comprehend; as a result, you will find screenshots, lightbulbs, fingers, and exclamation marks throughout this guide to emphasize specific facts. A indicates a fact that you'd probably want to be aware of, a points to the web address of the page (remember that these are default URL's, and that you need to substitute yoursiteaddress.com with the actual address), and an indicates something to watch out for. In addition, code will be displayed using a separate font, Courier New. Figure A. An sample image displayed using SqueezeBox.
How to include Slimbox in your Joomla! Website In this tutorial I will show you how to install and use Slimbox on your Joomla! website. I will assume that you have Joomla! installed and you have access to the Joomla! administrator backend. A. Setup 1. Download Slimbox.zip from http://www.digitalia.be/file_download/8 2. Extract Slimbox using your favourite Zip program. 3. Upload the js folder to your template's folder and the files inside the css folder to your template's css folder 4. In the backend Joomla! Administrator, navigate to Extensions>>Template Manager. 5. Click on the option button to the left of your template (the default template is rhuk_milkyway)
One of the default templates that come with Joomla is Milkyway. Read the guide below to see how you can replace the logo in this template with your own.
How to replace the logo image in the Milkyway template 1. Creating the logo In this guide, we will be replacing the Joomla! logo by our own custom logo. Let's start by creating the custom logo. We will use the free program the GIMP (www.gimp.org) to do this, so do download and install it, if you haven't already. Open the GIMP, and click on file > new. Choose 298 pixels for the width of the image, and 75 for the height. Also, expand the advanced options by clicking on the little 'plus' left of it. Change “fill with option” to transparency. Note: If you use the Beez template, you should set width to 300px and height to 97px. If you use another template, you can check yourself: surf to your site, rightclick on the logo you want to replace, and select properties. There you can see the width and height. . Create new image Now a new window containing the transparent image will open up. The first thing we will do is adding some text. Select the text tool in the GIMP's main window. Now click in the left upper corner of your image window, and type in your logo's text in the dialogue box, and close it. Now double click the texttool, and the text tool's properties dialogue will open up. Change the size to an appropriate value, and also change the font and text colour if you like, but this is not really necessary. Note: You can see the image change while you adjust the text's size. If you don't see anything happen, click on the text and try again. You might want to adjust the position of the text, using the move tool.
1 Customizing Joomla!'s Default Template The goal of this document is to instruct users on how to customize the default Joomla! 1.5 template: “rhuk_milkyway”. To perform some of the changes in this document you may need a File Transfer Protocol client (FTP client). While chances are this will not be required, many people find it to be a very valuable asset. Further more, you will need to have Super Administrative access to Joomla!'s administration panel. This document is rather basic, but it will show you how to change the Joomla! logo, change the template width, choose from existing color schemes, and remove the footer link that will take site visitors back to Joomla.org. Changing Rhuk_milkyway's Default Configurations: Note: Rhuk_milkyway's defalt template width is not set. It is actually 'fluid'. The idea behind this is that whatever size screen the user has, the template will fill the whole width. After logging into the Joomla! 1.5 administrative back end, go to: Extensions - > Template Manager (See Figure 1) Once you are in the Template Manager, select the template. There are two ways to do this. One is to click the little radio button, and then click 'edit' on the menu that is at the top of the Template Manager screen. (See Figure 2 & 3) Figure 2 Figure 1 Figure 3 The other way to open the template's configuration is to simply click on the title, shown in Figure 2. Before you change any of the settings in the Template Configuration, check to see if the parameters file is writable. You can do this by changing the file's permissions to 777 via FTP client, or a File Manager Component for Joomla! to do this. If you experience problems changing the file permissions, check the ownership settings. Refer to the Joomla! forum (http://forum.joomla.org) for more information. Params.ini file is unwritable – Figure 4 After setting the params.in file to writable (777), the parameters writable setting will change from 'Unwritable' to 'Writable' (See Figures 4 & 5) Params.ini is writable – Figure 5
Joomla template overrides are one of the most powerful features introduced in Joomla 1.5 You will want to find out more about how you can use them to show your the real power of Joomla, below.
Getting Started with Template Overrides Joomla! Template Template is a something which can be present as a website with the contents of database tables. So the template itself is not a complete web site and it is only a basic foundation of the design of a web site. So the appearance of a content management system can be changed by using a template. Beez Template. Beez is a one of standard template which is created for joomla!. It gives more accessibility and also the flexibility to the content management. 1
At times you may need to add javascript to your Joomla template. One example might be adding Google Adsense, or Google Analytics. Enjoy the practical help below.
Adding Javascript using Joomla! API’s Introduction This document will explain how to add Javascript code to your template. It will also explain how this can be expanded to components, modules and anywhere you like too but, also the Joomla! API guarantee us to add it in a consistent form and on the correct place so, it doesn’t break compatibility with the XHTML standard. Requirements: Basic knowledge of PHP. PHP basics: If you already know PHP you can skip this part. • Variables start with dollar sign($) • Functions are code blocks that you can call to do stuff. This line below calls the getDocument function that is inside the JFactory class and stores a reference of it on the $document variable. • • • • • • • $document =& JFactory::getDocument(); Every statement ends with a semicolon (;) The equal ampersand (=&) in the middle of the variable and function says reference that means give me the original not a copy of it. The arrow(->) after variables mean the variable holds and object inside it and calls a function from that object. Comments are ignored by code and start with double slash (//) Multi line comments are encapsulated inside /* */ Argument are values passed to function they will use the arguments to perform their jobs. There’s a variable called $this it means the class you are in. Example, if you are putting this in the template $this will give us the document. • • • Code has to go inside the php tags for it to be executed, if not it will display on the page whatever code youtyped as normal text. You can get the base folder where Joomla! is installed using JURI::base() The value of the $this->template variable inside a template is the template folder name. This can be useful for adding the template name to a directory. Introduction to Joomla! Api’s. Joomla! provides us with some functions so, you can add the Javascript in the correct place, this functions can be called from anywhere in the code and they will not break compatibility with the XHTML standard. These functions are addScriptDeclaration and addScript they allow us to insert Javascript code and insert a Javascript (.js) file.
Once you've created your first Joomla site, you next step will be to edit/install and customize your template. Some excellent material to help you do so is below.
1 Template Installation Troubleshooting Manual There are many errors that can occur during template installation for your Joomla! site. The aim of this document is to identify common issues discovered in Joomla! 1.5 installation problems, and provide solutions. Sometimes the solution is easy, sometimes its not. Note: If after checking all these solutions, you cannot find a solution, check out Joomla.org. If you purchased a commercial template, contact the developer(s). Note: Before you get into this troubleshooting manual and start trying to figure out why your template will not work, be sure that the template is indeed a Joomla! template. Joomla! templates are specific to Joomla! 1. Error: “Direct Access to this location is not allowed.” Or: “Warning! - Failed to move file” Cause: The cause of this could be attributed to multiple sources. One possibility is that Joomla! does not have writable access to key directories. Another possibility is that the Joomla! has been been installed with incorrect ownership rights. Solutions: 1.1: The first thing you should do is login to your File Transfer Protocol Client (FTP), and check the following directories are set to writable (777). /joomlaroot/templates and: /joomlaroot/tmp Another way to fix this problem is to provide your FTP login details to Joomla!'s global configuration. If Joomla! has the correct file ownership permissions (see below) the directory write errors can be fixed automatically. 1.2: If you are still having problems then the problem is probably an ownership issue. You will need to go to the apache user groups and chown Joomla!'s user group to have ownership of the website directories. You can do this by running this command in apache: sudo chown -R www-data:www-data joomlaid - *Where 'joomlaid' is the Joomla! root directory* Note: If you are unfamiliar with Apache ownership settings I strongly advise you contact your hosting company and ask them to make these changes for you. 2. Error: “Your Extension appears to be written for an older version of Joomla!. You must enable the System - Legacy Plugin in the Plugin Manager if you wish to complete this task.” Cause: As the error says, the extension, (in your case, the template) was written for an older version of Joomla! specifically, Joomla! 1.0.X.
