Creativa Setup Guide
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
- 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)
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.
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.
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".
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.
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.
Top menu setup
The top menu is published to the masthead module position & and can be configured either as Topfish or Split.
For instructions on how to setup the various menus, see the following tutorials:
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:
This is the top menu that is displayed when a user is not logged in.
This is the top menu that is displayed to all your logged in users.
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.
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:
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:
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.
- As of Morph version 1.15 and Configurator version 1.13, the "top" module position was changed to "masthead". This was done to make the block work like all the others and a part of the update which allows the Logo & Menu's to be positioned in other blocks.
- Support for the Topfish menu was added on the 2nd of November 2010.
Do you think this help article can be improved?
Our goal is to make Morph's documentation as easy and simple to use as possible and if you feel there is anything we can do to improve, whether updates / refinements to the content or how everything is structured, please let us know! We really do value all of the feedback we get and will do everything possible to ensure that the documentation is relevant and useful to you getting up and running with Morph!