GETTING STARTED WITH

BJ MERCURY

http://byjoomla.com Created: 11/06/2012 – Version x.5.0 & x.7.0
Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Byjoomla.com © 2011 Byjoomla.com Ltd. All rights reserved.

BJ Mercury Customer Manual

Byjoomla.com

Contents
1. INTRODUCTION ............................................................................................................ 5

2. DOWNLOAD ...................................................................................................................... 6 2.1 Free version ................................................................................................................ 6 2.2 Pro/Dev version .......................................................................................................... 6 3. INSTALLATION ................................................................................................................. 7 4. FEATURES ........................................................................................................................ 8 5. CONFIGURATION .............................................................................................................. 9 5.1 Position ....................................................................................................................... 9 5.2 Layout ....................................................................................................................... 10 5.3 Template parameters ................................................................................................ 11 5.3.1 Template color (PRO/DEV only) ...................................................................... 12 5.3.2 Layout width (PRO/DEV only) ......................................................................... 14 5.3.4 Bottom User Layout (PRO/DEV only) ..............................................................17 5.3.5 Column position (PRO/DEV only) ....................................................................17 5.3.6 Logo Path (PRO/DEV only) .............................................................................. 18 5.3.7 Logo Link (PRO/DEV only) .............................................................................. 18 5.3.8 Logo Slogan Text (PRO/DEV only) .................................................................. 18 5.3.9 Text alignment .................................................................................................. 18 5.3.10 Display “Go to top” button .............................................................................. 18 5.4 Module style (by using Module class suffix) .............................................................. 19 5.4.1 Module style ...................................................................................................... 19 5.4.2 Module Color (PRO/DEV only) ........................................................................ 20 5.4.4 Let’s start to combine color and style in the code ............................................ 22 2

BJ Mercury Customer Manual

Byjoomla.com

5.5 Typography ............................................................................................................... 22 5.5.1 Headings ............................................................................................................ 22 5.5.2 Text Columns .................................................................................................... 23 5.5.3 Preformatted text .............................................................................................. 26 5.5.4 List style ............................................................................................................ 27 5.5.5 Number style (PRO/DEV only) ........................................................................ 28 5.5.6 Icon Text (PRO/DEV only) ............................................................................... 28 5.5.7 Text box: Simple style ....................................................................................... 30 5.5.8 Text box: Fieldset style (PRO/DEV only) ......................................................... 32 5.5.9 Link (PRO/DEV only) ....................................................................................... 33 5.5.10 Highlight .......................................................................................................... 34 5.5.11 Button Style ...................................................................................................... 34 5.5.12 Tables ............................................................................................................... 34 5.5.13 Forms ............................................................................................................... 37 5.5.14 Note: How to insert typography codes into articles. ...................................... 38 5.6 Menu style ................................................................................................................. 39 5.6.1 Dropdown menu ................................................................................................ 39 5.6.2 Side menu.......................................................................................................... 41 5.6.3 Tree-like menu .................................................................................................. 42 5.6.4 Note: How to manage menus ........................................................................... 43 5.7 Homepage (Front page manager).............................................................................. 44 5.7.1 Top Position ....................................................................................................... 44 5.7.2 Intro text............................................................................................................ 45 5.8 Logo .......................................................................................................................... 46 5.8.1 Update logo by using parameter in Template manager ................................... 46 3

BJ Mercury Customer Manual

Byjoomla.com

5.9 Multiple languages support ....................................................................................... 46 6. COMPARE PACKAGE ....................................................................................................... 46 7. APPENDIX How to make your site look like demo page .................................................. 49 7.1.1 Header area ........................................................................................................ 50 7.1.2 Promotion area .................................................................................................. 51 7.1.3 Left column area ................................................................................................ 54 7.1.4 Right column area ............................................................................................. 54 7.1.5 Main content area .............................................................................................. 55 7.1.6 Bottom Users area ............................................................................................. 57

4

BJ Mercury Customer Manual

Byjoomla.com

1. INTRODUCTION
Welcome to Byjoomla.com. Thank you for choosing our product- Website template BJ Mercury. Mercury planet is the innermost and hottest planet of the Solar system. In Roman mythology Mercury is the god of commerce and travel. The characteristics of Mercury reflect in our Mercury template as well. Customers feel free to explore online distributing channels easily and comfortably with clean and simple design of BJ Mercury. BJ Mercury, which is one of the best templates from ByJoomla, includes 6 colors variation, large typography library and a flexible content presentation. In the next section, we’ll go through the setting up process. Screenshots and valuable step-by-step guides are presented. Then we will provide the guide to make the website look like the memo page as a reference for you to expand later to suit your personal interests or business. Now, are you ready to make a change with BJ Mercury!

