Vous êtes sur la page 1sur 62

GETTING STARTED WITH

BJ JUPITER

http://byjoomla.com Created: 08/02/2012


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 Jupiter 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) ................................................................................... 15 5.3.3 Top User Layout (PRO/DEV only) ............................................................................. 16 5.3.4 Middle user layout (PRO/DEV only) .......................................................................... 18 5.3.5 Bottom User Layout (PRO/DEV only) ........................................................................ 19 5.3.6 Logo Path (PRO/DEV only) ........................................................................................ 19 5.3.7 Logo Link (PRO/DEV only) ........................................................................................ 20 5.3.8 Logo Slogan Text (PRO/DEV only) ............................................................................ 20 5.3.9 Component and Content heading ................................................................................. 20 5.3.10 Text alignment ........................................................................................................... 21 5.4 Module style (by using Module class suffix) ...................................................................... 21 5.4.1 Module Color (PRO/DEV only) .................................................................................. 22 5.4.2 Module Icon (PRO/DEV only) .................................................................................... 23 2

BJ Jupiter Customer Manual

Byjoomla.com

5.4.3 Lets start to combine color and style in the code ....................................................... 24 5.4.4 List style. ...................................................................................................................... 26 5.5 Typography ......................................................................................................................... 27 5.5.1 Icon typography (PRO/DEV only) .............................................................................. 27 5.5.2 Text box: Simple style ................................................................................................. 28 5.5.3 Text box: Dialog style (PRO/DEV only) ..................................................................... 29 5.5.4 Text box: Bubble style (PRO/DEV only) .................................................................... 31 5.5.5 Typography: Number style (PRO/DEV only) ............................................................. 32 5.5.6 Typography: List style ................................................................................................. 33 5.5.7 Drop cap symbol .......................................................................................................... 34 5.5.8 Headline font style (PRO/DEV only) .......................................................................... 35 5.5.9 Note: How to insert typography codes into articles. .................................................... 37 5.6 Menu style ........................................................................................................................... 38 5.6.1 Dropdown menu........................................................................................................... 38 5.6.2 Side menu..................................................................................................................... 40 5.6.3 Tree-like menu ............................................................................................................. 41 5.6.4 Note: How to manage menus ....................................................................................... 42 5.7 Homepage (Front page manager)........................................................................................ 43 5.7.1 Component heading ..................................................................................................... 44 5.7.2 Leading and Intro text .................................................................................................. 44 5.8 Logo .................................................................................................................................... 45 5.8.1 Update logo by creating module in header position. ................................................... 45 5.8.2 Update logo by using parameter in Template manager ............................................... 46 5.9 Multiple languages support ................................................................................................. 46

BJ Jupiter Customer Manual

Byjoomla.com

6. COMPARE PACKAGE ........................................................................................................... 46 7. APPENDIX ............................................................................................................................... 47 7.1 Appendix 1: How to make your site look like demo page .................................................. 48 7.1.1 Header area .................................................................................................................. 49 7.1.2 Promotion area ............................................................................................................. 50 7.1.3 Top User area ............................................................................................................... 51 7.1.4 Left and Right columns area ........................................................................................ 53 7.1.5 Main content area ......................................................................................................... 55 7.1.6 Middle Users area ........................................................................................................ 59 7.1.7 Bottom Users area ........................................................................................................ 60 7.2 Appendix 2: BJ ImageSlider updated for BJ Jupiter .......................................................... 60 7.2.1 Step 1: Prepare images to be included in slideshow .................................................... 60 7.2.2 Step 2: Upload images to your server .......................................................................... 61 7.2.3 Step 3: Set up module .................................................................................................. 62

BJ Jupiter Customer Manual

Byjoomla.com

1. INTRODUCTION
Welcome to Byjoomla.com. Thank you for choosing our product- Website template BJ Jupiter. You want a website with gorgeous but professional text and images to highlight your business, your hobbies No matter what your ultimate goal is, BJ Jupiter can provide you the ability to make it become incredible. In the next section, well walk through the process of setting up. We have littered this guide with helpful screenshots and valuable step-by-step guides. With that out of the way, well add elements to build the first page of a website that you can later expand to suit your personal interests or business. We use a specific style in this guide which is shown in the demo site as an example. You can follow the process exactly as the example to publish your website, or you can use this guide as an introduction to BJ Jupiter and after that you can modify it to fit your requirement. Its up to you. In fact, it can be pretty fun. Grab a cup of your favorite caffeinated beverage and lets get to work.

