Light Candy Setup Guide

Getting Started

There are 3 different approaches you can use to setup this themelet. We have separated the setup guide based on the starting point for each of these approaches.

1. Getting setup using the Morph Quick Installer

This guide will take you through the steps on how to setup the Candy themelet using our quick installer. This is the quickest way to get setup with this themelet so that it looks like the demo. After these steps are complete, you will have your own version of our demo setup to start building your website.

It's very important to take note that the quick setup must NOT be used on an existing site. We can't stress this point enough. If you use this on a existing site you will lose all of your content, menus, etc. This is intended for a new install, using our General Quick Installer only. We will not be held responsible if you ignore this warning.

Download all the necessary files:

Before you install anything, it's recommended that you download all the necessary files and put them all together in a folder on your computer for easy access later.

• General Quick Installer
• Morph
• Configurator
• Candy or Themelet of your choice
• Quick setup file (available on the themelet download page)
• Themelet assets (available on the themelet download page)
• Themelet demo images (available on the themelet download page)

Installation steps:

1. Install Joomla! using Morph's General Quick Installer

   Start off by installing Joomla using the Quick Installer. You can read full step-by-step instructions (and a video) to take you through the installation process.

2. Install Configurator, Morph and the themelet you downloaded

   Now that Joomla! is successfully installed, you can proceed with installing Morph. If this is your first time, we recommend you go through the comprehensive step-by-step tutorial (and video). Once the installation is completed, click the "Launch Configurator" link at the end.

3. Install the demo setup & themelet assets

   In Configurator, go to the Tools > Universal Installer tab. The first option to select is the "Upload Themelet Assets", select the assets file you downloaded and click "Upload and install". Once thats done, select the "Install demo content" ([themelet-name]-demo-setup.sql) install option and again, select the demo setup file you downloaded and click "Upload and install".

4. Extract and copy the demo images

   In this last step you will extract the "demo images" archive that you downloaded earlier, then move the contents of the zip to your "[joomla site root]/images/stories/" folder.

5. Voila! It really is that easy ;)

   Once you have completed the above steps, your new Joomla site should look just like the online demo. If you get stuck at any stage of these steps, don't hestitate to create a post on the forums and someone from the team will hapily assist you.

2. Getting setup using Joomla's installer and sample content

So you didn't want to use the quick installer? If you prefer to use the Joomla installer with sample content, then this is just fine, the steps are a little different. There are however a lot more manual steps to do if you want to get your website looking like the demo.

This process is very similar to the previous step which used our quick installer, however, instead of the automatic quick setup file which does all of the work for you, you have to do a lot of the steps manually.

Download all the necessary files:

Before you install anything, it's recommended that you download all the necessary files and put them all together in a folder on your computer for easy access later.

• Joomla 1.5 Installer from the Joomla website
• Morph
• Configurator
• Candy or Themelet of your choice
• Themelet assets (available on the themelet download page)
• Themelet demo images (available on the themelet download page)

Installation steps:

1. Install Joomla! using the Joomla Installer

   Start off by installing Joomla using the Joomla Installer you just downloaded from the Joomla website.

   If you are new to Joomla and have never installed it before. Please take a look at the the official Joomla installation guide and a "How To" video, which covers everything you need to know about installing Joomla

2. Install Configurator, Morph and the themelet you downloaded

   Now that Joomla! is successfully installed, you can proceed with installing Morph. If this is your first time, we recommend you go through the comprehensive step-by-step tutorial (and video). Once the installation is completed, click the "Launch Configurator" link at the end.

3. Install themelet assets

   In Configurator, go to the Tools > Universal Installer tab. The first option to select is the "Upload Themelet Assets", select the assets file you downloaded and click "Upload and install". This will upload the themelets logo, backgrounds and other assets to the assets folder.

4. Extract and copy the demo images

   This step is only needed if you are setting up your website to look identical to the demo and use the images you see in the demo (if available) on your website. In this last step you will extract the "demo images" archive that you downloaded earlier, then move the contents of the zip to your "[joomla site root]/images/stories/" folder.

5. Move onto next section: "3. Installing on an existing website"

   Once you have completed the above steps, there will still a fair amount of manual steps you need to complete for anything on the themelet demo that you want to implement on your website. The section "Installing on an existing website" covers all of the manual steps.

3. Installing on an existing website