5

BJ Mercury Customer Manual

Byjoomla.com

2. DOWNLOAD
2.1 Free version
All free templates and can be downloaded from our home page. http://byjoomla.com/bj-joomla-templates

2.2 Pro/Dev version
Login at http://clients.byjoomla.com/client_login.php Use your registered Email and Password At the very bottom of this page, there is a list of order. Click on “View” button to go on In the next page, there are downloadable packages that you can download to your own computer.

Figure 1: Login window

Figure 2: View button

6

BJ Mercury Customer Manual

Byjoomla.com

3. INSTALLATION
 Unzip the .zip file  Find the installation file inside.  Login Joomla as Administrator user.  Extensions  Install/Uninstall.  Press “Choose file” button and find your downloaded file .zip on your computer.

Figure 3: Installing window

 Install module by pressing “Upload File & Install” button.

7

BJ Mercury Customer Manual

Byjoomla.com

4. FEATURES
We included in BJ Mercury many cool features to your site. They are user friendly and help your customers conveniently browsing the web. You can discover how to take all advantages of these features in this document.                Table-less and xHTML/CSS validation Browser compatible in FF, Chrome, Opera, IE 7-8-9 Source code & Image optimized Flexible layouts 1, 2, 3 columns; adjustable width. Fantastic typography 6+ template themes ( 6 colors: Blue, Viridian, Red, Brown, Pink, Yellow) Splendid module styles Search Engine Optimized Module positions Flexible menu styles: dropdown, tree-like, side menu. Right to Left support Multiple languages: English, Vietnamese, Chinese, French, German, Japanese, Russia, Spanish CSS/JS compression As-easy-as-pie documentation 24/7 Support: Ticket, Forum, Blog, Email

8

BJ Mercury Customer Manual

Byjoomla.com

5. CONFIGURATION
5.1 Position
BJ Mercury provides 15 module positions which allow you to have multiple layout configurations. All module positions are collapsible. If you don’t publish any modules in some positions it won’t take any blank spaces leaving those for neighbor modules. 1-header 2-toolbar 3-advert1 4-advert2 5-headline 6-left 7-right 8-top 9-main 10-user1 Note: you need to enter exactly the position names listed above in the textbox. In some cases, Joomla will not list them in the dropdown list 11-user2 12-user3 13-user4 14-pathway 15-footer

9

BJ Mercury Customer Manual

Byjoomla.com

5.2 Layout
The layout in BJ Mercury is flexible. There are 4 kinds of layout: one column layout, two columns layout main-right, two columns layout main-left and three columns layout. In PRO BJ Mercury, the width of columns can be adjusted (as you can see in Template parameters). It is easy to set the layout. All you need do is to put your module in the right place. For example, if you put all modules in left position, the layout is collapsible so that the right column will not be shown and we will have two columns main-left layout. If you put modules in both right and left position, you will have three columns layout. If you don’t put any module in left and right position, you will have one column layout.

Figure 4: Three columns

Figure 5: Two columns left and main

Figure 6: Two columns main and right

Figure 7: One column full size

There is also a parameter name column position. This parameter enable customer to customize quickly the position of modules. Normally, they are located from leftmainright position. However, when you change this parameter, positions of all the 10

BJ Mercury Customer Manual

Byjoomla.com

articles and modules can be reallocated from normal left mainright to different order like mainleft right, rightmain left, etc. For visual example, please visit 5.3.5 Column position

5.3 Template parameters

Figure 8: Parameters window

11

BJ Mercury Customer Manual

Byjoomla.com

These are steps for you to manage your template. First, you need to open the template parameters window As the administrator user you go to template management by Extensions  Template management Choose BJ Mercury “Apply” and “Save” button are both used to save the change you made in parameters. Click on “Save” if you want to exit the parameter window. Click “Apply” if you want to stay on page. BJ Mercury PRO provides 18 parameters for template manager.

5.3.1 Template color (PRO/DEV only)
There is always color variation in Byjoomla Templates. BJ Mercury PRO provides 6 colors: BJ Mercury Blue, Viridian, Yellow, Red, Pink and Brown. Each color covers not only the main background, but also color of drop-down menu, links, table’s header and some others. For Free Version, the template color is fixed in Blue.

