Detalhes: Criado: 29 Mai 2007

Chromatophore provides the ability to use 6 subtle module variations to increase the appeal of your module content and highlight key areas. Through the use of these module suffixes, you can make any module stand out on your site. To use these, just add the hilite names in the module class suffix parameter of the module in the Module Manager located in your Joomla administrator.

Detalhes: Criado: 20 Mai 2007

RocketTheme templates features some amazing advanced features and layout possibilities that open up a wide world of options for your sites. Unfortunately, the default Joomla content in a new Joomla install is very limited and does little to take advantage of the abilities of a modern Joomla template.

Each of our demo sites has been highly customized to show off the abilities of each template and give that "professional touch" to the look and feel of the content. This professional look could not be achieved without hands on manual customization, that is, until now.

Chromatophore now features the exciting new RocketLauncher custom Joomla install option. With the RocketLauncher Chromatophore Joomla installer, you can instantly create a Joomla site complete with custom content that is a perfect replica of our Chromatophore demo site that has been professionally tuned to look its best, all with just a few clicks.

The Chromatophore RocketLauncher package consists of a full Joomla install, complete with all of the demo images, content, modules, and extensions. By running the installer, your Joomla site will be set up with all everything needed to create an exact implementation of the demo site automatically.

RocketLauncher includes a FULL Joomla install, in addition to the template and demo contents. The Joomla installation process is necessary in creating the demo content, therefore RocketLauncher will only work properly as a new Joomla installation. It can not be used on an existing Joomla installation.

RocketLauncher Installation Video Tutorial

Learn the steps to uploading the RocketLauncher package files to your server and installing the RocketLauncher template packages by following along with the steps in this detailed video tutorial. It's now easier than ever before to deploy a replica of the RocketTheme template demo sites. Launch Video...

Uploading RocketLauncher to your Root

An in depth guide that details the steps necessary to properly upload the files from the RocketLauncher template package directly to the root of your site. This will ensure your RocketLauncher installation installs to the root of your site, and not in a subfolder. Learn more...

Detalhes: Criado: 31 Março 2007

Chromatophore has been constructed with an assortment of 20 module positions. These module positions are fully collapsible meaning that if there are no modules published in particular area, that module area will not be shown. This provides you with the maximum amount of flexibility possible.

Detalhes: Criado: 31 Março 2007

Installing Chromatophore

An overview of template files and instructions for installing and activating the template. Read More...

Custom Modules

Learn all about the included Chromatophore custom modules and how to configure them for your site. Read More...

Menu Options

An overview of the Chromatophore menu options including the top menu icon configuration. Read More...

Customisation

A guide to the Chromatophore customisation options that can be configured within the template's index.php. Read More...

Using Typography

A guide to using the included the Chromatophore typography styles in your site. Read More...

Demo Content

A look at some of the modules and techniques used in the demo content on the frontpage of the Chromatophore demo. Read More...

Logo Editing

An overview for customizing your logo and replacing the logo text with your organization or company name and logo. Read More...

PNGfix

An overview of how to customize your Chromatophore in respects to the Internet Explorer PNGfix. Read More...

Check out the demo below:

The Syntax

Below is the HTML syntax that you will have to use. Simply place this into your articles.

<a href="images/stories/colorado/image1.jpg" rel="rokzoom[colroado]" title="Image 1">
<img src="images/stories/colorado/image1_tn.jpg" alt="image1" class="album" />
</a>

An exemplified preview is constructed below to aid your understanding of the HTML format of rokzoom

<a href="main image url(relative path)" rel="rokzoom[album name]" title="Title">
<img src="thumbnail url(relative)" alt="Image name" class="album" />
</a>

RokZoom - The Guide

How to implement RokZoom

RokZoom galleries or single images can be inserted in Content and Custom modules. By utilising a few simple commands, you can easily insert a gallery onto your page.

Step 1 - Login

Login to the Joomla! Administration Control Panel. Go to www.yoursite.com/administrator. Enter the Administrator's Username and password.

RokZoom

Step 2 - Navigation

Navigate to the Article Manager. Once you have logged in, hover over the Content link on the top taskbar, scroll down to Article Manager.

RokZoom

Step 3 - Article Content Manager

When you have selected the Article Manager link, you will be sent to the Article Manager control panel. Select either Edit or New, depending on whether you want to add rokzoom to an existing or new item.
RokZoom

Step 4 - RokZoom Commands

You now need to enter the syntax into your content editor. This should resemble the screenshot below. The syntax, in both HTML can be found at the section located here.
RokZoom

The Examples

For the examples of the rokzoom command, all images are located within the directory images/stories/photos. If we wanted to load image1.jpg by itself, we would enter:

<a href="images/stories/photos/image1.jpg" 
rel="rokzoom[colroado]" title="Image 1">
<img src="images/stories/colorado/image1_tn.jpg" 
alt="image1" class="album" /></a>

If we wanted to load photo1.jpg, photo2.jpg and photo3.jpg as part of an album, we would use the following syntax:

<a href="images/photos/image1.jpg" 
rel="rokzoom[photo]" title="Image 1">
<img src="images/photos/image1_tn.jpg" 
alt="image1" class="album" />
</a>

<a href="images/photos/image2.jpg" rel="rokzoom[photo]" title="Image 1">
<img src="images/photos/image2_tn.jpg" alt="image1" class="album" />
</a>

<a href="images/stories/photos/image3.jpg" rel="rokzoom[photo]" title="Image 1">
<img src="images/stories/photos/image3_tn.jpg" alt="image1" class="album" />
</a>

The Thumbnails

The latest Rokzoom allows you to create custom thumbnails as well as the automated procedure witnessed in previous versions. The process itself is extremely simple. You need to create 2 images. The first, for example photo1.jpg will be the main image that will be loaded in the RokZoom Screen. The second, will be the custom thumbnail, it must contain the suffix _thumb or the suffix you defined in the Mambot configuration. The images need to be contained within the same directory as your main images unless defined in a thumbnails only folder as seen in the Configuration for the mambot.

Therefore, in the container where your images are stored, you should see photo1.jpg and photo1_thumb.jpg

Detalhes: Criado: 21 Fevereiro 2007

This page shows all of the typography styles and settings for Chromatophore in action. If you would like to read more detailed information on inserting the included typography into your content, check out the Chromatophore Typography Tutorial.

Font Control

Chromatophore allows you to have the option of simply switching the font of all the text in the template with the following setting in index.php (select the font name to preview):-

$font_family = "chromatophore";  // geneva | optima | helvetica | trebuchet | lucida | georgia | palatino

This is a ComponentHeading

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a Contentheading

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

This is an H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

Notice Styles are shown below

This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html: .... This is a sample of the 'info' style. Use this style to denote pieces of information or tips for your readers and visitors. To use this use the folllowing html: .... This is a sample of the 'note' style. Use this style to denote items in your content that you would like your users to note or pay attention to. To use this use the folllowing html: .... This is a sample of the 'download' style. Use this style to denote information containing a download or information about an available download on your site. To use this use the folllowing html: ....

This is an H2 Header

This is an H3 Header

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

This is an H4 Header

This is a sample <pre>...</pre> tag:

div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat; 
}

div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

This is a sample blockquote (use <blockquote>....</blockquote>)

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

List Styles - Bullets

Below is a list with bullets. To use this style create a list in the following format: <ul class="class name"><li>....</li><li>....</li>...</ul>

To use this style create a list in the following format: <ul class="bullet-1"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-2"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-3"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-4"><li>....</li><li>....</li>...</ul>.

Página 5 de 5

Uncategorised

Module Variations

RocketLauncher - Rapid Template Deployment