BJ Jupiter 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 Login using 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

Figure 1: Login window

In the next page, there are downloadable packages that you can download to your own computer.

Figure 2: View button

BJ Jupiter 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.

BJ Jupiter Customer Manual

Byjoomla.com

4. FEATURES
We included in BJ Jupiter many cool features to your site. They are users friendly and make your customers conveniently browsing the web. You can discover how to take all advantage 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, Green, Red, Brown, Pink, Purple) 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

BJ Jupiter Customer Manual

Byjoomla.com

5. CONFIGURATION
5.1 Position
BJ Jupiter provides 23 module positions which allow you to have multiple layout configurations. All module positions are collapsible. If you dont publish any modules in some positions it wont take any blank spaces leaving those for neighbor modules. 1-Header 2-Toolbar 3-Advert 1 4-Headline 5-User 1 6-User 2 7-User 3 8-User 4 9-Left 10-Right 11-Top 12-Main 13-Banner 14-User 5 15-User 6 16-User 7 17-User 8 18-User 9 19-User 10 20-User 11 21-User 12 22-Legals 23-Footer

BJ Jupiter Customer Manual

Byjoomla.com

5.2 Layout
The layout in BJ Jupiter is really flexible. There are one column layout, two columns layout main-right, two columns layout main-left and three columns layout. In PRO BJ Jupiter, the width of columns can be adjusted (as you can see in Template parameters). It is easy to set the layout. You just need to put your module in the right place. For example, if you put all modules in left position, because 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 dont 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

10

BJ Jupiter Customer Manual

Byjoomla.com

5.3 Template parameters

These are steps for you to manage your template. First, you need to open the

template window

parameters

As the administrator user you go to template

management by Extensions Template management Choose BJ Jupiter Apply and Save button are both used to save the change you made Click in on

parameters.

Save if you want to exit the parameter window. Click Apply if you want to stay on page. BJ Jupiter PRO provides 25 parameters for template manager.

Figure 8: Parameters window

11

BJ Jupiter Customer Manual

Byjoomla.com

5.3.1 Template color (PRO/DEV only)


BJ Jupiter PRO provides 6 colors: BJ Jupiter Blue, Green, Purple, Red, Pink and Brown. Each color covers not only the main background, but also color of drop-down menu, links, tables header and some others. For Free Version, the template color is fixed in Blue.

Figure 10: BJ Jupiter Blue

Figure 9: BJ Jupiter Green

12

BJ Jupiter Customer Manual

Byjoomla.com

Figure 11: BJ Jupiter Red

Figure 12: BJ Jupiter Pink

13

BJ Jupiter Customer Manual

Byjoomla.com

Figure 13: BJ Jupiter Purple

Figure 14: BJ Jupiter Brown

14

BJ Jupiter Customer Manual

Byjoomla.com

5.3.2 Layout width (PRO/DEV only)


BJ Jupiter PRO allows you to change width size for overall layout, left column and right column. You just need to configure appropriate template parameters to get the result you want. 5.3.2.1 Template Width You can setup overall layout width in pixels.

Figure 15: Template width

15

BJ Jupiter Customer Manual

Byjoomla.com

5.3.2.2 Left and right column width Width of left or right column position modules in pixels

Figure 16: Left column width

Figure 17: Right column width

5.3.3 Top User Layout (PRO/DEV only)


In BJ Jupiter PRO, it is allowed to modify the width of 4 modules in Top User position (User 1, 2, 3, 4).

Figure 18: Modules in Top User Position (In Demo page)

16

BJ Jupiter Customer Manual

Byjoomla.com

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

Figure 19: Top User Layout parameters

You can choose whatever module you want to put into top users position. For example:

In case you want to set 4 modules in top user position, you can find more information in Appendix 1: How to make your site look like demo page: Top User area.

17

BJ Jupiter Customer Manual

Byjoomla.com

5.3.4 Middle user layout (PRO/DEV only)


In BJ Jupiter PRO, it is allowed to modify the width of 4 modules in Middle User position (User 5, 6, 7, 8).