Figure 9: BJ Mercury Blue

12

BJ Mercury Customer Manual

Byjoomla.com

Figure 10: BJ Mercury Viridian

Figure 11: BJ Mercury Red

Figure 12: BJ Mercury Pink

13

BJ Mercury Customer Manual

Byjoomla.com

Figure 13: BJ Mercury Yellow

Figure 14: BJ Mercury Brown

5.3.2 Layout width (PRO/DEV only)
BJ Mercury PRO allows you to change width size for overall layout, left and right column and advert2 position as well. You need to configure appropriate template parameters to get the result you want.

14

BJ Mercury Customer Manual

Byjoomla.com

Figure 15: Layout parameter

5.3.2.1 Template Width You can setup overall layout width in pixels.

Figure 16: Template width

5.3.2.2 Left and right column width

15

BJ Mercury Customer Manual

Byjoomla.com

Width of left or right column position modules in pixels

Figure 17: Left column width

Figure 18: Right column width

5.3.2.3 Advert position width Advert is a custom module written by ourselves. You can modify the width for this module in px

Figure 19: Advert 2 position

16

BJ Mercury Customer Manual

Byjoomla.com

5.3.4 Bottom User Layout (PRO/DEV only)
In BJ Mercury PRO, it is allowed to modify the width of 4 modules in Bottom User position (User 1, 2, 3, 4).

If you choose “Auto” 4 module’s width will be set automatically and equally for all modules. For example, if there are 4 modules, each module’s width will be 25%. If you choose “Fixed”, the width of 4 modules will be modified using 4 parameters below. These parameters could be in percentage or pixel. For example: 25% or 260px

Figure 20: Bottom Users layout parameters

5.3.5 Column position (PRO/DEV only)
This parameter enable customer to customize the position of modules. Normally, they are located from right to main to left position. However, when you change this parameter, positions of all the articles and modules can be reallocated from left to main to right, main to left to right, etc 17

BJ Mercury Customer Manual

Byjoomla.com

5.3.6 Logo Path (PRO/DEV only)
It is path to your logo image file starting from your Joomla! Root folder. For example if you named your logo image file as mylogo.png and placed it in folder /images/mercury, then the logo path should be "/images/mercury/mylogo.png";

5.3.7 Logo Link (PRO/DEV only)
This parameter allows you to setup the URL where the logo image should link to. You can put your homepage URL there or any custom link. You can leave this parameter empty if you do NOT want your logo to be clickable.

5.3.8 Logo Slogan Text (PRO/DEV only)
This parameter allows you to setup slogan text to be attached to the logo image for SEO purpose. This slogan text is going to be one of the most top texts of your page, so you can setup some keyword-rich string here for better SEO.

5.3.9 Text alignment
This parameter allows you to change the alignment of text appearing in articles.

Figure 20: Right to Left

Figure 21: Left to Right

5.3.10 Display “Go to top” button
There is a button which is located in the bottom of front page allows you to go back to top. You can choose to display this button or not. It is up to you.

18

BJ Mercury Customer Manual

Byjoomla.com

Figure 22: Go to top button

5.4 Module style (by using Module class suffix)
Module Class Suffix is a parameter in Joomla modules. In every module, you can see this parameter in parameters window. It helps to adjust the appearance of each module. Module parameters can be combined for customization to fit your demand.

Figure 23: Module class suffix parameter

The basic form of module class suffix which used to modify style in BJ Mercury contains three elements:
“Module style- Module color”

For example: “ bjmod-style-2 bjmod-bg-blue” If you don’t want to customize some of the criteria below, you can leave it blank for example you can enter just “ bjmod-bg-blue” into module class suffix. Now we will have a look which styles, colors and icons that BJ Mercury offers

5.4.1 Module style
There are 3 main styles available for modules in BJ Mercury. 19

BJ Mercury Customer Manual

Byjoomla.com

Figure 25: No style-appear when you left the style part blank

Figure 26: bjmod-style-1

Figure 27: bjmode-style-2

5.4.2 Module Color (PRO/DEV only)
BJ Mercury offers 7 module colors. If you leave this space blank, the default color of the whole template will be applied on to the module.

20

BJ Mercury Customer Manual

Byjoomla.com

Figure 248: bjmod-bg-blue

Figure 259: bjmod-bg-viridian

Figure 29: bjmod-bg-red

Figure 30: bjmod-bg-pink

