<
- [Support Center](https://drfuri.ticksy.com/)
- [Last ChangeLog](http://docs.drfuri.com/mrbara/changelog/)
Install WordPress
-----------------
To install this theme you must have a working version of WordPress already installed. You should ALWAYS be running the latest version of WordPress anyway, because otherwise you put your whole site at risk for potential threats. Never use an outdated version of WordPress.
If you need help installing WordPress, follow the instructions in [WordPress Codex](http://codex.wordpress.org/Installing_WordPress). Below are all the useful links for WordPress information.
- [WordPress Codex](http://codex.wordpress.org/Installing_WordPress) – General info about WordPress and how to install on your server.
- [First Steps With WordPress](http://codex.wordpress.org/First_Steps_With_WordPress) – General info about multiple topics about WordPress.
- [FAQ New To WordPress](http://codex.wordpress.org/FAQ_New_To_WordPress) – The most popular FAQ’s regarding WordPress.
Recommended PHP Configuration Limits
------------------------------------
Many issues that you may run into such as; white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:
- max_execution_time: 180
- memory_limit: 128M
- post_max_size: 32M
- upload_max_filesize: 32M
Files included in the package
-----------------------------
Below is a full list of everything that is included when you download the main files, along with a brief description of each item.
- `mrbara.zip`: main theme file that need to be uploaded to host to install MrBara theme.
- `mrbara-child.zip`: basic child theme of MrBara theme. It is created for people who want to customize code of the MrBara theme.
- `Demo Data`: this folder contains homepage layouts: carousel, full slider, full width, lookbook, parallax, sidebar and split slider.
- `widgets.wie`: this file contains all widgets which are exported from our demo.
- `demo-content.xml`: this file contains all sample content which will help you to have a first look of how we use MrBara theme.
- In the homepage folder, we included theme options, sliders of versions which are exported from our demo.
- customizer.dat: theme option backup file.
- Sliders: this folder contains sliders which are exported from our demo.
- `Documentation`: documentation folder that contains documentation files.
How To Install Your Theme
-------------------------
After you download the package from ThemeForest, please unzip it. You'll see a file called `mrbara.zip`, which is the main file needed to upload and install.
> Important: One of the most common reasons people have issues is
> because they try uploading the Full zip that includes sample data,
> documentation…etc which displays the “The package could not be
> installed. The theme is missing the style.css stylesheet.” error.
> Please make sure you are uploading only the installable theme which is
> called mrbara.zip.
You can either choose to upload and installl the theme using **WordPress theme install** or use **FTP** function.
**Install theme using WordPress**
- Log into your WordPress website and go to `Appearance > Themes` and click **Add New**
- Click on the option to **Upload Theme**
- Click **Browse** and select the `mrbara.zip` file
- Click **Install Now**. When upload and installation progresses are completed, click **Activate**, or go to `Appearance > Themes` and activate the **MrBara** theme.
If you get the “Are You Sure You Want To Do This” message when installing mrbara.zip file via WordPress, it means you have an upload file size limit. You need to install the theme via FTP, or contact your hosting provider to increase the limit.
----------
**Upload and install using FTP**
- Unzip the `mrbara.zip` file, you'll get a folder `mrbara`
- Use a FTP client like [FileZilla](http://filezilla-project.org/) and upload that folder to `wp-content/themes` folder on your host
- Go to `Appearance > Themes` and activate the **MrBara** theme.
How To Install Plugins Included
----------------
**License plugins**
- The theme included two licensing plugins: Visual Composer and Revolution Slider, we purchased them from codecanyone.net and included them for free in the theme without any issues. However, if you want automatic updates and support from the plugin developer you need to purchase it separately (this is 100% optional). Some plugins include a field to enter your “purchase” code for the plugin. Because we are not allowed to include the license key for each of them, so you do NOT have a purchase code for that plugin and you can’t enter anything in this field. If there is any update, we are accountable for updating the theme with the newest version of plugins.
After installing the MrBara theme, you'll see a notification in the top of the page that says the theme needs some plugins to function properly.
The MrBara theme **requires** following plugins:
- MrBara Visual Composer Addons: extra elements for Visual Composer. It was built for MrBara theme.
- [Meta Box](https://wordpress.org/plugins/meta-box/): plugin for creating meta boxes for posts, pages,... It is free and available on WordPress.org
- [WPBakery Visual Composer](http://vc.wpbakery.com/): it is Drag and Drop Frontend and Backend Pagebuilder Plugin for Wordpress.
- [Woocommerce](https://wordpress.org/plugins/woocommerce/): it is a powerful, extendable eCommerce plugin that helps you sell anything.
- [Kirki](https://wordpress.org/plugins/kirki/):: The ultimate toolkit for theme developers using the WordPress Customizer
The MrBara theme **recommends** following plugins:
- [Revolution Slider](http://revolution.themepunch.com/): is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for beginners and pro’s alike!
- [Contact Form 7](https://wordpress.org/plugins/contact-form-7/): plugin for creating contact forms. It is free and available on WordPress.org
- DF Testimonial: this plugin is used to manage testimonials.
- DF Team: this plugin is used to manage teams.
- DF Portfolio: this plugin is used to manage portfolios.
- Soo Product Attribute Swatches: this plugin is an extension of WooCommerce to make variation products more beauty and friendly with users.
- Soo Product Filter: this plugin is an extension of WooCommerce for filtering product.
- [YITH WooCommerce Wishlist](https://wordpress.org/plugins/yith-woocommerce-wishlist/): plugin that is responsible for adding all Wishlist features to website. This one need Woocommerce to work.
- [YITH WooCommerce Zoom Magnifier](https://wordpress.org/plugins/yith-woocommerce-zoom-magnifier/): allows you add zoom effect to product images and a customizable image slider.. This one need Woocommerce to work.
- [ MailChimp for WordPress](https://wordpress.org/plugins/mailchimp-for-wp/): helps you add more subscribers to your MailChimp lists using various methods.
MrBara is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme.
To install these plugins:
- Click **Begin installing plugins** the top of the page
- Check boxes to select all the plugins you want to install and click on **Install** from the dropdown box and then click the button to **Apply**.
- After you have installed all the plugins, return to the plugin installer.
- Select the plugins you installed, and apply the bulk action to activate.
Activate & Save Permalinks
--------------------------
To prevent any 404 errors on custom post type pages, after installing and activating plugins for this theme, you need to activate & save permalinks.
- Go to **Settings> Permalink** settings
- Select the format you would like to use.
- Click the **save** button.
Define Your Image Sizes
-----------------------
By default the theme will crop the product image by the default size od Woocommerce, so you need to change the size of product images for catalog to like our demo.
1. Woocommerce Settings:
- Go to `Woocommerce > Settings > Products > Display`, under the Product Images section, you will find Catalog Images, Single Product Images, and Product Thumbnails.
- Catalog Image is for your images on the shop page and for shortcodes. Change the size to 480x645
- Single Product Image is for your images on the single product page. Change the size to 480x635,
- Product Thumbnail is for your smaller product thumbnails for widgets and product thumbnails on the single product page. Change the size to 105
------------------------------
Import the demo content
===================
One click import demo content
-----------------------------
The easiest way to import our demo content is to use our Demo Content Importer. Our importer will give you all pages and posts, sample sliders, widgets, Theme Options, and more with one click. To import our demo content, please see the steps below.
**Step 1 - Install Demo Importer plugin**
- Download [Soo Demo Importer](http://drfuri.com/plugins/soo-demo-importer.zip) plugin.
- Install a Plugin using Upload Method
- Go to Plugins > Add New.
- Click to Upload Plugin.
- Click to Choose File, browse soo-demo-importer.zip in plugins folder of package theme and upload it.
- Click to Install Now.
- Click on Activate the plugin.
- Install a Plugin using FTP Manager
- You can use a FTP client like FileZilla.
- Unzip the soo-demo-importer.zip file, you'll get a folder soo-demo-importer.
- Upload that folder to wp-content/plugins folder on your host.
- Go to Appearance > Plugins and activate the soo-demo-importer plugin.
**Step 2 - Import demo content**
- Go to Appearance>Theme option data.
- Choose the demo and data you want to import.
- Click Install.
**Step 3 - The final step**
The import function of WordPress doesn’t support to import setting of widget Custom Menu and there are some things you need to change. To do them, please see the steps below.
- **Home Cosmetic 3, Home Tech, Home Tech 2, Home Tech 3**
You need to edit this homes and select WP Custom Menu is Product Categories.
- **Custom Menu**
You need to do this setup if your demo has Footer Widgets.
For Footer Layout 1 or Footer Layout 2:
- Go to Appearance > Widgets.
- Go to Footer 2 > select Custom Menu is Services Footer > Click Save.
- Go to Footer 3 > select Custom Menu is About Footer > Click Save.
- **MailChimp Form**
- Go to `MailChimp for WP`>`Forms`:
- Click **Save Changes**
**Contact Form 7:**
- Go to `Contact`>`Contact forms`>`Edit Contact form`>`Mail`:
- Contact Form 7 : There are several things you need to change here such as the email addresses...(as red-made in the screenshot):
Manual Import demo content
----------------------------
Step 1 - Where To Find Demo Files
------------------------
Go to the download package >Demo Data folder you will see homepage folders, each of them containing an XML file, the slider folder, a customizer.dat file and a widgets-data.wie file.
Read our Files Included In The Package to know file structure of homepages.
Step 2 - How to Import XML Files
-----------------------
- Go to `Tools > Import`
- Select WordPress from the list and install the WordPress Importer Plugin.
- If you haven't installed the **WordPress import plugin**, a popup window will appears and ask you to install it. Just click **Install Now**. When the installation progress is completed, click **Activate Plugin & Run Importer**. If you have installed this plugin, skip to next step.
- Click **Browse** and select `demo-content.xml` file from the download package
- Click **Upload file and import**
- When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox **Download and import file attachments**.
After completing all above steps, go to `Posts`, `Pages`, `Products` to see imported data.
Step 3 - Import Widgets Data
----------------------------
- Install and activate the [Widgets Importer/Exporter](https://wordpress.org/plugins/widget-importer-exporter/) plugin.
- Go to Tools > Widget Importer & Exporter, click Choose file button and select widgets-data.wie file from the download package.
- Click to Import widgets.
Step 4 - Import Revolution Sliders
----------------------------------
- Go to Revolution Slider.
- Click Import Slider button on the bottom right.
- Click Choose file and select a slider in Slider folder from the download package.
- Click Import Slider button to start importing. It usaually takes seconds to finish.
Step 5 - How to Import Customize File
----------------------------------
- Install and activate the [Customizer Export/Import](https://wordpress.org/plugins/customizer-export-import/) plugin.
- Go to Appearance > Customize > Export/Import.
- Click Choose File and select customizer.dat file from your homepage folder.
- Click the Download and import image files and Import button.
Step 6 - Setup homepage and blog page
-------------------------------------
After install demo content, you'll see a page `Front Page`. This page will be used as the homepage of the website. To set it as homepage, please go to `Settings \ Reading`, under **Front page displays**, please chose **A static page (select below)** and select **Front Page** for **Front page** and **Blog** page for **Posts page**.
Step 7 - Setup Menu
--------------
Although the theme is working now and it shows menu, but because we haven't created a menu for primary location, the theme will display all pages by default.
When you import the demo data, WordPress automatically create menus for you. These menus are the same as our demo.
**Primary Menu**
- Go to `Appearance > Menus`
- Select **Primary Menu** and click **Select** button to edit it.
- Scroll to bottom of page and check **Primary Menu** for **_Theme location_**
- Click **Save Menu**
**Seconday Menu**
- Go to `Appearance > Menus`
- Select **Seconday Menu** and click **Select** button to edit it.
- Scroll to bottom of page and check **Seconday Menu** for **_Theme location_**
- Click **Save Menu**
**Footer Menu**
- Go to `Appearance > Menus`
- Select **Footer Menu** and click **Select** button to edit it.
- Scroll to bottom of page and check **Footer Menu** for **Theme location**
- Click **Save Menu**
**Mobile Menu**
- Go to `Appearance > Menus`
- Select **Mobile Menu** and click **Select** button to edit it.
- Scroll to bottom of page and check **Mobile Menu** for **Theme location**
- Click **Save Menu**
Step 8 - The final step
-----------------------
The import function of WordPress doesn’t support to import setting of widget Custom Menu and there are some things you need to change. To do them, please see the steps below.
**Home Cosmetic 3, Home Tech, Home Tech 2, Home Tech 3**
You need to edit this homes and select WP Custom Menu is Product Categories.
**Custom Menu**
You need to do this setup if your demo has Footer Widgets.
For Footer Layout 1 or Footer Layout 2:
- Go to Appearance > Widgets.
- Go to Footer 2 > select Custom Menu is Services Footer > Click Save.
- Go to Footer 3 > select Custom Menu is About Footer > Click Save.
**MailChimp Form**
- Go to `MailChimp for WP`>`Forms`:
- Click **Save Changes**
**Contact Form 7:**
- Go to `Contact`>`Contact forms`>`Edit Contact form`>`Mail`:
- Contact Form 7 : There are several things you need to change here such as the email addresses...(as red-made in the screenshot):
Create New Menu
===============
Following these steps to create a menu:
- Go to `Appearance > Menus`
- Click the **create a new menu** link to create new menu.
- Select items from the left meta boxes and click **Add to Menu**
- On the right, feel free to drag and drop menu items to organize them
- When you're done moving menu items, check **Primary Menu** for **Theme locations** at the bottom of the page
- Click **Save Menu**
Setup Mega Menu
==============================
Config Mega Menu
----------------
The MrBara theme adds some options to the menu item. They allow you to config mega menu. Click the mega menu text in every menu item to show options. If you add new menu item and the mega menu text does not show, you need to click to save menu button and after that try again.
**1. Settings Mega Menu item**
**2. Mega Menu Content**
- **(1):** Mega Menu tab
- **(2):** Turn on or off the mega menu item. Only top level items can enable the Mega Menu
- **(3):** Mega Menu Style 2. See example below to know style 2 of mega menu.
- **(4):** Set the width of mega menu. It is optional. The default value is 100%. It affects on the top level items only. It usually used to set the width of vertical mega menu.
- **(5):** The columns for the submenu .
- **(6):** Increase or decrease the number of the columns
**3. Mega Menu Background**
- **(1):** Background tab
- **(2):** Options of background such as background color, background image, background repeat...
**4. Mega Menu Icon**
- **(1):** Icon tab.
- **(2):** this is icon selected. Click here if you want to remove icon selected.
- **(3):** Search icon here.
- **(4):** Choose a icon here by click to icon you want.
**5. Menu Content**
- **(1):** Menu Content tab. Only second level items can have enter the content
- **(2):** The text area allow you to put any custom content for menu item, like HTML or shortcodes
**6. Menu General**
- **(1):** Menu General tab. Only second level items can have enter the content
- **(2):** Uppercase the submenus title of this menu.
- **(3):** Hide the title of this menu.
- **(4):** Display the HOT, NEW, TRENDING badges on menu items.
Menu Level
----------
Example
-------
Here is the instruction you can follow if you desire you set up a mega menu for your site.
**1. Default Mega Menu Style**
We take Shop menu as an example. You can do similarly with other menus. Imagine that we have Shop and inside of it, we need to have three sub-menu.
- Go to Appreance->Menus
- Choose Primary Menu and click to select.
- Go to Shop(level 1) and choose Settings.
- Click to Mega Menu tab and check to Mega Menu option
- Increase or decrease to 4 columns
- Click to Background tab and upload background image.
After completing the above steps, you would see the result as shown in the screenshot below.
**2. Mega Menu Style 2**
We take Categories menu as an example. You can do similarly with other menus. Imagine that we have Categories and inside of it, we need to have four sub-menu.
- Go to Appreance->Menus
- Choose Primary Menu and click to select.
- Go to Categories(level 1) and choose Settings.
- Click to Mega Menu tab, check to Mega Menu option and Mega Menu Style 2
- Increase or decrease to 5 columns
- Go to submenus(level 2) such as Clothings, Shoes, Bags, Hats, Accessories and choose Settings.
- Click to Menu Content tab, and enter the your image. You need to add class as 'image-bottom' to show image like our demo.
- After completing the above steps, you would see the result as shown in the screenshot below.
Theme Options
=============
MrBara theme comes with unique, creative and easy-to-use Customize page. You can change all theme options in Appearance->Customize with live-previewing those changes before saving them.
All options have full description so you can know what you are doing. Just click and save!
General Settings
-------------------
**1. Custom Site Identity**
This option will help you edit your title and tagline, and set site icon (The Site Icon is used as a browser and app icon for your site).
Simply go to ‘Appearance->Customize->General->Site Identity’ and change your title, tagline and upload your site icon.
**2. Newsletter Popup**
Newsletter Popup gives you the ability to have email subscription modal popup. Each time new user visit your site user will see the modal popup fo email subscription.
Simply go to ‘Appearance->Customize->General->NewsLetter’ and change your NewsLetter:
- **Newsletter Layout 1**
- **Newsletter Layout 2**
**3. 404 Page**
The theme includes option allow you change the background of 404 page so you can easily alter the 404 error page background.
Simply log into WordPress and go to ‘Appearance->Customize->General->404 Page’ and change your background image.
Styling
-------
**1. How To Enable Back To Top Button?**
Simply go to ‘Appearance->Customize->Styling->General’ and enable Back To Top option.
**2. How To Enable Preloader?**
Simply go to ‘Appearance->Customize->Styling->General’ and enable Preloader option.
**3. How to change your color scheme?**
Simply go to ‘Appearance->Customize->Styling->Color Scheme’ and select Base Color Scheme or custom your Color Scheme.
**4. How To Add Your Custom CSS?**
Simply go to ‘Appearance->Customize->Styling->Custom CSS’, click Open Editor button and paste your custom CSS.
Layouts
---------------
**1. Site Layouts**
There are 3 different layouts: sidebar-content, content-sidebar and full-content. Simply go to ‘Appearance->Customize->Layout->Site Layout’ and change your layout.
The theme included options to alter your layout for whole site, page, portfolio and shop page.
**Default Layout**: Select this option to change layout for whole site, such as: blog, archive, category, single post…
**Page Layout**: Select this option to change layout for pages. You can custom layout for every pages, simply edit pages and check to cutom layout option and select your layout
**Shop Layout**: Select this option to change layout for shop page.
**Portfolio Layout**: Select this option to change layout for portfolio archive, catefory and tag page.
**2. Boxed Layouts**
The full-width layout is the default layout for the theme and it displays your content centered of course but with a white background through-out. The boxed layout has a padding around the main wrapper as well as a background applied to it so that you can apply a custom background to your body and all your content will be centered with the background flowing around it.
Simply go to ‘Appearance->Customize->Layout->Boxed Layout’ and Enable Boxed Layout option and change your settings.
Header
-------------
**1. Header Styles**
The theme includes 12 different Header styles and it easy to switch your header style.
Simply go to ‘Appearance -> Customize -> Header->Header Layout’ to select your header style.
**2. How to Change Your Logo?**
The theme includes options to upload and custom your logo such as: logo width, logo height, logo margin. Simply go to ‘Appearance -> Customize -> Header->Logo’ to upload your logo.
Logo Transparent just is used for homepage that has header is transparent.
Page Header
--------------
The theme includes options to setting page header for whole site, pages, shop and portfolio.
Simply go to ‘Appearance->Customize->Page Header->' and choose page header section and choose your settings.
Blog
--------------
The theme includes 3 layout for blog page: grid, masonry, list.
Simply go to ‘Appearance->Customize->Blog->' and choose your settings.
Portfolio
--------------
**1. Portfolio Settings**
The theme includes 2 layout for portfolio archive, category and tag page: grid, masonry.
Simply go to ‘Appearance->Customize->Portfolio->' and choose your settings.
**2. Portfolio Detail**
The theme includes 2 types for portfolio detail: image, gallery.
Simply edit portfolio, go to portfolio detail and choose your portfolio type.
Woocommerce
--------------
**1. Video Tutotials**
- [01 – What is WooCommerce?](https://www.youtube.com/watch?v=MN38rw-y9pI&index=1&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [02 – How To Install WooCommerce WordPress Plugin?](https://www.youtube.com/watch?v=n4SiHzVpLXI&index=2&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [03 - How To Import WooCommerce Dummy Data?)](https://www.youtube.com/watch?v=n0Gitsijw5I&index=3&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [04 - How To Get Better Product URL With Custom Permalink?](https://www.youtube.com/watch?v=-YJ190Kne6A&index=4&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [05 - How To Use Shop Page For Homepage?](https://www.youtube.com/watch?v=Xpq2a8YS89w&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq&index=5)
- [06 - How To Display Product Categories On Shop Page?)](https://www.youtube.com/watch?v=Zba_BHxXys0&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq&index=6)
- [07 - How To Change Shop Currency?)](https://www.youtube.com/watch?v=hNFY-i5rccg&index=7&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [08 - How To Add A Simple Product?](https://www.youtube.com/watch?v=Ul4mYbyxDQo&index=8&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [09 - How To Sell A Service Product? ](https://www.youtube.com/watch?v=5KOyS20iLmg&index=9&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [10 - How To Sell A Digital Product?](https://www.youtube.com/watch?v=-bhKzPA5z1c&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq&index=10)
- [11 - How To Sell An Affiliate Product?](https://www.youtube.com/watch?v=7Z0nPQcSdmU&index=11&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [12 - How To Use Product Attributes?](https://www.youtube.com/watch?v=f2qYs7C4V5g&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq&index=12)
- [13 - How To Add A Variable Product With Variations?](https://www.youtube.com/watch?v=euos76MEa-o&index=13&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [14 - How To Change Product Images Size?](https://www.youtube.com/watch?v=YVLb3eG0JdI&index=14&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [15 - What Are Up Sells and Cross Sells?](https://www.youtube.com/watch?v=yJA_WNwThi4&index=15&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
- [16 - How To Create A Coupon Code?](https://www.youtube.com/watch?v=H2c7ajINGMU&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq&index=16)
- [17 - How To Add Terms & Conditions At Checkout Page? ](https://www.youtube.com/watch?v=8LD4saVKJGE&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq&index=17)
- [18 - How To Enable Registration On "My Account" Page? ](https://www.youtube.com/watch?v=9Y5J0opsuGw&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq&index=18)
- [19 - What is System Status page?](https://www.youtube.com/watch?v=m2WE28NcBk8&index=19&list=PLSXSDRo7EE-eQfsRcntKNxiwkgkotuJYq)
**2. Catelog**
This section includes options to setting your shop such as: shop layout, shop skin, shop view...
Simply go to ‘Appearance->Customize->Woocommerce->Catelog' and choose your settings.
**3. Product Grid Layout**
The theme includes 10 product grid layout. Simply go to ‘Appearance->Customize->Woocommerce->Product Grid' and choose your layout.
**4. Single Product Layout**
The theme includes 12 single product layout. Simply go to ‘Appearance->Customize->Woocommerce->Single Product ' and choose your layout.
Footer
-------------
The theme includes 8 different Footer styles and it easy to switch your footer style. Simply go to ‘Appearance -> Customize -> Footer->Footer Layout’ to select your footer style.
Visual Composer Basics
======================
It has very simple and intuitive interface, but before getting started, you may find it useful to get accustomed with its documentation:
[Visual Composer Documentation](https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress?title=Visual_Composer)
In MrBara theme, we also create some new elements and add some new parameters to exists elements of Visual Composer. It will help you a lot to build your HomePage easier. Following we will go through some popular elements of Visual Composer and all of new elements that MrBara theme brings to you.
Section Title
-------------
This element is used to create the title area for each section. It is used in almost section in our demo. It contains following parameters:
- Style: select style for section title
- Subtitle: the subtitle content
- Title: the title content
- Light Skin: choose this option if you want to show dark text.
- Text Align: select text alignment for this section title.
- Description: enter a short description for section.
- Extra class name: enter extra class names if you want to apply your own style rule.
- Title Options:
- Font Size: the font size of the title. Enter font size in pixels (Example: 16px)
- Line Height: the line height of the title
- Letter Spacing: the letter spacing of the title. Enter letter spacing in pixels (Example: 1px)
- Font Family: there are 4 variable fonts: Popins, Prata, Montserrat, Oswald
- Font Style: there are 4 variable font styles: Normal, Light, Semi Bold, Bold
MrBara Heading
-------------
This element is used to create the title for each section. It is custom heading of the theme. It contains following parameters:
- Style: select style for section title
- Text: the heading text
- Font Size: the font size of the text. Enter font size in pixels (Example: 16px)
- Line Height: the line height of the text
- Letter Spacing: the letter spacing of the text. Enter letter spacing in pixels (Example: 1px)
- Font Family: there are 4 variable fonts: Popins, Prata, Montserrat, Oswald
- Font Style: there are 4 variable font styles: Normal, Light, Semi Bold, Bold
- Color: you can pick any color you want and it will be applied to title text color.
- Text Align: select text alignment for this section title.
- Extra class name: enter extra class names if you want to apply your own style rule.
Pricing Table
-------------
This element is used to create a single pricing table. So if you want to display multiple tables as our demo, you can create a row and set the layout of that row as 3, 4 or 5 columns, whatever you want, then insert a single pricing table into each column. A single table contains following parameters:
- Featured: select this option if you want to highlight this table
- Title: enter title of table.
- Price: enter the price of your plan/service.
- Time Duration: enter the price unit, something like: "/Month", "Per Month", ...
- Description: enter the description for your plan.
- Content: enter the content for your plan. It usually entered in list format
- Button: link and text of purchase button.
Icon Box 1
----------
This element is used to present a single service or small paragraph with an icon. It contains following options:
- Style: select style for icon box
- Icon: select icon for this box.
- Icon Opacity: Check this to show icon has opacity
- Title: enter the box's title.
- Link: enter an URL here if you want the title of this box clickable.
- Extra class name: enter extra class names if you want to apply your own style rule.
Icon Box 2
----------
This element is used to present a single service or small paragraph with an icon. It contains following options:
- Icon: select icon for this box.
- Icon Color: you can pick any color you want and it will be applied to title text color.
- Title: enter the box's title.
- Content: enter content of this box.
- Extra class name: enter extra class names if you want to apply your own style rule.
Testimonials
------------
This element is used to display testimonials. It contains following parameters:
- Number: enter the number of testimonial to be get.
- Category: select a category or all categories to get posts from.
- Text Align: select text alignment for this element.
- Show stars: show stars of testimonials
- Show avatar: show image of testimonials
- Show navigation: choose this option if you want to show navigation buttons.
- Slider autoplay: Duration of animation between slides (in ms). Enter the value is 0 or empty if you want the slider is not autoplay
- Navigation style: select style for navigation. There are 2 variable style: Rounded, Plain.
- Extra class name: enter extra class names if you want to apply your own style rule.
Mrbara Posts
------------
This element is used to display posts as a list, grid. It contains following parameters:
- Style: select style for posts
- Total posts: enter the number of post to be get.
- Category: select a category or all categories to get posts from.
- Extra class name: enter extra class names if you want to apply your own style rule.
Mrbara Products
---------------
This element is used to display products as a list, grid. It contains following parameters:
- Layout: select layout for products
- Show Categories: show categories to filter products on top this element.
- Products: select which product will be display: recent, featured, best selling, top rated or on sale.
- Categories: select a category or categories to get products.
- Columns: select columns will be used to display Product Per View.
- Product Per View: enter the number of products to be showed on each slide.
- View More Link: link and text of view more button.
- Extra class name: enter extra class names if you want to apply your own style rule.
Products Carousel
-----------------
This element is used to display products as a carousel. It contains following parameters:
- Products: select which product will be display: recent, featured, best selling, top rated or on sale.
- Categories: select a category or categories to get products.
- Product Per View: enter the number of products to be showed on each slide.
- Columns: select columns will be used to display Product Per View.
- View More Link: link and text of view more button.
- Slider autoplay: Duration of animation between slides (in ms). Enter the value is 0 or empty if you want the slider is not autoplay
- Paginated Type: there are 2 variable paginated type: navigation and pagination. You can choose 'none' option to don't show paginated.
- Extra class name: enter extra class names if you want to apply your own style rule.
MrBara Google Maps
------------------
This element is used to display the map for the site.
- Api Key: Go to [Google Maps APIs](https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key) to get your key
- Marker: Select an image from media library
- Address: enter the address here.
- Width(px): set up the width of the map.
- Height(px): set up the height of the map.
- Zoom: fill this field to set up the zoom ratio for the map
- Content: enter the content of the map.
- Extra class name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Page Templates
==============
MrBara provided two page templates: HomePage, HomePage Transparent, Home Boxed Content, Home Cosmetic, Home Split, Home Width 1620px, Full Width, Coming Soon.
HomePage
--------
This template is used for pages as homepage. This template is full width and has no banner, no custom layout, no padding between the content and the header, the content and the footer.
HomePage Transparent
--------------------
This template is used such as homepage template. And this template has not background, it is used better for homepage and site layout is boxed.
Home Boxed Content
------------------
This template is used such as homepage template. And this template has padding is 50px.
Home Cosmetic
-------------
This template is used such as homepage template. And this template has background color is light blue and the background of header, footer are transparent.
Home Split
----------
This template is used such as homepage template. And this template has split pages with two vertical scrolling panels. Go to [Home Split](http://demo.drfuri.com/mrbara/home-split/?header_style=6&header_text_color=dark&footer_layout=5/) to understand this template.
Home Width 1620px
-----------------
This template is used such as homepage template. And this template has max width is 1620px.
Full Width
----------
This template is used for pages as full width. This template is full width and has no banner, no custom layout, no padding between the content and the header, the content and the footer.
Coming Soon
-----------
This template is used for coming soon page. This template has options to settings coming soon page such as: logo, location, phone, social.
Post Format
===========
[Post Formats](http://codex.wordpress.org/Post_Formats) is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.
In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.
MrBara theme supports the following post formats:
- `gallery` - A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
- `link` - A link to another site.
- `image` - A single image, which will be shown above post title.
- `quote` - A quotation.
- `video` - A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
- `audio` - An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player provided by Wordpress as default player.
Using post format in MrBara lets you differentiate post from each other and make the blog page / single page looks more beautiful.
When you edit a post, select a format you want to apply to that post on the **Format** meta box on the right:
When you choose a format, a corresponding meta box will appear **below** the content editor, here's the list of them:
All you need to do is just enter **all** information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc.
------------------------------
Translation
=========
###Tell WordPress which language file to use.
If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation.
You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation.
ust add the line below to your wp-config.php or change it if it already exists:
`define ('WPLANG', 'fr_FR');`
###First Method: Using Codestyling Plugin
The easiest way to translate your theme locally is by using the [Codestyling Localization](https://wordpress.org/plugins/codestyling-localization/) plugin. After you have installed and activated the plugin, simply go to `Tools > Localization` (shown in your language) and translate the theme from your WordPress backend following the [plugin instructions](http://www.code-styling.de/english/development/wordpress-plugin-codestyling-localization-en)
###Second Mothod: Using Poedit
Poedit is a common program which you can use to translate the theme. It’s available for free on [poedit.net](http://www.poedit.net/).
After you have installed Poedit, you can open it and select `File > New Catalog from POT file`. Then select the .pot file from the theme you wish to translate which you can find in the `/lang/` folder of theme.
Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example `es_ES.po`). Normally Poedit automatically creates the .mo file and saves it, too.
The last step you have to do is to upload your created language files to the language folder of your theme using FTP.
------------------------------
Child Theme
===========
MrBara is fully child theme compatible. We have attached a basic child theme to the download package which contains the minimum of required files. If you are planing any code customizations we highly recommend to do this inside the child theme! Learn more about child themes [here](http://codex.wordpresss.org/Child_Themes)
------------------------------
FAQs
====
1. **How to change the default logo to other?**
Go to `Appearance > Customize > Header`, the option for change logo is there.
2. **How to change the color of theme?**
Go to `Appearance > Customize > Style`. There are options to pick color form pre-defined colors or pick your favorite color.
3. **Does MrBara theme support child theme?**
Yes, it does. Please see details in above section.
-------------------------
]]>