Figure 20: Modules in Middle position Users (In Demo page)

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

Figure 21: Middle Users Layout parameters

18

BJ Jupiter Customer Manual

Byjoomla.com

5.3.5 Bottom User Layout (PRO/DEV only)


In BJ Jupiter PRO, it is allowed to modify the width of 4 modules in Bottom User position (User 9, 10, 11, 12).

Figure 22: Modules in Bottom User position (In Demo page)

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

Figure 23: Bottom Users layout parameters

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/jupiter, then the logo path should be "/images/jupiter/mylogo.png"; 19

BJ Jupiter Customer Manual

Byjoomla.com

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 Component and Content heading

Figure 24: Component and content heading in Main position

20

BJ Jupiter Customer Manual

Byjoomla.com

You can change the style of these heading. There are three styles available for each heading. You can see the change in the appearance between H1, H2 and H3 of Component heading. The style H1, H2, H3 of content heading is not visible but the codes behind them are change. These changes in codes are used for SEO purpose.

5.3.10 Text alignment


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

Figure 25: Right to Left

Figure 26: Left to Right

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 27: Module class suffix parameter

21

BJ Jupiter Customer Manual

Byjoomla.com

The basic form of module class suffix which used to modify style in BJ Jupiter contains two elements:
Module color-Icon typography

For example: bjmod-color typo-download If you dont want to customize some of the criteria below, you can leave it blank for example you can enter just bjmod-color-blue into module class suffix. Now we will have a look which colors and icons that BJ Jupiter offers

5.4.1 Module Color (PRO/DEV only)


BJ Jupiter offers 8 module colors. If you leave this space blank, the default color of the whole template will be applied on to the module.

Figure 28: bjmod-color-blue

Figure 29: bjmod-color-green

Figure 30: bjmod-color-red

Figure 31: bjmod-color-pink

22

BJ Jupiter Customer Manual

Byjoomla.com

Figure 32: bjmod-color-purple

Figure 33: bjmod-color-brown

Figure 34: bjmod-color-white

Figure 35: bjmod-color-solid

5.4.2 Module Icon (PRO/DEV only)


In module title, you can also use icon for styling title. There are 31 icons available which are coded as below.

23

BJ Jupiter Customer Manual

Byjoomla.com

5.4.3 Lets 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 dont want to modify some of elements offered, you can leave it blank. For example

24

BJ Jupiter Customer Manual

Byjoomla.com

Figure 36: bjmod-color-solid

Figure 37: bjmod-color-red typo-thumbup

25

BJ Jupiter Customer Manual

Byjoomla.com

5.4.4 List style.

Figure 38: Module list style: with bullet and no bullet

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. The default style is list with bullet as you see in figure 37 (left-hand side). To create the list without bullet as in figure 37 (right-hand side), module class suffix is listnobg (Remember the space before

26

BJ Jupiter Customer Manual

Byjoomla.com

the code)

5.5 Typography 5.5.1 Icon typography (PRO/DEV only)


There are 2 ways for configuration of icon typography: Method 1: method 1 is applied for a paragraph of which, the typo icon is always on the left of the paragraph
<p class=xxx><span class=icon> </span> Content here

</p>

Method 2: used when you want the typo icons appear inline
<span class=xxx></span>

In typography configuration, xxx can be:

Example: <span class=typo-heart></span>

27

BJ Jupiter Customer Manual

Byjoomla.com

Example: <span class=icon-new></span> Detail instruction about how to use these codes is in the Note: How to insert typography codes into articles (5.5.9)

5.5.2 Text box: Simple style


This is styling for special text paragraph. Usage:
<div class="special"><div>Content goes here</div></div>

Figure 39: Warning boxwarning

Figure 40: Download - boxdownload

28

BJ Jupiter Customer Manual

Byjoomla.com

Figure 41: Information boxinfo

Figure 42: Comment - boxcomment

Figure 43: Attachment boxattachment

Figure 44: Tip- boxtip

Figure 45: Question boxquestion

Figure 46: Note - boxnote

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

5.5.3 Text box: Dialog style (PRO/DEV only)


5.5.3.1 Configuration of dialog special style textbox:
<div class="jupiter-textbox-1"> <div class="title-blue">BOX TITLE</div> Content goes here </div>