Figure 31: bjmod-bg-yellow

Figure 32: bjmod-bg-brown

Figure 33: bjmod-bg-white

21

BJ Mercury Customer Manual

Byjoomla.com

5.4.4 Let’s start to combine color and style in the code

After knowing about all the code of module class suffix, you can start to combine them to satisfy your requirement. If you don’t want to modify some of elements offered, you can leave it blank. Note: Remember to leave a space before module class suffix code. For example “ bjmod-style-2”
Figure 42: bjmod-style-1 bjmod-bg-blue

What is module Custom? It is the module that you can create by yourself and put your own content. You can create new module easily by using mod_custom. Go to Extensions  Module manager  New  Choose “Custom HTML”  Type the title you want (Latest posts, Latest Comments, Newsletter, etc)  Choose the position Type the content you want into Custom output.

5.5 Typography 5.5.1 Headings
You can change heading’s tag are h1, h2, h3, h4 and h5. You just need to use the code below
<div class="bj-typo-text"><hx> Content goes here </hx></div>

X=1, 2,3,4,5.

22

BJ Mercury Customer Manual

Byjoomla.com

Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.14)

5.5.2 Text Columns
We provide 3 type display text columns which are one column, two columns and three columns. One column’s width is 100%. Each column of two-column style’s width is 50%. Each column of three-column style’s width is 33%. You just need to use the code below. With a column:
<div class="text"> Content goes here</div>

Figure 43: Text in one column

23

BJ Mercury Customer Manual

Byjoomla.com

With two columns:
<div class=”two-column”> <div class=”column1”><div class="text"> Content goes here</div></div> </div> <div class=”two-column”> <div class=”column2”><div class="text"> Content goes here</div></div> </div>

Figure 44: Text in two column

24

BJ Mercury Customer Manual

Byjoomla.com

With three columns:
<div class=”three-column”> <div class=”column1”><div class="text"> Content goes here</div></div> </div> <div class=”three-column”> <div class=”column2”><div class="text"> Content goes here</div></div> </div> <div class=”three-column”> <div class=”column2”><div class="text"> Content goes here</div></div> </div>

Figure 42: Text in three columns

25

BJ Mercury Customer Manual

Byjoomla.com

5.5.3 Preformatted text
Pre tag
<div class="source-code"><br>#ja-rightcol right;<br> color: #EEEEEE;<br>}</div> {<br> width: 180px;<br> float:

Figure 43: Pre tag code

Quote
<span class="qoute-l">“</span>Content goes here <span class="qoute2">“</span>“

Figure 44: Quote style

Drop cap symbol
<span class="qoute-3">Letter need to become drop cap</span>Content goes here </span>

Figure 45: Drop cap symbol

26

BJ Mercury Customer Manual

Byjoomla.com

5.5.4 List style
List helps readers to distinguish and remember important thing. We provide 6 kinds of list style they are: List text, Square List text, Around List text, Snow List Text, Check List Text and Star List Text.
<div class="xxx"> <ul> <li>Content goes here</li> <li>Content goes here</li> </ul> </div>

Automatic list style-no class code

xxx = bj-typo-list-ordered

xxx = bj-typo-list-special

xxx = bj-typo-list-asterisk

xxx = bj-typo-list-accept

xxx = bj-typo-list-star

Example: <div class="bj-typo-list-accept">
<ul> <li>Sample list text</li> <li>Sample list text</li> </ul>

27

BJ Mercury Customer Manual

Byjoomla.com

</div>

Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.14)

5.5.5 Number style (PRO/DEV only)
You can see in the code, there is number “01”. If you want number “02”, the next number cannot come automatically you have to type by yourself for example <div class=” bj-typo-block-octagonal”> <ul> <li><span>2</span> Content goes here </li> </ul> </div>

<div class=” bj-typo-block-octagonal”><ul><li><span>1</span> Content goes here </li></ul></div> <div class=”bj-typo-block-octagonal-2”><ul><li><span>1</span> Content goes here </li></ul></div> <div class=”bj-typo-block-square”><ul><li><span>1</span> Content goes here </li></ul></div> <div class=”bj-typo-block-square-2”><ul><li><span>1</span> Content goes here </li></ul></div> <div class=”bj-typo-block-around”><ul><li><span>1</span> Content goes here </li></ul></div> <div class=”bj-typo-block-around-2”><ul><li><span>1</span> Content goes here </li></ul></div>

Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.14)

