GETTING STARTED WITH                                           BJ JUPITER                                                 ...
BJ Jupiter Customer Manual                                                                                               B...
BJ Jupiter Customer Manual                                                                                           Byjoo...
BJ Jupiter Customer Manual                                                                                         Byjooml...
BJ Jupiter Customer Manual                                                      Byjoomla.com1. INTRODUCTION               ...
BJ Jupiter Customer Manual                                                        Byjoomla.com2. DOWNLOAD2.1 Free versionA...
BJ Jupiter Customer Manual                                               Byjoomla.com3. INSTALLATION   Unzip the .zip fil...
BJ Jupiter Customer Manual                                                     Byjoomla.com4. FEATURESWe included in BJ Ju...
BJ Jupiter Customer Manual                                                     Byjoomla.com5. CONFIGURATION5.1 PositionBJ ...
BJ Jupiter Customer Manual                                                          Byjoomla.com5.2 LayoutThe layout in BJ...
BJ Jupiter Customer Manual                                     Byjoomla.com5.3 Template parameters                        ...
BJ Jupiter Customer Manual                                                       Byjoomla.com5.3.1 Template color (PRO/DEV...
BJ Jupiter Customer Manual                                Byjoomla.com                             Figure 11: BJ Jupiter R...
BJ Jupiter Customer Manual                                  Byjoomla.com                             Figure 13: BJ Jupiter...
BJ Jupiter Customer Manual                                                    Byjoomla.com5.3.2 Layout width (PRO/DEV only...
BJ Jupiter Customer Manual                                                                  Byjoomla.com5.3.2.2 Left and r...
BJ Jupiter Customer Manual                                                    Byjoomla.comIf you choose “Auto” 4 module’s ...
BJ Jupiter Customer Manual                                                           Byjoomla.com5.3.4 Middle user layout ...
BJ Jupiter Customer Manual                                                          Byjoomla.com5.3.5 Bottom User Layout (...
BJ Jupiter Customer Manual                                                        Byjoomla.com5.3.7 Logo Link (PRO/DEV onl...
BJ Jupiter Customer Manual                                                                          Byjoomla.comYou can ch...
BJ Jupiter Customer Manual                                                        Byjoomla.comThe basic form of module cla...
BJ Jupiter Customer Manual                                                         Byjoomla.com       Figure 32: bjmod-col...
BJ Jupiter Customer Manual                                                    Byjoomla.com5.4.3 Let’s start to combine col...
BJ Jupiter Customer Manual                                      Byjoomla.com     Figure 36: bjmod-color-solid        Figur...
BJ Jupiter Customer Manual                                                             Byjoomla.com5.4.4 List style.      ...
BJ Jupiter Customer Manual                                                  Byjoomla.comthe code)5.5 Typography5.5.1 Icon ...
BJ Jupiter Customer Manual                                                        Byjoomla.comExample: <span class=”icon-n...
BJ Jupiter Customer Manual                                                             Byjoomla.com        Figure 41: Info...
BJ Jupiter Customer Manual                                           Byjoomla.com(Blue color can be replaced by: green, br...
BJ Jupiter Customer Manual                                                  Byjoomla.com(Blue color can be replaced by: gr...
BJ Jupiter Customer Manual                                                  Byjoomla.com                                  ...
BJ Jupiter Customer Manual                                                      Byjoomla.com            <p class="jupiter-...
BJ Jupiter Customer Manual                                                  Byjoomla.com         xxx= arrow               ...
BJ Jupiter Customer Manual                                                  Byjoomla.com5.5.8 Headline font style (PRO/DEV...
BJ Jupiter Customer Manual                                                           Byjoomla.com                         ...
BJ Jupiter Customer Manual                                                Byjoomla.com5.5.9 Note: How to insert typography...
BJ Jupiter Customer Manual                                              Byjoomla.com5.6 Menu styleBJ Jupiter provides 3 me...
BJ Jupiter Customer Manual                                                   Byjoomla.com                              Fig...
BJ Jupiter Customer Manual                                                     Byjoomla.com5.6.2 Side menu                ...
BJ Jupiter Customer Manual                                               Byjoomla.com                              Figure ...
BJ Jupiter Customer Manual                                                Byjoomla.com5.6.4 Note: How to manage menusIn ad...
BJ Jupiter Customer Manual                                          Byjoomla.com5.7 Homepage (Front page manager)In admini...
BJ Jupiter Customer Manual                                                             Byjoomla.com5.7.1 Component heading...
BJ Jupiter Customer Manual                                                       Byjoomla.com5.8 LogoWhen you install our ...
BJ Jupiter Customer Manual                                                        Byjoomla.com5.8.2 Update logo by using p...
BJ Jupiter Customer Manual                                                               Byjoomla.com5    CSS/JS compressi...
BJ Jupiter Customer Manual                                         Byjoomla.com7.1 Appendix 1: How to make your site look ...
BJ Jupiter Customer Manual                                                     Byjoomla.com7.1.1 Header area7.1.1.1 LogoTh...
BJ Jupiter Customer Manual                   Byjoomla.com7.1.2 Promotion areaThere are two modules used inthis area: BJ Im...
BJ Jupiter Customer Manual                                                   Byjoomla.com7.1.2.1 BJ Headline rollerThis is...
BJ Jupiter Customer Manual                                                             Byjoomla.comcan do the same with th...
BJ Jupiter Customer Manual                                                         Byjoomla.com7.1.4 Left and Right column...
BJ Jupiter Customer Manual                                             Byjoomla.com7.1.4.2 Polls modulePolls module used f...
BJ Jupiter Customer Manual                                                     Byjoomla.com7.1.5 Main content area        ...
BJ Jupiter Customer Manual                                                  Byjoomla.com7.1.5.1 Mod_customTo set up the to...
BJ Jupiter Customer Manual                                                 Byjoomla.comFigure 73: Content goes here7.1.5.2...
BJ Jupiter Customer Manual                                                              Byjoomla.comFor Joomla 1.7, you ne...
BJ Jupiter Customer Manual                                                   Byjoomla.com7.1.6 Middle Users area          ...
BJ Jupiter Customer Manual                                                   Byjoomla.com7.1.7 Bottom Users area          ...
BJ Jupiter Customer Manual                                                  Byjoomla.com7.2.2 Step 2: Upload images to you...
BJ Jupiter Customer Manual                                                     Byjoomla.comAfter setting the size for imag...
Upcoming SlideShare
Loading in …5
×

Getting started with bj jupiter

1,576 views
1,517 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,576
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Getting started with bj jupiter

  1. 1. GETTING STARTED WITH BJ JUPITER http://byjoomla.comCreated: 08/02/2012Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights undercopyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, ortransmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for anypurpose, without the express written permission of Byjoomla.com© 2011 Byjoomla.com Ltd. All rights reserved.
  2. 2. BJ Jupiter Customer Manual Byjoomla.comContents1. INTRODUCTION .................................................................................................................. 52. DOWNLOAD ............................................................................................................................. 6 2.1 Free version ........................................................................................................................... 6 2.2 Pro/Dev version .................................................................................................................... 63. INSTALLATION ....................................................................................................................... 74. FEATURES ................................................................................................................................ 85. 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. 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. 4. BJ Jupiter Customer Manual Byjoomla.com6. COMPARE PACKAGE ........................................................................................................... 467. 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. 5. BJ Jupiter Customer Manual Byjoomla.com1. 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, itcan be pretty fun. Grab a cup of your favorite caffeinated beverage and let’s get to work. 5
  6. 6. BJ Jupiter Customer Manual Byjoomla.com2. DOWNLOAD2.1 Free versionAll free templates and can be downloaded from our home page.http://byjoomla.com/bj-joomla-templates2.2 Pro/Dev versionLogin at http://clients.byjoomla.com/client_login.phpLogin using your registeredEmail and PasswordAt the very bottom of this page, Figure 1: Login windowthere is a list of order. Click on“View” button to go onIn the next page, there are downloadable packages that you can download to your own computer. Figure 2: View button 6
  7. 7. BJ Jupiter Customer Manual Byjoomla.com3. 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. 8. BJ Jupiter Customer Manual Byjoomla.com4. FEATURESWe included in BJ Jupiter many cool features to your site. They are users friendly and make yourcustomers conveniently browsing the web. You can discover how to take all advantage of thesefeatures 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. 9. BJ Jupiter Customer Manual Byjoomla.com5. CONFIGURATION5.1 PositionBJ Jupiter provides 23 module positions which allow you to have multiple layoutconfigurations. All module positions are collapsible. If you don’t publish any modules in somepositions 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. 10. BJ Jupiter Customer Manual Byjoomla.com5.2 LayoutThe layout in BJ Jupiter is really flexible. There are one column layout, two columns layoutmain-right, two columns layout main-left and three columns layout. In PRO BJ Jupiter, thewidth of columns can be adjusted (as you can see in Template parameters). It is easy to set thelayout. You just need to put your module in the right place. For example, if you put all modulesin left position, because the layout is collapsible so that the right column will not be shown andwe 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, youwill 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. 11. BJ Jupiter Customer Manual Byjoomla.com5.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. 12. BJ Jupiter Customer Manual Byjoomla.com5.3.1 Template color (PRO/DEV only)BJ Jupiter PRO provides 6 colors: BJ Jupiter Blue, Green, Purple, Red, Pink and Brown. Eachcolor covers not only the main background, but also color of drop-down menu, links, table’sheader and some others. For Free Version, the template color is fixed in Blue. Figure 10: BJ Jupiter Blue Figure 9: BJ Jupiter Green 12
  13. 13. BJ Jupiter Customer Manual Byjoomla.com Figure 11: BJ Jupiter Red Figure 12: BJ Jupiter Pink 13
  14. 14. BJ Jupiter Customer Manual Byjoomla.com Figure 13: BJ Jupiter Purple Figure 14: BJ Jupiter Brown 14
  15. 15. BJ Jupiter Customer Manual Byjoomla.com5.3.2 Layout width (PRO/DEV only)BJ Jupiter PRO allows you to change width size for overall layout, left column and rightcolumn. You just need to configure appropriate template parameters to get the result you want.5.3.2.1 Template WidthYou can setup overall layout width in pixels. Figure 15: Template width 15
  16. 16. BJ Jupiter Customer Manual Byjoomla.com5.3.2.2 Left and right column widthWidth of left or right column position modules in pixels Figure 16: Left column width Figure 17: Right column width5.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 (User1, 2, 3, 4). Figure 18: Modules in Top User Position (In Demo page) 16
  17. 17. BJ Jupiter Customer Manual Byjoomla.comIf 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 parametersYou 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 inAppendix 1: How to make your site look like demo page: Top User area. 17
  18. 18. BJ Jupiter Customer Manual Byjoomla.com5.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. 19. BJ Jupiter Customer Manual Byjoomla.com5.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 parameters5.3.6 Logo Path (PRO/DEV only)It is path to your logo image file starting from your Joomla! Root folder. For example if younamed your logo image file as mylogo.png and placed it in folder /images/jupiter, then the logopath should be "/images/jupiter/mylogo.png"; 19
  20. 20. BJ Jupiter Customer Manual Byjoomla.com5.3.7 Logo Link (PRO/DEV only)This parameter allows you to setup the URL where the logo image should link to. You can putyour homepage URL there or any custom link. You can leave this parameter empty if you doNOT 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 somekeyword-rich string here for better SEO.5.3.9 Component and Content heading Figure 24: Component and content heading in Main position 20
  21. 21. BJ Jupiter Customer Manual Byjoomla.comYou can change the style of these heading. There are three styles available for each heading. Youcan see the change in the appearance between H1, H2 and H3 of Component heading. The styleH1, H2, H3 of content heading is not visible but the codes behind them are change. Thesechanges in codes are used for SEO purpose.5.3.10 Text alignmentThis parameter allows you to change the alignment of text appearing in articles. Figure 25: Right to Left Figure 26: Left to Right5.4 Module style (by using Module class suffix)Module Class Suffix is a parameter in Joomla modules. In every module, you can see thisparameter in parameters window. It helps to adjust the appearance of each module. Moduleparameters can be combined for customization to fit your demand. Figure 27: Module class suffix parameter 21
  22. 22. BJ Jupiter Customer Manual Byjoomla.comThe basic form of module class suffix which used to modify style in BJ Jupiter contains twoelements:“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 exampleyou can enter just “bjmod-color-blue” into module class suffix.Now we will have a look which colors and icons that BJ Jupiter offers5.4.1 Module Color (PRO/DEV only)BJ Jupiter offers 8 module colors. If you leave this space blank, the default color of the wholetemplate 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. 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-solid5.4.2 Module Icon (PRO/DEV only)In module title, you can also use icon for styling title. There are 31 icons available which arecoded as below. 23
  24. 24. BJ Jupiter Customer Manual Byjoomla.com5.4.3 Let’s start to combine color and style in the codeAfter knowing about all the code of module class suffix, you can start to combine them to satisfyyour requirement. If you don’t want to modify some of elements offered, you can leave it blank.For example 24
  25. 25. BJ Jupiter Customer Manual Byjoomla.com Figure 36: bjmod-color-solid Figure 37: bjmod-color-red typo-thumbup 25
  26. 26. BJ Jupiter Customer Manual Byjoomla.com5.4.4 List style. Figure 38: Module list style: with bullet and no bulletWhat is module Custom?It is the module that you can create by yourself and put your own content. You can create newmodule easily by using mod_custom.Go to Extensions  Module manager  New  Choose “Custom HTML”  Type the titleyou want (Latest posts, Latest Comments, Newsletter, etc)  Choose the position Typethe content you want into Custom output.The default style is list with bulletas you see in figure 37 (left-handside). To create the list withoutbullet as in figure 37 (right-handside), module class suffix is “ list-nobg” (Remember the space before 26
  27. 27. BJ Jupiter Customer Manual Byjoomla.comthe code)5.5 Typography5.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 ofthe 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. 28. BJ Jupiter Customer Manual Byjoomla.comExample: <span class=”icon-new”></span>Detail instruction about how to use these codes is in the Note: How to insert typography codesinto articles (5.5.9)5.5.2 Text box: Simple styleThis 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. 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 - boxnoteDetail instruction about how to use these codes is in the Note: How to insert typography codesinto 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. 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. 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 codesinto 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. 32. BJ Jupiter Customer Manual Byjoomla.com Figure 47: Four bubble stylesDetail instruction about how to use these codes is in the Note: How to insert typography codesinto 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 cannotcome 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. 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 codesinto articles (5.5.9)5.5.6 Typography: List styleList helps readers to distinguish and remember important thing. We provide 4 kinds of list stylethey 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. 34. BJ Jupiter Customer Manual Byjoomla.com xxx= arrow xxx=starExample: <ul class="arrow"> <li>Sample of Arrow list text</li> <li>Sample of Arrow list text</li> </ul>5.5.7 Drop cap symbolYou can use Drop cap symbol style for magazine or newspaper text paragraph. <p><span class="dropcap">x</span>Content goes herex is the symbol that you want to become Drop cap. Figure 48: Drop cap textDetail instruction about how to use these codes is in the Note: How to insert typography codesinto articles (5.5.9) 34
  35. 35. BJ Jupiter Customer Manual Byjoomla.com5.5.8 Headline font style (PRO/DEV only) Figure 49: Headline rollerTo create the headline style look like in the picture, let’s have a look at module BJ Headlineroller (You can find detail instruction to use BJ Headline roller in our Byjoomla home pagehttp://byjoomla.com/joomla-extensions) 35
  36. 36. BJ Jupiter Customer Manual Byjoomla.com Figure 50: Parameter window of BJ Headline roller modulePay attention into the parameters belowEnable: YesPosition: need to be in Headline positionModule Class suffix: Left it blankCategory 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 thesecodes 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. 37. BJ Jupiter Customer Manual Byjoomla.com5.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 whichcan 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 sourcewindow. For example you want to add a text box into this article. 37
  38. 38. BJ Jupiter Customer Manual Byjoomla.com5.6 Menu styleBJ Jupiter provides 3 menu styles which are Dropdown menu, Tree-like menu/ Side menu andIcon menu. Now we will have a look how to create these types of menu.5.6.1 Dropdown menu Figure 51: Drop-down menuThe main dropdown menu is the most popular menu that allows you to manage your websiteeffectively 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. 39. BJ Jupiter Customer Manual Byjoomla.com Figure 52: BJ Dropdown menu parameter windowIn 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 menuwill 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 menuhttp://byjoomla.com/joomla-extensions/list-menuTo create and manage other type of menu, we use module type name mod_mainmenumod_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 thedatabase, there are a number of Menus that are created by default. 39
  40. 40. BJ Jupiter Customer Manual Byjoomla.com5.6.2 Side menu Figure 53: Side menuThe side menu is put on the left or right column position in the page. To create side menu, pleasefollow these steps. Go to module manager  Click into button New  choose Menu  Set upparameter as pictures below Figure 54: Detail configuration 40
  41. 41. BJ Jupiter Customer Manual Byjoomla.com Figure 55: Parameters window5.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. 42. BJ Jupiter Customer Manual Byjoomla.com5.6.4 Note: How to manage menusIn administrator page, go to Menus  Mainmenu. From here you can click on to every title andsubtitle you want to edit Figure 57: Menu item managerTips: You can find more worth information in menu management inJoomla docs site http://docs.joomla.org/Menu_ManagementJoomla help site http://help.joomla.org/content/view/67/223/ 42
  43. 43. BJ Jupiter Customer Manual Byjoomla.com5.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. 44. BJ Jupiter Customer Manual Byjoomla.com5.7.1 Component headingComponent heading is set up in Parameters (System) in Joomla 1.5 or in Page display option inJoomla 1.7 Figure 59: In Joomla 1.5 Figure 60: In Joomla 1.75.7.2 Leading and Intro textNumber of leading and number of intro text column is set in Parameters (Basic) in Joomla 1.5 orin 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 Optionscould be valid in homepage. In case you use “Feature Articles” menu type, you need one moreclass, which should be “homepage blog”. Figure 61: Parameters window in Joomla 1.5 Figure 62: Parameters window in Joomla 1.7 44
  45. 45. BJ Jupiter Customer Manual Byjoomla.com5.8 LogoWhen you install our template, there is BJ Jupiter logo set as default. You can replace it foryour own logo. There are two ways to update logo5.8.1 Update logo by creating module in header position.From administrator page, go to Extensions Module manager Choose “New” button. Therewill 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 imagefrom your computer by using “Browse” button. When your image is uploaded in root folderalready, 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. 46. BJ Jupiter Customer Manual Byjoomla.com5.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 exampleif you named your logo image file as mylogo.png and placed it in folder /images/jupiter, then thelogo path should be "/images/jupiter/mylogo.png";• Logo Link – URL where logo image should link to (! without preceding slash!). If you don’twant 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 supportBJ Jupiter gives support for exact English, Vietnamese, Chinese, French, German, Japanese,Russia and Spanish. To install new language packages to your page. Go tohttp://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 thelanguage you want and set default for it.6. COMPARE PACKAGEBJ Templates are divided into 3 versions: Free, Pro and Dev. You can download free versionin our Byjoomla home page. This table below shows the difference between versions. FREE PRO DEV1 Flexible layouts2 Search Engine Optimized3 xHTML/CSS validation4 Menu styles Dropdown, Multi- Dropdown, Multi- Dropdown, Multi- levels levels levels 46
  47. 47. BJ Jupiter Customer Manual Byjoomla.com5 CSS/JS compression6 Multiple languages7 Module positions 23 23 238 Fantastic typography Basic* Full* Full*9 Splendid module Basic* Full* Full* styles10 6+ template themes Blue 6+ (Blue, Green, Red, 6+ (Blue, Green, Pink, Purple, Brown) Red, Pink, Purple, Brown)11 RTL support12 Other parameters Layout parameters Layout parameters13 As-easy-as-pie documentation14 Browser compatible Chrome, FF, IE 7+, Chrome, FF, IE 7+ Chrome, FF, IE 7+, Opera Opera15 Joomla version 1.5, 1.7 1.5, 1.7 1.5, 1.716 Source code & Image optimized17 24/7 Support Blog, Forum Ticket system, Email Ticket system, Email18 License GNU/GPL v3.0 Single domain Unlimited domains*Fantastic typography:Basic contains Drop cap, List Style, Text Box Simple StyleFull 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 stylesBasic: Module color set default as template color, typography set defaultFull : Module color 6+ and white, solid color, typography using list icon 1 and 27. APPENDIX 47
  48. 48. BJ Jupiter Customer Manual Byjoomla.com7.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. 49. BJ Jupiter Customer Manual Byjoomla.com7.1.1 Header area7.1.1.1 LogoThe Logo B Jupiter is default sample logo. The logo file is located in Joomla root folder. Youcan find more information for uploading your own logo in Logo (5.6) section.7.1.1.2 Main menu toolbarAfter 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 Rightmenu module or Left module. The parameters window will be shown. This is our parameter setup.To manage the menu item, you can go to main menu manager by going to Menus Mainmenu. The list of the items in main menu will be shown. 49
  50. 50. BJ Jupiter Customer Manual Byjoomla.com7.1.2 Promotion areaThere are two modules used inthis area: BJ Image Slider andBJ Headline roller.BJ Headline roller incontained in the downloadpackage but BJ Image Slideris not. You have to downloadthe update version of BJ ImageSlider separately. For BJImage Slider usage, you canvisit Appendix 2 or downloadour tutorial from our homepage. This is our set upparameter for BJ Image Slider.Remember to crop your imageto suitable to your Slide Showwidth and height.Category ID is the ID of thecategory that contains theimages which will be shown. 50
  51. 51. BJ Jupiter Customer Manual Byjoomla.com7.1.2.1 BJ Headline rollerThis 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 thetemplate can load the default style as you can see in the demo page.7.1.3 Top User area Figure 65: Icon menuGo 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 moduleclass suffix, please enter the code “ finance” (Remember the space before word finance). You 51
  52. 52. BJ Jupiter Customer Manual Byjoomla.comcan do the same with the three next modules in positions user 2, 3, 4 with the module class suffixnamely “ 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. 53. BJ Jupiter Customer Manual Byjoomla.com7.1.4 Left and Right columns areaYou can choose whatever module you want to put into left and right area. In right column, wechoose “Search” and “Pools” modules.7.1.4.1 Search moduleSearch module is contained in the download package, you do not need to install it. You can go toExtension  Module manager  Search for mod_search and set the parameters aspictures below Figure 68: Details configuration Figure 69: Search module parameters window 53
  54. 54. BJ Jupiter Customer Manual Byjoomla.com7.1.4.2 Polls modulePolls module used for gathering answers for surveys or questionnaires. The configurationinformation is shown in pictures below. Figure 70: Details configuration Figure 71: Parameters window 54
  55. 55. BJ Jupiter Customer Manual Byjoomla.com7.1.5 Main content area Figure 72: Main content areaThe articles appear in main content area is known as front page content. This area is divided into2 parts. The “About Venus” part is a module in top position. Mod_custom ormod_bj_content_tab are good suggestions. You can change the module you want to put intothis position. The “New product available” part is three articles which you can choose from yourarticles. 55
  56. 56. BJ Jupiter Customer Manual Byjoomla.com7.1.5.1 Mod_customTo set up the top position with the module as in the picture, you need to create a new custommodule. Go to Extensions  Module manager  New  Choose Custom HTML and set upparameter as belowIn Custom output, you can type your content and add your image there if you want. 56
  57. 57. BJ Jupiter Customer Manual Byjoomla.comFigure 73: Content goes here7.1.5.2 The three columns articles areaTo manage that area you need to go to Menus  Mainmenu  Home. For Joomla 1.5, you canset 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. 58. BJ Jupiter Customer Manual Byjoomla.comFor 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 theset 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. 59. BJ Jupiter Customer Manual Byjoomla.com7.1.6 Middle Users area Figure 78: Middle user area7.1.6.1 User 5, 6, 7: mod_customYou can create new module easily by using mod_bj_customGo to Extensions  Module manager  New  Choose “Custom HTML”  Type the titleyou want (Latest posts, Latest Comments, Newsletter, etc)  Choose the position (User 5or 6 or 7)  Type the content you want into Custom output.7.1.6.2 User 8: mod_bj_photo_galeryPhoto gallery is included in the download package, you do not need to download it. Please visitour home page to find the tutorials for this module.Go to Extensions  Module manager  Find mod_bj_photo_galery  Enable this module. 59
  60. 60. BJ Jupiter Customer Manual Byjoomla.com7.1.7 Bottom Users area Figure 79: Bottom user area7.1.7.1 User 9, 10, 11, 12: mod_customYou can create new module easily by using mod_customGo to Extensions  Module manager  New  Choose “Custom HTML”  Type the titleyou want (Latest posts, Latest Comments, Newsletter, etc)  Choose the position (User 9or 10 or 11 or 12)  Type the content you want into Custom output.7.2 Appendix 2: BJ ImageSlider updated for BJ JupiterThe header image slideshow you see on BJ Jupiter demo website is another Joomla! extensionfrom Byjoomla.com called BJ ImageSlider 2 updated. It was used in BJ Venus 1 and 2 also. Inthe download package for PRO/DEV version there is BJ Image Slider free version. Please go toByjoomla.com homepage to download BJ ImageSlider and its tutorial. Because the version indownload package is free so that it can be different from what you see in our demo site. To makeit 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 slideshowYou are going to get your images ready for the slideshow. BJ ImageSlider is able toautomatically resize your images to match the slideshow size, but for the best result we’drecommend you to pay attention to preparing your images. The main thing here is to crop yourimages so they have size similar to slideshow area size. 60
  61. 61. BJ Jupiter Customer Manual Byjoomla.com7.2.2 Step 2: Upload images to your serverNow, 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 Imagewidth and height to fit with the width and height of the slideshow. 61
  62. 62. BJ Jupiter Customer Manual Byjoomla.comAfter setting the size for images, you can upload them by going to ComponentManageimagesUpload. You can choose the category you want to store these images. Please rememberthe category ID.Set up parameter for ImageSlider Module7.2.3 Step 3: Set up moduleGo to ExtensionsModule Manager BJ ImageSlider 2. One parameter window will appear.Enable: YesPosition: Advert 1Category 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 modifyingImageSlider parameters, please visit our home page to download our tutorial. 62

×