29

BJ Jupiter Customer Manual

Byjoomla.com

(Blue color can be replaced by: green, brown, orange, purple, red)

5.5.3.2 Configuration of dialog rounded style textbox:


<div class=" jupiter-textbox-2"> <div class="blue">Content goes here</div> </div>

30

BJ Jupiter Customer Manual

Byjoomla.com

(Blue color can be replaced by: green, brown, orange, purple, red)

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

5.5.4 Text box: Bubble style (PRO/DEV only)


BJ Jupiter support bubble style which are code as
<div class="bubble"><div><div><div><div><div>Your content goes here</div></div></div></div></div></div><span class="author">Rounded Buble</span>

x is the number of bubble style that you want. x can be 1, 2, 3 or 4

31

BJ Jupiter Customer Manual

Byjoomla.com

Figure 47: Four bubble styles

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

5.5.5 Typography: 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
<p class="jupiter-number-square"><span class="number">02</span></p>.

<p class="jupiter-number-square"><span class="number">01</span>Your content goes here</p>

32

BJ Jupiter Customer Manual

Byjoomla.com

<p class="jupiter-number-round"><span class="number">01</span>Your content goes here</p>

<p class="bignumber1"><span class="bignumber1">01</span>Your content goes here </p>

<p class="bignumber2"><span class="bignumber2">01</span>Your content goes here </p>

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

5.5.6 Typography: List style


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

xxx can be check, arrow or star

Automatic list style-no class code

xxx = check

33

BJ Jupiter Customer Manual

Byjoomla.com

xxx= arrow Example: <ul class="arrow"> <li>Sample of Arrow list text</li> <li>Sample of Arrow list text</li> </ul>

xxx=star

5.5.7 Drop cap symbol


You can use Drop cap symbol style for magazine or newspaper text paragraph.
<p><span class="dropcap">x</span>Content goes

x is the symbol that you want to become Drop cap.

here

Figure 48: Drop cap text

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

34

BJ Jupiter Customer Manual

Byjoomla.com

5.5.8 Headline font style (PRO/DEV only)

Figure 49: Headline roller

