Creativa Setup Guide

This guide will take you through the steps on how to setup the Creativa themelet.

Getting setup with the demo content

This is the quickest way to get setup with Creativa, but its important to mention that the quick setup must not be used on an existing site. I can't stress that 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, its 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
• 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 overview:

1. Install Joomla! using Morph's General Guick 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 "Lauch 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" 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/blog/" 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.

Getting setup - the manual way

If you are installing Creativa on an existing site, you will unfortunately need to go through the manual process of setting everything up. Below are the steps needed to get your site setup.

Toolbar menu setup

The top toolbar menu is published to the "toolbar" module position. If you are using the General Quick Installer, there isn't anything you'll need to do, as its set to work out the box, but the only other thing you'll need to check is that the menu type is set to "list". Other than that, the rest of the styling and positioning is handled via the themelet.

The login, register, reset & remind links that open in the lightbox on the demo are all set in the [themeletpath]/js/themelet.js file. These are set using the menu item id classes, so if you are creating the menu from scratch, you will most likely need to adjust the javascript with your new menu classes.

Top menu setup

The top menu is published to the "top" module position & works as a split menu. We will be adding in support for the other menu's, but for now the only one that will work is the split menu.

Remove the preset module suffixes on the menu module parameters

If you are using the Quick Installer (without having run the Quick Demo Setup file), you will need to manaully remove the two module suffixes that are set on main menu module by default, ie: "topfish subtext".

Displaying an alternate menu when you members are logged in

The Quick Installer comes already setup using the awesome Advanced Modules extension. This is one of the most valuable extensions you can run on your site, as it takes Joomla's standard module management capabilities & adds on a layer giving you unparalleled flexibility. Things like only including or excluding a module on any given page, component, user level, etc etc. We will be writing a whole series of tutorials on how you can best take advantage of this extension, but in the mean time we'll just cover how its used in Creativa. Please note that this only applies if you are using the demo quick setup version of Creativa.

You will notice that there is an additional menu that has been created and published to the top module position. The second menu is intended for your logged in users & using the Advanced Module Manager, we have set the one menu to display to all public (not logged in) users & the second to display to all your logged in members. The same applies to the top "toolbar" menu. Feel free to customize these menus to your needs.

Menu's at a glance:

• Main menu

  This is the top menu that is displayed when a user is not logged in.

• Member menu

  This is the top menu that is displayed to all your logged in users.

• Toolbar menu

  This is the utility menu displayed to your logged in users. By default it includes the login, register, reset & remind links.

• Logged in toolbar menu

  This is the utility menu displayed to your logged in users. This can include links to account information, etc.

Subhead block setup

The subhead block is made up a custom html module, published only to the home page (see the code used below) and the SimpleTitle module published to all other pages. The SimpleTitle module works off the page title set in the Parameters > System tab set when editing a menu item.

Home page welcome header code example:

Below is an example of the code used for the home page welcome header. Notice the id's used on the links, as they are important that you keep these if you want the login & register links to open in the lightbox. Notice also the classes set on each of the links, to enable the primary & secondary button styles.

<div class="welcome-msg">
<h2>Creative resources for the design community.</h2>
<p>This is a demo of Creativa, a themelet for the Morph Template Framework. The overall theme is around a community site and thus has integrations with a number of leading Joomla extensions. See the integrations page for more information. <span class="maskot"> </span></p>
<ul class="buttons">
<li><a href="#" id="userRegister" class="btn primary"><span>Create an account</span></a></li>
<li><a href="#" id="userLogin" class="btn secondary"><span>Existing members login</span></a></li>
</ul>
</div>

Getting the call to action button to look like the demo

The demo version has this already setup, but if you are setting your site up manually, you find that the call-to-action button in the subhead does not look like the demo. The reason for this is you need to manually set the bullet proof button classes in the SimpleTitle modules parameters. Firstly, make sure you have v1.02 or up of the SimpleTitle module, which includes the option to set a custom class on the call-to-action link. Make sure the "Link class option is set to "call2action btn primary". You can read more about the bullet proof buttons below.

