SlideShare una empresa de Scribd logo
1 de 74
Descargar para leer sin conexión
GETTING STARTED
WITH
B METIS
Responsive Joomla 2.5.x & Joomla 3.x Template
http://byjoomla.com
Created: 05/02/2014
Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under
copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or
transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any
purpose, without the express written permission of Byjoomla.com
© 2014 Byjoomla.com Ltd. All rights reserved.
2 | Page B M e t i s - C u s t o m e r M a n u a l
Table of Contents
NAVIGATION ............................................................................................................................................. 4
I. Introduction....................................................................................................................................... 4
1. General information .............................................................................................................................. 4
2. Main features of B Metis ....................................................................................................................... 4
3. Layout structure..................................................................................................................................... 5
II. System Requirements........................................................................................................................ 5
1. Requirements for Joomla 2.5.x.............................................................................................................. 5
2. Requirements for Joomla 3.x................................................................................................................. 5
III. Download and Installation................................................................................................................. 6
1. How to download: ................................................................................................................................. 6
2. Quick-start Installation .......................................................................................................................... 7
2.1. Download ....................................................................................................................................... 7
2.2. Extract............................................................................................................................................. 8
2.3. Install .............................................................................................................................................. 9
2.4. Create Database ........................................................................................................................... 10
2.5. Complete Quick-start Installation ................................................................................................ 11
1. Frequent errors when installing on local host..................................................................................... 18
3.1 Upload file limit ............................................................................................................................ 18
IV. ByJoomla Extensions/Modules Configuration................................................................................. 19
1. B Image Slider ...................................................................................................................................... 21
2. B Headline Roller ................................................................................................................................. 27
3. Custom HTML Modules ....................................................................................................................... 28
3.1. Module position: User 1, User 2, User 3 .......................................................................................... 28
3.2. Module position: User 4, User 5,User 6 ...................................................................................... 31
3.3. Flexible Users layouts in all positions:.......................................................................................... 32
4. B Social Extensions (including B Facebook Activity module, B Facebook Recommendation module
and B Social Plugin)..................................................................................................................................... 35
3 | Page B M e t i s - C u s t o m e r M a n u a l
4.1. B Facebook Activity module, B Facebook Recommendation module ......................................... 35
4.2. B Social Plugin:.............................................................................................................................. 36
5. Content Listing/Single Page (Mainbody) ............................................................................................. 39
6. Pathway ............................................................................................................................................... 40
7. Our Joomla Templates (module name in Live Demo) ......................................................................... 41
8. Monthly Newsletter............................................................................................................................. 42
9. Photo Gallery ....................................................................................................................................... 43
V. Customize Template Setting............................................................................................................ 44
1. Template Parameters.............................................................................................................................. 44
2. Template Layout (PRO/DEV only) ........................................................................................................... 45
3. Template Color........................................................................................................................................ 46
4. Customizing style and typography....................................................................................................... 49
4.1 B Metis typography library................................................................................................................ 49
4.2. Manual customization...................................................................................................................... 56
VI. Menu System................................................................................................................................... 57
1. B Drop down menu.............................................................................................................................. 57
2. Tree menu............................................................................................................................................ 61
3. Side menu ............................................................................................................................................ 62
VII. Template FAQs and Support............................................................................................................ 65
1. How to upload and replace my logo instead of default logo?................................................................ 65
2. How to customize Footer .................................................................................................................... 65
3. How to change copyright text ............................................................................................................. 67
4. How to change colors and styles of boxes/button/text...................................................................... 67
5. How to customize your page nicely..................................................................................................... 67
6. Why the images in the image slider do not fit the box? ..................................................................... 71
7. How to change Favicon ......................................................................................................................... 71
8. Page title and SEO configuration......................................................................................................... 72
VIII. What else? ....................................................................................................................................... 74
4 | Page B M e t i s - C u s t o m e r M a n u a l
NAVIGATION
I. Introduction
1. General information
B Metis template is used to known as an appealing flat template for Joomla users to create a
flexible, ultra-modern and tidy website, especially lifestyle magazine. However, the
customization ability of B Metis also enabled its users to create websites for multi-purposes.
Thanks to the upgrade from Joomla 2.5.x to Joomla 3.x, B Metis now becomes even more
powerful because it is responsive with all device screens. The documentation is a detailed
tutorial used for both B Metis 2.5 and B Metis 3.0 with just a slightly difference.
2. Main features of B Metis
 Totally responsive on both front-end and back-end (Joomla 3.x version)
 Outstanding Responsive B Image Slider (Joomla 3.x version)
 Eight stunning colors variation (including Light/Dark version)
 Highly customizable modules
 62 different service icons
 RTL text alignment support
Complimentary other BJ Joomla 3.x Extensions included
 B Image Slider3 (Free version)
 B Drop-down Menu
 B Headline Roller
 B Facebook Recommendation, B Facebook Activity and B Social Plugin
Especially, quick start package is included to turn your site to look like our demo site
in a minute.
5 | Page B M e t i s - C u s t o m e r M a n u a l
3. Layout structure
15+ module positions
1–toolbar 2– advert1 3 –headline 4– user1 5 – user2
6 – user3 7 – user4 8 – user 5 9 – user6 10– right
11–pathway 12–user7 13–user8 14–user9 15– footer
II. System Requirements
1. Requirements for Joomla 2.5.x
Software Minimum More information
PHP 5.2.4 + http://www.php.net
MySQL 5.0.4 + http://www.mysql.com
Database server
Apache
(with mod_mysql, mod_xml,
and mod_zlib)
2.x + http://www.apache.org
Nginx 1.0 http://wiki.nginx.org/
Microsoft IIS 7 http://www.iis.net
2. Requirements for Joomla 3.x
Software Minimum More information
PHP 5.3.1 + http://www.php.net
MySQL 5.1 + http://www.mysql.com
MSSQL 10.50.1600.1+ http://www.microsoft.com/sql
PostgreSQL 8.3.18 + http://www.postgresql.org/
6 | Page B M e t i s - C u s t o m e r M a n u a l
Database Server
Apache
(with mod_mysql, mod_xml,
and mod_zlib)
2.x + http://www.apache.org
Nginx 1.0 http://wiki.nginx.org/
Microsoft IIS 7 http://www.iis.net
III. Download and Installation
1. How to download:
- Sign up forB Metis downloadhere
- After successfully payment, you will be granted access to Client Area and access the
files
- Loginto Clients Login from the Homepage, you will see the below page:
- Download the zip files you need
- Read ourpayment and download process carefully for more information.
7 | Page B M e t i s - C u s t o m e r M a n u a l
2. Quick-start Installation
Note: Before that, you need to install Joomla 3.x (support 3.2.x and 3.3.x). Please check Joomla 3.x
FAQs to have details for installing Joomla 3.x
Quick-start Package is the best choice for users who want to kick-start a new B Metis
template. Please check the guide below to understand how to implement Quick-start
Installation. However, please remember to back up your data beforehand because your old
data will be all gone afterwards. Don’t worry because we also guide you how to install the new
template with preservation of your data.
Note: You must be a member and pay off the PRO and DEV package to see Quick-start packages.
The first thing to do is to login to Client Login with your account. Signup here to download
PRO/DEV version.
2.1. Download
When you are in download page, you can see the Zip file of Quick-start package, download it.
Go to your Client Area: http://byjoomla.com/clients/user_login.php
If you forget password, please enter your Username/Email Address in box above. Or you can
contact us here
There is a notification if you login successfully
8 | Page B M e t i s - C u s t o m e r M a n u a l
Then download Quick-start (2.5 or 3.x package) here:
2.2. Extract
Once you have this template, please extract(unzip) all this template to folder with full files
9 | Page B M e t i s - C u s t o m e r M a n u a l
2.3. Install
 In your local host: Copy this extracted folder to: ...wampwww[your_folder] (for
WAMP) and ...xampphtdocs[your_folder] (for XAMPP)
Example: c:xamppbyjoomla_metis
10 | Page B M e t i s - C u s t o m e r
M a n u a l
 From your hosting: If you want to install the Quick-start from your hosting, please
upload all folders in the folder that you have just extracted to yourroot folder
orFTP_Base _folder/[Your_Folder] (normally it is httpdocs inpublic_html).
Examples: copy/upload all folders and files to httpdocs/byjoomla_metis
2.4. Create Database
Access your database control panel to create new database. When access the database control
panel, create a new database
11 | Page B M e t i s - C u s t o m e r
M a n u a l
After creating database, remember the database name, to add to the Quick-start Installation
Wizards. Now the database and Quick-start Package are ready, it’s time to complete Quick-
start installation.
Note: When installing in localhost, name of user will be root and password will be blank
(empty) by default if you are using XAMPP
2.5. Complete Quick-start Installation
Go to your address on localhost (or online url if you upload to your hosting). The installation
screen will come up. You can choose language for installation process. Fill in your information.
Marked fields are required.
Example: type http://localhost/byjoomla_metis in your browser or type
http://[your_url]/byjoomla_metis or type http://[your_url] if you copy to root folder
12 | Page B M e t i s - C u s t o m e r
M a n u a l
Click on the Next button. You’ll be taken to the Database Configuration screen:
13 | Page B M e t i s - C u s t o m e r
M a n u a l
 Select the type of database from the drop-down list; the most popular one is MySQLi.
 Then enter the hostname of the database server. Normally it will be localhost for the most server and