5.5.6 Icon Text (PRO/DEV only)
We provide 8 style icon text are warning text, check text, lamp text, wrong text, tag text, article text, cart text and desktop text. <div class=”icons-style”><p class="bj-typo-xx">Content goes here </p></div> 28

BJ Mercury Customer Manual

Byjoomla.com

Usage:

Figure 46: bj-typo-warning (xx=warning)

Figure 47: bj-typo-right (xx=right)

Figure 48: bj-typo-lamp (xx=lamp)

Figure 49: bj-typo-wrong (xx=wrong)

Figure 50: bj-typo-tag (xx=tag)

Figure 51: bj-typo-article (xx=article)

29

BJ Mercury Customer Manual

Byjoomla.com

Figure 52: bj-typo-cart (xx=cart)

Figure 53: bj-typo-desktop (xx=desktop)

Example: <div class=”icons-style”><p class="bj-typo-warning">Content goes here </p></div>

5.5.7 Text box: Simple style
This is styling for special text paragraph. Usage: <div class=”message-style”><p class=" "> Content goes here </p></div>

Figure 54: Grey - message style= bj-typo-message-grey

Figure 55: White– message style = bj-typo-message-white

Figure 56: Yellow – message style = bj-typo-message-yellow

30

BJ Mercury Customer Manual

Byjoomla.com

Figure 57: Round Grey – message style= bj-typo-message-rounded-grey

Figure 58: Round white – message style= bj-typo-message-rounded-white

Figure 59: Round yellow – message style= bj-typo-message-rounded-yellow

Example :
<div class=”message-style”><p class="bj-typo-rounded-yellow "> Content goes here </p></div>

Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.14)

31

BJ Mercury Customer Manual

Byjoomla.com

5.5.8 Text box: Fieldset style (PRO/DEV only)
<div class=" fieldset-style"> <fieldset class="bj-typo-legend-style-1"> <legend>Legend Style 1</legend> Content goes here </fieldset> </div>

Figure 60: bj-typo-legend-style-1

Figure 61: bj-typo-legend-style-2

Figure 62: bj-typo-legend-style-3

32

BJ Mercury Customer Manual

Byjoomla.com

Figure 63: bj-typo-legend-style-4

Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.14)

5.5.9 Link (PRO/DEV only)

<div class="links-style"> <ul><li><a class="bj-typo-link-style bj-typo-xxx" href="#">Sample link with icon</a></li> </ul> </div>

Figure 64: bj-typo-xxx

xxx = star, note, bullet, bullet-2, book, right-2, snow, bell, cart-2 and email. Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.14)

33

BJ Mercury Customer Manual

Byjoomla.com

5.5.10 Highlight
BJ Mercury allow you to highlight the text in three colors: red, grey and blue <p class="bj-typo-highlight-xxx">Content <span> Sentences need to highlight </span> Continue content</p>

Figure 26: Highlighted text

5.5.11 Button Style
We provide 2 types button are big button and small button. It will automatic change button’s color when you change page’s color. Big Button: <a class="typo-button">Try our product</a> Small Button: <input type="button" value="Login" class="button">

Figure 66: Big button

Figure 67: Small button

Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.14)

5.5.12 Tables
We provide tables with 3 colors are Red, Blue, and Grey. Out tables you can focus one or more columns in the table very easy. You want focus to columns; you need add class “choice-table” for the columns. You just need to use the code below:

34

BJ Mercury Customer Manual

Byjoomla.com

<table class="bj-typo-table-xxx bj-typo-table" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <th id="1" class="first">Table heading</th> <th id="2">Column heading 1</th> <th id="3" class="choice-table" valign="middle">Highlight Column</th> <th id="4">Column heading 3</th> </tr> <tr class="new first"> <td class="first">Sample content</td> <td>Sample content</td></tr> <tr class="old"><td class="first">Sample content</td> <td>Sample content</td></tr> <tr class="new"><td class="first">Sample content</td> <td>Sample content</td></tr> <tr class="old"><td class="first">Sample content</td> <td>Sample content</td></tr> <tr class="new"><td colspan="4"><div class="bj-typo-table-error">Table Footer. Content </div> <div class="bj-typo-table-data">Table data</div></td></tr> </tbody> </table>

xxx = red, blue and grey

35

BJ Mercury Customer Manual

Byjoomla.com

Figure 68: Red table

Figure 69: Blue table

Figure 70: Grey table

36

BJ Mercury Customer Manual

Byjoomla.com

