Mocha - JoomlaJunkie

Mocha

To make sure your template is setup correctly, please make sure you read through the template guide thoroughly. We have made the template as customizable as possible and all our css is fully commented.

We have changed how our templates are packaged.

Step 1.) Before You Start

You no longer need to extract our template files. We now separate our templates from our modules from our source files so if you downloaded the template, all you need to do is go to step 2. However if you downloaded source files to edit the template you will have to extract it still. To uncompress a .zip file you will need to extract the zip archive to your local computer using a free archive utility like 7zip (PC) or MacZip (Mac), extract the contents of the zip onto your computer in a location you can find.

Step 2.) Installing the Template

Now go to "Installers > Template Site"
Browse for the template zip file in the Template folder.
Click "Upload File and Install".
Click "Continue..."
In the Template Manager, select the new template's radio box and click on the "Default" button (top right).

The template will now be successfully installed, so you can proceed to the the next step..

Step 3.) Setting up your modules

3.1) Mocha's module positions

Below are all the module positions available in Mocha. Intelli Modules are highlighted in red.

Print this image out for a quick reference.

3.2) Menus

Quick Links menu

We have set the template up in a way that this should work out of the box. In case you have moved any of your modules around, the topmenu module needs to be assigned to the User3 module position, set to flatlist with a suffix of "-nav".

Sidebar Menu

To get your sidebar menu displaying the same as on the demo site all you need to do is set the main menu module to a "flat list". You can also leave it set to "Vertical" (which will also allow you have submenu items as in the demo), but keep in mind the vertical output is using tables, which is not good for SEO (with a menu).

Footer Menu

We are using the "Other Menu" module to act as the footer navigation, as there isn't a footer menu by default in Joomla!. All you need for this to work properly, is open the "Other Menu" module and set the menu class suffix to " -footer", choose Menu Type: "Flatlist" and assign it to the "Footer" module positon.

Primary Navigation (Superfish)

This too should work out of the box. Later on in this guide we will go over setting up your child menu items (drop downs).

3.3) Mix and Match Module Suffixes - modFX

modFX suffes apply only to the modules published in left or right sidebar. ALL Suffixes need to have a prefix of -sfx and then the suffix name, example "-sfx h3brown"

This template gives you the ability to combine module suffixes, or what we call modFX. You can set multiple styles for the module header and module background to create different effects. This template has tons of module header and background styles. Please see the template demo snapshot page for how each of these styles look.

You can see all of the module suffixes in action on our templates snapshot demo page. We have also recently built a tool to help you create your module class suffixes. Use the modFX Builder to generate the correct suffix for the module that you need.

Here is a summary of the styles:

16 Icon Styles - icon-01 ... icon-16
8 Module Header Styles: h3style-01 ... h3style-08
9 Module Background Styles: bgstyle-01 ... bgstyle-09

So how do you use them? Well lets say you want a module that stands out from the rest, you would set the module class suffix field to -sfx h3style-03 bgstyle-03 icon-12. This adds a module with a soft top and bottom gradient background color and a star icon to the top of the modules header. Mix and match the suffixes to achieve exactly the look and feel you want.

Use the module suffix of "-sfx nopadding" to remove all styling from the module. This is useful when you do not want any colors or headers for one module.

Step 4.) Configuring your template

Configuration of this template using Joomla 1.5 is very easy. All the configuration paramters are available in the backend of your site. No need to FTP or deal with any remote files!

Administrator->Extensions->Template Manager-> Mocha

4.10) The Template Parameters:

Top Navigation

Menu Name

Allows you to select which of joomla's default menus you want to publish at the top. This menu will be published as a superfish dropdown menu.

Sidebar Navigation

Enable Accordion Menu (Sidebar Navigation)

If you wish to use the accordion menu bundled into the module, enable this option by selecting Yes. Then publish the module as directed in section 4.3 below.

Accordion opens on:

If you choose to use the accordion menu, you can select how it behaves by selecting between the Hover and Click options. Open on click will open the accordion menu when a user clicks the separator, while the Open on hover option will open the accordion menu when a user hovers their mouse over the menu separator.

Sidebar Animation

Mocha has an animated sidebar menu that can be enabled or disabled using this option.

Tabs

Tabs Position

This allows you to select where you would like the tabs to be published, you can choose to have the tabs published above or below the content.

Tabs Animation