Top Shelf Setup

The top shelf is set to the grid module chrome (see the Configurator block settings below) and makes use of the custom module heading icons. To customize the icons used, simply open the "src-mod-icons.png" Fireworks file that is included in the creativa-fireworks-source.zip that is available on the download page and replace the individual icons with your own. One you have replaced the icons, export the image as a png 8 transparent image and save the file as "sprite-mod-icons.png"

Top Shelf settings in Configurator

Bottom Shelf 1 Setup

The first bottom shelf is used to display the 4 "feature" blocks in the lower area of the demo. While this can go up to 5 modules, we recommend you keep it at 4 as not to squash the content. This block also uses the "sprite-mod-icons.png", so the same customization steps as with the top shelf apply to this block.

Bottom Shelf 1 settings in Configurator

Bottom Shelf 2 Setup

The second bottom shelf is used to display the newsletter subscription content in the demo. We used the "custom html" module option with the following code:

<div id="newsletter">
<h2>Want to stay informed? Subscribe to our newsletter!</h2>
<p>Subscribe to our bi-weekly newsletter to be notified of new features, latest industry buzz, resources & more. <a href="#"><strong>Sign up now</strong></a>! <span> </span></p>
</div>

Bottom Shelf 2 settings in Configurator

Bottom Shelf 3 Setup

The third bottom shelf uses Joomla's standard menu system to output the multi-column menu.

Bottom Shelf 3 settings in Configurator

Menu module settings

The menu module should be published to the bottomshelf3 position & the module suffix set to "shelfnav 4cols".

Multi-column menu item setup

As you see in the example below, the multi-column menu is structured to use 4 top level separator menu items, each with 5 sub child items.

Available module styles

We decided to try out creating a number of preset module styles that can be used with Creativa. Not only does this take the guess work out of finding a style that works, but it also means the process of applying a style is quick & easier. We have also added a number of ways for you to customize how these module styles look.

You can view all the available styles on the Creativa demo.

10 preset module, accordion and tab styles

These include 10 color varations, styled with the overall theme of the site. The module suffix to use is "modstyle1", right through to 10, ie: "modstyle10".

40 module heading icon styles

The module heading styles are applied like normal, ie, "h3icon h3icon12". Notice the first "h3icon" class. This is required to reduce the amount of css required to create these styles.

Bevel or flat mode on module headings

You can easily disable the default bevel style of the module headings, by adding a module suffix of "flat" to the module you would like it disabled on.

Removing the inner border on modules

The light inner border on wrapped around the modules content can be disabled by adding a module suffix of "noinner".

Using the extended typography

Using the "code" styles

There are 4 different code styles that you can use in your content. It is important that you wrap the code in the following format:

Notice in the above example how the "less than" and "greater than" entity codes are used in order to prevent the html or php code from being parsed by the browser. Also notice the class that is set on the pre element. The "code" class is constant, whereas the language class will change depending on the code you are outputting. The available classes are "html", "js", "css" and "php".

Because you are using the "pre" element, any spacing you have in your code will be maintained. Read more about pre, code and the use of entity tags.

Example code styles:

How to use the bullet proof buttons

The bulletproof buttons are named thus, as they use a single image and are able to expand both vertically and horizontally when the content is zoomed (or text size is increased). They also allow you to add new buttons on the fly, without needing to create new button images each time. There are two avaiable button - primary and secondary. The primary is intended for the most important primary action, where as the second is the less important of the two actions.

Bulletproof buttons code example:

<ul class="buttons">
 <li><a class="btn primary" id="userRegister" href="#"><span>Create an account</span></a></li>
 <li><a class="btn secondary" id="userLogin" href="#"><span>Existing members login</span></a></li>
</ul>

How to disable the article preview on specific pages

If you have the article lightbox preview enabled in Configurator, there may be pages where you don't want it displayed. You can easily disable the preview buttons by adding a page class suffix of "nopreview" to the menu item for that page.