Every themelet for Morph has its own specific settings needed for it to work with Morph. This guide will help you setup the Candy themelet as quickly as possible. View the Candy demo here.

Before you start

Install Configurator, Morph and the Candy themelet using Morph's unified installer.

Installing the entire Morph toolset along with sample data is a quick'n easy 4 step process. With the intuitive and easy-to-use interface you will be completely setup within a couple of minutes. The entire setup process is outlined in the Morph installation guide and the remainder of this guide is based on the assumption that you have completed this process already.

If you HAVE NOT installed the Morph toolset yet

On step 1 and 2 of the install process, you will have the option of ticking a box to publish the template and themelet. This will publish everything that is needed to finish your setup.

If you HAVE installed the Morph toolset already

If you did not select to publish the template and themelet, you will need to first make sure the Morph template and your themelet are published:

1. Publish the Morph template via the Joomla Template Manager
2. Activate the themelet via your assets tab in Configurator.

Getting from A to B

After everything is installed and published, load your website. You will now see some parts of the Candy styling showing up. It should look identical to the first (left-A) image, far from complete because all of the css is loading from the themelet but Morph has not been “Morphed” into shape yet to work with the themelets defaults.

To get your website to look like the second (right-B) image, there are 2 main steps to follow. Below you will find full instructions for each.

1. Adjust some settings for Morph using the Configurator component. This will create the required xhtml structure Candy needs to work along with the themelet.

   NOTE: This is only a current requirement and soon Morph will be able to do this all by itself and it will adapt its structure for the specific themelet during the activation process.

2. Use Joomla’s admin to adjust your Joomla content and settings to match the themelet concept and requirements. This will fix things like the broken search box you see in the first (left-A) image, as well as activate blocks of content used on the demo but initially inactive in Morph.

   NOTE: Currently the sample data installer in the Morph unified installer only installs generic sample content and not themelet specific. In a future version of Configurator you will be able to import themelet specific demo content. This will provide 1 click setup from within Configurator to get your website to look identical to the desired themelet demo.

These are the 2 main steps to get your website up and running with Candy and ready for you to modify. If you want to get your website looking more like the Candy demo, then the rest of the steps will take you through adding the content to match the demo. Lets get started…

Step 1 - Setting up Configurator defaults

The very first thing to do is get Configurator's settings to match what the themelet needs. This section covers the steps needed.

• Open and login to Configurator. Directly below the top info shelf you will see a row of tabs which control different aspects of Morph. The tab we are going to open is the one called “Building Blocks”
• In the “Building Blocks” tab, you will see another sub navigation bar with all of the building blocks. Make sure you are on the "Toolbar" block overview. You now need to enable an option called “block wrap” on each building block in Morph. Set Block Wrapping to "Yes". This adds an extra “div” to the xhtml markup that wraps around each block. Candy uses this extra “div” to create the effect where the content is centered on the page but all the backgrounds all extend the full width of the browser.
• Now make sure you apply the “block wrapping” to all of these blocks.
  • Toolbar
  • Main header
  • Sub header
  • Top menu
  • Both Outer Shelves
  • Main content
  • Footer

Step 2 - Adjust Joomla content, modules and settings

Have you noticed a big difference from the way this themelet demo looks compared to the default install? This is because the demo is using content that the default setup does not yet have. This section will cover steps you can take to get your Joomla website to look more like the demo.

Step 2.1 - Search Adjustment

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.

Step 2.2 - Setup search

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

This is how you add the search button and customize the text on the input and 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 button text and search input box, as in the image above you see “Searching for?” as on the demo.

Step 2.3 - Adding a menu to the top "toolbar" position

The Candy themelet design concept uses a sub menu at the very top right of the page.

You can use the same concept or add anything else in the "toolbar" position.

To set up your menu as in the above 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 position is set to use "slider"

Don't like the slider? you can change this using Configurator as shown on the left.

If you decide to keep the slider, you can change the text that will display in the button. Tip:strong> add a comma and a second word to add the close text, e.g. 'open,close'

Step 2.4 - Adding content to the top shelf

There are 2 main "shelves" in Morph

Step 2.5 - Adding content to the bottom shelf