5.5.13 Forms
We provide default form contain html tags are input text, text area, radio, checkbox, select and button. You just need add class “bj-typo-form” to “form” tag. <form class=”bj-typo-form”>…………..</form>

Example:
<form class="bj-typo-form"> <p> <label>sample input</label><br /> <input type="text" value="input here" /> </p> <p><label>Message</label><br /> <textarea>enter your message</textarea></p> <p><input type="checkbox" /> Sample check box <input type="radio" /> Sample radio box</p> <p>Sample select <br /> <select> <option>Option one</option> <option>Option two</option> <option>Option three</option> <option>Option four</option> <option>Option five</option></select></p> <p><input class="button" type="submit" value="SUBMIT" /></p> </form>

Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.14)

37

BJ Mercury Customer Manual

Byjoomla.com

5.5.14 Note: How to insert typography codes into articles.
Go to article manager, click into the article you want. You can find the “HTML” button which can show you the HTML source of the article.

Copy/Paste or type the code of typography to the place that you want in the HTML source window. For example you want to add a text box into this article.

38

BJ Mercury Customer Manual

Byjoomla.com

5.6 Menu style
BJ Mercury provides 2 menu styles which are Dropdown menu and Tree-like menu/ Side menu. Now we will have a look how to create these types of menu.

5.6.1 Dropdown menu

Figure 71: Drop-down menu

The main dropdown menu is the most popular menu that allows you to manage your website effectively and well structure.

39

BJ Mercury Customer Manual

Byjoomla.com

In Administrator page, go to Extensions Module manager  Choose BJ Dropdown menu. In Module parameter window, you can set up these parameters as below

In each parameter, there is detail instruction for you to modify them. To manage articles in Main menu go to Menus Main menu. The structure of the main menu will be shown. You can edit the structure as well as the order of them in this site. You can visit our home page for more information about BJ Dropdown menu http://byjoomla.com/joomla-extensions/list-menu To create and manage other type of menu, we use module type name mod_mainmenu. mod_mainmenu is the key Module within Joomla! for creating the Menu displays in the Front-end of the web site. In a standard Joomla! installation, that includes the sample data for the database, there are a number of Menus that are created by default.

40

BJ Mercury Customer Manual

Byjoomla.com

5.6.2 Side menu

The side menu is put on the left or right column position in the page. To create side menu, please follow these steps. Go to module manager  Click into button New  choose Menu  Set up parameter as pictures below. If you do not want to display the subitems of the menu, you can set End Level=1

Figure 72: Side menu

Figure 73: Detail configuration

41

BJ Mercury Customer Manual

Byjoomla.com

Figure 74: Parameters window

5.6.3 Tree-like menu
The tree-like menu is put on the left or right column position in the page. You can see it look like a family-tree of title and subtitle. To create tree-like menu, please follow these steps. Go to module manager  Click into button New  choose Menu  The parameters window will appear as in Figure 73, 74. Pay attention to those parameters below: Module class suffix (in Advanced parameters): “ bjmod-style-1” (Remember the space before the code)

Figure 75: tree-like menu

42

BJ Mercury Customer Manual

Byjoomla.com

5.6.4 Note: How to manage menus
In administrator page, go to Menus  Main menu. From here you can click on to every title and subtitle you want to edit

Figure 76: Menu item manager

Tips: You can find more worth information in menu management in Joomla docs site http://docs.joomla.org/Menu_Management Joomla help site http://help.joomla.org/content/view/67/223/

43

BJ Mercury Customer Manual

Byjoomla.com

5.7 Homepage (Front page manager)
In administrator page, go to Menus  Main menu. In menu item manager, click into Home. Here you can set up for appearance of Main position (number 12).

5.7.1 Top Position
1- Top position is a place to display modules. Top position 2- Intro text column 1 3- Intro text column 2 4- Intro text column 3 5- Intro text column 4

Figure 77: Main position

44

BJ Mercury Customer Manual

Byjoomla.com

Figure 78: In Joomla 1.5

Figure 79: In Joomla 1.7

5.7.2 Intro text
Number of intro text column is set in Parameters (Basic) in Joomla 1.5 or in Blog Layout Options in Joomla 1.7. Notes: In Joomla 1.7, you need to set parameter Page class (in Page display options) is “ homepage” (Remember the space before the text) so that the setting in Blog Layout Options could be valid in homepage.

Figure 80: Parameters window in Joomla 1.5

Figure 81: Parameters window in Joomla 1.7