If you are installing Candy on an existing site (or using Joomla's standard installer and not our quick installer), you will unfortunately need to go through the manual process of setting up any elements you see on the demo you want to replicate. Below are the steps needed to get your site setup section by section.

Installation steps:

Follow steps 2 - 5 above. You can skip the first step which is Installing Joomla because you already have a Joomla install if you are following this guide and want to setup on an existing Joomla website.

The remainder of this guide will show you how to manually setup the different parts of the themelet demo. This will be done by explaining how to setup each Joomla module position or Morph building block manually. Building blocks in Morph are the different sections within which the module positions load. See the morph blocks demo for more details.

Setting up the blocks manually:

Before you start with the manual setup steps, you may want to familiarize yourself with the how we have implemented the different module positions and blocks for this themelet.

Remember, although every themelet uses Morph which always has the same module positions, each themelet concept uses them differently. Its important to know that a themelet concept can vary drastically based on how the blocks are used.

This overlay image will show you a summary of which module positions are used where on the themelet demo.

Each of the blocks you see in this module map will be explained so that you can re create any of the content from the demo you wish.

Every themelet for Morph has its own specific settings needed for it to work with Morph. This guide will show you how to setup each block that is used on the Candy demo, one at a time.

[Toolbar] Block

The toolbar block is the very first block that appears under the Candy stripe and is ideal for a number of uses. It contains the {toolbar} module position. In the demo we are using a menu module to add some important quick links for the demo.

This block is unique because you can set an option to turn it into a slider, where the content is hidden at first and clicking a button will reveal the contents.

Adding a menu to the top "toolbar" position

The Candy themelet design concept uses a sub navigation for quick links at the very top right of the page.

You can do the same or add any other module in the "toolbar" position. You can us it for a newsflash, login, or member links, banners etc.

To set up your menu as in the image, all you need to do is publish a menu module to the "toolbar" position.

You may notice that the menu does not appear at first and there is a "toggle" button. Click this button and the menu will slide down. This is because in your Configurator settings, the toolbar block is set to use "slider"

Don't like the slider? You can change this using Configurator as shown on the left. Just set the "Toolbar slider" option to "No"

If you decide to keep the slider, you can change the text that will display in the button by adding the text that you want in the available textarea.

Useful Tip: add a comma and a second word to add the close text, e.g. 'open,close' - This will toggle the text on click depending on the state of the slider.

[Main Header] Block

The Main Header block is the block that contains the configurable logo and the {top} module position to the right of the logo. In the demo we are using a custom logo and a "Make friends on twitter" image with a link to our twitter profile.

Setting up your logo

Morph makes adding your own logo easier than ever and you don't even have to touch any code. You can use Configurator to upload, apply and set a wide variety of options for your website logo.

We realize that everyone has different opinions about how your logo should be outputted, so with Morph we have gone ahead and given you option to choose for yourself.

Logo Types

Linked h1 text

This outputs as a linked H1 html element as plain text. Select this option and you will be presented with more options to add the logo text, color, size, font and Tagline.

Linked h1 image replacement

This outputs as a an H1 with a link but the text is hidden and replaced with the active logo image in the below option

Linked inline image

This outputs as a link with an image inside it, no text replacement is used.

Module position (branding)

If you choose this option, you will have a {branding} module position that you can assign any module to.

Other logo settings

Once you have chosen your logo type, configure the remainder of the options, each logo type has different options. The text logo will have text options and the image logo image options etc.

Set the width and height of your logo, or let Morph work it out for you. You can set the x and y co-ordinates of your logo. This allows you to position your logo exactly where you want it inside this block.

You can even make IE6 use a different logo image which is very useful if you are using a transparent logo and want to serve a different image for modern browsers.

Uploading your own logo

You can easily upload the logo for your project using Configurators universal installer. This will install the logo to your morph_assets folder and make it available in the "Logo image" drop down option.

After which you can choose your newly uploaded logo from the drop down, configure the specific settings, save and your. Now when you load your website your own logo will now display.

Your logo is kept in a separate folder outside of the template directory in order to make sure its always kept, even when changing themelet or template.

Adding the twitter module

If you like the twitter image we are using on the demo at the top right of the logo, you can add your own simply by adding the following html to a custom Joomla module. Don't forget to add your own username.

<a title="Make friends with me on Twitter" target="_blank" href="http://twitter.com/USERNAME" id="meettweet">make friends on twitter</a>

[Top Menu] Block

The Top Menu block contains the primary horizontal navigation. This is output using the default Joomla sample content position of {user3} which means your menu will be immediately active if you used sample content. Also contained in this block to the right of the navigation is the {user4} module position which is by default the search.

Setting up your menus

There are a number of menu options to choose from depending on what you like and need for your project. You will find all the information on how to work with your menus here.

In the Candy demo, the default active menu is the topdrop menu which is a combination between a superfish and dropline menu. See the below image and instructions for how to setup the topdrop menu.

First, you need to make sure the menu you want to use is setup with child items as you see in the diagram.

Secondly, you need to open the menu module that is assigned to the {user3} module position in Joomla.

Menu Options

These are the available Top menu options in Morph and that you can choose from.

• Default (standard joomla)
• Topfish (superfish)
• Topdrop (dropline & superfish combined)
• Split menu
• Subtext on parent and child items.

Setting up your search

In the image above, you will notice that the search box breaks under the main navigation. To fix the menu and search breaking, you need to unpublish a few menu items from the “main menu” in the Joomla menu manager.

Configure search module

If you look at the Candy demo, you will see there is a search button on the search module. By default, Joomla's search module has the button turned off so if you want to use it then you will have to enable it.

This is what you need to do to add the search button and customize the text of the input box as well as the button.

Do you want to use a button on the search, like on the demo? Open the search module published to {user4} and set the “Search button” to “Yes”.

You can also add your own custom text for the button and search input box, as you see in the image above we have added “Searching for?” you can add whatever you like.

[Sub Header] Block

The Sub Header block is positioned directly below the Top Menu block and contains the {subhead} module position. This position is used in Candy to output the current page's title, using a clever module called the "Simple Title" module. You can of course use this block for anything you want, but we will show you how to set it up as you see on this demo.

The Simple Title module

This module will build a title for your page and output it to your page wherever you have it published. Very simple and allows you to easily and automatically, have relevant text displayed depending on which page you are on.

You can download the simple title module from the downloads section in the club.

The text that is output is dependent on how you create your menu item in Joomla. Here is how it works

• If you create a menu link to an article, it will use the name of the article.
• If you link to a category it will use the category name
• If you link to a section it will use the section name

You can manually override the title for any page by adding a page title where you create the menu link. See the image of an example of this setting in the Joomla admin.

[Top Shelf] Block

The Top Shelf block is positioned directly below the Sub Header block and contains the {topshelf} module position. This position is used in Candy to add a promotional area to the home page with text and 2 buttons on the left and a preview image on the right.

NOTE: Module positions within blocks in Morph can be used in a many different ways, this Top Shelf and Bottom Shelf show 2 different ways a similar type of block can be used. They can be used in a very raw format where the content of the module is output into a single div or, change it to a Grid for multiple modules, tabs, accordion etc

As usual this block can be used for anything you want but here we are going to show you how we use it in Candy. For the purpose of this demo, all we needed to do was add some xhtml to the topshelf position that we could style with CSS. So what we did is output the xhtml we needed in the top shelf using Joomla's built in "custom html module".

The best way to do this is to set the Module Chrome for this block to "None" as you see in the image on the left. This is because we are only loading 1 module in its raw format and we are not going to add any extra suffixes to the module.

The "None" chrome option will not load any additional xhtml around the module contents whatsoever. This is a good option to use when you are only loading a single module in a particular position

You can of course choose any one of the Chrome options depending on how you want to use the shelf area. See how we implemented the Bottom Shelf where we used multiple modules to get a different idea of use

As you see in the above image. the options of each block will change depending on the chrome type you choose from. Change from "None" to "Grid" and you will see a vastly different set of options. The purpose of grids is when you are using multiple modules in a single position and want them besides each other as you see in the next step when we configure the Bottom Shelf.

Now that you have the topshelf chrome set to none, lets add the xhtml to our custom Joomla module so it looks the same as on the demo.

<div class="yui-gc home-top-featured">
    <div class="yui-u first"><h3>clean <span>&</span> crisp designs</h3>
<p>welcome to the demo for Candy - a themelet based on the Morph framework for your Joomla website.</p>
<p class="buttons"><a href="/morph/livedocs/index.php/component/content/132" title="See all features in Morph and Candy">Features</a> <a href="/morph/livedocs/index.php/component/content/117" title="Read the setup guide for Morph and the Candy themelet">Guides</a></p></div>
     <div class="yui-u">
<p class="brand-new">Brand New Morph Framework</p></div>
</div>

Then add the following CSS to your custom.css file or from the Configurator file editor.

.yui-gc.home-top-featured .yui-u.first {
width:61%;
}

.home-top-featured {
padding: 1.5em 0 3em;
position: relative;
}

.home-top-featured h3 {
	font-family: georgia;
	font-size: 4.4em;
	padding: 0;
	margin: 0 0 0.2em 0;
	color: #444;
}

.home-top-featured p {
	font-family: georgia;
	font-size: 23px;
	color: #888;
}

.home-top-featured h3 span {
	color: #D41277;
	font-weight: bold;
	font-size: 1.2em;
}

.home-top-featured p.buttons a {
background:#EEEEEE url(../../../../morph_assets/themelets/light-candy/images/repeat-sprite.jpg) repeat-x scroll 0 -235px;
	border:1px solid #CCCCCC;
	color:#333333;
	float:left;
	font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,arial,sans-serif;
	font-size:1em;
	font-weight:300;
	margin:0 1em 0 0;
	padding:0.05em 1.5em 0.2em;
}

.home-top-featured p.brand-new {
background:transparent url(../../../../morph_assets/themelets/light-candy/images/brandnew.png) no-repeat scroll 0 0;
font-size:1em;
height:0;
overflow:hidden;
padding-top:381px;
position:absolute;
right:-62px;
text-indent:-2000px;
top:45px;
width:455px;
z-index:0;
}

Add a page class suffix for browser reflection

As you will see on home page header on the Candy demo, the browser Chrome image has a reflection. This reflection by default will overlay the content below it, so we need to make more space for the reflection.

We do this by adding a "page class suffix" which creates a hook which we can use with css to apply the extra margin we need. See from the below image, whatever we add as a suffix here will be output as a class on the "<body>" element of your Morph powered site.

Once you have added this class to your home page menu item, you can target it with css like so.

body.home #bd-wrap{padding:8em 0;}

[Bottom Shelf] Block

The Bottom Shelf block is positioned directly above the footer block and contains the {bottomshelf} module position. This position is ideal for adding information that is relevant to the footer area, such as links to other network sites, accreditations, terms, testimonials etc. In Candy we have used it to add 4 modules beside each other, 3 sets of quick links and a Buzz module.

Module positions in Morph can be used in a many different ways, this Bottom Shelf and Top Shelf show 2 different ways a similar type of block can be used. They can be used in a very raw format where the content of the module is output into a single div or, change it to a grid for multiple modules, tabs, accordion etc

Bottom Shelf block settings

To get the Bottom Shelf to look like the Candy design, we needed to set the chrome type to a Grid, this will allow us to set multiple modules to the {bottomshelf} module position and they will align beside one another in a column format.

The "Grid" chrome option will load an intelligent grid that will automatically calculate the space that each module should use depending on how many modules are loading.

Make sure your chrome option is set to Grid. This will then be ready for multiple modules and allow you to use ModuleFX to apply styles/effects to the module.

Make sure that the "Module inner wrap" is set to "Wrap content only"

At first you will notice that your modules have the same styling as your side bar modules (this is the default style). The Candy design concept uses more plain and clean style modules with no borders or backgrounds for this block (*see the image at the top of this page). You can remove borders and backgrounds by adding a "default module style"of "strip-borders strip-bg" to the default module input box. This is indicated in the image above and it will change all modules in this position to use a more plain style.

The above example shows one of the uses of a feature in Morph called ModuleFX which allows you to easily add different effects to your modules to change their appearance. You can change the font color, size, as well as background colors and background images to both the module header and body. See all suffixes available for Candy

Using suffixes to change the Module header style

You will notice that the module headers text in this Bottom Shelf are using a different color for each word. All of the letters are also capitalized. You can achieve all of these modifications by using ModuleFX as we did in Step3 above to strip the borders and backgrounds.

You can easily add the same style to any of your modules, however we are only using it in this block for the Candy concept.

Add the title to your module using the format of "FirstWord | SecondWord" and Morph will give each word either side of the pipe "|" a different color. You can easily without any knowledge of code edit the color of this text by adding another suffix of h3color03 for example. Also try changing the "04" to "05" or "06" etc and see the different options"

Change the font case to make all letters in the module header to be "uppercase" by adding the suffix of h3case03 to all of the modules in the bottomshelf position as you see pointed out in the image above.

Useful Tip:The above example shows how to add the suffix to each module, but even easier as you see in the first example, you can add a "default module style" to a module position using Configurator. This will make each module in that block uses the default style without you having to open each module and manually add it.

You can easily add one suffix string to strip the borders, capitalize the text and change the text color to the default style in Configurator for this block.

Combine both above examples into one suffix string like: strip-borders strip-bg h3case03 h3color03. Now you dont have to add the suffixes to each module anymore, just once here in Configurator.

[Footer] Block

The Footer block is positioned directly below the Footer Shelf block and is easily customized using Configurator. It also contains the {footer} module position that can be used instead of the default footer Configuration. This position is intended to be used as you main website footer with the important links to terms, etc.

There are 2 ways to modify your footer using Configurator, the below image shows both ways, the options will differ depending on which "Footer type" you choose.

Copyright, credits and links: See the image for the variety of options to setup and change the footer text, you can even change the font color. The links can be added by using a menu module in Joomla, just publish any menu module linking to a menu to the {footernav} module position.

Module position: selecting this option will change this entire block into the {footernav} module position. Now just like all other positions in Morph, you can select the chrome and add nearly anything you want, from a banner module to even having tabs in your footer if you like.