Installing and Using Joomla Template Created with Artisteer

Transcription

1 1 von :21 Home Overview Demo Screenshots Samples Download Purchase Forums News Docs & FAQ Articles Testimonials Support Contact Us Affiliates Documentation > Joomla Installing and Using Joomla Template Created with Artisteer Installing Joomla Template Joomla Positions Adding Modules to Header Headline and Slogan Text Utilizing Menus Applying Artisteer Style To Your Menu Creating Multilevel Menu Creating Vertical Menu Creating Vertical Menu with Separators Customizing the Footer Joomla Module Style Installing Joomla Template To install an exported and zipped template via the Joomla administration panel please do the following: 1. Go to Joomla Administrator ( -> Extensions -> Install/Uninstall 2. In the "Extension Manager" choose the first option "Upload Package File". 3. Click the "Browse..." button to select the zip file from your computer. 4. Click the "Upload File & Install" button. For more information please visit NOTE:If the name of a template you would like to install already exists, you should rename or delete the existing template before installing a new template with identical name. Such procedure is typical for Joomla. An old template cannot be replaced automatically with the new template with the same name. 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.

2 2 von :21 Starting from Artisteer 3.1 for Joomla templates you can choose to use one of the following position naming options: "position-1, position-2 " for new Joomla position naming like in the default Beez2 template "left, right, top, bottom" for Joomla 1.5-like position naming (for compatibility purposes)

3 3 von :21 If you would like to upgrade the existing website from Joomla 1.5 to Joomla 1.6, 1.7 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 from 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. 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 ( -> 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 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 -> Subitem -> Levels -> Multilevel. 2. Go to Joomla Administration ( and enable multiple levels in your menu module (Extentions -> Module Manager v click to edit menu (e.g. Top Menu) -> Module Parameters -> "Always 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.

4 4 von :21 2. Go to Advanced Parameters (Advanced Options in Joomla 1.7) 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: Enable Multiple menu levels in Artisteer > Vertical Menu tab -> Subitems -> Levels. Make sure that the sample Vertical Subitem works for you within the template previewed in Artisteer. Create a menu with sub-menu items in Joomla. Sub-menu items should have parent items specified for them. Enable multiple levels in your menu module ("Always show sub-menu Items"). 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 -> Open by 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, press Change Type and save it as a separator. 3. Open the item, which is to be placed inside the separator, and select the separator as its

5 5 von :21 parent item. Customizing the Footer To customize the template footer via Joomla administration place one or multiple modules into the "copyright" position. This will replace the default copyright text included in the template footer with the new content provided by the module. Here are sample steps to configure custom footer: 1. Go to Joomla Administrator ( -> Extensions -> Module Manager. 2. Click "New", select "Custom HTML", then select "Next". 3. In the module properties specify: 4. Save your changes. Title - Show Title: No Position: copyright Custom Output: (the desired footer content) 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 Module Parameters. 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> 2. [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>

6 6 von :21 or <div class="art-nostyle CustomSuffix1 CustomSuffix2">... </div> The latter case (with art-nostyle suffix) will remove all Artisteer styles and apply your CustomSuffix1 CustomSuffix2 classes/styles to the block. Artisteer is not affiliated with or endorsed by Joomla! or Drupal or WordPress Projects. Copyright by Extensoft, Inc. Like 5,033 people like this Recommend this Tweet 2,199