45

BJ Mercury Customer Manual

Byjoomla.com

5.8 Logo
When you install our template, there is BJ Mercury logo set as default. You can replace it for your own logo.

5.8.1 Update logo by using parameter in Template manager
• Logo Path – path to your logo image file starting from your Joomla! Root folder. For example if you named your logo image file as mylogo.png and placed it in folder /images/mercury, then the logo path should be "/images/mercury/mylogo.png"; • Logo Link – URL where logo image should link to (! without preceding slash!). If you don’t want your logo to be linkable leave this box empty. • Logo Slogan - Slogan text to be attached to the logo image ALT text for SEO purpose.

5.9 Multiple languages support
BJ Mercury gives support for exact English, Vietnamese, Chinese, French, German, Japanese, Russia and Spanish. To install new language packages to your page. Go to http://joomlacode.org/gf/project/jtranslation/frs/ or other sites that provide language package. Then, you can download them and install to your computer by going to Extensions Install/Uninstall and then upload your .zip file. You can choose the language by going to Extensions  Language manager  Choose the language you want and set default for it.

6. COMPARE PACKAGE
BJ Templates are divided into 3 versions: Free, Pro and Dev. You can download free version in our Byjoomla home page. This table below shows the difference between versions.

46

BJ Mercury Customer Manual

Byjoomla.com

FREE
1 2 3 4 5 6 Flexible layouts Search Engine Optimized xHTML/CSS validation Menu styles Dropdown, levels CSS/JS compression Multiple languages

PRO

DEV

Multi- Dropdown, levels

Multi- Dropdown, levels

Multi-

7 8 9

Module positions Fantastic typography Splendid styles

23 Basic*

23 Full* Full*

23 Full* Full*

module Basic* Blue

10 6+ template themes 11 RTL support 12 Other parameters 13 As-easy-as-pie documentation 14 Browser compatible 15 Joomla version

6+ (Blue, Green, Red, 6+ (Blue, Green, Pink, Purple, Brown) Red, Pink, Purple, Brown)

Layout parameters

Layout parameters

Chrome, FF, IE 7+, Chrome, FF, IE 7+ Opera 1.5, 1.7 1.5, 1.7

Chrome, FF, IE 7+, Opera 1.5, 1.7

16 Source code & Image optimized 17 24/7 Support Blog, Forum 18 License GNU/GPL v3.0

Ticket system, Email Single domain

Ticket system, Email Unlimited domains

47

BJ Mercury Customer Manual

Byjoomla.com

*Fantastic typography: Basic contains Drop cap, List Style, Text Box Simple Style Full contains Drop cap, List style, Numbering styles, icon list 1, 2, Bubble styles, Text box simple styles, Text box special styles , Text box rounded styles, Button styles *Splendid module styles Basic: Module color set default as template color, typography set default Full : Module color 6+ and white, solid color, typography using list icon 1 and 2

48

BJ Mercury Customer Manual

Byjoomla.com

7. APPENDIX How to make your site look like demo page

When configure your own website, you may want your website to be at least look like the demo page. Let’s have a look at this to know what we did to make the demo page. You can see the position which is design in demo page. 1-Header area 2-Promotion area 3-Left column area 4-Right column area 5-Main content area 6- Bottom User area 7-Footer area

49

BJ Mercury Customer Manual

Byjoomla.com

7.1.1 Header area
7.1.1.1 Logo

The Logo Mercury is default sample logo. The logo file is located in Joomla root folder. You can find more information for uploading your own logo in Logo (5.6) section. 7.1.1.2 Main menu toolbar After login as Administrator user, you can go to main menu manager by click to Extensions Module manager. In module manager, you looking for Main menu module, or it can be Right menu module or Left menu module. The parameters window will be shown. This is our parameter set up.

To manage the menu item, you can go to main menu manager by going to Menus Main menu. The list of the items in main menu will be shown.

50

BJ Mercury Customer Manual

Byjoomla.com

7.1.2 Promotion area
There are three modules used in this area: BJ Image Slider, Advert and BJ Headline roller. Advert is custom html

module in joomla. For BJ Image Slider 2 and BJ Headline roller, there are new versions which of will those be modules

included in PRO and DEV package. For free user, please go to our site to download BJ Image Slider 2 free version separately. It will be some how different from the demo site. We offer PRO and DEV version for BJ Image Slider 2. It is possible to buy just the module itself. For BJ Headline roller, the new style will be applied for PRO and DEV version only. We highly recommend you to use the PRO or DEV version to get the best experience.

