2. 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
3. BJ Jupiter Customer Manual Byjoomla.com
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
4. 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
4
5. 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, 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
6. 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, 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
7. 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.
7
8. 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
8
9. 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 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
10. 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 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
11. 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 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
12. 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, 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
15. 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
16. 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
17. BJ Jupiter Customer Manual Byjoomla.com
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
18. 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 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 21: Middle Users Layout parameters
18
19. 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 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 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
20. 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
21. 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
22. 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 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
23. 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
24. BJ Jupiter Customer Manual Byjoomla.com
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
26. 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 “ list-
nobg” (Remember the space before
26
27. 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
28. 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
29. 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
30. 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
31. 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
32. 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
33. 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"> 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
34. BJ Jupiter Customer Manual Byjoomla.com
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
Detail instruction about how to use these codes is in the Note: How to insert typography codes
into articles (5.5.9)
34
35. 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, 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
36. 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
37. 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
38. 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
39. 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 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
40. 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
41. 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
42. 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
43. 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
1- Component heading (Page Heading)
2- Leading
3- Intro text column 1
4- Intro text column 2
43
44. 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
45. 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
46. 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 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
47. BJ Jupiter Customer Manual Byjoomla.com
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
48. 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. 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
49. 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
50. 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
51. 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
52. 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
53. 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
54. 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
55. 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
56. 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
57. 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
58. 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
59. 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
60. 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 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
61. BJ Jupiter Customer Manual Byjoomla.com
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
62. 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