Urban Writer 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 Urban Writer 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
• Urban Writer 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
• Urban Writer 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 Urban Writer 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.

Toolbar - menu setup

The Urban Writer themelet design concept uses a sub navigation for quick links at the very top right of the page which are kept inside the content slider.

You can do the same or add any other module in the "toolbar" position. This position is ideal for a newsflash, login, or member links, banner modules etc.

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

You may notice that the menu does not appear at first when the page loads and there is a "toggle" button to open it. Click this button and the menu will slide down. This is because for this themelet, the default settings for 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.

Subhead block setup

The subhead block is made up a custom html module, published only to the home page (see the code used below)

Home page welcome header callout box - code example:

Below is an example of the code which we used for the home page welcome header. This is very simple and you can modify it as you please, you can see the result below the code.

<div id="bio">
<p>Welcome to my Website</p>
<p class="last">see what I have to think and say, or even <a href="#">hire me</a></p>
</div>

Mega Footer - made up of 3 [bottomshelf] blocks

Bottomshelf

The first thing to do is create a new custom Joomla html module. Go to module manager, then click new at the top and choose "custom module". Look on the right under parameters, you will see an input box for the option "Module Class Suffix", here you need to add a suffix of "bottom-callout"

Now you can add the code in the module in the box where you see "Custom Output" Below is an example of the code which we used for the callout section in the mega footer, this is the first of the footer/bottom shelf blocks. The idea is to use this as a call to action, drive your visitors to where you want them to go using this callout. Copy the below code and modify as needed, see the result of what this should look like using the same snippet.

<p class="teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in sapien at libero luctus auctor. Integer arcu sapien, Sit amet, consectetur adipiscing elit. Integer in sapien at libero luctus auctor. Integer arcu sapien.</p>
<p class="calltoaction">Thanks for visiting! browse my <a href="#" target="_blank" title="visit my portfolio">portfolio</a> or read my <a href="/joomla/livedocs/component/content/section/4?layout=blog" target="_blank" title="visit the blog">blog</a>.</p>

to be continued....