To create the headline style look like in the picture, lets have a look at module BJ Headline roller (You can find detail instruction to use BJ Headline roller in our Byjoomla home page http://byjoomla.com/joomla-extensions)

35

BJ Jupiter Customer Manual

Byjoomla.com

Figure 50: Parameter window of BJ Headline roller module

Pay attention into the parameters below Enable: Yes Position: need to be in Headline position Module Class suffix: Left it blank Category ID: Name of category that contains articles that you want to show. After setting up for BJ Headline roller, go to the article that you want to show and type these codes to the article.
<span>Content first line goes here</span> <br/> <span>Content second line goes here</span>

Detail instruction is in the Note: How to insert typography codes into articles (5.5.9)

36

BJ Jupiter Customer Manual

Byjoomla.com

5.5.9 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.

37

BJ Jupiter Customer Manual

Byjoomla.com

5.6 Menu style


BJ Jupiter provides 3 menu styles which are Dropdown menu, Tree-like menu/ Side menu and Icon menu. Now we will have a look how to create these types of menu.

5.6.1 Dropdown menu

Figure 51: Drop-down menu

The main dropdown menu is the most popular menu that allows you to manage your website effectively and well structure. In Administrator page, go to Extensions Module manager Choose BJ Dropdown menu. In Module parameter window, you can set up these parameters as below

38

BJ Jupiter Customer Manual

Byjoomla.com

Figure 52: BJ Dropdown menu parameter window

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 Frontend 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.

39

BJ Jupiter Customer Manual

Byjoomla.com

5.6.2 Side menu

Figure 53: 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

Figure 54: Detail configuration

40

BJ Jupiter Customer Manual

Byjoomla.com

Figure 55: 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 52, 53. Pay attention to those parameters below: Module class suffix (in Advanced parameters): list-menu (Remember the space before the code)

Figure 56: list menu

41

BJ Jupiter Customer Manual

Byjoomla.com

5.6.4 Note: How to manage menus


In administrator page, go to Menus Mainmenu. From here you can click on to every title and subtitle you want to edit

Figure 57: 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/

42

BJ Jupiter Customer Manual

Byjoomla.com

5.7 Homepage (Front page manager)


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

Figure 58: Main position

1234-

Component heading (Page Heading) Leading Intro text column 1 Intro text column 2 43

BJ Jupiter Customer Manual

Byjoomla.com

5.7.1 Component heading


Component heading is set up in Parameters (System) in Joomla 1.5 or in Page display option in Joomla 1.7

Figure 59: In Joomla 1.5

Figure 60: In Joomla 1.7

5.7.2 Leading and Intro text


Number of leading and 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 & 2.5, 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. In case you use Feature Articles menu type, you need one more class, which should be homepage blog.

Figure 61: Parameters window in Joomla 1.5

Figure 62: Parameters window in Joomla 1.7

44

BJ Jupiter Customer Manual

Byjoomla.com

5.8 Logo
When you install our template, there is BJ Jupiter logo set as default. You can replace it for your own logo. There are two ways to update logo

5.8.1 Update logo by creating module in header position.


From administrator page, go to Extensions Module manager Choose New button. There will be a list showing all type of module that you can create. Among these modules, choose Custom HTML. Fill in the title that you want. In Custom Output you can upload your logo by going to Image. You can upload image from your computer by using Browse button. When your image is uploaded in root folder already, choose the image and press Insert. Press Apply or Save button when you finish.

Figure 63: Uploading images window Figure 64: Custom Output

45

BJ Jupiter Customer Manual

Byjoomla.com

5.8.2 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/jupiter, then the logo path should be "/images/jupiter/mylogo.png"; Logo Link URL where logo image should link to (! without preceding slash!). If you dont 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 Jupiter 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.

FREE
1 2 3 4 Flexible layouts Search Engine Optimized xHTML/CSS validation Dropdown, Menu styles levels

PRO

DEV

Multi- Dropdown, levels

Multi- Dropdown, levels

Multi-

46

BJ Jupiter Customer Manual

Byjoomla.com

5 6

CSS/JS compression Multiple languages

7 8 9 10

Module positions Fantastic typography Splendid styles

23 Basic*

23 Full* Full*

23 Full* Full*

module Basic* Blue

6+ template themes

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

11 12 13 14 15 16 17 18

RTL support Other parameters As-easy-as-pie documentation Browser compatible Joomla version 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

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

Ticket system, Email Single domain

Ticket system, Email Unlimited domains

*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

7. APPENDIX
47

BJ Jupiter Customer Manual

Byjoomla.com

7.1 Appendix 1: 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. Lets 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-Icon menu area 4-Left column area 5-Right column area 6-Main content area 7-Middle User area 8- Bottom User area 9-Footer area

48

BJ Jupiter Customer Manual

Byjoomla.com

7.1.1 Header area


7.1.1.1 Logo

The Logo B Jupiter 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 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.

49

BJ Jupiter Customer Manual

Byjoomla.com

7.1.2 Promotion area


There are two modules used in this area: BJ Image Slider and BJ Headline roller. BJ Headline roller in

contained in the download package but BJ Image Slider is not. You have to download the update version of BJ Image Slider separately. For BJ

Image Slider usage, you can visit Appendix 2 or download our tutorial from our home page. This is our set up parameter for BJ Image Slider. Remember to crop your image to suitable to your Slide Show width and height. Category ID is the ID of the category that contains the

images which will be shown.

50

BJ Jupiter Customer Manual

Byjoomla.com

7.1.2.1 BJ Headline roller

This is our set up parameter for BJ Headline roller. 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.3 Top User area

Figure 65: Icon menu

Go to module management Extensions Module manager. You can see the New button (the green button in the top right hand side of the screen). Choose New Choose Custom HTML. You can see in the picture the detail configurations to make the first module Finance. In module class suffix, please enter the code finance (Remember the space before word finance). You

51

BJ Jupiter Customer Manual

Byjoomla.com

can do the same with the three next modules in positions user 2, 3, 4 with the module class suffix namely email, business and food (Remember the space before the code)

Figure 66: Detail configuration for new custom module Figure 67: module class suffix

finance

email

business

food

52

BJ Jupiter Customer Manual

Byjoomla.com

7.1.4 Left and Right columns area


You can choose whatever module you want to put into left and right area. In right column, we choose Search and Pools modules. 7.1.4.1 Search module Search module is contained in the download package, you do not need to install it. You can go to Extension Module manager Search for mod_search and set the parameters as pictures below

Figure 68: Details configuration Figure 69: Search module parameters window

53

BJ Jupiter Customer Manual

Byjoomla.com

7.1.4.2 Polls module Polls module used for gathering answers for surveys or questionnaires. The configuration information is shown in pictures below.

Figure 70: Details configuration

Figure 71: Parameters window

54

BJ Jupiter Customer Manual

Byjoomla.com

7.1.5 Main content area

Figure 72: Main content area

The articles appear in main content area is known as front page content. This area is divided into 2 parts. The About Venus part is a module in top position. Mod_custom or mod_bj_content_tab are good suggestions. You can change the module you want to put into this position. The New product available part is three articles which you can choose from your articles.

55

BJ Jupiter Customer Manual

Byjoomla.com

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 Jupiter Customer Manual

Byjoomla.com

Figure 73: Content goes here

7.1.5.2 The three columns articles area To manage that area you need to go to Menus Mainmenu Home. For Joomla 1.5, you can set up the parameters as picture below.

Intro and columns are set as 3 so that there are 3 articles shown in 3 columns.

Figure 74: Basic parameters for Joomla 1,5

57

BJ Jupiter Customer Manual

Byjoomla.com

For Joomla 1.7, you need to set up in both Blog Layout option and Page Display Options. In page class, you need to type homepage (Remember the space before the text) so that the set up in Blog Layout Options could be applied in homepage.

Figure 75: Blog Layout Options parameters

Figure 76: Note: Page class " homepage"

To choose the articles which appear there, you go to Content Article manager New Make your own article and select the section is News. The threes newest published articles will be shown in the main content area.

Figure 77: New article in News section

58

BJ Jupiter Customer Manual

Byjoomla.com

7.1.6 Middle Users area

Figure 78: Middle user area

7.1.6.1 User 5, 6, 7: mod_custom You can create new module easily by using mod_bj_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 5 or 6 or 7) Type the content you want into Custom output. 7.1.6.2 User 8: mod_bj_photo_galery Photo gallery is included in the download package, you do not need to download it. Please visit our home page to find the tutorials for this module. Go to Extensions Module manager Find mod_bj_photo_galery Enable this module.

