Explorer Setup Guide

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

Please note: This guide assumes that you have Morph installed. If you haven't installed Morph yet, please go over the "General Quick Installer Setup Guide" and "Installing the Morph Toolset" tutorials, which cover each step of the installation process.

---

Basic Steps

1. Download all the necessary files
2. Install the Explorer themelet
3. Install the Explorer assets pack
4. Configure your header
5. Setting up your logo
6. Configure your modules
7. Customizing the layered source file
8. Configuring the iPhone version of your site

---

1.) Download all the necessary files

Before you start, you will need to download all the necessary files to your computer. It is probably a good idea to put them into their own project folder that is easily accessible later in the installation.

• Explorer Themelet
• Explorer Assets Pack
• Explorer Layered (Fireworks) Source

Back to top

---

2.) Install the Explorer themelet

Now that you have all the necessary files, you can proceed to installing the Explorer themelet. In Configurator, go to the Tools > Universal Installer tab, then select the "Install or upgrade themelet" option on the left.

Click on the Browse button and select the themelet install file that you downloaded to your computer. The file will be named along the lines of themelet_explorer_v1.00.zip, then click on the Upload and install button.

Back to top

---

3.) Install the Explorer assets

Staying on the Universal Installer tab, select the "Install themelet assets" option on the left to install the themelets assets. The themelet assets pack includes all the themelets related assets, such as the backgrounds, iphone version graphics, etc. When installing the pack, these will automatically be moved to your assets folder and will be visible in the Assets tab in Configurator.

Like before, click on the Browse button and select the themelet assets pack file that you downloaded to your computer. The file will be named along the lines of explorer_assets.zip, then click on the Upload and install button.

Back to top

---

4.) Configure your header

There are a number of ways you can use the Subhead (header) block in Explorer. By default, the subhead block is controlled using the subhead module position. By using the module position to control the block, it gives you the flexibility to easily set which pages the header should be displayed on - as apposed to being static and set on all pages.

CSS Background Image (default method)

This method lets you set a single header image in your css that is displayed on all pages. That said, you are not restricted to having the same image displayed on all pages, as you could override the default image using the page class suffix feature. If you are going to use this method, we would highly recommend that you take a look at the "Customize your sites background on different pages with page class suffixes" tutorial, which explains how to use this in detail.

Customizing the css header image

Around line 29 of your "morph_assets/themelets/explorer/css/themelet.css", you will see the css that handles the Sub Head block:

#subhead{
    background:#304848 url(../../../../morph_assets/themelets/explorer/images/header.jpg) no-repeat;
    height:238px;
    position:relative;
}

You can either change the name of the image background image in the css, or simply replace the image with your own.

Simple Title

The Simple Title module outputs the current page title as an H1 in the module. With a bit of creativity, this simple module can really used in a multitude of ways. We recommend disabling the actual page title off in the menu item when this module is used, as it would result in the page title being displayed and unnecessarily output two h1's on the same page.

Advanced Banners

The benefit of using this method is that each header graphic can be linked to a different page and the clicks to each header are tracked. This allows you to see which header images perform better than others.

Back to top

---

5.) Setting up your logo

By default the logo is set to use the Linked h1 Text option, which (unless set in the logo tab of Configurator) will use your sites name for the logo text. The Explorer demo uses the Linked H1 Image Replacement method, which essentially uses css image replacement to hide the logo text with an image.

The IE6 version of the logo will display an alternate version of your logo image when your site is viewed in Internet Explorer 6. The reason for this is due to IE6 not correctly supporting image transparency, resulting in any transparent images appearing to have a jagged edge and grey background. We included both Explorers logos in the themelet assets pack, that you could compare in your graphics editor. You will notice that the default logo has a transparent background and shadow applied to the text, where as the IE6 logo has a plain background color set with no transparency.

Explorer demo logo settings:

Back to top

---

6.) Configuring your modules

Most of the modules in the General Quick Installer are the same as the Explorer demo, so there isn't much you need to do except for choose how you want to position the various modules.

Search Module

The search module is published to the User4 position in the Explorer demo, but it is also styled to work in any of the sidebars positions or the "top" module position next to the logo.

Assigning modules to the Top Shelf

Due to the overall design of Explorer, the Top Shelf block works a bit differently than usual. Instead of being apart from the Main Block (like the bottom shelf is), it actually sits below the navigation and appears to be part of the main block. This is to give you the option of displaying modules there instead of using the Subhead header block on all pages. To use, simple assign any modules to the topshelf module position.

Back to top

---

6.) Customizing the layered source file

The layered Fireworks png source file is available to download from the Explorer download page. The file is organized into relevant blocks to make it easier to customize. It's important to keep in mind that some of the images used in the themelet use image sprites, so its recommended that you use a tool like Firebug (which if you don't have installed, can be activated by appending ?show_firebug or &show_firebug to the end of any of your sites urls. Learn more about this feature.)

Image spriting refers to a method of css coding, where the generic images that are used in a website are grouped into a single image rather than referencing each image individually. The different images are displayed by changing the background position of the main sprited image. The reason why this method is so popular is because it reduces the number of requests needed to be made to your server, thus resulting in better overall performance.

Back to top

---

7.) Configuring the iPhone version of your site

Each themelet has its own unique iPhone layout, which users will automatically see when browsing your site on an iPhone. Explorer's iPhone version is pretty much optimized out-the-box, but if you want to customize it further, you can do so by adjusting the iphone.css which is located in the themelets css folder.

You are also able to customize the webclip image from within Configurator, under the "Customize > iPhone Compatibility" tab.

The webclip icon is used when someone saves your site to their iPhone home screen and is also displayed at the top of the layout, next to your sites name.

Available module positions

The optimized version of Morph has its own module positions that you are able to use. This allows you to display different content to users browsing your site on their iPhone.

The diagram below shows the available positions, which are iphonenav, iphone1, iphone2, iphone3 and iphone4. You will notice that the iphone1 and iphone4 positions are positioned outside the main content block and these work similarly to the outer shelves in Morph.

The iphonenav position is used to display the iPhone specific menu, which means that you can display only the links that are relevant to someone browsing your site on a mobile device.

You will also notice that the default Joomla contact form has been optimized as well, making it easy for the person browsing your site to get in touch.

Back to top