Note utilisateur: 0 / 5

A guide to implementing the included HiveMind typography styles and elements into your site as well as instructions for inserting typography using the HTML editor option of your WYSIWYG editor.

Every RocketTheme template has its own set of content styles, these styles are known as Typography. Typography can come in a number of varying and diverse formats, ranging from simple text modifications to image insertions to improve the look, layout of your website and give it life. This tutorial will take you through the necessary steps to adding typography to your Joomla! content.

Inserting Typography with the HTML Editor

To insert the Typography into your content, you must use the HTML feature of all Joomla! content editors. The following tutorial will outline the steps in which to does this with the default Joomla! content edit, TinyMCE. Please be aware, even though there are other content editors available, all are basically the same and the steps with be just as effective if you are using another Content editor.

Note utilisateur: 0 / 5

The following is a step by step guide to customising your HiveMind logo image by replacing the logo text with your own organization or company's name and logo.

Customising Your Logo

One of the first steps of customising your new HiveMind template will undoubtedly be altering the logo text to reflect the name of your company / organization. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as font(s) used.

The most effective way to customise the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:

Step 1

First, open the header Source PNG file in Adobe Fireworks (source_main.png). On the right side, you will notice a taskbar named Layers. Inside this column, a list of elements within the source will appear, dividied into folders. The first is Web Layers which controls the green slices on the page that are used to export the images. Click the eye which is immediately left to the folder name Web Layers to make it invisible. This allows use to edit the logo.

Step 2

Next, double click on the logo which should be position in top-centre. This will activate the text tool so you can edit the element. Highlight the entire text box with your cursor and type your text instead(such as your company name.)


Enact the same procedure onto the slogan text below the log itself

Step 3

Once you have edited the logo to your personal preference, you will need to activate the logo area slice. On the right column where the Web layers area is, we need to reactivate it. As you did in the initial step, select the eye icon to make it visible and subsequently making the slices visible on the canvas. Select the logo slice, either on the canvas itself or in the Web Layers folder.

Step 4

To export your logo, right click on the green slice that is situated above your new logo. A popup menu should appear with numerous options. The value we want to deal with is "Export Selected Slice...". As the name suggests, this option will export/save this slice only out of the entire source window.

Step 5

If you are new to Fireworks, you may be wondering why it appears that there is only one style variation in the source. This is not the case as we take advantage of the Frame features of Fireworks. You need to simply switch frames to see all the other style variation sources.

There are a few ways to change frames and we will show 2 methods that you can use.

In the right column where you find the Layers toolbar including the Web Layers area, you should see another tab/toolbar named Frames. Just left click on the title Frames to enter the frames area. Then you can click on either of the frames which are named to show which style variant is on that particular frame.

The second method is the most easiest and simplistic. At the bottom of the Fireworks canvas is a row of buttons, arrows just as previous and next. Select the arrows to switch between frames.

Step 6

Once you have successfully edited then exported your new logo, you will need to upload it to your server. This process is best done via a FTP client such as Filezilla

1. Open your FTP client on your local computer.
2. Login to your web server where HiveMind is installed.
3. Navigate to the /templates/rt_hivemind_j15/images/style# directory.
4. Upload logo.png to this directory (You may need to browse on the local panel in the FTP client to find where you have exported your logo).
5. Clear your browser cache before viewing such as using the keyboard commands on Windows, Ctrl+F5.

Note utilisateur: 0 / 5

A guide to the basic HiveMind customisation options that can be configured in the the Joomla Administrator console.

Module List

Note utilisateur: 0 / 5

Learn all about the exciting new RocketTheme exclusive modules that are included in the HiveMind template release. Here you can find instructions for installation and configuration for each of the custom modules.

RokHeadRotator

• Module Suffix Enter a Module Class Suffix or leave empty.
• Include Mootools JS Library: Set to no unless using a template which doesn't have mootools already being called
• Images Directory This is the path to the folder where the RokHeadRotator will pull your images from.
• ALT Tag Enter the ALT tag to use for your displayed images.
• Images Directory This is where the RokHeadRotator will pull your images from.
• Images Start Choose which image you would like to show first.
• Auto Play Select whether you want the rotator to start when the page loads.
• Sort Criteria Choose to display your images alphabetically or by the date they were created.
• Sort Order Choose to display images by ascending or descending order.
• Manual Sort Order Enter your manual sort settings here.
• Image Duration Shows how long an image is displayed.
• Transitions Duration Shows how long the crossblend transition is between images.

Integrated RokSlide Tabbed Modules

Configuration

Module Slider Height

#moduleslider-size {
	height: 250px;
}