Installing Joomla Template

To install an exported and zipped template via the Joomla administration panel in Joomla 2.5 please do the following:

1. Go to Joomla Administrator (www.your-site.com/administrator) -> Extensions -> Extension Manager
2. In the "Extension Manager" choose the first option "Upload Package File"
3. Click the "Choose..." button to select the zip file from your computer
4. Click the "Upload & Install" button
5. Go to Extensions -> Template Manager
6. Find the template in the list and put a star next to it
7. Click the "Make Default" button.

 

NOTE: If the name of the template you would like to install already exists, you should rename or delete the existing template before installing a new template with the identical name. Such procedure is typical for Joomla. An old template cannot be replaced automatically with the new template with the same name.

Actually, many servers use the default limit of 2 MB on the maximum file size. If this is the case with your server, some template files are considered too big and cannot be uploaded by using the"Upload&Install" button. Then to install the template please follow the steps below:

1. Upload your .zip file to a temporary folder on your server (e.g. via FTP).
2. Unzip your template package.
3. Log in to your Joomla Administration and select Extensions -> Extension Manager -> Install.
4. Under the "Install from Directory" option enter the full path to the folder on server where your unzipped file is located.
5. Click the "Install" button.

 

Alternatively you can use the "Discover" tab to install templates that have not gone through the normal installation process:

1. Unzip the template package to a folder on your computer.
2. Open your Joomla installation directory (e.g. using the FTP File Manager).
3. Go to /templates directory.
4. Upload the template folder (with the extracted files) to the /templates directory on your server.
5. Log in to Joomla Administration and navigate Extensions -> Extension Manager -> Discover.
6. Click the "Discover" button to let Joomla find the manually uploaded template folder.
7. Check the box next to the template, which has appeared in the list.
8. Click the "Install" button.

 

After the installation by any of the shown ways you can activate the template like this:

1. Log in to your Joomla Administration and select Extensions -> Template Manager.
2. Select your newly uploaded template from the list of available templates for your site and put a star next to it.
3. Click the "Make Default" button to activate your template.

If you want to import content, don't forget to enable "Include Content" before exporting the template from Artisteer. 

To install content imported from Artisteer please do the following:

1. Go to Extensions -> Template Manager, and open your template
2. Click "Import Content from Template" under the Basic Options

 

 

1. Click the "Import" button.

 

For more information please visit http://docs.joomla.org/How_to_install_templates 

Joomla Positions

Joomla module positions are placeholders in a template. They identify positions within the template where output from modules assigned to a particular position will be displayed. 

In Artisteer 4 for Joomla 1.6-2.5 templates you can choose to use one of the following position naming options: 

• "position-1, position-2…" for new Joomla 1.6-2.5 position naming like in the default Beez2 template

 

• "left, right, top, bottom" for Joomla 1.5-like position naming (for compatibility purposes)

 

If you would like to upgrade the existing website from Joomla 1.5 to Joomla 1.6, 1.7, 2.5 you may select the “right, left, top, bottom” type of naming, which will be compatible with the latest Joomla version thus freeing you from recurring block adjustments. 

Adding Modules to Header

In Artisteer 4.0 you can add modules to the Header and style/position them with CSS code. Please, follow the steps below:

1. Add a module to the Header by assigning it to position-30 (or header) in the Module Manager.
2. Go to Advanced Options and set the module class suffix to " my-module-1" (space before my-module-1 is required).
3. Add a similar CSS code to the template.css file (Template Manager -> Templates -> [your template] -> Edit CSS/template CSS):

    .art-header > .my-module-1 {
         top: 20px;
         left: 50%;
       }
   

Headline and Slogan Text

Starting with Artisteer 3.1 the Headline and Slogan text in Artisteer -> Header -> Title becomes the dummy text, which will not be displayed in the installed Joomla templates. The Headline and Slogan text in Artisteer serve for design purposes only. You can fill in the text fields and preview the result before exporting the template. To add actual Headline and slogan content to your website log in to Joomla Administration, select Template Manager > Template name > Basic Options > Headline and Slogan fields and fill in the content.
NOTE: The Headline and Slogan controls should be added previously in Artisteer, so that the corresponding fields will appear in Joomla under Basic Options. 

Utilizing Menus

Applying Artisteer style to your menu

Please use the following steps to utilize menu style designed with Artisteer:

1. Go to Joomla Administrator (www.your-site.com/administrator) -> Extensions -> Module Manager
2. Open an existing menu or create a new one and place it into the "user3" ("position-1") position

NOTE: the "user3" position can contain only a single menu, or none. 

For more information please visit http://docs.joomla.org/Screen.modules.15

Creating Multilevel Menu

Here are the steps you should follow to create a multilevel menu in your Joomla Website:

1. Enable multiple menu levels in Artisteer->Menu -> Submenu -> Levels -> Multilevel.
2. Go to Joomla Administration (www.your-site.com/administrator) and enable multiple levels in your menu module (Extentions -> Module Manager v click to edit menu (e.g. Top Menu) -> Basic Options -> "Show sub-menu Items").
3. Make sure that you have menu items at lower levels defined in Joomla.

Creating Vertical Menu

Starting with Artisteer 2.4 you can use an art-vmenu Module Class Suffix to apply Artisteer vertical menu style to your menu module.
To do this, please follow these steps:

1. Log in to Joomla Administration and go to Extensions -> Module Manager.
   Select the module you want to edit.
2. Go to Advanced Options and specify the art-vmenu suffix.
3. Keep in mind that you should disable caching if you create a click-open vertical menu 
   
   
   

