Controlling Module layouts

The  general widths  and layouts of the module positions are controlled under the main layout tab and the sub items in the template administrator. The Zen grid template is split up into 12 rows of module positions with up to 4 modules per each row. 

There are five settings that are available on most of the parameter settings that relate to controlling the layout. The first option is to equalize all of the module widths for that row.  So if that option is enabled it means that the subsequent options within that section are no longer relevant,  as the widths for each of the modules in that row are determined by a percentage based on the number of modules that are published to that row on that page.   in other words the template  displays the modules evenly spaced across the entire row.

If on the other hand the option to equalize the module positions is set to no, then the widths below come in to play. The widths in the drop-down menu relate to the number of columns that each module will  be displayed in and the number of columns available in a row depends on the setting for the number of columns that you set in the general layout settings.  For example if you set the number of columns to 12 in the general layout settings section,   then  the widths in the four options need to all add up to 12.

However if you only intend on publishing one module to the top row for instance, then you can set the width of that one module to  the number of columns  you require with the greatest number of available being 12.

This layout configuration is true for the top row of modules, the header row of modules, the six rows of grid modules and bottom modules. For help on laying out the modules and widths of the main content area please view the main content layout article.

General Layout Options

As mentioned above the framework is based on a grid system that evenly divides the site width into a 12 column or 16 column grid. The widths and dimensions of the grid are all configurable and are controlled by the settings you see below and in the rest of this section.

Equalise all module widths

The general width and layout elements for the entire theme are controlled in the first group of parameters. There are basically two tracks that you can follow here:

• You can let the template calculate the widths of each module position and spread them out across the page accordingly. Please note that this option does not control the widths and layout for the main center colomn.
• Or you can set the width of each module position on the page.

Options

Main Container Alignment

This option allows you to control the general alignment of the website container. Select between left, center and right alignment.

Options

Left or right offset

If you have looked through our back catalogue you probably will have noticed that we are quite fond of left aligned website layouts. Sometimes a design or site lends itself to being left of center so we have put some functionality into the framework to help you to select a left or ight aligned layout.

The left or right offset is the pixel distance from the edge of the browser window you want the main container to sit if you have chosen left or right as the alignment option above. If however you would prefer the layout to be centered then theres no need to touch this option as centered is set to default.

Number of columns, gutter width and template width

This setting determines the number of columns the entire site container area (minus the gutter width) is divided into. The number of columns, the gutter width and the template width in the next two inputboxes provide the basis for the layout for the rest of the layout settings.

The template takes the template width and calculates the space to allow for each "column" on the site based on your gutter width and the number of columns you divide your site into.

For example: if you have a template width of 960px, a gutter width of 20px and 12 columns specified then a single column width will be around 58px. In doing the calculations we only count 11 gutter widths since the last column doesnt have a gutter and we also remove the side gutter widths from the overall template width.

If you are using the advanced width options, once those settings have been set its just a matter of specifying the ratio of widths you require for each module within a group of modules. As an example, the number of columns you specify for the top row of modules needs to equal 12 (if you choose the 12 column layout) or 16 if you choose the 16 column layout. So if you only have three out of the four modules published to any of the top1, top2, top3 or top4 modules then they still need to add up to 12 (12 column mode) or 16 (16 column mode).

Please note that in the Woodflower theme the columns for the maincontent layout need to add upto 11 and 15 when the right column has modules published to it.

The template calculates the width required and automatically floats the modules so that they sit nicely next to each other. The first three modules in any row float to the left while the fourth module floats to the right. This means that if you are using less than the four modules in any row at any time to achieve full symmetry you must always have the last module in the row published. For example if you are publishing three modules to the first grid row you must publish two of the first three modules (ie grid1, grid2 or grid3) plus the fourth module (ie grid4).

Options

Module layout

Top row of modules

The image below displays the options available for the row of modules that include the top1, top2, top3 and top4 module positions.

The first drop down menu determines the way you want to control the widths of these module positions. There are two options:

• Use individual module position widths below
• Equalise width according to number of modules published

If you select the equalise width option then you dont need to set any of the ratios below as the template will automatically recalculate the widths required to create an even spread across the row. This setting is dynamic and takes into account the number of modules published per page.

If however you select the "individual module position widths option" then you need to make sure that the widths total no more than column width you have set at the top of the parameters eg 12 or 16.

Logo and Navigation Row

The logo and navigation row settings control the position of the logo, as well as the width of the logo, header1, header2, header3, header4 and menu module positions.

The position of the logo refers to whether it appears on the row with the header1 to header4 positions or whether it sits on the same row as the menu.

