b metis for joomla 3.2 documentation
Post on 28-Dec-2015
114 Views
Preview:
DESCRIPTION
TRANSCRIPT
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: ...\wamp\www\[your_folder] (for
WAMP) and ...\xampp\htdocs\[your_folder] (for XAMPP)
Example: c:\\xampp\byjoomla_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:\xampp\php)
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_folder\bj_metis\favicon.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/
top related