Note: If you have replaced the default “art-” prefix in Artisteer (Export Options) with a custom prefix e.g. “andrew-”, you also need to add the custom prefix in Joomla (Module Class Suffix field) to apply the vertical menu style. 

To create a Vertical menu with sub-items:

1. Enable Multiple menu levels in Artisteer > Vertical Menu tab -> Submenu -> Levels. Make sure that the sample Vertical Subitem works for you within the template previewed in Artisteer.
2. Create a menu with sub-menu items in Joomla.
   Sub-menu items should have parent items specified for them.
3. Enable multiple levels in your menu module ("Show sub-menu Items").
4. Use art-vmenu Class Module Suffix to apply the designed vertical menu style to the desired menu modules

Note that subitems will not appear on mouse hovering but only when you click on the parent item (except for menus with open levels, where all sub-items are visible).

Creating Vertical Menu with Separators

Separator is one of the four menu item groups along with Internal Link, External Link, and Alias. Unlike regular menu items separators do not link to a particular web page; they are used to sort out the menu items.

Starting from version 3.0, Artisteer templates for Joomla support Vertical Menus with separators. To enable menu separators, please update Artisteer, open your .artx project, re-export the template and apply it to Joomla. 

Also, make sure that your Vertical Menu levels are activated in Artisteer before the template is exported (Vertical Menu -> Subitem -> Levels -> Expand on Click/ All Open)

To create a custom Vertical Menu with separators:

1. Log in to Joomla Administration and open your custom menu (Menus-> [custom menu name])
2. Press “New” to add a menu item and select a separator menu item type, or click the existing menu item, Menu Item Type -> Select, and save it as a text separator.

 

1. Open the item, which is to be placed inside the separator, and select the separator as its parent item.

Creating Blog Layout

Starting from Artisteer 4 you can create your own layout of the blog page content. For this please do the following: 

1. Open the blog page you want to edit.
2. Go to Edit -> Content and customize the layout and styling of your Blog Page Content.

 

1. Enable "Include Content" and export the template to Joomla.

 

1. In Joomla go to the Extensions -> Template Manager -> Styles -> [your template name] -> and switch the "Blog Layout Type" to "Artisteer".

Note: If you choose the "Default" blog layout type, the layout, created in Joomla, will be applied. 

Customizing the Footer

Starting with Artisteer 4 the footer is considered to be part of a website content and can be imported along with the other website content. 

Alternatively, you can customize the template footer via Joomla administration by placing one or multiple modules into the "copyright" position ("position 27"). This will replace the default copyright text included in the template footer with the new content provided by the module. 

Starting with version 4.1 Artisteer generates Footer module positions in the following ways:

1. In case you haven’t changed any of Edit tab -> Content options, the default position-27(footer) module position will be used (as in previous Artisteer versions).
2. If you have changed any option of the Footer layout from the Edit tab -> Content in Artisteer before export (for example, changed Cell Padding or Content Layout etc.), then Artisteer generates Footer module positions by Content Layout cells in Footer. 
   In this case the following positions will be used — in accordance with the position naming option chosen:
1. Position-32, position-33 etc. in case you use position naming option “position-1, position-2, …”;
2. Footer1, footer2 etc. if position naming option “left, right, top, bottom, …” is chosen.

To see the module positions available in your template in Joomla:

1. Please go to Joomla Administration -> Extensions -> Template Manager -> Options and enable Preview module positions option.
2. Add the "?tp=1" parameter to the end of a site's URL in the browser address bar on the front end.
   For example: http://www.my-site.com/index.php?tp=1
   
   

Here are sample steps to configure custom footer:

1. Go to Joomla Administrator (www.your-site.com/administrator) -> Extensions -> Module Manager.
2. Click "New", select "Custom HTML", then select "Next".
3. In the module details specify:
   • Show Title: Hide
   • Position: copyright
   • Custom Output: (the desired footer content)
4. Save your changes.

You can now use the newly created module for further footer customizations without utilizing additional modules. 

Joomla Module Style

Artisteer 3.0 and later versions allow using Custom Module ?lass Suffixes. So, now you can use your own Module Class Suffixes along with the standard Artisteer suffixes, such as art-article, art-block or art-nostyle. The feature works quite similarly to the standard custom module class suffix feature in default Joomla templates except for it requires the appropriate syntax.

To enable a Custom Module Suffix, please follow the steps below:

1. Define your custom .CustomSuffix1 and .CustomSuffix2 classes in template.css file.

2. Log into your Joomla Administration and go to Extensions -> Module Manager. Select the module you would like to edit and go to Advanced Options. In the Module Class Suffix parameter box type your custom class suffix with a leading space (if you enter the custom suffix without a leading space, the Artisteer css class will not be modified and your suffix will be ignored).

Basically you can use:

1. [space] CustomSuffix1 CustomSuffix2
   to obtain the block classes like:
   <div class="art-block CustomSuffix1 CustomSuffix2"> ... </div>

 

 

1. [one of Artisteer suffixes] [space] CustomSuffix1 CustomSuffix2
   to remove Artisteer block styles and apply post styles, or no style to the block. In that case the resulting block code will look like:
   <div class="art-article CustomSuffix1 CustomSuffix2"> ...
   </div> 
   
   
    
   or <div class="art-nostyle CustomSuffix1 CustomSuffix2"> ... </div> 
   
   
2. The latter case (with art-nostyle suffix) will remove all Artisteer styles and apply your CustomSuffix1 CustomSuffix2 classes/styles to the block.