Getting started with bj jupiter

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


5.4.3 Let’s 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

3


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

4


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, we’ll 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, we’ll 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. It’s up to you. In fact, it
can be pretty fun. Grab a cup of your favorite caffeinated beverage and let’s get to work.

5


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, Figure 1: Login window

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 2: View button

6


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


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

8


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 don’t publish any modules in some
positions it won’t take any blank spaces leaving those for neighbor modules.

1-Header

2-Toolbar 11-Top

3-Advert 1 12-Main

4-Headline 13-Banner

5-User 1 14-User 5

6-User 2 15-User 6

7-User 3 16-User 7

8-User 4 17-User 8

9-Left 18-User 9

10-Right 19-User 10

20-User 11

21-User 12

22-Legals

23-Footer

9


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

10


5.3 Template parameters

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 Jupiter

“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 Jupiter PRO provides
25 parameters for template
manager.

Figure 8: Parameters window

11


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, table’s
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


Figure 11: BJ Jupiter Red

Figure 12: BJ Jupiter Pink

13


Figure 13: BJ Jupiter Purple

Figure 14: BJ Jupiter Brown

14


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


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


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


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)



Figure 21: Middle Users Layout parameters

18


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)



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


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


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


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 don’t 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


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


5.4.3 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.
For example

24


Figure 36: bjmod-color-solid Figure 37: bjmod-color-red typo-thumbup

25


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 “ list-
nobg” (Remember the space before

26


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


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


Figure 41: Information – boxinfo Figure 42: Comment - boxcomment

Figure 43: Attachment – boxattachment Figure 44: Tip- boxtip

Figure 45: Question – boxquestion Figure 46: Note - boxnote


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


(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


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


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


Figure 47: Four bubble styles


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


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


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"> xxx can be check, arrow or star
<li>Content goes here</li>
<li>Content goes here</li>
</ul>

Automatic list style-no class code xxx = check

33


xxx= arrow xxx=star

Example: <ul class="arrow">

<li>Sample of Arrow list text</li>

<li>Sample of Arrow list text</li>

</ul>

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
here
x is the symbol that you want to become Drop cap.

Figure 48: Drop cap text


34


5.5.8 Headline font style (PRO/DEV only)

Figure 49: Headline roller

To create the headline style look like in the picture, let’s 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


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


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


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


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

39


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



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


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


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

1- Component heading (Page Heading)
2- Leading
3- Intro text column 1
4- Intro text column 2

43


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


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


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 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 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 PRO DEV
1 Flexible layouts

2 Search Engine
Optimized
3 xHTML/CSS
validation
4 Menu styles Dropdown, Multi- Dropdown, Multi- Dropdown, Multi-
levels levels levels

46


5 CSS/JS compression

6 Multiple languages

7 Module positions 23 23 23

8 Fantastic typography Basic* Full* Full*

9 Splendid module Basic* Full* Full*
styles

10 6+ template themes Blue 6+ (Blue, Green, Red, 6+ (Blue, Green,
Pink, Purple, Brown) Red, Pink, Purple,
Brown)
11 RTL support

12 Other parameters Layout parameters Layout parameters

13 As-easy-as-pie
documentation
14 Browser compatible Chrome, FF, IE 7+, Chrome, FF, IE 7+ Chrome, FF, IE 7+,
Opera Opera
15 Joomla version 1.5, 1.7 1.5, 1.7 1.5, 1.7

16 Source code & Image
optimized
17 24/7 Support Blog, Forum Ticket system, Email Ticket system, Email

18 License GNU/GPL v3.0 Single domain 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


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


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


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


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


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


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


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


54


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


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


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


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


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

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


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

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

60


7.2.2 Step 2: Upload images to your server
Now, when your images are ready, it’s 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


After setting the size for images, you can upload them by going to ComponentManage
imagesUpload. 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 ExtensionsModule 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

Getting started with bj jupiter

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to Getting started with bj jupiter (20)

Recently uploaded (20)

Getting started with bj jupiter