Joomla 2.5 and Joomla 3.x configuration of B Metis

666 views
558 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
666
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Joomla 2.5 and Joomla 3.x configuration of B Metis

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22 | Page B M e t i s - C u s t o m e r M a n u a l
  23. 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. 24 | Page B M e t i s - C u s t o m e r M a n u a l
  25. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 37 | Page B M e t i s - C u s t o m e r M a n u a l
  38. 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. 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. 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. 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. 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. 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. 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. 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. 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. 47 | Page B M e t i s - C u s t o m e r M a n u a l
  48. 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. 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. 50 | Page B M e t i s - C u s t o m e r M a n u a l
  51. 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. 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. 53 | Page B M e t i s - C u s t o m e r M a n u a l
  54. 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. 55 | Page B M e t i s - C u s t o m e r M a n u a l
  56. 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. 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. 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. 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. 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. 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. 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. 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. 64 | Page B M e t i s - C u s t o m e r M a n u a l
  65. 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. 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. 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. 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. 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. 70 | Page B M e t i s - C u s t o m e r M a n u a l
  71. 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. 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. 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. 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/

×