Template Guide Aurora

Pre-Install

Before You Start--what you need to know:

To make sure your template is setup correctly, please make sure you read through the template guide thoroughly. We have made the template as customizable as possible and all our css is fully commented.

Once you have successfully downloaded your template, you will need to extract the zip archive to your local computer, using a free archive utility like 7zip (PC) or MacZip (Mac), extract the contents of the zip "extreme-blogger-unzipfirst.zip" onto your computer. Please note that if you purchased an individual template and are not a club member the template name will be aurora-zip due to the way the download program names the files.

First of all, lets start by explaining what is included in your download and how we have structured the folders and their content.

Fonts: All/Any fonts required to modify the source files if required
Source Files: These are the Fireworks source files that we did the original template design with. If you dont have a copy of Fireworks, you can always download a trial version from the Macromedia site here.
Template: aurora-v1.0.x.zip
Component: com_tatami.zip - Used to setup the template settings
Modules: These are the modules included with the template to achieve a layout similar to what we have on the demo
- Flickr module - mod_flickr4j_pics from - http://flickr4j.nborn.ch/
- Simple feed module
- Color switcher module
Mambot: flickr4j_lib mambot (flickr4j_lib is the base library that is needed for all the flickr4j and the module to work)
Changelog.txt: this contains all changes and template versions

The next tab will show you how to do the install.

Install

The very first thing you need to do is install the component com_tatami. If you do not do this then there is the potential to not have anything displayed on your front-page

Installing Aurora

Login to Joomla admin and go to "Installers > Component"
Browse for the com_tatami zip file in the Template folder.
Click "Upload File and Install".
Click "Continue..."
FTP upload the backgrounds folder to your templates/aurora/images directory.
Go to "Installers > Template Site"
Browse for the Aurora zip file in the Template folder.
Click "Upload File and Install".
Click "Continue..."
In the Template Manager, select the new template's radio box and click on the "Default" button (top right).
Go to Components/Tatami/Dashboard, and enjoy the easiest and most versatile template ever.

Basic Configuration

With literally hundreds of options and ways to configure Aurora we knew we had to come up with a revolutionary way to make it easy for you to edit, change and tweak to you your hearts content. That is why we have partnered With NinJoomla to include the Tatami component. Tatami is very similar to Joomla 1.5's template configuration. Simply navigate to the component and start setting everything up. Below you will see the various sections of the component broken down for easy reading.

Make sure you did not forget to upload the background files to your Joomla images directory. (templates/aurora/images)

Below are the different sections you will encounter when using the Tatami component. If you click one image you can click left or right and browse over them all.

Style Guide

Have you ever wondered how some of these big Joomla sites pack all sorts of fancy graphics and check-marks and stars into their content pages? Well it is easier then you might think. This tab will show you the in and outs of some of the additional features we pack into Aurora.

Lets start

The first thing to do is become comfortable with not using your WYSIWYG editor . You can still keep it enabled, but press the little HTML button in it. You will be presented with a blank window. Don't let it scare you, it's your best friend. :)

basic html entry window

This is where you will be entering all the special code to make things work. If you try to enter the codes below in your WYSIWYG window it will not work and you will have a mess.

Lets get our hands dirty now.

Make important text pop.

Lets start by showing you how to add a block of color around some text. Maybe you have something that is important for the reader to notice, so you want to make sure it stands out. This type of effect is called a paragraph class. The next box is a example of a paragraph class.

<p class="tip> This is the code you insert into your article to highlight it. </p>

You will need to insert this code manually. Most WYSIWYG tools do not have the ability to add this. Even if they did, it is important that you understand how XHTML works and why you need to use the built in editors as little as possible. So, go into raw HTML mode by pressing the HTML button and view the popup. Here in the popup you will insert any of the codes you see on this page. The raw code will be highlighted in blue with examples below it.

Click to see examples of paragraph classes

<p class="color-green"> This is the code you insert into your article to highlight it green. </p>

<p class="color-blue"> This is the code you insert into your article to highlight it blue. </p>

<p class="color-orange"> This is the code you insert into your article to highlight it orange. </p>

<p class="color-pink"> This is the code you insert into your article to highlight it pink. </p>

<p class="color-grey"> This is the code you insert into your article to highlight it grey. </p>

<p class="error"> This is the code you insert into your article to highlight it error. </p>

<p class="tips"> This is the code you insert into your article to highlight it as a tip. </p>

<p class="info"> This is the code you insert into your article to highlight it as information. </p>

These are all examples of ways to make text stand out with paragraph classes.

Click to see table examples

You can add a plain old table, but why make it boring when you can style it up? Use this code in blue to make a fancy table.

<table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr><th class="sectiontableheader">Section Table Header</th></tr> <tr><td>class="sectiontableentry1">This is the Section Table Entry 1</td> </tr> <tr> <td class="sectiontableentry2">This is the Section Table Entry 2</td> </tr> <tr> <td class="sectiontableentry1">This is the Section Table Entry 1</td> </tr> <tr> <td class="sectiontableentry2">This is the Section Table Entry 2</td> </tr> </tbody> </table>

Section Table Header
This is the Section Table Entry 1
This is the Section Table Entry 2
This is the Section Table Entry 1
This is the Section Table Entry 2

You can add a plain old table, but why make it boring when you can style it up?

Click to see a Blockquote example.

This is a blockqoute. Use <blockquote> With your text inside here. </blockquote>

Blockquotes are great. These are really easy to use and really make a article pop. They are great for making a bold statement, or for really showcasing some really important quote or text.

Click to see examples of fancy lists

<ul class="li-round1"> ><li>Morbi commodo, ipsum sed</li> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus turpis ante</li> <li>Orci magna rhoncus neque</li> </ul>

This is a list with the class "li-round1" Morbi commodo, ipsum sed Lorem ipsum dolor sit amet Phasellus turpis ante Orci magna rhoncus neque	This is a list with the class "li-round2" Morbi commodo, ipsum sed Lorem ipsum dolor sit amet Phasellus turpis ante Orci magna rhoncus neque
This is a list with the class "li-arrow" Morbi commodo, ipsum sed Lorem ipsum dolor sit amet Phasellus turpis ante Orci magna rhoncus neque	This is a list with the class "star" Morbi commodo, ipsum sed Lorem ipsum dolor sit amet Phasellus turpis ante Orci magna rhoncus neque

Have you ever seen a list with cool little stars and checkmarks next to them? It is not as hard as you might think. When you learn the basics of html it all gets easier. Simply use this code to make fancy lists.

Click to see examples of Heading Classes

In your HTML window simply add <h2> these h tags to the text you want highlighted</h2>

<h1>This is Heading One </h1>