If you choose to position the logo on the same row as the header modules then the logo takes the position of header one, and the remaining modules on that row header2, header3, header4. also if you choose to let the template calculate the width of each of those modules the template will count the logo position as one module but it will not set the width for the logo position. The logo position width is set in the parameters below. If you choose to use the manual option of setting the width of the logo and header module positions then you need to make sure that the widths for the logo, header2, header3, and header4 all at up to the total number of columns you have set above.

If the logo is positioned on the same row as the navigation then the widths of the inset and search positions are calculated and then menu and logo widths are calculated according to the widths you specify below.

Here is a screenshot of the options available for controlling the logo, menu, inset and search layout.

Top 3 rows of the grid - Grid1 to Grid 12

The following screenshot shows the width options available for the first three rows of the grid modules. Row 1 includes grid1 to grid4, row 2 includes grid5 to grid8 and row 3 includes grid9 to grid12. You have the option of having the modules evenly spaced or you can specify individual widths for each of the module positions.

Top Advert Positions - Advert1, Advert2, Advert3

The following settings control the widths of the advert1, advert2 and advert3 positions. This group is actually a little different to the others and the total of the width ratios should not add up to the column number (eg 12 or 16) but should equal the number of columns assigned to the main content column. The width of the main content column depends on the width assigned in the various layout options below.

Main Content Area layouts

The following settings control the layout options for the main content area. These settings relate to the following module positions: left, center, right, advert1, advert2, advert3, advert4, advert5, advert6.

Please note that in the Woodflower theme the columns for the maincontent layout need to add up to 11 and 15 when the right column has modules published to it.

Center Module position

The center module position controls the order of the four main columns available in the main content area. In addition to the left, main content/component and right columns we have add a center module that can be placed either before or after the main content area.

Center column appearing before the main content

Center column appearing after the main content

The options shown in the screenshot below highlight the two options that are available.

Left Column Mode - Left + Main Content

Options

Right Column Mode - Main Content + Right

Options

Three Column Mode - Left + Main Content + Right

Options

Four Column Mode - Left + Center + Main Content + Right

Options

Three Column Mode - Main Content + Center + Right

Options

Bottom Advert Rows - Advert 4, Advert5, Advert6

The following settings control the widths of the advert4, advert5 and advert6 positions. This group is actually a little different to the others and the total of the width ratios should not add up to the column number (eg 12 or 16) but should equal the number of columns assigned to the main content column. The width of the main content column depends on the width assigned in the various layout options below.

Options

Bottom Three Rows of the Grid - Grid13 to Grid24

Options

Bottom Modules - Bottom1, Bottom2, Bottom3, Bottom4

Options

How to install a Joomla module???

The folllowing tutorial will give you a step by step process to follow for installing any Joomla module via the Joomla installer.

•  Navigate to your Joomla admin area at yoursite.com/administrator 
• Navigate to Extensions > Install/uninstall 
• Click browse and locate the extension zip on your hard drive. 
• If the zip is named unzipfirst then you must unzip the files. 
• Click upload and install. 
• After you receive the success message, navigate to Extensions > Module Manager 
• Select the radio checkbox next to the module you just installed and begin to configure the options. 
• Ensure that the module is published, is assigned to a menu item on the bottom left and all of the necessary parameters are configured. 
• Apply or save the changes you have made.

Creating Joomla Templates with Artisteer

With Artisteer you can instantly design your own unique Joomla templates without technical skills or learning Dreamweaver, Photoshop, HTML or CSS. Artisteer's "Ideas" feature automatically produces and proposes new and unique template designs for you, which you can then adjust and finalize to your liking.

Here is how to create and apply great looking Joomla!™ templates in just a few minutes using our joomla template generator:

1. Start Artisteer and click the "Suggest Design" button several times, until you see a Joomla!™ template idea that you like:


2. Adjust design elements such as layout, background, header, fonts, etc.
   
3. Export your template to a folder on your computer and zip the files.
   
4. In Artisteer 4 you can export content to your Joomla!™ template as well. To do this, enable "Include Content" before exporting the template.
   
5. Upload your newly created Joomla!™ template to your Website via the Joomla!™ Administration -> Extensions -> Extension Manager.
   

Congratulations on your great looking Joomla!™ template!
For more information refer to How To Use Joomla Templates.

Download Free Artisteer Trial

Installing and Using Joomla Template

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



3. 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 beforemy-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. 

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.




3. 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.




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




4. 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. 

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>




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>
   
   
   
   or <div class="art-nostyle CustomSuffix1 CustomSuffix2"> ... </div>
   
3. The latter case (with art-nostyle suffix) will remove all Artisteer styles and apply your CustomSuffix1 CustomSuffix2 classes/styles to the block.