51

BJ Mercury Customer Manual

Byjoomla.com

7.1.2.1 BJ Headline roller There is new version of BJ Headline roller which is design just for BJ Mercury. It is more clear and elegant compare to normal BJ Headline roller. You can see the different between the two.

Figure 82: BJ Headline roller for Mercury

Figure 83: Normal headline roller

For PRO/DEV user, it is included and automatically and installed in the template. For free user, the style will be normal headline roller.

This is our set up parameter for BJ Headline roller.

52

BJ Mercury Customer Manual

Byjoomla.com

Remember to leave the “module class suffix” blank in all articles in item list so that the template can load the default style as you can see in the demo page. 7.1.2.2 BJ Image Slider You can find our tutorial for BJ Image Slider in our page http://byjoomla.com/. You are going to get your images ready for the slideshow. BJ Image Slider is able to automatically resize your images to match the slideshow size, but for the best result we’d recommend you to pay attention to preparing your images. The main thing here is to crop your images so they have size similar to slideshow area size 7.1.2.3 Advert module Advert is a custom module. You can find more information about custom module in What is module Custom?. Here is the HTML code for the advert module

Code: <h1>Grow

your online business with B. Mercury template</h1> 53

BJ Mercury Customer Manual

Byjoomla.com

<p style="font-size:16px;">Low purchase price - High value usage</p> <p style="font-size:16px;">Professional template design to be suitable for your website</p> <p style="font-size:16px;">24/7 customers support to all of the users</p> <p style="font-size:16px;">30-day money back guarantee.</p> <div class="bj-advert-button"><a class="typo-button">Try B. Mercury now!</a></div><div class="bj-advert-text italic">For the best deal ever</div>

7.1.3 Left column area
You can choose whatever module you want to put into left and right area. In left column, we choose two “Main menu” module and “Facebook activities” module. We have free facebook activity module available for download in our home page http://Byjoomla.com.

7.1.4 Right column area
The log-in form is created by a module name mod_login. It is contained in the template when you install. “Overview” and “Promotion” modules are both mod_custom. You can write and modify it as much as you wish. Example

Figure 84: Module overview

Code: <p><img src="images/stories/icon 2.png" border="0" width="50" height="50" style="vertical-align: baseline; float: left;" /> B.Mercury is a low cost - high value Joomla template which includes 6-color variation, a large typography library for freely customization and multi-browser compatibility.</

54

BJ Mercury Customer Manual

Byjoomla.com

7.1.5 Main content area

Figure 85: Main content area

The articles appear in main content area is known as front page content. This area is divided into 2 parts. The “WELCOME TO JOOLA TEMPLATE” part is a module in top position. Mod_custom or mod_bj_content_tab are good suggestions. You can change the

55

BJ Mercury Customer Manual

Byjoomla.com

module you want to put into this position. The “New product available” part is four articles which you can choose from your articles. 7.1.5.1 Mod_custom To set up the top position with the module as in the picture, you need to create a new custom module. Go to Extensions  Module manager  New  Choose Custom HTML and set up parameter as below

In Custom output, you can type your content and add your image there if you want.

56

BJ Mercury Customer Manual

Byjoomla.com

Figure 86: Content goes here

7.1.6 Bottom Users area

Figure 87: Bottom user area

7.1.7.1 User 1, 2, 3, 4: mod_custom You can create new module easily by using mod_custom Go to Extensions  Module manager  New  Choose “Custom HTML”  Type the title you want (Latest posts, Latest Comments, Newsletter, etc)  Choose the position (User 1 or 2 or 3 or 4)  Type the content you want into Custom output.

57

BJ Mercury Customer Manual

Byjoomla.com

Example

Figure 88: Video module

<p> <object width="200" height="160"> <param name="movie" value="http://www.youtube.com/v/7WSO6fFD3pc?version=3&amp;hl=en_US" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /><embed type="application/x-shockwaveflash" width="200" height="160" src="http://www.youtube.com/v/7WSO6fFD3pc?version=3&amp;hl=en_US" allowfullscreen="true" allowscriptaccess="always"></embed> </object> </p> Here is our suggestion to make your site look like demo page, it is just some basic step. If you have any question. Please do not hesitate to ask us. We are all here to support you. We wish you all best luck in your life and business. Thank you for using Byjoomla product.

58

Sign up to vote on this title
UsefulNot useful