59

BJ Jupiter Customer Manual

Byjoomla.com

7.1.7 Bottom Users area

Figure 79: Bottom user area

7.1.7.1 User 9, 10, 11, 12: 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 9 or 10 or 11 or 12) Type the content you want into Custom output.

7.2 Appendix 2: BJ ImageSlider updated for BJ Jupiter


The header image slideshow you see on BJ Jupiter demo website is another Joomla! extension from Byjoomla.com called BJ ImageSlider 2 updated. It was used in BJ Venus 1 and 2 also. In the download package for PRO/DEV version there is BJ Image Slider free version. Please go to Byjoomla.com homepage to download BJ ImageSlider and its tutorial. Because the version in download package is free so that it can be different from what you see in our demo site. To make it neat, it is recommended that you could buy our BJ Image Slider PRO/DEV version. Then, please follow these following steps to set up BJ Image Slider.

7.2.1 Step 1: Prepare images to be included in slideshow


You are going to get your images ready for the slideshow. BJ ImageSlider is able to automatically resize your images to match the slideshow size, but for the best result wed 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.

60

BJ Jupiter Customer Manual

Byjoomla.com

7.2.2 Step 2: Upload images to your server


Now, when your images are ready, its time to upload them to your server. In Administrator go to Component BJ ImageSlider Configurations and Set the Image width and height to fit with the width and height of the slideshow.

61

BJ Jupiter Customer Manual

Byjoomla.com

After setting the size for images, you can upload them by going to ComponentManage imagesUpload. You can choose the category you want to store these images. Please remember the category ID. Set up parameter for ImageSlider Module

7.2.3 Step 3: Set up module


Go to ExtensionsModule Manager BJ ImageSlider 2. One parameter window will appear. Enable: Yes Position: Advert 1 Category ID: Choose category ID as the category that your images are uploaded in. Slider style: Jupiter. These set up is enough for showing the images. For more information about modifying ImageSlider parameters, please visit our home page to download our tutorial.

62