localhost
 Enter the MySQL database username, password and database name that you previously created on 2.4
Article<If using XAMPP, you don't need fill in password in default>
 You can leave the “Table prefix” field unchanged. A Prefix is relevant only when one database is shared
by several Joomla! installations.
 To continue, click the Next button. The Joomla! installer will then check database connection.
 If the database is successfully connected, you will be moved to Overview tab – this is the final and most
important page during the Installation process. If you encounter error in this step, should check back
whether you have filled in correct information of the database or forgot creating a new database.
14 | Page B M e t i s - C u s t o m e r
M a n u a l
The most important thing is to choose the option Sample Data. Otherwise the Quick-start
package won’t work. Remember to choose option Default English (GB) Sample Data(Choose
other option only install sample data like Joomla default) as the feature images above to get
the your website display like our Live Demo
At the bottom of this page you will see information about your system and if any of the
settingsare marked as red, your system is not ready yet for the Joomla! installation. Click the
Install button to install the demo content and complete the installation.
Note: Remember that the sample data installation is the most important step when using quick
start package.
Now the installation is finished, congratulation! However, there is still a last step to do. You
must delete the “installation” folder. It can be done automatically by clicking to Remove
Installation Folder button.
Before removing the installation folder you may install additional languages for both the
Joomla! front-end and the back-end. If you want to add extra languages to your Joomla
application click the Install languages button.
Note: If your online hosting does not allow the right to remove, you should delete manually by
FTP account.
15 | Page B M e t i s - C u s t o m e r
M a n u a l
Afterwards, click:
 the “Site” button to visit the homepage of your website. You will find the new website
fully-operational and looking exactly like our demo;
 or the “Administrator” button to visit the “backend” page of your website and log in to
the administrative interface using the username and the password that you created
during installation (don’t mistake for the user password).
For next access times on local host, after successfulimplementation of all steps, navigate
to: http://localhost/[your_folder] (or http://localhost:8080/[your_folder] in case
16 | Page B M e t i s - C u s t o m e r
M a n u a l
using port 8080), your front-page will be similar to our Live Demo, only sample images
are different due to copyright Photos rule.
Note:
 You can read more detailed to install Joomla 3.x(Installing_Joomla)
 To keep away from bugs while installing, you must fully install and configure as we
guided in order that after uploading the entire sample data, your website seems to be
similar to the Live demo.
 For users who want to install the new template without changing your old
database:
o Take back-up of your current site (recommended to practice not only for
templates but all the time you take major steps)
o Upload full template package, not quick-start package (it will be
template_installation_package that you can easily find in your Client Area) under
the [/templates] folder on your server.. Find the file by using Discover tab in the
Joomla Extension Manager and install it. After few seconds you should receive
the installation success message (on green background).
o Install all attached extensions, which are in the template packages in the same
manner, and create custom html modules with sample data guided as following
sections below of this document.
17 | Page B M e t i s - C u s t o m e r
M a n u a l
 If you failed, don’t worry because we did back up since step 1.
