Joomla! is a very popular CMS, written in PHP language. To be able to use it, you will need a hosting account that supports PHP and access to one database on MySQL database server. Joomla! is a free, open source software, licensed under the terms of GPL 2, which simply means that you can use it free of charge for commercial purposes too (you can find text of this license at http://www.gnu.org/licenses/gpl-2.0.html). You can download the newest version of Joomla! installer from www.joomla.org. While I'm writing this book, the newest, long-term, stable version is 2.5.9, and this is the version we are going to work with in this chapter.
Artisteer-generated Joomla! templates contain the following Areas:
Source: www.artisteer.com
If you look closely at the figure, you will see that every area has two names. The first name is associated with the area's destination, while the second name is given in brackets and is built on the position-number pattern (that is, position-30). The first convention was a standard in Joomla! 1.5 (which is still a very popular release), the second was introduced with version 1.6. Because Artisteer exports templates for various versions (1.5 or 2.5-3.0), you can choose the target version of Joomla! and the name convention for template areas while exporting the template.
Exporting of CMS template goes very similar to exporting static page templates that we did in the previous chapter.
The first thing to do is to choose a target platform—in this case Joomla! To do this, click on the arrow beside the Export button located in the Quick Access Toolbar of the Ribbon (you can also choose File | Export | Joomla Template from the menu).
The Export window will appear as follows:
Set the following fields:
- Template: Joomla Template (target platform for template)
- Version: 2.5 (target Joomla! version)
- Positions: position-1, p… (Areas' naming convention. We chose the newer one, default for Joomla! 1.6+)
- FileName:
MyJoomlaTemplate(template filename) - Path:
C:UsersJakubDesktop(destination path of a created file. In this case, my desktop)
There are three important options under Path: that you can check:
- ZIP archive
- Include ARTX Project
- Include Content
Checking the first one, ZIP archive, causes the generated files to be automatically compressed into a ZIP archive. You definitely should check this option, because a ZIP archive is the correct format supported by Joomla! for installing new templates. Such templates can be installed directly from the Joomla! administrative panel.
Checking the option Include ARTX Project
causes the native Artisteer project file (.artx) to be added to exported files. This has no influence on installing or working with the template, and the choice is up to you.
The last option (Include Content), introduced in Artisteer 4.0, allows you to export all the content—the pages, text, menu, images, and footer—you have entered in Artisteer along with the template. If your job is to build the entire website and you have entered the final content in Artisteer, checking this option may be a good idea (thanks to this, you won't have to reenter it once again, this time in Joomla!). If your job is just to create the template, you probably won't check this option (although, providing the template with an example content, to show the end user the potential of your template, may be a good idea).
Installation of an Artisteer-generated template is done in exactly the same way as installation of any other template. After logging in to administrative panel, do the following:
- Navigate to Extensions | Extension Manager in the menu.
- In the Upload Package File field, click on the Browse button.
- In the open dialog box, point to your template file.
- Click on Upload & Install.
After pointing to your template file, click Upload & Install to install the template
The template will be sent from your local computer to the server (it can take some time, according to the quality of your Internet connection), and will be installed. At the end of this operation, the confirmation text Installing template was successful will be shown.
But, when you refresh your site, you will see no changes. Our template is installed, but is not set to be displayed (you can install as many templates as you wish in Joomla!; you may even set up which template should be used to display which page).
Our next step will be to activate our template.
- To set our template as default:
- From the menu, navigate to Extensions | Template Manager. You will be redirected to the Template Manager: Styles screen.
- Find your template on the list and click on the corresponding star on the right (in the Default column). The icon (star) will fill itself, which means that from this moment our template is the default one.
- Refresh the page. You will see that the site is displayed with the use of our template, although some key elements, like menu, aren't displayed. Don't worry, we will fix this problem soon!
It's time to make our template look like the one we designed in Artisteer.
The first elements missing that we are going to display are the Title and Slogan in the header. The text that you have entered for the Title and Slogan in Artisteer are not exported with the template. What is exported is the style (look) of these text, but you have to enter them in Joomla! once again. Let's go back to the Joomla! Administration Panel and perform the following steps:
- From menu, navigate to Extensions | Template Manager. We will go back to the Template Manager: Styles screen.
- Click on your template in the Style column area. You will go into the Template Manager: Edit Style screen.
- On the right-hand side, you will see the Basic Options area, with the fields Headline and Slogan. Enter the appropriate text in them.
- Click on the Save button on the toolbar to save the changes.
After refreshing the page, you will see the Title and Slogan being displayed.
Entering text for Headline and Slogan
The creation of a horizontal menu for an Artisteer-generated template looks the same as creation of a horizontal menu for any other template in Joomla! The only thing you must remember is to place it in the position-1 (user3) area.
The vertical menu is usually placed in the left or right column. The creation of the vertical menu involves some more steps than the horizontal menu, because you have to define a suffix module for it.
To display the vertical menu correctly, including the entire look designed in Artisteer, perform the following steps:
- Create a new vertical menu module.
- Place the menu in the target area (usually left or right column).
- Edit module settings, and in the Module Manager screen expand the Advanced Options area.
- In the Module Class Suffix field, enter
art-vmenu. - Save the changes.
To display the vertical menu correctly, you have to set Module Class Suffix as art-vmenu
The last thing to modify is the footer of our site. In Artisteer-generated templates, you can achieve this by modifying position-27 (copyright) area. All we need to do is create a new module of the Custom HTML kind, and place it in this area. Our module will become the new site footer. Let's perform the following steps:
- Create a new Custom HTML module and give it the Title:
Footer. - Disable displaying module title.
- Put it in position-27 (copyrights).
- Enter the text you want to have in the footer.
- Save the changes and enable the new module.
Footer module settings
Example text in the footer—of course, you should put your data here
After page refresh, you will see that our site has the new footer, which we have already designed.
I'm sure you have marked the Import Content from Template button while entering text for the header Headline and Slogan. We are going to use it now and import the content from Artisteer template into a Joomla! site. Perform the following steps:
- In the Joomla! Administration Panel, navigate to Extensions | Template Manager.
- Go to Template Manager | Styles and look for and click on your template, within the Style column.
- In the Template Manager: Edit Style screen, click on Import Content From Template button.
- Click on Import in the confirmation dialog box.
Click on the Import button to import the content from the template into Joomla!
All the content you have entered in Artisteer will be imported to Joomla!. Horizontal menu, vertical menu, footer, and pages will be automatically created and displayed. Even the Lightbox effect for our images works!
We can observe the way the content was imported:
- A new category called
Articleswas created. All imported articles (text from all pages) have been put into this new category. - A new module for the horizontal menu has been created, with the name
Content/Horizontal Menu, and all the items are of Single Article type. - A new module for the vertical menu has been created, with the name
Content/Vertical Menu, and all the items are of Single Article type. - A menu by the name
Content/Special Menuhas been created, but without any associated module. This menu contains two standard items. The first item is of the Category Blog type, associated with articles from the Featured category. The second one is a Single Article item, currently not associated to any article. - The footer has been imported as a new Custom HTML module, with a name Footer that has been placed in position-27. Some new empty pages have been added (as articles without any content). Joomla! doesn't allow you to save empty articles. So if you tried to edit and save them unchanged, there will be an error text displayed informing you that you have to enter some content first.
- All the images have been put in
Media, in thetemplate-contentfolder. - A block containing our contact information has been inserted as a new module of the Custom HTML type.
Also note that both aliases of menu items and articles show neither titles nor file names for pages that we entered in Artisteer. Menu aliases are created with the use of ct-menu-item-number pattern.