74
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.

Joomla 2.5 and Joomla 3.x configuration of B Metis

Embed Size (px)

DESCRIPTION

The documentation is a detailed tutorial to learn about how to configure and install B Metis for both Joomla 2.5 and Joomla 3.2. You can see more abou how to install Joomla 3.2, system requirement for both Joomla 3.5 and Joomla 3.2. To see demo of B Metis, go to: http://demo.byjoomla.com/metis3/ or http://byjoomla.com/homepage-blog/b-metis-responsive-ultra-modern-design-and-tidy-template

Citation preview

Page 1: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 2: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 3: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 4: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 5: Joomla 2.5 and Joomla 3.x configuration of B Metis

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/

Page 6: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 7: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 8: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 9: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 10: Joomla 2.5 and Joomla 3.x configuration of B 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

Page 11: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 12: Joomla 2.5 and Joomla 3.x configuration of B Metis

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:

Page 13: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 14: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 15: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 16: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 17: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 18: Joomla 2.5 and Joomla 3.x configuration of B Metis

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)

Page 19: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 20: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 21: Joomla 2.5 and Joomla 3.x configuration of 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.

Page 22: Joomla 2.5 and Joomla 3.x configuration of B Metis

22 | Page B M e t i s - C u s t o m e r M a n u a l

Page 23: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 24: Joomla 2.5 and Joomla 3.x configuration of B Metis

24 | Page B M e t i s - C u s t o m e r M a n u a l

Page 25: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 26: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 27: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 28: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 29: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 30: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 31: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 32: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 33: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 34: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 35: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 36: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 37: Joomla 2.5 and Joomla 3.x configuration of B Metis

37 | Page B M e t i s - C u s t o m e r M a n u a l

Page 38: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 39: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 40: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 41: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 42: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 43: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 44: Joomla 2.5 and Joomla 3.x configuration of B Metis

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?)

Page 45: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 46: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 47: Joomla 2.5 and Joomla 3.x configuration of B Metis

47 | Page B M e t i s - C u s t o m e r M a n u a l

Page 48: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 49: Joomla 2.5 and Joomla 3.x configuration of B Metis

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:

Page 50: Joomla 2.5 and Joomla 3.x configuration of B Metis

50 | Page B M e t i s - C u s t o m e r M a n u a l

Page 51: Joomla 2.5 and Joomla 3.x configuration of B Metis

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:

Page 52: Joomla 2.5 and Joomla 3.x configuration of B Metis

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:

Page 53: Joomla 2.5 and Joomla 3.x configuration of B Metis

53 | Page B M e t i s - C u s t o m e r M a n u a l

Page 54: Joomla 2.5 and Joomla 3.x configuration of B Metis

54 | Page B M e t i s - C u s t o m e r M a n u a l

Page 55: Joomla 2.5 and Joomla 3.x configuration of B Metis

55 | Page B M e t i s - C u s t o m e r M a n u a l

Page 56: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 57: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 58: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 59: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 60: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 61: Joomla 2.5 and Joomla 3.x configuration of B Metis

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"

Page 62: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 63: Joomla 2.5 and Joomla 3.x configuration of B Metis

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:

Page 64: Joomla 2.5 and Joomla 3.x configuration of B Metis

64 | Page B M e t i s - C u s t o m e r M a n u a l

Page 65: Joomla 2.5 and Joomla 3.x configuration of B Metis

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".

Page 66: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 67: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 68: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 69: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 70: Joomla 2.5 and Joomla 3.x configuration of B Metis

70 | Page B M e t i s - C u s t o m e r M a n u a l

Page 71: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 72: Joomla 2.5 and Joomla 3.x configuration of B Metis

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

Page 73: Joomla 2.5 and Joomla 3.x configuration of B Metis

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.

Page 74: Joomla 2.5 and Joomla 3.x configuration of B Metis

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/