How to build website for mobile with joomla template

Embed Size (px)

Citation preview

  • 7/30/2019 How to build website for mobile with joomla template

    1/42

    Copyright 2012 Bowthemes Inc. | [email protected]

    BT MOBILE APPSJOOMLA TEMPLATE

    User guide

    Version 1.0

    mailto:[email protected]:[email protected]
  • 7/30/2019 How to build website for mobile with joomla template

    2/42

    www.bowthemes.com

    1BT

    Mobile Apps

  • 7/30/2019 How to build website for mobile with joomla template

    3/42

    www.bowthemes.com

    2BT

    Mobile Apps

    Contents

    Introduction ....................................................................................................................................................................3

    1. Template Features ......................................................................................................................................3

    2. Compressed File Contents ........................................................................................................................3

    3. Accompanying Extensions .......................................................................................................................4

    Installing ...........................................................................................................................................................................5

    1. System Requirement...................................................................................................................................5

    2. T3 Framework Plug-in ..............................................................................................................................5

    3. BT Mobile Apps template ........................................................................................................................6

    4. BT Mobile Apps Quickstart package....................................................................................................7

    Module Configuration .................................................................................................................................................8

    1. BT Content Slider (position: contenttop)..........................................................................................8

    2. BT Content Slider (position:footer-3) ............................................................................................. 11

    3. BT Content Slider (position: head-slide)......................................................................................... 16

    4. BT Content Slider (position:sidebar-2) .......................................................................................... 20

    5. BT Login (position: head-search) ...................................................................................................... 25

    6. BT Twitter Feeds (position: footer-1) .............................................................................................. 27

    7. Images size in K2 component.............................................................................................................. 29

    8. BT Gmap Module (position: contenttop)........................................................................................ 29

    Template Customization ........................................................................................................................................ 31

    Template Layout ........................................................................................................................................................ 33

    Template Profile ......................................................................................................................................................... 34

    Module Positions ........................................................................................................................................................ 35

    Module Variations ..................................................................................................................................................... 38

    Typography................................................................................................................................................................... 39

    Recommendations ..................................................................................................................................................... 40

    Contacting Bowthemes ........................................................................................................................................... 41

  • 7/30/2019 How to build website for mobile with joomla template

    4/42

    www.bowthemes.com

    3BTMobile Apps

    Introduction

    BT Mobile App is Free, Full-Responsive Joomla Template based on JAT3 Framework. This

    template help market your online business such as mobile application development and

    other corporate portfolio presentation.

    Released on 2012 Christmas and New Year season, this is

    our best wishes to you as 2013 is coming. Thanks for

    supporting and encouraging us to do our best. Joomla

    4ever!

    B o w t h e m e s T e a m

    1. Template Features Running on T3 Framework Version 3 for Joomla 2.5 06 Colors themes support, 01 Menu type options Inbuilt Google Fonts configuration Pricing table and Meet our team sample page design 20+ module positions and various module class suffix Improved style of Joomla! Core system pages. Multiples modules suffix's build-in template for module styling. K2 blog layouts and Joomla blog layout Inbuilt CSS and Javascript Compression Template support for MooTools 1.2 Delivered with source Adobe .PSD files Compatibility with Joomla 2.5 Cross Browser Support: IE8+, Firefox 2+, Safari 3+, Chrome 8+, Opera 9+

    2. Compressed File ContentsThe BT Mobile Apps Template zipped in file has contents such as following:

    Extensions (components, modules and plug-ins) Documentation License Photoshop files Quickstart Screenshots

  • 7/30/2019 How to build website for mobile with joomla template

    5/42

    www.bowthemes.com

    4BTMobile Apps

    All the files are contained in a zip archived. You need to extract them by usingWinrar, Stuffit or your archiving tools

    3.Accompanying ExtensionsThis template comes with 04 powerful extensions:

    BT Content Slider BT Login BT Google Maps BT Twitter Feeds

  • 7/30/2019 How to build website for mobile with joomla template

    6/42

    www.bowthemes.com

    5BT

    Mobile Apps

    Installing

    1.System Requirement A working installation of Joomla 2.5

    *To install this template you must have a working version of Joomla already installed. For

    information regarding to installing the Joomla platform, please refer to:

    http://docs.joomla.org/Beginners#Install_Joomla.21

    T3 framework plug-in installed and enabled.2. T3 Framework Plug-in

    In order to use Bowthemes template, you have to make sure that the plugin JAT3

    Framework is installed and enabled.

    Installing T3 Framework 3 for Joomla 2.5In the Joomla administration panel, please follow these steps:

    Step 1: Go to Extension Manager

    Step 2: Browse the install package

    Step 3: Click Upload & Install

    http://docs.joomla.org/Beginnershttp://docs.joomla.org/Beginners
  • 7/30/2019 How to build website for mobile with joomla template

    7/42

    www.bowthemes.com

    6BT

    Mobile Apps

    Enabling T3 FrameworkIn the Joomla administration panel, please follow these steps:

    Step 1: Go to Plug-in Manager

    Step 2: Find JAT3 Frameworks position

    Step 3: Check the Status to publish this framework

    Step 4: Save the change

    3. BT Mobile Apps Template Installing the template

    In the Joomla administration panel, please follow these steps:

    Step 1: Go to Extension Manager

    Step 2: Browse the install package

    Step 3: Click Upload & Install

    The template file name is:

    bt_mobile_apps_template_j!25_v1.1.zip

    Notification

    You may get some errors

    using JAT3 v.3 version. To

    ensure good operation of

    the website, after

    installation, please rename

    or delete some modules

    and components at this

    address

    plugins\system\jat3v3\t3

    v3base\html.

    - Component Com_content

    - Module Com_search

  • 7/30/2019 How to build website for mobile with joomla template

    8/42

    www.bowthemes.com

    7BT

    Mobile Apps

    Publishing the templateIn the Joomla administration panel, please follow these steps:

    Step 1: Go to Template Manager

    Step 2: Find BT Mobile Apps position

    Step 3: Check the star icon at Default column to make BT Mobile Apps the default

    template

    Installing needed plug-in components and moduleThe installation procedure is the same as installing the template

    4. BT Mobile Apps Quickstart package How a Quickstart package works?

    A Quickstart package is a total Joomla website installation kit that installs the template and

    all of the components and plug-ins onto your server at once.

    Bowthemes provides quickstart package for each template which aims to easy to use and

    comfortable for users. It will help you save much time of installing and configuring if you

    plan to start your site from the beginning. Installing Quickstart package is quite easy as you

    install normal Joomla!

    How to install a Quickstart packagePlease refer this instruction in Bowthemes Website:

    http://bowthemes.com/how-to-install-bow-themes-template-quickstart-pack.html

    http://bowthemes.com/how-to-install-bow-themes-template-quickstart-pack.htmlhttp://bowthemes.com/how-to-install-bow-themes-template-quickstart-pack.html
  • 7/30/2019 How to build website for mobile with joomla template

    9/42

  • 7/30/2019 How to build website for mobile with joomla template

    10/42

    www.bowthemes.com

    9BT

    Mobile Apps

    Global Setting

    Source Setting

  • 7/30/2019 How to build website for mobile with joomla template

    11/42

    www.bowthemes.com

    10BT

    Mobile Apps

    Item Layout Setting

  • 7/30/2019 How to build website for mobile with joomla template

    12/42

    www.bowthemes.com

    11BT

    Mobile Apps

    Effect Setting

    2. BT Content Slider (position:footer-3) Details

  • 7/30/2019 How to build website for mobile with joomla template

    13/42

    www.bowthemes.com

    12BT

    Mobile Apps

    Global Setting

  • 7/30/2019 How to build website for mobile with joomla template

    14/42

    www.bowthemes.com

    13BT

    Mobile Apps

    Source Setting

  • 7/30/2019 How to build website for mobile with joomla template

    15/42

    www.bowthemes.com

    14BT

    Mobile Apps

    Item Layout Setting

  • 7/30/2019 How to build website for mobile with joomla template

    16/42

    www.bowthemes.com

    15BT

    Mobile Apps

    Effect Setting

    Advanced Options

  • 7/30/2019 How to build website for mobile with joomla template

    17/42

    www.bowthemes.com

    16BT

    Mobile Apps

    3. BT Content Slider (position: head-slide) Details

    Global Setting

  • 7/30/2019 How to build website for mobile with joomla template

    18/42

    www.bowthemes.com

    17BT

    Mobile Apps

    Source Setting

  • 7/30/2019 How to build website for mobile with joomla template

    19/42

    www.bowthemes.com

    18BT

    Mobile Apps

    Item Layout Setting

  • 7/30/2019 How to build website for mobile with joomla template

    20/42

    www.bowthemes.com

    19BT

    Mobile Apps

    Effect Setting

    Advanced Options

  • 7/30/2019 How to build website for mobile with joomla template

    21/42

    www.bowthemes.com

    20BT

    Mobile Apps

    4. BT Content Slider (position:sidebar-2) Details

  • 7/30/2019 How to build website for mobile with joomla template

    22/42

    www.bowthemes.com

    21BT

    Mobile Apps

    Global Setting

  • 7/30/2019 How to build website for mobile with joomla template

    23/42

    www.bowthemes.com

    22BT

    Mobile Apps

    Source Setting

  • 7/30/2019 How to build website for mobile with joomla template

    24/42

    www.bowthemes.com

    23BT

    Mobile Apps

    Item Layout Setting

  • 7/30/2019 How to build website for mobile with joomla template

    25/42

    www.bowthemes.com

    24BT

    Mobile Apps

    Effect Setting

    Advanced Options

  • 7/30/2019 How to build website for mobile with joomla template

    26/42

    www.bowthemes.com

    25BT

    Mobile Apps

    5. BT Login (position: head-search) Details

  • 7/30/2019 How to build website for mobile with joomla template

    27/42

    www.bowthemes.com

    26BT

    Mobile Apps

    Basic Options

  • 7/30/2019 How to build website for mobile with joomla template

    28/42

    www.bowthemes.com

    27BT

    Mobile Apps

    Advanced Options

    6.

    BT Twitter Feeds (position: footer-1)

    Details

  • 7/30/2019 How to build website for mobile with joomla template

    29/42

    www.bowthemes.com

    28BT

    Mobile Apps

    Settings and Preferences

    Appearance and Advanced Options

  • 7/30/2019 How to build website for mobile with joomla template

    30/42

    www.bowthemes.com

    29BT

    Mobile Apps

    7. Images size in K2 component

    8. BT Gmap Module (position: contenttop) Details z

  • 7/30/2019 How to build website for mobile with joomla template

    31/42

    www.bowthemes.com

    30BT

    Mobile Apps

    Basic Options

  • 7/30/2019 How to build website for mobile with joomla template

    32/42

    www.bowthemes.com

    31BT

    Mobile Apps

    Template Customization

    1. Changing logo in headerThere are two ways to change logo image located on top of the template:

    1stwayJust replace thelogo.png on your template folder with the one youwant on the top of your

    site (rename the image file in png first). The folders path is:

    ...\templates\bt_mobile_apps\images.

    2nd wayOpen file: ...\templates\bt_mobile_apps\css\template.css

    - On line 2148: Replace the name logo.png by your logos name- On line 2149 and 2150: Replace logos height and width here2. Changing logo in footer

    In administrator, go to Extensions -> Module Manager, find the position logo-footer and

    upload your image logo (Logo footer is custom html module).

    3. Changing color themeThe templates administration panel allows you to customize a lot of features regarding the

    template layout, color profile and other settings like file compressions. Once youve

    installed the template, the first decision you have to make is which profile you are going to

    use for your site.

    You can also select any of the other profile as your primary profile:

    - Open the template's administration panel- Click on the profile tab and scroll down to the advanced settings to use for your site- Select the profile you want to use

    There are six profiles included in the template. A default profile is already loaded. This

    profile is the backbone of the template.

  • 7/30/2019 How to build website for mobile with joomla template

    33/42

    www.bowthemes.com

    32BT

    Mobile Apps

    In the Theme section, please click on Use Default. A pop up will display the profiles list.

    Select your desired profile by ticking the little box to the right, then click Save.

    Scroll up the page and save the changes you just made.

  • 7/30/2019 How to build website for mobile with joomla template

    34/42

    www.bowthemes.com

    33BT

    Mobile Apps

    Template LayoutThe BT Mobile Apps template comes with one default layout made up of 3 columns:

    Sidebar-1 main sidebar-2

    The layout parameter are contained in XML files which can be customized from the

    templates administrator panel, to generate these following layouts: home-1, home-2

    You can also customize the positions by simply moving the blocks around.

    For an in-depth read on layout customization, please check out article about JA T3 Framework

    on the Wikipedia:

    http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides#Default_Layout

    http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guideshttp://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides
  • 7/30/2019 How to build website for mobile with joomla template

    35/42

    www.bowthemes.com

    34BT

    Mobile Apps

    Template ProfileThe template contains six color profiles:

    Default Cyan Green

    Xmas Olive Violet

    You can manage these profiles through the profiles panel found in the template

    administration panel.

    With this panel, you are free to create, clone, edit, delete (your own) profiles. In addition,

    for each profile you can customize all template settings: logo, font-size, layouts, menu

    system, color theme, text-direction, etc. All these settings are split into several sections as you

    can see in the illustrated image. You can easily select a profile as your default profile for your

    website as well.

  • 7/30/2019 How to build website for mobile with joomla template

    36/42

  • 7/30/2019 How to build website for mobile with joomla template

    37/42

    www.bowthemes.com

    36BTMobile Apps

  • 7/30/2019 How to build website for mobile with joomla template

    38/42

    www.bowthemes.com

    37BTMobile Apps

  • 7/30/2019 How to build website for mobile with joomla template

    39/42

    www.bowthemes.com

    38BT

    Mobile Apps

    Module Variations

    There are some special module styles, namely:

    _login _menu _content _twitter _slideshow _user

    Each style is activated by assigning a module class suffix to the module. You can see more

    details on the page:

    www.bowthemes.com/images/templates/bt-mobile-apps-index.jpg

    *Special module styles

    http://www.bowthemes.com/images/templates/bt-mobile-apps-index.jpghttp://www.bowthemes.com/images/templates/bt-mobile-apps-index.jpg
  • 7/30/2019 How to build website for mobile with joomla template

    40/42

    www.bowthemes.com

    39BT

    Mobile Apps

    Typography

    The typography of the template is managed by the T3 typo system plug-in. This plug-in

    allows you to utilize advanced typography in your content

    Before you begin the installation process, you need to ensure that this plug-in is installed

    and activated. It can be installed like normal Joomla Extension through Extension Manager.

    Check the Plug-in manager to activate it.

    From now on, you can use it to style your content just by clicking the JA Typo button and

    select the style you want from the popup.

  • 7/30/2019 How to build website for mobile with joomla template

    41/42

    www.bowthemes.com

    40BT

    Mobile Apps

    Recommendations

    Joomla

    Joomla quickstart guide

    http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdf

    Joomla Getting Started - http://docs.joomla.org/Getting_Started_with_Joomla%21_1.5

    T3 Framework Overview - http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Overview

    Extensions

    K2 - http://getk2.org/

    BT Content Slider http://bowthemes.com/joomla-extensions/bt-content-slider.html

    BT Login http://bowthemes.com/joomla-extensions/bt-login-module.html

    BT Twitter Feeds - http://bowthemes.com/joomla-extensions/bt-twitter-feed.html

    BT Google Maps - http://bowthemes.com/joomla-extensions/bt-google-maps.html

    http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdfhttp://docs.joomla.org/Getting_Started_with_Joomla%21_1.5http://docs.joomla.org/Getting_Started_with_Joomla%21_1.5http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Overviewhttp://getk2.org/http://bowthemes.com/joomla-extensions/bt-content-slider.htmlhttp://bowthemes.com/joomla-extensions/bt-login-module.htmlhttp://bowthemes.com/joomla-extensions/bt-twitter-feed.htmlhttp://bowthemes.com/joomla-extensions/bt-google-maps.htmlhttp://bowthemes.com/joomla-extensions/bt-google-maps.htmlhttp://bowthemes.com/joomla-extensions/bt-google-maps.htmlhttp://bowthemes.com/joomla-extensions/bt-twitter-feed.htmlhttp://bowthemes.com/joomla-extensions/bt-login-module.htmlhttp://bowthemes.com/joomla-extensions/bt-content-slider.htmlhttp://getk2.org/http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Overviewhttp://docs.joomla.org/Getting_Started_with_Joomla%21_1.5http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdf
  • 7/30/2019 How to build website for mobile with joomla template

    42/42

    41BT

    Mobile Apps

    Contacting Bowthemes

    All Bowthemes products include forum support, email support and ticket support.

    Please refer your membership package to select the compatible kind of support, as we may

    be able to solve the problem without delay.

    Website:http://bowthemes.com

    Forum support: http://bowthemes.com/forums/38-bt-mobile-apps/

    Email support: [email protected]

    Ticket support: http://bowthemes.com/submit-a-ticket

    If you encounter any issues with Bowthemes extensions and templates, email us at

    [email protected] we will be happy to answer your questions.

    This document is proprietary and confidential No part of this document may be disclosed

    http://bowthemes.com/http://bowthemes.com/forums/38-bt-mobile-apps/http://bowthemes.com/forums/38-bt-mobile-apps/mailto:[email protected]://bowthemes.com/submit-a-ticketmailto:[email protected]:[email protected]://bowthemes.com/submit-a-ticketmailto:[email protected]://bowthemes.com/forums/38-bt-mobile-apps/http://bowthemes.com/