Using this option, you can specify what sort of animation effect will be displayed when switching between tabs. Choose between the following:

None - No animation
Height - This will toggle the height of the tab before switching over to the next tab.
Opacity - This will toggle the opacity of the tab before switching over to the next tab.
Height and Opacity - This will toggle both height and opacity before switching over to the next tab.

Tab 1 Title - Tab 5 Title

Here you can set the title of each tab.

Tab Text Color

Set text color for tabs.

Tab off style

Choose a style effect for the normal tab state.

Tab hover style

Choose a style effect for the tab hover state.

Tab off bg color

This allows you to specify what color you would like the tab's active and main content area color to be. Amen for flexibility!

Footer and Credits

Credits

Here you can add your own credits.

Hide Valid XHTML / CSS / RSS Link?

Allows you to hide or display the valid xhtml, css and the rss feed link located at the bottom of the template.

Pathway Caption (Other Parameters)

This bit of text preceeds the pathway (breadcrumbs). e.g. "You are here: " If you do not want any text, then simply leave the textbox below blank.

Other Parameters

Use Gzip

This option allows you to turn on or off the use of gzip css compression to speed up loading of your template.

Equal Heights (Other Parameters)

Allows you to use equal heights for your columns.

Disable Mootools (Other Parameters)

This setting allows you to disable loading the mootools.js and captions.js javascript libraries files on the frontend in an effort to further increase performance of your template.

4.20) Configurable sidebars:

To make these slightly more advanced changes you will have to login to your site via FTP and edit the index.php file located in the template directory. You can find the relevant code starting around line 60.

This allows you to change your sites layout, depending on the content that your users are viewing. "Content" is the main content area and "sidebar" is the sidebar. If you set the configuration to "content-sidebar" then this will show the content on the left and sidebar on the right, where as "sidebar-content" shows sidebar and then content. If you only set "content, then no sidebar will show" This can be set on a per component basis, so you can have a configuration for Fireboard as shown above to use the full width and no sidebar.

It is important to note that the "com_frontpage" is the layout for your home page as Joomla handles this as a component and the rest of the pages use "com_content". If you want the home page to have the sidebar on the left and not the right then change this from 'com_frontpage'=> 'content-sidebar' to 'com_frontpage'=> sidebar-content'

// Default layout (content
    'default' => 'sidebar-content',
    // Specify extra options for different components
    // If you dont write content or sidebar - these positions wont be published
    // left-right-content | right-left-content | content-right-left | content-left-right
    // left-content-right | right-content-left
    // right-content | content-left | left-content | content-right
    'com_frontpage' => 'content',
    'com_wrapper'=> 'content',
    'com_fireboard'=> 'content',
    'com_content'=> 'sidebar-content',
    'com_newsfeeds'=> 'content-sidebar',

4.30) Accordion Menu

You will notice an accordion menu on the left sidebar of the mocha demo: we have included a nifty accordion menu built into the template . This is not a module or a mambot and nothing needs to be installed and configured. To implement it, we are using jQuery to apply the hooks we need and the effects to the standard Joomla menu. This is only available for Joomla 1.5 due to the improvements in the menu output in 1.5 which we are using as the base of this feature.

All you have to do to get it working is:

First set the Always show sub-menu items option to Yes .
Make sure the menu is set to List.
Then add a separator in the relevant menu manager. The separator will act as the anchor for the sub links (only 1 level).

Now all you have to do is add the sub items within the separator item and stand back in awe as you see the nifty sub items slide down when the separator is clicked.

It is also possible to change this so it works on hover, simply by changing the parameters on the admin backend.

Lastly, this is completely configurable. If you don’t want to use it, just turn it off in the template options and it will load as a normal menu.

4.40) Header Images

The full source files that are used to create the header are available in our template club for free download to all club members. If you are feeling a little creative then play a with the source files to modify the effect or make your own effect.

Step 5.) Useful tips

5.1) TIP: Setting up your menu's drop down (child) items.

The built in Superfish menu brings in the Joomla "Main Menu" by default.

In the Menu Manager, you will notice by default the "Main Menu" does not have any child items assign. All top level menu items will be displayed as the primary "tabs", then any child menu items will automatically be displayed as the drop down options when you hover over the top "tabs". To setup the child items for a particular tab do the following:

In your Joomla Admin area, from the top menu, navigate to Menu > Main Menu (or which ever menu you chose to use in the previous step).
The menu manager will list all the menu items that are set in any of the particular menus. All the top level menu items are displayed flush against the side in the list and all child menu items are indented from the parent menu item. This may sound overly complicated, but once you see the structure it will instantly make sense which menu items are parent menu items and which are the "children".
To assign a child menu item, first create a new menu item as usual, then in the options for that menu item, select which of the existing menu items you would like to be the parent. Again you will notice in the menu's options, the existing menu items that you can choose from are also structured in a hierarchical way, so it will be easy to see which is the parent and which is the child.

5.2) TIP: Changing the logo

The logo image for mocha is located in the template's images folder and is called logotp.gif. To modify the logo, simply change the path to your own logo file at the top of the structure.css file (around line 12).

/* LOGO image on H1 tag: */
#jjTop h1 a {
    background: transparent url(../images/logotp.gif) no-repeat;
    width: 187px;height: 65px;
    padding: 0;margin: 15px 0 0 8px;
    text-indent: -7887px;
    display: block;float: left;}
/* end logo image */

5.3) TIP: How do I enable the right column / right modules?

Mocha is a two column template, and as such has either a "sidebar-content" or "content-sidebar" configuration. The sidebar position in this case refers to Joomla's left module position. If you need more flexibility on how your content is displayed on the various components you have on your website, you can add your own configurable sidebar scheme by editing the index.php file (around line 55). See section 4.10 above for more information on how configurable sidebars are setup.

5.4) TIP: Setting the "Blog" View Contents to display as 1 column not 2.

By default, when linking to category or section of content items, Joomla sets the "blog view" to display in 2 columns. If you would like to change this so that they display one underneath the other, simply open up the menu link for that category/section and from the right hand side "parameters" options, set the options as follows:

Leading: 1
Intro: 0
Columns: 1 (this is the important part)

5.5) TIP: Setting up the News ticker like in the demo

To set the news ticker at the top of your template, download the simple newsticker module - a free extension for JoomlaJunkie club members only. This is a very tiny yet effective news ticker module that fades it's contents. This allows you to have one line of news, like a teaser, that links back to the main content. You can configure how fast it fades in and out, as well as what it links to. Check it out on the very top of the Mocha demo on the left. Once installed and configured, publish this module in the Toolbar position for it to be visible in the frontend of your site.

5.6) TIP: Getting TinyMCE Editor to display properly.

One of the most frequent questions we get asked is how to get the default Joomla editor to display properly when editing content. The problem that occurs with the way the editor works. By default, it will automatically pull the styling from the published template, which means if there is a background color or graphic set on the templates frontend, this will be used as the editors background. This makes editing content really difficult. To get this to display a normal white background all you need to do is login to your Joomla! admin, go to the Mambots Manager, click on the "TinyMCE WYSIWYG Editor" to edit its properties. From the modules parameters on the right, make sure that "Template CSS classes" is set to No. This will then revert the editor to use its own default styling, giving you a nice white background to edit your content in.

5.7) TIP: Displaying the slider in the header like the demo.

On the demo of Mocha you will notice we have a large area in the header that displays sliding images. This is achieved using the SuperSlider module that is available for free for JoomlaJunkie club members. You can download the superslider module by logging into the club downloads section. To read more about the superslider module and how to set it up on your joomla website, consult the documentation for this module. Once you have installed and configured the module, publish it in the User1 position for it to be visible in the header.

If you would like to display a static image for all the pages on your site that does not slide, simply create a custom module and insert your image. Then publish it to the User1 position.

The images that we used are also not available for us to re-distribute and used for demonstration purposes only. There are hundreds of different websites online to find stock photography for your projects. A good place to start would be iStockphoto. When using a large image in this module position, be sure to set the module suffix to "-sfx nopadding", as this will eliminate the whitespace around it.

5.8) TIP: Mocha font.

The font being used on Mocha for the logo is called "Fertigo Pro" and is available as a free download from exljbris Font Foundry. We cant package it with Mocha, but we will provide you with the link to find it. The font is not available for us to re-distribute and used for demonstration purposes only.

5.9) TIP: Everything looks terrible and un-styled.

If you install your template and find it looks un-styled and all the text is on the left in a column, it is possible your webhost may not support some of the advanced compression techniques we use. To remedy this simply turn off "gzip compression" in the templates configuration in your Joomla backend.