o Now, Login to phpMyAdmin (in localhot type: http://localhost/phpmyadmin)
and select your Joomla! database on the left column
o Next, select tab Import on the horizontal menu bar to import your old database
18 | Page B M e t i s - C u s t o m e r
M a n u a l
o After script execution, you can get back to your website to check how the original
data was restored.
1. Frequent errors when installing on local host
3.1 Upload file limit
It is common for Joomla template installation in localhost (example: XAMPP). If you have the
error, here is a solution for you:
Step 1: Find the file named "php.ini" ( you find in C:xamppphp)
19 | Page B M e t i s - C u s t o m e r
M a n u a l
Fill the below code
Code:
post_max_size"10M"
upload_max_filesize "10M"
Step 2: Set the value to what you need and save the file.
Now try uploading your template again.
IV. ByJoomla Extensions/Modules Configuration
Go to site’s administrator window >> Extensions >> Module Manager
Each module manager includes 4 items:
 Module: the main customization of module. It holds title, site, position, status, you can
independently customize
 Menu assignment: help you freedom assign module in page: on all pages, no pages, only
on page selected (page choice attached) or on all pages except these selected
 Module permission: Manage the permission settings for the user groups. Be careful to
see the note at the bottom of administrator page
 Options
 Advanced
20 | Page B M e t i s - C u s t o m e r
M a n u a l
Take a look at our layout map to learn more about the positions and its name in B Metis
21 | Page B M e t i s - C u s t o m e r
M a n u a l
1. B Image Slider
 Online introductions about B Image Slider here
To configure contents for B Image Slider 3, click to Components >> bj-image-slider
Three items for content building up, included are:
 Configuration: you can customize width and height of slider and thumbnail here if you
want to get a nice and arranged site.
NOTE: Whenever you upload a new photo, prepare its sizing to match with the
configuration.
 Manage category: you can add,removeor edit category. Each sliderwill run slides in
specifically assigned categories. If you have two sliders in different position as below,
it’s necessary to create 2 different categories and sets of slides to avoid duplications.
22 | Page B M e t i s - C u s t o m e r
M a n u a l
23 | Page B M e t i s - C u s t o m e r
M a n u a l
 Manage image: including all slides and its content which is shown in front-end. For
customizing each slider, you can take the following step
Step 1: Components >> bj-image-slider >> manage image
Step2: Click one of items you create. Fill in these items:
 Photo name: shown at the top of each slide.
 Photo description: by using custom HTML, you can change the content of slide
 Choose file: you can change image here
 Photo name and description will then be used as caption of the slides as back-
end settings
 Back-end settings
24 | Page B M e t i s - C u s t o m e r
M a n u a l
25 | Page B M e t i s - C u s t o m e r
M a n u a l
 Front-end display
Step 3: You can add as many photos as you want. Then you have to assign it into categories
with ID and decide which category is shown in which slide in Module Manager
Step 4: Come to Module manager >> bj image slider. Here you can adjust all about the slider
including: slider style (default or template style), transition effects (more than 8 effects for
you to choose), duration, position, category ID, pagination, caption style, pause on click, menu
assignment, title and so on. To create a same slide as our demo page, fill your information as
below.
26 | Page B M e t i s - C u s t o m e r
M a n u a l
Module position: Advert1
 Back-end settings
 Front-end settings
27 | Page B M e t i s - C u s t o m e r
M a n u a l
Note: You can assign any user position to Image Slider by changing the position rather than
"advert1" as well as settings of the module in Component. See how B Image Slider can
transform in each of our template: http://demo.byjoomla.com/metis3 and in B Metis, in
particular.
2. B Headline Roller
 Online introductions about B Headline Roller here
Module position: Headline
 Back-end settings
Unlike B Image Slider, it is easy to change content of B Headline Roller.
o Please click to Extensions >>Module Manager>>bj headline roller from your
administrator bar. Here you can adjust which category content will be used as
headline, number of items, switching interval, order, headline type, headline link
(to click on the headline and direct to your post), menu assignment and so on.
o Change the data as below to have the same effects as our demo headline roller.
28 | Page B M e t i s - C u s t o m e r
M a n u a l
 Front-end settings
3. Custom HTML Modules
3.1. Module position: User 1, User 2, User 3
To create the module:
- Step 1: Navigate to Extension >> Module manager
- Step 2: New >> Custom HTML
 Back-end settings
To create the small icon before the text in this module, please fill in Module Class
Suffix with appropriate codes: tl_sv_***, where *** is the icon name described in the
Typography Section or here
29 | Page B M e t i s - C u s t o m e r
M a n u a l
In the example: Module Class Suffix: tl_sv_location to add before user 1:
Step 1: Go to Administrator ->> Extension ->> Module Manager ->> Responsive
Step 2: Choose Advanced
Step 3: fill in Module Class Suffix with code tl_sv_location
Step 4: Save change
30 | Page B M e t i s - C u s t o m e r
M a n u a l
 Front-end settings
31 | Page B M e t i s - C u s t o m e r
M a n u a l
3.2. Module position: User 4, User 5,User 6
 back-end settings
<div class="tl_3c_img">your image</div>
<div class="tl_3c_a">your title</div>
 Front-end display
32 | Page B M e t i s - C u s t o m e r
M a n u a l
Note:
 These other articles in position user 5, user 6 has been similarly customized
 If any user is empty, the next user position will take place that empty user position
3.3. Flexible Users layouts in all positions:
The layout will be automatically to the numbers of publish module. See more details
about the layout blow.
 5 Users layouts
 4 Users layouts
33 | Page B M e t i s - C u s t o m e r
M a n u a l
 3 Users layouts
 2 Users layouts
34 | Page B M e t i s - C u s t o m e r
M a n u a l
 1 User layouts
35 | Page B M e t i s - C u s t o m e r
M a n u a l
4. B Social Extensions (including B Facebook Activity module, B Facebook Recommendation
module and B Social Plugin)
4.1. B Facebook Activity module, B Facebook Recommendation module
 Online introductions about B Facebook Activity module here
 Online introductions for B Facebook Recommendation module here
Module position :Right
 back-end settings
 Go to Extensions>>Module Manager>>B Facebook Recommend
 In order to change the icon before this module, you have to put appropriate icon
name in Module Class Suffix, or you just leave it blank because usually you don't
need any style for this module
 Plugin code: either using JavaScript or iFrame (in case you are afraid of
JavaScript conflict on your site).
 You can choose to change Header style, Header color, box color, width, height (in
pixel), font and domain of the extension (the domain to show activity for. The
XFBML version defaults to the current domain).
 For more information, please refer to our tutorial:
http://www.byjoomla.com/tutorials-guides/facebook-recommendation-
module-usage
36 | Page B M e t i s - C u s t o m e r
M a n u a l
 Front-end display
4.2. B Social Plugin:
Function: Integrated Social button (Twitter/Facebook) with your Content
 Using function exclude categories and exclude articles easily by fill the ID
 back-end settings
37 | Page B M e t i s - C u s t o m e r
M a n u a l
38 | Page B M e t i s - C u s t o m e r
M a n u a l
 Front-end display
39 | Page B M e t i s - C u s t o m e r
M a n u a l
5. Content Listing/Single Page (Mainbody)
 Back-end settings
Step 1:To create news, please go to content >> Article Manager>>New
Step 2: Assign the chosen Category to be Home Category
 Front-end settings
40 | Page B M e t i s - C u s t o m e r
M a n u a l
6. Pathway
Module position: Pathway
 Back-end settings
You can add text in Pathway position by custom HTML
 Front-end settings
41 | Page B M e t i s - C u s t o m e r
M a n u a l
7. Our Joomla Templates (module name in Live Demo)
Module position: User 7
 back-end settings
42 | Page B M e t i s - C u s t o m e r
M a n u a l
8. Monthly Newsletter (module name)
Module position: User 8
 Back-end settings
 Front-settings
43 | Page B M e t i s - C u s t o m e r
M a n u a l
9. B Photo Gallery
Module position: user 9
 backend settings
To add images to photo gallery, please go toContent >> Media Manager >> Gallery
| Upload your images to gallery folder. | Folder Path : images/stories/gallery |
With scrolling on bottom and preview on top.
 Front-end display
44 | Page B M e t i s - C u s t o m e r
M a n u a l
V. Customize Template Setting
1. Template Parameters
Some of the parameter adjustment mentioned here is applied for PRO/ DEV versions only. To
purchase the PRO/ DEV versions, easily sign up here
http://byjoomla.com/clients/user_signup.php?group=-10
Compare between FREE, Try and Buy, Pro and Dev version of B Metis here
In Template Manger >> Edit style, you can adjust these settings as below:
 Template color (PRO/DEV)
 Template Layout: width, columns, user layout for Joomla 2.5 version, auto Responsive
for Joomla 3.x version (PRO/DEV)
 Social account links (special B Metis for Joomla 3.x version)
 Component Heading (See Section VII - 8. Page title and SEO configuration for more
details)
 Text Alignment (Right to Left and vice versa)
 Menu Assignment
 Go to Top Button
 Logo Settings (PRO/DEV) (See Section VII - 1. How to upload and replace my logo
instead of default logo?)
45 | Page B M e t i s - C u s t o m e r
M a n u a l
2. Template Layout (PRO/DEV only)
 In B Metis PRO, it’s able to modify the width of 9 modules under Headline position and
Footer User position (User 1, User 2, User 3, User 4, User 5,User 6,User 7,User 8,User
9)
 If you choose Auto, 3 module width will be set automatically and equally for all
modules. For example if there are 3 modules, each module’s width will be 33.3%. If you
choose Fixed, the width of 3 modules will be modified using 3 parameters below.
 These parameters could be in percentage or pixel. For example:33.3%or~300px
46 | Page B M e t i s - C u s t o m e r
M a n u a l
3. Template Color
 B Metis provides eight major color variations for you to choose from. Each color
variation covers not only the main background, but also fills drop-down menu, sliders,
header and others.
 All available colors are described below.
47 | Page B M e t i s - C u s t o m e r
M a n u a l
48 | Page B M e t i s - C u s t o m e r
M a n u a l
 Template color can be configured in template parameters
49 | Page B M e t i s - C u s t o m e r
M a n u a l
4. Customizing style and typography
Before starting, you can check CSS files included in the template:
 Color: blue.css, gray.css, pearl.css, orange.css, persiangreen.css, red.css, pink.css,
viridian.css
 layout.css: contains specific styling for responsive layout and wide layout
 style.css: contains specific styling for text of template
 custom.css: contains styling for your own customization
 typography.css: contains some fonts and icons to have more choice for your better
website.
 ie7.css
 mac.css
 rtl.css
 global.css
 reset.css
4.1B Metis typography library
B Metis include a professional typography collection, which is so practical and appealing, just
copy the simple HTML codes as guided in our typography configuration article where show all
you need. The below HTML code demonstrates how to configure Typography like LIVE DEMO
page:
50 | Page B M e t i s - C u s t o m e r
M a n u a l
51 | Page B M e t i s - C u s t o m e r
M a n u a l
SERVICES ICONS
B Metis comes with 62 different service icons you can choose from and use it to present to any
module header. Every icon is already styled in main CSS file "style.css". You can see the list of
all icons available bellow. You can also edit rotate animation to degree you want, it's so
simple.
You can change any module header by these steps:
 Choose your module (Extensions-> Module manager -> Click on your module)
 Click Advance tab
 Fill in the Module Class Suffix: tl_sv_***, where *** is the icon name following this
graphic:
52 | Page B M e t i s - C u s t o m e r
M a n u a l
Example: Fill in "tl_sv_home" (or fill in "tl_sv_network") then the module will be displayed
below:
53 | Page B M e t i s - C u s t o m e r
M a n u a l
54 | Page B M e t i s - C u s t o m e r
M a n u a l
55 | Page B M e t i s - C u s t o m e r
M a n u a l
56 | Page B M e t i s - C u s t o m e r
M a n u a l
4.2. Manual customization
You should now be looking at the image below, Template Manager >> Template >>
BJ_Metis Details and Files
Click typography.css in folder "css" and you'll be able to edit it manually in the
browser.
57 | Page B M e t i s - C u s t o m e r
M a n u a l
VI. Menu System
1. B Drop down menu
Module position: Toolbar
Please click to Extension >> Module Manager >> BJ Dropdown Menu to modify the
content
58 | Page B M e t i s - C u s t o m e r
M a n u a l
 Back-end Settings
 Front-end Settings
59 | Page B M e t i s - C u s t o m e r
M a n u a l
How to create menu and child menu
Step 1: Access to Menu >> Main menu >> add menu item
Step 2:It’s easier to create menus in order which you would like to demonstrate on the
navigation bar, from parent menu to submenu. When adding new menu, you will see the
below screen.
60 | Page B M e t i s - C u s t o m e r
M a n u a l
Hereby:
 Menu title: the name of menu or submenu
 Alias: are normally auto-generated to be similar to the menu title
 Parent item: Select "Menu item root" to choose the parent menu of the adding
menu
 Menu Location: Select the menu location, Main menu or user menu and so on.
 Menu item types: show list of content types, which the user navigates to by
clicking to the menu.
61 | Page B M e t i s - C u s t o m e r
M a n u a l
 Target Window:
 Parent: shown content of menu item right in homepage
 New window with navigation: open link menu in new tab
 New without navigation: open link in a new window
 Template style: There are 4 styles for you
 User default and Beez3: only show content of menu item but not show in homepage
 B Metis default: the better choice because it shows all items on homepage.
2. Tree menu
Tree menu is a multi-level menu. To create tree menu, you have to choose parent menu for
each child. The number of levels can be created are unlimited
For example: to create a child "Red" of parent menu “Colors"
Step 1: Click to Menu ->> Main Menu
Step 2: Choose "New"
62 | Page B M e t i s - C u s t o m e r
M a n u a l
1. Menu title: fill in with text "Red"
2. Menu item type: type of child item
3. Choose a category: content format for each child
4. Menu location: take the same menu location with the parent
5. Parent item: the menu item contain child item, here is Colors
6. Repeat the process again, yet now the child is Green and the parent is
Red.
7. A 3 level tree menu is created as below:
3. Side menu
B Metisgives you an extra room for side menu and better navigation. The module is located
on Right position, and by adjusting in Menu Manger, you can choose which menu items are
displayed in this side menu.
Note:You can choose the same menu as main menu on toolbar or create a different menu
to show sub categories as in below example
63 | Page B M e t i s - C u s t o m e r
M a n u a l
To create side menu, please do the following steps:
Step 1: Go to Extension ->> Module Manager
Step 2: Choose New ->> Menu
Step 3: Fill in Title with text you want
Step 4: Choose position right
Step 5: Save change
And the Front-end display as below:
64 | Page B M e t i s - C u s t o m e r
M a n u a l
65 | Page B M e t i s - C u s t o m e r
M a n u a l
VII. Template FAQs and Support
If you are still confused, we recommend installing Quick-start on your localhost and use it as
reference for the configurations. Please go through the guide carefully, and if you still cannot
figure out how to customize the template to serve your demand, you can refer the below list of
frequently asked questions. Furthermore, we also provide dedicated support in our support
system; you can raise a question or find more information in our forum and ticket support
system.
1. How to upload and replace my logo instead of default logo?
There are 3 logo settings are included in B Metis:
 Logo path (Pro and 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 logo.png
and placed it in folder {template Folder}/images/logo.png, then the logo path
should be "{template Folder}/images/logo.png";
 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.
 Logo Slogan Text (Pro and 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 the one of the most texts of your page, so you can setup some keyword-rich
string here for better SEO
2. How to customize Footer
Step 1: Go to BJ template Administrator (www.your-site.com/administrator) ->
Extensions ->Module Manager.
Step 2: Click "New", select "Custom HTML", then select "Next".
66 | Page B M e t i s - C u s t o m e r
M a n u a l
Step3: In the module details specify:
a. Show Title: Show or hide are acceptable
b. Position: BJ Metis>> footer <footer>
c. Custom HTML: (the desired footer content)
Step 4: Save your changes.
You can now use the newly created module for further footer customizations without utilizing
additional modules.
Note: At the footer position, you will see this information:
To remove this, go to Extension >> Module manager
67 | Page B M e t i s - C u s t o m e r
M a n u a l
Look for the module named "footer" and simply click on the "unpublished" check mark to turn
it off and replace by create new module above.
3. How to change copyright text
Step 1: Go to BJ template Administrator (www.your-site.com/administrator) ->
Extensions ->Template Manager
Step 2: Click on Template (on the left sidebar) >> BJ_ Metis Details and Files
Step 3: Go to COPYRIGHT.txt and change the content
4. How to change colors and styles of boxes/button/text
B MetisPro/Dev version+ includes a library of professional typography.
Just view the style source code on our website then copy and retype as your desire.
Source: http://demo.byjoomla.com/metis3/typography/how-to-config-yours
5. How to customize your page nicely
In this section, we’d like to give you some advices to customize a tidy and nice web:
 Utilize module positions ofthe template to clearly show all core values of your company
 Your website will look better and more vivid if you use icons in typography library of B
Metis (B Metis has 62 service icons to choose). Example of Usage in User Position 1, 2, 3:
Fill in the Module Class Suffix: tl_sv_***, where *** is the icon name described in the
Typography Section.
68 | Page B M e t i s - C u s t o m e r
M a n u a l
 Furthermore, text titles should be just long enough to balance with the module's width
and the next modules.
 Blog display: In B Metis, the best way to display articles in blogs is choosing them as
leading articles. The default style showing the publishing date and time will
automatically appear on the top left corner of the article. To create the look, you have to
choose menu type as Articles >> Category blog and then choose all articles as leading
artciles only. There are also block layout, full-width layout, sidebar layout for all of your
demand.
69 | Page B M e t i s - C u s t o m e r
M a n u a l
 Here is another screenshot we create for Spa and Fitness template. In order to create
this view, you have to change the number and styles of user positions, extensions to the
layout as you desire. Module positions of B Metis are quite flexible for you to utilize
your creativity.
70 | Page B M e t i s - C u s t o m e r
M a n u a l
71 | Page B M e t i s - C u s t o m e r
M a n u a l
6. Why the images in the image slider do not fit the box?
You need to configure B Image Slider component before uploading images. There are
parameters in Configuration section of the component which let you specify the size of images
shown in the slider. You can back to our detail tutorial here.
7. How to change Favicon
Favicon is a small icon positioned on the left of the address bar of your browser. By default,
Joomla! Has an icon as shown on the screenshot below.
On your website, you might want to use your own icon, like the one we are using on our site
http://byjoomla.com
Here are instructions on how to do that:
Step 1: Create your own favicon file
Technically, favicon is a regular 16px * 16px icon file with exact name favicon.ico. In most
cases, favicon is the sized-down version of the company logo saved in the icon format. In some
cases, the logo is too specific and favicon needs to be built from scratch.You can use some
professional icon editor software like Axial is Icon Workshop and Icon cool Editor or to use
online favicon generators. The first method gives you better quality, but takes more effort.
The second method is easier, but the quality is not the best.
Step 2: Upload favicon file to your server
After you’ve got the favicon file, it’s time to upload it to your server. You need to upload the
icon file to template folder overwriting the default file. This is the folder
joomla_root_folderbj_metisfavicon.ico
72 | Page B M e t i s - C u s t o m e r
M a n u a l
8. Page title and SEO configuration
 To change the website title, please take following steps:
 In the Joomla administration panel, go to Menus >>Main Menu
 Next, in Menu Item Manager page, select item, example: Home
 Next, Menu Item page, open section Page Display Options and change parameter
Browser Page Title as you desire.
 Remember that page title is an important part for your search engine display. It
should be less than 70 characters to be more effective to increase clicks to your site
from search result
73 | Page B M e t i s - C u s t o m e r
M a n u a l
 You can do similar steps with article SEO parameters.
 Another way to set SEO parameter for your
page is choose Component Heading and
Content Heading in Template Managers. The
importance of content is devalued from H1
to others. Please back to our Template
Setting section to know more.
 You can also customize values of header
tags of modules in the advanced setting
section of those modules.
74 | Page B M e t i s - C u s t o m e r
M a n u a l
VIII. What else?
Thank you for choosing our template. Now you have known everything to use it. If you find
the documentation is helpful and love our template, we hope that you can return us with some
favors.
Give feedback
We would love to hear what you have to say:
- Submit a bug report and we will fix it ASAP.
- Give a lovely testimonial to be placed in official "Customers Testimonials" page.
- Tweet and share this template if you love it.
Check for updates
We are continuously updating our template gallery, so don’t forget to visit ByJoomla
templates to check for something new.
Facebook: http://facebook.com/byjoomla.page
Twitter: http://twitter.com/by_joomla
Pinterest: http://pinterest.com/byjoomla
Google Plus: http://plus.google.com/+Byjoomla-templates-free-extensions/

Más contenido relacionado

Similar a Joomla 2.5 and Joomla 3.x configuration of B Metis

The Level of Development (LOD) Specification 2015 (LOD 2015)
The Level of Development (LOD) Specification 2015 (LOD 2015)The Level of Development (LOD) Specification 2015 (LOD 2015)
The Level of Development (LOD) Specification 2015 (LOD 2015)Huytraining
 
Domino access for ms outlook
Domino access for ms outlookDomino access for ms outlook
Domino access for ms outlooknpshriya
 
Extending your business to mobile devices with ibm worklight
Extending your business to mobile devices with ibm worklightExtending your business to mobile devices with ibm worklight
Extending your business to mobile devices with ibm worklightbupbechanhgmail
 
mixi Research Report Preview
mixi Research Report Previewmixi Research Report Preview
mixi Research Report PreviewInfinita Inc.
 
How to install, and customize content component, interface and upgrade of Joo...
How to install, and customize content component, interface and upgrade of Joo...How to install, and customize content component, interface and upgrade of Joo...
How to install, and customize content component, interface and upgrade of Joo...US Blogger
 
Develop a first business process application
Develop a first business process applicationDevelop a first business process application
Develop a first business process applicationBonitasoft
 
Ibm lotus connections 3.0 lab excercises workbook 2011
Ibm lotus connections 3.0 lab excercises workbook 2011Ibm lotus connections 3.0 lab excercises workbook 2011
Ibm lotus connections 3.0 lab excercises workbook 2011Friedel Jonker
 
Bdotnet Ug Book Feb 2007
Bdotnet Ug Book Feb 2007Bdotnet Ug Book Feb 2007
Bdotnet Ug Book Feb 2007LiquidHub
 
Ibm mobile first in action for mgovernment and citizen mobile services red
Ibm mobile first in action for mgovernment and citizen mobile services redIbm mobile first in action for mgovernment and citizen mobile services red
Ibm mobile first in action for mgovernment and citizen mobile services redbupbechanhgmail
 
Mobicue Biz Plan July 28 2009
Mobicue Biz Plan  July 28 2009Mobicue Biz Plan  July 28 2009
Mobicue Biz Plan July 28 2009Song Li
 
Towards a UN social media strategy (for screen reading)
Towards a UN social media strategy (for screen reading)Towards a UN social media strategy (for screen reading)
Towards a UN social media strategy (for screen reading)Democracy Club
 
Photoshop cc 2018 essential skills
Photoshop cc 2018 essential skillsPhotoshop cc 2018 essential skills
Photoshop cc 2018 essential skillsDAVID RAUDALES
 
Getting started with bj jupiter
Getting started with bj jupiterGetting started with bj jupiter
Getting started with bj jupiterBy Joomla
 
Ibm workplace of the future lotus 2011
Ibm workplace of the future lotus 2011Ibm workplace of the future lotus 2011
Ibm workplace of the future lotus 2011Friedel Jonker
 
Microsoft India - Technical Overview on Windows Server 2008 R2 Whitepaper
Microsoft India - Technical Overview on Windows Server 2008 R2 WhitepaperMicrosoft India - Technical Overview on Windows Server 2008 R2 Whitepaper
Microsoft India - Technical Overview on Windows Server 2008 R2 WhitepaperMicrosoft Private Cloud
 
Extending ibm business process manager to the mobile enterprise with ibm work...
Extending ibm business process manager to the mobile enterprise with ibm work...Extending ibm business process manager to the mobile enterprise with ibm work...
Extending ibm business process manager to the mobile enterprise with ibm work...bupbechanhgmail
 
Magento 2 Custom Options (Magento 2 Dynamic Product Actions) Extention by Ito...
Magento 2 Custom Options (Magento 2 Dynamic Product Actions) Extention by Ito...Magento 2 Custom Options (Magento 2 Dynamic Product Actions) Extention by Ito...
Magento 2 Custom Options (Magento 2 Dynamic Product Actions) Extention by Ito...Itexus LLC
 

Similar a Joomla 2.5 and Joomla 3.x configuration of B Metis (20)

The Level of Development (LOD) Specification 2015 (LOD 2015)
The Level of Development (LOD) Specification 2015 (LOD 2015)The Level of Development (LOD) Specification 2015 (LOD 2015)
The Level of Development (LOD) Specification 2015 (LOD 2015)
 
LOD trong BIM
LOD trong BIMLOD trong BIM
LOD trong BIM
 
Domino access for ms outlook
Domino access for ms outlookDomino access for ms outlook
Domino access for ms outlook
 
Extending your business to mobile devices with ibm worklight
Extending your business to mobile devices with ibm worklightExtending your business to mobile devices with ibm worklight
Extending your business to mobile devices with ibm worklight
 
Module Guide
Module GuideModule Guide
Module Guide
 
mixi Research Report Preview
mixi Research Report Previewmixi Research Report Preview
mixi Research Report Preview
 
How to install, and customize content component, interface and upgrade of Joo...
How to install, and customize content component, interface and upgrade of Joo...How to install, and customize content component, interface and upgrade of Joo...
How to install, and customize content component, interface and upgrade of Joo...
 
Vmoduser
VmoduserVmoduser
Vmoduser
 
Develop a first business process application
Develop a first business process applicationDevelop a first business process application
Develop a first business process application
 
Ibm lotus connections 3.0 lab excercises workbook 2011
Ibm lotus connections 3.0 lab excercises workbook 2011Ibm lotus connections 3.0 lab excercises workbook 2011
Ibm lotus connections 3.0 lab excercises workbook 2011
 
Bdotnet Ug Book Feb 2007
Bdotnet Ug Book Feb 2007Bdotnet Ug Book Feb 2007
Bdotnet Ug Book Feb 2007
 
Ibm mobile first in action for mgovernment and citizen mobile services red
Ibm mobile first in action for mgovernment and citizen mobile services redIbm mobile first in action for mgovernment and citizen mobile services red
Ibm mobile first in action for mgovernment and citizen mobile services red
 
Mobicue Biz Plan July 28 2009
Mobicue Biz Plan  July 28 2009Mobicue Biz Plan  July 28 2009
Mobicue Biz Plan July 28 2009
 
Towards a UN social media strategy (for screen reading)
Towards a UN social media strategy (for screen reading)Towards a UN social media strategy (for screen reading)
Towards a UN social media strategy (for screen reading)
 
Photoshop cc 2018 essential skills
Photoshop cc 2018 essential skillsPhotoshop cc 2018 essential skills
Photoshop cc 2018 essential skills
 
Getting started with bj jupiter
Getting started with bj jupiterGetting started with bj jupiter
Getting started with bj jupiter
 
Ibm workplace of the future lotus 2011
Ibm workplace of the future lotus 2011Ibm workplace of the future lotus 2011
Ibm workplace of the future lotus 2011
 
Microsoft India - Technical Overview on Windows Server 2008 R2 Whitepaper
Microsoft India - Technical Overview on Windows Server 2008 R2 WhitepaperMicrosoft India - Technical Overview on Windows Server 2008 R2 Whitepaper
Microsoft India - Technical Overview on Windows Server 2008 R2 Whitepaper
 
Extending ibm business process manager to the mobile enterprise with ibm work...
Extending ibm business process manager to the mobile enterprise with ibm work...Extending ibm business process manager to the mobile enterprise with ibm work...
Extending ibm business process manager to the mobile enterprise with ibm work...
 
Magento 2 Custom Options (Magento 2 Dynamic Product Actions) Extention by Ito...
Magento 2 Custom Options (Magento 2 Dynamic Product Actions) Extention by Ito...Magento 2 Custom Options (Magento 2 Dynamic Product Actions) Extention by Ito...
Magento 2 Custom Options (Magento 2 Dynamic Product Actions) Extention by Ito...
 

Último

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 

Último (20)

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 

Joomla 2.5 and Joomla 3.x configuration of B Metis

  • 1. GETTING STARTED WITH B METIS Responsive Joomla 2.5.x & Joomla 3.x Template http://byjoomla.com Created: 05/02/2014 Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Byjoomla.com © 2014 Byjoomla.com Ltd. All rights reserved.
  • 2. 2 | Page B M e t i s - C u s t o m e r M a n u a l Table of Contents NAVIGATION ............................................................................................................................................. 4 I. Introduction....................................................................................................................................... 4 1. General information .............................................................................................................................. 4 2. Main features of B Metis ....................................................................................................................... 4 3. Layout structure..................................................................................................................................... 5 II. System Requirements........................................................................................................................ 5 1. Requirements for Joomla 2.5.x.............................................................................................................. 5 2. Requirements for Joomla 3.x................................................................................................................. 5 III. Download and Installation................................................................................................................. 6 1. How to download: ................................................................................................................................. 6 2. Quick-start Installation .......................................................................................................................... 7 2.1. Download ....................................................................................................................................... 7 2.2. Extract............................................................................................................................................. 8 2.3. Install .............................................................................................................................................. 9 2.4. Create Database ........................................................................................................................... 10 2.5. Complete Quick-start Installation ................................................................................................ 11 1. Frequent errors when installing on local host..................................................................................... 18 3.1 Upload file limit ............................................................................................................................ 18 IV. ByJoomla Extensions/Modules Configuration................................................................................. 19 1. B Image Slider ...................................................................................................................................... 21 2. B Headline Roller ................................................................................................................................. 27 3. Custom HTML Modules ....................................................................................................................... 28 3.1. Module position: User 1, User 2, User 3 .......................................................................................... 28 3.2. Module position: User 4, User 5,User 6 ...................................................................................... 31 3.3. Flexible Users layouts in all positions:.......................................................................................... 32 4. B Social Extensions (including B Facebook Activity module, B Facebook Recommendation module and B Social Plugin)..................................................................................................................................... 35
  • 3. 3 | Page B M e t i s - C u s t o m e r M a n u a l 4.1. B Facebook Activity module, B Facebook Recommendation module ......................................... 35 4.2. B Social Plugin:.............................................................................................................................. 36 5. Content Listing/Single Page (Mainbody) ............................................................................................. 39 6. Pathway ............................................................................................................................................... 40 7. Our Joomla Templates (module name in Live Demo) ......................................................................... 41 8. Monthly Newsletter............................................................................................................................. 42 9. Photo Gallery ....................................................................................................................................... 43 V. Customize Template Setting............................................................................................................ 44 1. Template Parameters.............................................................................................................................. 44 2. Template Layout (PRO/DEV only) ........................................................................................................... 45 3. Template Color........................................................................................................................................ 46 4. Customizing style and typography....................................................................................................... 49 4.1 B Metis typography library................................................................................................................ 49 4.2. Manual customization...................................................................................................................... 56 VI. Menu System................................................................................................................................... 57 1. B Drop down menu.............................................................................................................................. 57 2. Tree menu............................................................................................................................................ 61 3. Side menu ............................................................................................................................................ 62 VII. Template FAQs and Support............................................................................................................ 65 1. How to upload and replace my logo instead of default logo?................................................................ 65 2. How to customize Footer .................................................................................................................... 65 3. How to change copyright text ............................................................................................................. 67 4. How to change colors and styles of boxes/button/text...................................................................... 67 5. How to customize your page nicely..................................................................................................... 67 6. Why the images in the image slider do not fit the box? ..................................................................... 71 7. How to change Favicon ......................................................................................................................... 71 8. Page title and SEO configuration......................................................................................................... 72 VIII. What else? ....................................................................................................................................... 74
  • 4. 4 | Page B M e t i s - C u s t o m e r M a n u a l NAVIGATION I. Introduction 1. General information B Metis template is used to known as an appealing flat template for Joomla users to create a flexible, ultra-modern and tidy website, especially lifestyle magazine. However, the customization ability of B Metis also enabled its users to create websites for multi-purposes. Thanks to the upgrade from Joomla 2.5.x to Joomla 3.x, B Metis now becomes even more powerful because it is responsive with all device screens. The documentation is a detailed tutorial used for both B Metis 2.5 and B Metis 3.0 with just a slightly difference. 2. Main features of B Metis  Totally responsive on both front-end and back-end (Joomla 3.x version)  Outstanding Responsive B Image Slider (Joomla 3.x version)  Eight stunning colors variation (including Light/Dark version)  Highly customizable modules  62 different service icons  RTL text alignment support Complimentary other BJ Joomla 3.x Extensions included  B Image Slider3 (Free version)  B Drop-down Menu  B Headline Roller  B Facebook Recommendation, B Facebook Activity and B Social Plugin Especially, quick start package is included to turn your site to look like our demo site in a minute.
  • 5. 5 | Page B M e t i s - C u s t o m e r M a n u a l 3. Layout structure 15+ module positions 1–toolbar 2– advert1 3 –headline 4– user1 5 – user2 6 – user3 7 – user4 8 – user 5 9 – user6 10– right 11–pathway 12–user7 13–user8 14–user9 15– footer II. System Requirements 1. Requirements for Joomla 2.5.x Software Minimum More information PHP 5.2.4 + http://www.php.net MySQL 5.0.4 + http://www.mysql.com Database server Apache (with mod_mysql, mod_xml, and mod_zlib) 2.x + http://www.apache.org Nginx 1.0 http://wiki.nginx.org/ Microsoft IIS 7 http://www.iis.net 2. Requirements for Joomla 3.x Software Minimum More information PHP 5.3.1 + http://www.php.net MySQL 5.1 + http://www.mysql.com MSSQL 10.50.1600.1+ http://www.microsoft.com/sql PostgreSQL 8.3.18 + http://www.postgresql.org/
  • 6. 6 | Page B M e t i s - C u s t o m e r M a n u a l Database Server Apache (with mod_mysql, mod_xml, and mod_zlib) 2.x + http://www.apache.org Nginx 1.0 http://wiki.nginx.org/ Microsoft IIS 7 http://www.iis.net III. Download and Installation 1. How to download: - Sign up forB Metis downloadhere - After successfully payment, you will be granted access to Client Area and access the files - Loginto Clients Login from the Homepage, you will see the below page: - Download the zip files you need - Read ourpayment and download process carefully for more information.
  • 7. 7 | Page B M e t i s - C u s t o m e r M a n u a l 2. Quick-start Installation Note: Before that, you need to install Joomla 3.x (support 3.2.x and 3.3.x). Please check Joomla 3.x FAQs to have details for installing Joomla 3.x Quick-start Package is the best choice for users who want to kick-start a new B Metis template. Please check the guide below to understand how to implement Quick-start Installation. However, please remember to back up your data beforehand because your old data will be all gone afterwards. Don’t worry because we also guide you how to install the new template with preservation of your data. Note: You must be a member and pay off the PRO and DEV package to see Quick-start packages. The first thing to do is to login to Client Login with your account. Signup here to download PRO/DEV version. 2.1. Download When you are in download page, you can see the Zip file of Quick-start package, download it. Go to your Client Area: http://byjoomla.com/clients/user_login.php If you forget password, please enter your Username/Email Address in box above. Or you can contact us here There is a notification if you login successfully
  • 8. 8 | Page B M e t i s - C u s t o m e r M a n u a l Then download Quick-start (2.5 or 3.x package) here: 2.2. Extract Once you have this template, please extract(unzip) all this template to folder with full files
  • 9. 9 | Page B M e t i s - C u s t o m e r M a n u a l 2.3. Install  In your local host: Copy this extracted folder to: ...wampwww[your_folder] (for WAMP) and ...xampphtdocs[your_folder] (for XAMPP) Example: c:xamppbyjoomla_metis
  • 10. 10 | Page B M e t i s - C u s t o m e r M a n u a l  From your hosting: If you want to install the Quick-start from your hosting, please upload all folders in the folder that you have just extracted to yourroot folder orFTP_Base _folder/[Your_Folder] (normally it is httpdocs inpublic_html). Examples: copy/upload all folders and files to httpdocs/byjoomla_metis 2.4. Create Database Access your database control panel to create new database. When access the database control panel, create a new database
  • 11. 11 | Page B M e t i s - C u s t o m e r M a n u a l After creating database, remember the database name, to add to the Quick-start Installation Wizards. Now the database and Quick-start Package are ready, it’s time to complete Quick- start installation. Note: When installing in localhost, name of user will be root and password will be blank (empty) by default if you are using XAMPP 2.5. Complete Quick-start Installation Go to your address on localhost (or online url if you upload to your hosting). The installation screen will come up. You can choose language for installation process. Fill in your information. Marked fields are required. Example: type http://localhost/byjoomla_metis in your browser or type http://[your_url]/byjoomla_metis or type http://[your_url] if you copy to root folder
  • 12. 12 | Page B M e t i s - C u s t o m e r M a n u a l Click on the Next button. You’ll be taken to the Database Configuration screen:
  • 13. 13 | Page B M e t i s - C u s t o m e r M a n u a l  Select the type of database from the drop-down list; the most popular one is MySQLi.  Then enter the hostname of the database server. Normally it will be localhost for the most server and localhost  Enter the MySQL database username, password and database name that you previously created on 2.4 Article<If using XAMPP, you don't need fill in password in default>  You can leave the “Table prefix” field unchanged. A Prefix is relevant only when one database is shared by several Joomla! installations.  To continue, click the Next button. The Joomla! installer will then check database connection.  If the database is successfully connected, you will be moved to Overview tab – this is the final and most important page during the Installation process. If you encounter error in this step, should check back whether you have filled in correct information of the database or forgot creating a new database.
  • 14. 14 | Page B M e t i s - C u s t o m e r M a n u a l The most important thing is to choose the option Sample Data. Otherwise the Quick-start package won’t work. Remember to choose option Default English (GB) Sample Data(Choose other option only install sample data like Joomla default) as the feature images above to get the your website display like our Live Demo At the bottom of this page you will see information about your system and if any of the settingsare marked as red, your system is not ready yet for the Joomla! installation. Click the Install button to install the demo content and complete the installation. Note: Remember that the sample data installation is the most important step when using quick start package. Now the installation is finished, congratulation! However, there is still a last step to do. You must delete the “installation” folder. It can be done automatically by clicking to Remove Installation Folder button. Before removing the installation folder you may install additional languages for both the Joomla! front-end and the back-end. If you want to add extra languages to your Joomla application click the Install languages button. Note: If your online hosting does not allow the right to remove, you should delete manually by FTP account.
  • 15. 15 | Page B M e t i s - C u s t o m e r M a n u a l Afterwards, click:  the “Site” button to visit the homepage of your website. You will find the new website fully-operational and looking exactly like our demo;  or the “Administrator” button to visit the “backend” page of your website and log in to the administrative interface using the username and the password that you created during installation (don’t mistake for the user password). For next access times on local host, after successfulimplementation of all steps, navigate to: http://localhost/[your_folder] (or http://localhost:8080/[your_folder] in case
  • 16. 16 | Page B M e t i s - C u s t o m e r M a n u a l using port 8080), your front-page will be similar to our Live Demo, only sample images are different due to copyright Photos rule. Note:  You can read more detailed to install Joomla 3.x(Installing_Joomla)  To keep away from bugs while installing, you must fully install and configure as we guided in order that after uploading the entire sample data, your website seems to be similar to the Live demo.  For users who want to install the new template without changing your old database: o Take back-up of your current site (recommended to practice not only for templates but all the time you take major steps) o Upload full template package, not quick-start package (it will be template_installation_package that you can easily find in your Client Area) under the [/templates] folder on your server.. Find the file by using Discover tab in the Joomla Extension Manager and install it. After few seconds you should receive the installation success message (on green background). o Install all attached extensions, which are in the template packages in the same manner, and create custom html modules with sample data guided as following sections below of this document.
  • 17. 17 | Page B M e t i s - C u s t o m e r M a n u a l  If you failed, don’t worry because we did back up since step 1. o Now, Login to phpMyAdmin (in localhot type: http://localhost/phpmyadmin) and select your Joomla! database on the left column o Next, select tab Import on the horizontal menu bar to import your old database
  • 18. 18 | Page B M e t i s - C u s t o m e r M a n u a l o After script execution, you can get back to your website to check how the original data was restored. 1. Frequent errors when installing on local host 3.1 Upload file limit It is common for Joomla template installation in localhost (example: XAMPP). If you have the error, here is a solution for you: Step 1: Find the file named "php.ini" ( you find in C:xamppphp)
  • 19. 19 | Page B M e t i s - C u s t o m e r M a n u a l Fill the below code Code: post_max_size"10M" upload_max_filesize "10M" Step 2: Set the value to what you need and save the file. Now try uploading your template again. IV. ByJoomla Extensions/Modules Configuration Go to site’s administrator window >> Extensions >> Module Manager Each module manager includes 4 items:  Module: the main customization of module. It holds title, site, position, status, you can independently customize  Menu assignment: help you freedom assign module in page: on all pages, no pages, only on page selected (page choice attached) or on all pages except these selected  Module permission: Manage the permission settings for the user groups. Be careful to see the note at the bottom of administrator page  Options  Advanced
  • 20. 20 | Page B M e t i s - C u s t o m e r M a n u a l Take a look at our layout map to learn more about the positions and its name in B Metis
  • 21. 21 | Page B M e t i s - C u s t o m e r M a n u a l 1. B Image Slider  Online introductions about B Image Slider here To configure contents for B Image Slider 3, click to Components >> bj-image-slider Three items for content building up, included are:  Configuration: you can customize width and height of slider and thumbnail here if you want to get a nice and arranged site. NOTE: Whenever you upload a new photo, prepare its sizing to match with the configuration.  Manage category: you can add,removeor edit category. Each sliderwill run slides in specifically assigned categories. If you have two sliders in different position as below, it’s necessary to create 2 different categories and sets of slides to avoid duplications.
  • 22. 22 | Page B M e t i s - C u s t o m e r M a n u a l
  • 23. 23 | Page B M e t i s - C u s t o m e r M a n u a l  Manage image: including all slides and its content which is shown in front-end. For customizing each slider, you can take the following step Step 1: Components >> bj-image-slider >> manage image Step2: Click one of items you create. Fill in these items:  Photo name: shown at the top of each slide.  Photo description: by using custom HTML, you can change the content of slide  Choose file: you can change image here  Photo name and description will then be used as caption of the slides as back- end settings  Back-end settings
  • 24. 24 | Page B M e t i s - C u s t o m e r M a n u a l
  • 25. 25 | Page B M e t i s - C u s t o m e r M a n u a l  Front-end display Step 3: You can add as many photos as you want. Then you have to assign it into categories with ID and decide which category is shown in which slide in Module Manager Step 4: Come to Module manager >> bj image slider. Here you can adjust all about the slider including: slider style (default or template style), transition effects (more than 8 effects for you to choose), duration, position, category ID, pagination, caption style, pause on click, menu assignment, title and so on. To create a same slide as our demo page, fill your information as below.
  • 26. 26 | Page B M e t i s - C u s t o m e r M a n u a l Module position: Advert1  Back-end settings  Front-end settings
  • 27. 27 | Page B M e t i s - C u s t o m e r M a n u a l Note: You can assign any user position to Image Slider by changing the position rather than "advert1" as well as settings of the module in Component. See how B Image Slider can transform in each of our template: http://demo.byjoomla.com/metis3 and in B Metis, in particular. 2. B Headline Roller  Online introductions about B Headline Roller here Module position: Headline  Back-end settings Unlike B Image Slider, it is easy to change content of B Headline Roller. o Please click to Extensions >>Module Manager>>bj headline roller from your administrator bar. Here you can adjust which category content will be used as headline, number of items, switching interval, order, headline type, headline link (to click on the headline and direct to your post), menu assignment and so on. o Change the data as below to have the same effects as our demo headline roller.
  • 28. 28 | Page B M e t i s - C u s t o m e r M a n u a l  Front-end settings 3. Custom HTML Modules 3.1. Module position: User 1, User 2, User 3 To create the module: - Step 1: Navigate to Extension >> Module manager - Step 2: New >> Custom HTML  Back-end settings To create the small icon before the text in this module, please fill in Module Class Suffix with appropriate codes: tl_sv_***, where *** is the icon name described in the Typography Section or here
  • 29. 29 | Page B M e t i s - C u s t o m e r M a n u a l In the example: Module Class Suffix: tl_sv_location to add before user 1: Step 1: Go to Administrator ->> Extension ->> Module Manager ->> Responsive Step 2: Choose Advanced Step 3: fill in Module Class Suffix with code tl_sv_location Step 4: Save change
  • 30. 30 | Page B M e t i s - C u s t o m e r M a n u a l  Front-end settings
  • 31. 31 | Page B M e t i s - C u s t o m e r M a n u a l 3.2. Module position: User 4, User 5,User 6  back-end settings <div class="tl_3c_img">your image</div> <div class="tl_3c_a">your title</div>  Front-end display
  • 32. 32 | Page B M e t i s - C u s t o m e r M a n u a l Note:  These other articles in position user 5, user 6 has been similarly customized  If any user is empty, the next user position will take place that empty user position 3.3. Flexible Users layouts in all positions: The layout will be automatically to the numbers of publish module. See more details about the layout blow.  5 Users layouts  4 Users layouts
  • 33. 33 | Page B M e t i s - C u s t o m e r M a n u a l  3 Users layouts  2 Users layouts
  • 34. 34 | Page B M e t i s - C u s t o m e r M a n u a l  1 User layouts
  • 35. 35 | Page B M e t i s - C u s t o m e r M a n u a l 4. B Social Extensions (including B Facebook Activity module, B Facebook Recommendation module and B Social Plugin) 4.1. B Facebook Activity module, B Facebook Recommendation module  Online introductions about B Facebook Activity module here  Online introductions for B Facebook Recommendation module here Module position :Right  back-end settings  Go to Extensions>>Module Manager>>B Facebook Recommend  In order to change the icon before this module, you have to put appropriate icon name in Module Class Suffix, or you just leave it blank because usually you don't need any style for this module  Plugin code: either using JavaScript or iFrame (in case you are afraid of JavaScript conflict on your site).  You can choose to change Header style, Header color, box color, width, height (in pixel), font and domain of the extension (the domain to show activity for. The XFBML version defaults to the current domain).  For more information, please refer to our tutorial: http://www.byjoomla.com/tutorials-guides/facebook-recommendation- module-usage
  • 36. 36 | Page B M e t i s - C u s t o m e r M a n u a l  Front-end display 4.2. B Social Plugin: Function: Integrated Social button (Twitter/Facebook) with your Content  Using function exclude categories and exclude articles easily by fill the ID  back-end settings
  • 37. 37 | Page B M e t i s - C u s t o m e r M a n u a l
  • 38. 38 | Page B M e t i s - C u s t o m e r M a n u a l  Front-end display
  • 39. 39 | Page B M e t i s - C u s t o m e r M a n u a l 5. Content Listing/Single Page (Mainbody)  Back-end settings Step 1:To create news, please go to content >> Article Manager>>New Step 2: Assign the chosen Category to be Home Category  Front-end settings
  • 40. 40 | Page B M e t i s - C u s t o m e r M a n u a l 6. Pathway Module position: Pathway  Back-end settings You can add text in Pathway position by custom HTML  Front-end settings
  • 41. 41 | Page B M e t i s - C u s t o m e r M a n u a l 7. Our Joomla Templates (module name in Live Demo) Module position: User 7  back-end settings
  • 42. 42 | Page B M e t i s - C u s t o m e r M a n u a l 8. Monthly Newsletter (module name) Module position: User 8  Back-end settings  Front-settings
  • 43. 43 | Page B M e t i s - C u s t o m e r M a n u a l 9. B Photo Gallery Module position: user 9  backend settings To add images to photo gallery, please go toContent >> Media Manager >> Gallery | Upload your images to gallery folder. | Folder Path : images/stories/gallery | With scrolling on bottom and preview on top.  Front-end display
  • 44. 44 | Page B M e t i s - C u s t o m e r M a n u a l V. Customize Template Setting 1. Template Parameters Some of the parameter adjustment mentioned here is applied for PRO/ DEV versions only. To purchase the PRO/ DEV versions, easily sign up here http://byjoomla.com/clients/user_signup.php?group=-10 Compare between FREE, Try and Buy, Pro and Dev version of B Metis here In Template Manger >> Edit style, you can adjust these settings as below:  Template color (PRO/DEV)  Template Layout: width, columns, user layout for Joomla 2.5 version, auto Responsive for Joomla 3.x version (PRO/DEV)  Social account links (special B Metis for Joomla 3.x version)  Component Heading (See Section VII - 8. Page title and SEO configuration for more details)  Text Alignment (Right to Left and vice versa)  Menu Assignment  Go to Top Button  Logo Settings (PRO/DEV) (See Section VII - 1. How to upload and replace my logo instead of default logo?)
  • 45. 45 | Page B M e t i s - C u s t o m e r M a n u a l 2. Template Layout (PRO/DEV only)  In B Metis PRO, it’s able to modify the width of 9 modules under Headline position and Footer User position (User 1, User 2, User 3, User 4, User 5,User 6,User 7,User 8,User 9)  If you choose Auto, 3 module width will be set automatically and equally for all modules. For example if there are 3 modules, each module’s width will be 33.3%. If you choose Fixed, the width of 3 modules will be modified using 3 parameters below.  These parameters could be in percentage or pixel. For example:33.3%or~300px
  • 46. 46 | Page B M e t i s - C u s t o m e r M a n u a l 3. Template Color  B Metis provides eight major color variations for you to choose from. Each color variation covers not only the main background, but also fills drop-down menu, sliders, header and others.  All available colors are described below.
  • 47. 47 | Page B M e t i s - C u s t o m e r M a n u a l
  • 48. 48 | Page B M e t i s - C u s t o m e r M a n u a l  Template color can be configured in template parameters
  • 49. 49 | Page B M e t i s - C u s t o m e r M a n u a l 4. Customizing style and typography Before starting, you can check CSS files included in the template:  Color: blue.css, gray.css, pearl.css, orange.css, persiangreen.css, red.css, pink.css, viridian.css  layout.css: contains specific styling for responsive layout and wide layout  style.css: contains specific styling for text of template  custom.css: contains styling for your own customization  typography.css: contains some fonts and icons to have more choice for your better website.  ie7.css  mac.css  rtl.css  global.css  reset.css 4.1B Metis typography library B Metis include a professional typography collection, which is so practical and appealing, just copy the simple HTML codes as guided in our typography configuration article where show all you need. The below HTML code demonstrates how to configure Typography like LIVE DEMO page:
  • 50. 50 | Page B M e t i s - C u s t o m e r M a n u a l
  • 51. 51 | Page B M e t i s - C u s t o m e r M a n u a l SERVICES ICONS B Metis comes with 62 different service icons you can choose from and use it to present to any module header. Every icon is already styled in main CSS file "style.css". You can see the list of all icons available bellow. You can also edit rotate animation to degree you want, it's so simple. You can change any module header by these steps:  Choose your module (Extensions-> Module manager -> Click on your module)  Click Advance tab  Fill in the Module Class Suffix: tl_sv_***, where *** is the icon name following this graphic:
  • 52. 52 | Page B M e t i s - C u s t o m e r M a n u a l Example: Fill in "tl_sv_home" (or fill in "tl_sv_network") then the module will be displayed below:
  • 53. 53 | Page B M e t i s - C u s t o m e r M a n u a l
  • 54. 54 | Page B M e t i s - C u s t o m e r M a n u a l
  • 55. 55 | Page B M e t i s - C u s t o m e r M a n u a l
  • 56. 56 | Page B M e t i s - C u s t o m e r M a n u a l 4.2. Manual customization You should now be looking at the image below, Template Manager >> Template >> BJ_Metis Details and Files Click typography.css in folder "css" and you'll be able to edit it manually in the browser.
  • 57. 57 | Page B M e t i s - C u s t o m e r M a n u a l VI. Menu System 1. B Drop down menu Module position: Toolbar Please click to Extension >> Module Manager >> BJ Dropdown Menu to modify the content
  • 58. 58 | Page B M e t i s - C u s t o m e r M a n u a l  Back-end Settings  Front-end Settings
  • 59. 59 | Page B M e t i s - C u s t o m e r M a n u a l How to create menu and child menu Step 1: Access to Menu >> Main menu >> add menu item Step 2:It’s easier to create menus in order which you would like to demonstrate on the navigation bar, from parent menu to submenu. When adding new menu, you will see the below screen.
  • 60. 60 | Page B M e t i s - C u s t o m e r M a n u a l Hereby:  Menu title: the name of menu or submenu  Alias: are normally auto-generated to be similar to the menu title  Parent item: Select "Menu item root" to choose the parent menu of the adding menu  Menu Location: Select the menu location, Main menu or user menu and so on.  Menu item types: show list of content types, which the user navigates to by clicking to the menu.
  • 61. 61 | Page B M e t i s - C u s t o m e r M a n u a l  Target Window:  Parent: shown content of menu item right in homepage  New window with navigation: open link menu in new tab  New without navigation: open link in a new window  Template style: There are 4 styles for you  User default and Beez3: only show content of menu item but not show in homepage  B Metis default: the better choice because it shows all items on homepage. 2. Tree menu Tree menu is a multi-level menu. To create tree menu, you have to choose parent menu for each child. The number of levels can be created are unlimited For example: to create a child "Red" of parent menu “Colors" Step 1: Click to Menu ->> Main Menu Step 2: Choose "New"
  • 62. 62 | Page B M e t i s - C u s t o m e r M a n u a l 1. Menu title: fill in with text "Red" 2. Menu item type: type of child item 3. Choose a category: content format for each child 4. Menu location: take the same menu location with the parent 5. Parent item: the menu item contain child item, here is Colors 6. Repeat the process again, yet now the child is Green and the parent is Red. 7. A 3 level tree menu is created as below: 3. Side menu B Metisgives you an extra room for side menu and better navigation. The module is located on Right position, and by adjusting in Menu Manger, you can choose which menu items are displayed in this side menu. Note:You can choose the same menu as main menu on toolbar or create a different menu to show sub categories as in below example
  • 63. 63 | Page B M e t i s - C u s t o m e r M a n u a l To create side menu, please do the following steps: Step 1: Go to Extension ->> Module Manager Step 2: Choose New ->> Menu Step 3: Fill in Title with text you want Step 4: Choose position right Step 5: Save change And the Front-end display as below:
  • 64. 64 | Page B M e t i s - C u s t o m e r M a n u a l
  • 65. 65 | Page B M e t i s - C u s t o m e r M a n u a l VII. Template FAQs and Support If you are still confused, we recommend installing Quick-start on your localhost and use it as reference for the configurations. Please go through the guide carefully, and if you still cannot figure out how to customize the template to serve your demand, you can refer the below list of frequently asked questions. Furthermore, we also provide dedicated support in our support system; you can raise a question or find more information in our forum and ticket support system. 1. How to upload and replace my logo instead of default logo? There are 3 logo settings are included in B Metis:  Logo path (Pro and 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 logo.png and placed it in folder {template Folder}/images/logo.png, then the logo path should be "{template Folder}/images/logo.png";  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.  Logo Slogan Text (Pro and 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 the one of the most texts of your page, so you can setup some keyword-rich string here for better SEO 2. How to customize Footer Step 1: Go to BJ template Administrator (www.your-site.com/administrator) -> Extensions ->Module Manager. Step 2: Click "New", select "Custom HTML", then select "Next".
  • 66. 66 | Page B M e t i s - C u s t o m e r M a n u a l Step3: In the module details specify: a. Show Title: Show or hide are acceptable b. Position: BJ Metis>> footer <footer> c. Custom HTML: (the desired footer content) Step 4: Save your changes. You can now use the newly created module for further footer customizations without utilizing additional modules. Note: At the footer position, you will see this information: To remove this, go to Extension >> Module manager
  • 67. 67 | Page B M e t i s - C u s t o m e r M a n u a l Look for the module named "footer" and simply click on the "unpublished" check mark to turn it off and replace by create new module above. 3. How to change copyright text Step 1: Go to BJ template Administrator (www.your-site.com/administrator) -> Extensions ->Template Manager Step 2: Click on Template (on the left sidebar) >> BJ_ Metis Details and Files Step 3: Go to COPYRIGHT.txt and change the content 4. How to change colors and styles of boxes/button/text B MetisPro/Dev version+ includes a library of professional typography. Just view the style source code on our website then copy and retype as your desire. Source: http://demo.byjoomla.com/metis3/typography/how-to-config-yours 5. How to customize your page nicely In this section, we’d like to give you some advices to customize a tidy and nice web:  Utilize module positions ofthe template to clearly show all core values of your company  Your website will look better and more vivid if you use icons in typography library of B Metis (B Metis has 62 service icons to choose). Example of Usage in User Position 1, 2, 3: Fill in the Module Class Suffix: tl_sv_***, where *** is the icon name described in the Typography Section.
  • 68. 68 | Page B M e t i s - C u s t o m e r M a n u a l  Furthermore, text titles should be just long enough to balance with the module's width and the next modules.  Blog display: In B Metis, the best way to display articles in blogs is choosing them as leading articles. The default style showing the publishing date and time will automatically appear on the top left corner of the article. To create the look, you have to choose menu type as Articles >> Category blog and then choose all articles as leading artciles only. There are also block layout, full-width layout, sidebar layout for all of your demand.
  • 69. 69 | Page B M e t i s - C u s t o m e r M a n u a l  Here is another screenshot we create for Spa and Fitness template. In order to create this view, you have to change the number and styles of user positions, extensions to the layout as you desire. Module positions of B Metis are quite flexible for you to utilize your creativity.
  • 70. 70 | Page B M e t i s - C u s t o m e r M a n u a l
  • 71. 71 | Page B M e t i s - C u s t o m e r M a n u a l 6. Why the images in the image slider do not fit the box? You need to configure B Image Slider component before uploading images. There are parameters in Configuration section of the component which let you specify the size of images shown in the slider. You can back to our detail tutorial here. 7. How to change Favicon Favicon is a small icon positioned on the left of the address bar of your browser. By default, Joomla! Has an icon as shown on the screenshot below. On your website, you might want to use your own icon, like the one we are using on our site http://byjoomla.com Here are instructions on how to do that: Step 1: Create your own favicon file Technically, favicon is a regular 16px * 16px icon file with exact name favicon.ico. In most cases, favicon is the sized-down version of the company logo saved in the icon format. In some cases, the logo is too specific and favicon needs to be built from scratch.You can use some professional icon editor software like Axial is Icon Workshop and Icon cool Editor or to use online favicon generators. The first method gives you better quality, but takes more effort. The second method is easier, but the quality is not the best. Step 2: Upload favicon file to your server After you’ve got the favicon file, it’s time to upload it to your server. You need to upload the icon file to template folder overwriting the default file. This is the folder joomla_root_folderbj_metisfavicon.ico
  • 72. 72 | Page B M e t i s - C u s t o m e r M a n u a l 8. Page title and SEO configuration  To change the website title, please take following steps:  In the Joomla administration panel, go to Menus >>Main Menu  Next, in Menu Item Manager page, select item, example: Home  Next, Menu Item page, open section Page Display Options and change parameter Browser Page Title as you desire.  Remember that page title is an important part for your search engine display. It should be less than 70 characters to be more effective to increase clicks to your site from search result
  • 73. 73 | Page B M e t i s - C u s t o m e r M a n u a l  You can do similar steps with article SEO parameters.  Another way to set SEO parameter for your page is choose Component Heading and Content Heading in Template Managers. The importance of content is devalued from H1 to others. Please back to our Template Setting section to know more.  You can also customize values of header tags of modules in the advanced setting section of those modules.
  • 74. 74 | Page B M e t i s - C u s t o m e r M a n u a l VIII. What else? Thank you for choosing our template. Now you have known everything to use it. If you find the documentation is helpful and love our template, we hope that you can return us with some favors. Give feedback We would love to hear what you have to say: - Submit a bug report and we will fix it ASAP. - Give a lovely testimonial to be placed in official "Customers Testimonials" page. - Tweet and share this template if you love it. Check for updates We are continuously updating our template gallery, so don’t forget to visit ByJoomla templates to check for something new. Facebook: http://facebook.com/byjoomla.page Twitter: http://twitter.com/by_joomla Pinterest: http://pinterest.com/byjoomla Google Plus: http://plus.google.com/+Byjoomla-templates-free-extensions/