Labomba Documentation

- Welcome To Labomba
- Theme Installation
- Importing Demo Content
- Updating Labomba
- Translating WordPress Theme
- Layout Guide
- Page Creation
- Post Creation
- Woocommerce
- Size Guide
- Menus (Navigation)
- Theme Option
- Visual Composer
- Revolution Slider
- Sidebar And Widget
- Images Setting
- Retina Display
- Source And Credit
- ChangeLog
- Final Words

## Welcome To Labomba

#### LABOMBA Documentation

Thank you so much for purchasing LABOMBA - The Most Stylish and Fashionable Wordpress Theme ever!

This document covers the installation and use of this theme and reveals answers to common problems and issues - I encourage you to read this document if you are experiencing any difficulties.

Created: 30/05/2014
By: Dahz
Documentation Version: 1.8

#### What's New in Documentation 1.8

*added update method. please refer to this section before you update the theme to 1.8

## Installing Labomba Theme

When you downloaded the package from themeforest, you will get a single zip file. Please extract that file and keep it somewhere safe. In this section, you will learn how to install LABOMBA as your theme. To install LABOMBA to your website, you can do this one of two ways:

Wordpress

#### Via Wordpress – Log into your Wordpress site.

When you get to your dashboard, look into the left sidebar to find the Appearance-panel. When you hover it there will be a dropdown menu that contains several options. Please click the first option [Themes]

Image

when you click [Themes] you will see two tabs in your main screen (1) Manage themes and (2) Install themes. For now click the install themes tabs.

[Install Themes] , click on [Upload] , and here you will be asked to upload a .zip file.

Image

remember where you keep the extracted files earlier? Please browse to that folder and find labomba.zip files in LABOMBA folder. After you choose it click install now and wait until it says “Theme installed successfully.”

Image

Under the words “Theme installed successfully,” you will see an option to immediately click on [Activate] to activate LABOMBA . You may activate it from this screen, or you can navigate back to [Appearance], click on [Themes] where you will see all the installed themes including LABOMBA. Don’t forget to activate it okay!

Image

Image

Image

- Congrats! LABOMBA is up and running

Note - in the top yellow box, you are being instructed to install our recommended plugin, you can click the [Begin installing plugins] link to be able utilizing LABOMBA perfectly.

FTP

#### Via FTP

this is another way to install LABOMBA so SKIP THIS STEP if you have already successfully installed your LABOMBA theme via Wordpress.

Now lets follow this steps! First, BACKUP YOUR FILES! This is always the safest thing to do.

Download and install the Filezilla Client - http://filezilla-project.org/ in your pc

Now OPEN FILEZILLA and Fill in your FTP Credentials, like in the image shown below:

Image

Image

“CLICK QUICKCONNECT” and Filezilla will load your website. Here is how it will look:

Image

Now use the right side panel to navigate to your themes folder. In the example above, the theme folder is public_html/wp-content/themes/, however, not all web hosting have public_html, it may be something different in your server.

After your themes/ folder is open, use the left side panel to navigate to the place where you have extracted the package earlier. Now just drag & drop the labomba folder to your right panel

Image

Note – you may be asked if you want to overwrite files and/or folder. Tick the option to "Always use this action" and click on "Ok.” Then wait until all files are uploaded.

now go to admin panel and activate LABOMBA Theme in[ Appearance] -> [Themes]. Anddd its dooone! :)

Image

## Importing Demo Content

#### Import

Below is a step by step explanation on how to import our demo website content, please read carefully and if you face any problems that is not covered here, open a thread in our support forum or send us an email.

(with an assumption you havent installed the import plugin)

- 1. Log in to your site as an administrator.
- 2. Click 'Tools' in admin panel
- 3. Click 'import' and choose Wordpress
- 4. Click Install now
- 5. Click Activate Plugin & Run Importer

after this you might need to repeat step 1-3

- 6. upload the .xml data from "Labomba - Responsive Multipurpose Wordpress Theme" folder -> Demo Content XML -> labomba.xml
- 7. assign your import credentials to one of your user.
- 8. Check Download all attachments (insert all images to your site

note: this .xml data only contains layouts and pages of the demo site. to install plugins such as the revolution slider please see the instructions in 'recommended plugins' & 'revolution slider' section.

You will also need to assign menu for your navigation, to do this navigate to appearance -> menu -> manage location and choose primary menu as your primary menu. this is the demo menu setting

Image

(further instruction for creating menu can be found in "Menu (Navigation) section) and widgets for footer and/or sidebar (further Instruction listed in "Sidebar & Widget" section of this documentation.)

## Updating Labomba

Theme Update 1.8
things you need to prepare:
- Login into your Themeforest account and go to downloads (Dashboad > downloads)
- Download the theme into your computer
- Go to your Wordpress Admin Panel and navigate to plugins
- Please delete this plugins Dahz DF Shortcodes and WPBakery Visual Composer
- Choose one of two methods to update :
1. Update via Wordpress Admin Panel
Go to appearance -> themes. activate any other theme first.
delete your current version of Labomba
Install the latest version like the first time you install the theme. (add new -> upload)
2. Update Via FTP
Install an FTP program (Filezilla is free)
Retrieve your FTP login information from your hosting admin panel and login into your hosting via FTP
Unzip the item main file
Locate theme.zip (eg : Labomba.zip) and unzip it. make sure your unzipping software do not create extra directory with the same name nested into each other.
drag and drop theme main folder into your FTP program with the destination : "YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/"
FTP program will give a warning that there is an existing with the same directory name, choose replace all.
It will take varying from 5 to 30 minutes to replace all files. once you done login into your wordpress dashboard and go to masterkey settings. on the header (beside masterkey logo) the theme version will be changed to the latest version. this is the indication that your theme is updated. We recommend method one which only takes less than one minute.
after you update the theme go to appearance -> install plugins . install and activate the required plugins.
then go to theme options (labomba) and hit 'save all changes' button there (hit it once even when you dont change anything)
Done and Have fun!
NOTE: when you update the theme any changes you've made to css and php files will be gone, please reapply your changes after you update the theme.

## Translating WordPress Theme

along with the theme, we provide the default.po that you can find in the "lang" folder, you will need to manually add the translation using poedit (or any similar software) by yourself.

after you translate the default.po. save the .po and .mo files using the language's country code name. ( you can find the country code name below)

Complete lists of codes can be found at (country codes) and (language codes).

#### Instructions

1. Open your wp-config.php
2. Edit

       define['wplang', "] into define['wplang', "your translation file"]

   e.g

       define['wplang', "es_ES"]

3. Save

## Layout Guide

To Help You Customize Your homepage (or any page actually), you can see this picture to know each element of your page layout and where it can be customized.

Image

1. Welcome text

   this can be edited in Theme Options -> Header Section -> Welcome Message Text, you must enable the checkbox first and then fill the content.

2. Top menu

   this can be edited in Appearance -> Menus -> Manage Locations. then choose one of your menu as your Top Menu. (to learn how to create a menu please see the Menus (Navigation) section of this documentation)

   (New Feature) Sticky/Float Notes

   You can turn on this feature from theme options -> styling & layout -> top navigation then enable float menu.

(New Feature) Thumbnail on Search

to turn on/off thumbnails in top search you can go theme options -> components -> blog.
3. Logo

   this can be edited in Theme Options -> General Settings -> Custom Logo.

4. Navigation (Primary Menu)

   this can be edited in appearance -> menus -> manage locations. then choose one of your menu as your Primary Menu. (to learn how to create a menu please see the Menus (Navigation) section of this documentation)

5. Custom Header text

   this can be edited in Theme Options -> Header section -> Custom Header Text.

6. Slider

   you can create or/and add sliders from [revolution slider] in the left sidebar of your admin panel (read revolution slider section in this documentation).

7. Main content

   you can create the content using Visual Composer or classic editor from your page editor.

8. Footer

   you can customize your footer's widgets from appearance -> widget (to learn how to add widgets to your sidebar and footer please read sidebar and widget section)

9. Extra footer

   you can customize the extra footer from appearance -> widget (to learn how to add widgets to your sidebar and footer please read sidebar and widget section)
   if you want the same format of extra footer like in the image you can create a menu first in appearance -> menus and then use' custom menu' widget as your extra footer in appearance -> widget

10. Custom footer left and right

    you can change the custom footer from theme options -> styling & layout -> footer-> Enable Custom Footer (Left) / Enable Custom Footer (Right)

## Page Creation

Here you will learn how to create pages for your website.

Note: If you imported the Demo Content, you can directly choose from among the twenty one (21) Home Pages layout that were imported from the demo content. Now let’s suppose you want Home V20 as your home page. To set it, you would navigate to your WP-Admin panel, scroll down the left sidebar to “Settings” and click on “Reading Settings:” then Click on “A static page”, then click on the “Front Page” Box to open a drop-down list. In this example, we chose “Home V20” as our Home page.

Image

You can also set your blog page here by assigning a blog page in 'posts page'.
If you DID NOT import the Demo Content, you will need to manually create your Pages first. Here’s how:

Homepage

#### homepage

find [Pages] in the left sidebar of your admin panel and click on the second options [Add New] , so the screen will look like this

Image

Give a Name for your new page (here, im going with ‘Home v1’) Now scroll to the right sidebar and click on the Template drop-down arrow. From the drop-down, choose the “Homepage” template.

Image

Finally you can add any content you want using visual composer or clasic editor.

Now scroll up and click “Publish”.

Image

Blog

#### Blog

find [Pages] in the left sidebar of your admin panel and click on the second options [Add New] , so the screen will look like this

Image

Give a Name for your new page (here, im going with ‘BLOG’) Now scroll to the right sidebar and click on the Template drop-down arrow. From the drop-down, choose one of our blog template.

Image

Finally publish it! Your blog page will be created in your site

Image

Contact Us

#### Contact Us

So you need to provide a form so your user can contact you? Here’s how to set up a contact page in LaBomba.

First find [Pages] in the left sidebar of your admin panel and click on the second options [Add New].

Then give a name for your new page (here, im going with Contact Us’) You only need to Fill the page’s name and then change the template to contact page (choose v1 or v2) after that, publish it!

Image

To add your address and other credentials you can follow this steps

1. Go to theme options (Labomba) then find ‘contact page’. You can fill your address, telephone, fax and email in ‘contact information’ section After you fill it hit the save buttons
   Image

2. If you want to display a map to your location, just go to the ‘maps’ section under the contact ‘page menu’ and fill the longitude and latitude of your location. Don’t forget to save your progress!
   Image

3. You can also fill your socmed and RSS credentials now, go to ‘subscribe & connect’ then choose ‘connect’. And fill your credentials here. After that save again
   Image

4. If you follow all the steps above, your Contact us page will be added to your website! Yeaaah!
   Image

Lookbook

#### Lookbook

Now lets learn how to create a lookbook in LABOMBA, first of all please install woocommerce plugin, lookbook will not be installed if you don't have woocomerce

if you already have woocommerce installed; find [Pages] in the left sidebar of your admin panel and click on the second options[Add New], so the screen will look like this

Image

Give a Name for your new page (here, im going with ‘LABOMBA’) Now scroll to the right sidebar and click on the Template drop-down arrow. From the drop-down, choose the “LOOKBOOK” template then choose the lookbook category in the lower parts of the screen . hit publish it for now

Image

If you already have some lookbook post, you just have to assign the lookbook post to the same category. If you haven’t, lets create some

Go to [lookbook] section in the left sidebar then click [add new]

Its like how you usually make a blog post. So give it a title, assign the post to a category then set featured image [for a more simple use, just leave the content box empty. This way your featured image will be displayed in the lookbook] *note, if you want to add a “shop this item” button in the lookbook, you can fill the url box in the lower part of text editor

Image

Finally, publish it! [Note: Repeat the 3rd & 4th step as many as you like to complete your lookbook]

Image

YAY, you have your own lookbook!

Portfolio

#### Portfolio

Creating Portfolio page is similar with other pages. The difference only in template you will choose. Lets try it. Shall we?

go to [Pages] from the left sidebar of your admin panel then choose [Add New]. You will see this screen.

Image

Give a Name for your new page (here, im going with ‘Portfolio’) Now scroll to the right sidebar and click on the Template drop-down arrow. From the drop-down, choose portfolio.

Now scroll to the right sidebar and click on the Template drop-down arrow. From the drop-down, choose portfolio.

Image

You can also fill any other elements here. After that, hit publish. And your portfolio pages is ready :D

*To show your work in portfolio page you can create new posts from [portfolio] section in your admin panel (this will be reviewed later in post creation section of this documentation)

*If you want to manually define your portfolio image thumbnails please go to theme options -> Component -> Portfolio -> Portfolio Thumbnail Dimensions.

## Post Creation

Blog post

#### Blog post

Creating a post is similar with creating a page, but you create it from [post] tab in your admin panel. Let me show you how

find [Post] in the left sidebar of your admin panel and click on the second options[Add New], so the screen will look like this

Image

Now you need to give a title, assign to category(s), insert tags and set featured image

It is also the time for you to write your content, you can add any element from the classic editor or visual composer

Image

Click publish

And it will look like this in your site,

Image

Portfolio Post

#### Portfolio Post

After you create a portfolio page, you can submit your works to be shown in that page. In this section I will show you how.

first of all you will need to create galleries for your portfolio. This will work like a categories for posts. so Go to [portfolio] options in your left sidebar then choose the third options [Portfolio Galleries] then fill the name and description for your category.

Image

After you create the galleries, find [Portfolio] in the left sidebar of your admin panel and click on the second options[Add New], so the screen will look like this

Image

Give your new post a name, assign it to portfolio galleries, then set the featured image [the featured image is what you will see in your portfolio page]. You can also add description and/or other elements like video, Project URL, testimonial, project date, client name etc. fill it as you need it

Image

after you’ve filled all the elements and image, don’t forget to publish it! This how the single portfolio page will look like

Image

And this is how your portfolio page will look like:

Image

Product Post

#### Adding a product

Adding a single product is a straight forward process and similar with creating a standard WordPress post. In the [Products] menu click Add Product; you will be presented with a familiar interface, and should immediately see where to type the product title and full description.

Image

Next is the Product Data tab set. This is where the majority of the product data is input.

Image

- SKU – stock keep unit, used to track products. Must be unique, and should be named so it does not clash with post ID’s
- Price:
- egular Price – The item’s main price
- Sale Price – The item’s sale price
- Tax:
- Tax Status – The items’ tax status
- Tax Class – Which tax class the product belongs to. You can set up tax classes in WooCommerce > Settings > Tax

For more details, please follow the official docs

#### Product variations

Variable products are a great feature of WooCommerce for offering variations of a product with different prices, stock and more. They can be used for offering variations of a product e.g. a large t-shirt vs a small t-shirt. Each variation can have different properties and prices.

Set the product type: to add a variable product first selection the type ‘variable’ from the product type dropdown. The interface will change to reflect your selection.

Image

Define variation attributes: on the attributes tab add some attributes to your product. You can use global attributes or define some custom ones specific for your product.

Image

Make sure to assign all values of the attribute to the variable product which will become options and check the 'variation' checkbox on each attribute to tell WooCommerce its for your variations:

Image

Add variations: After saving your product you can now begin to add variations, or link all possible variations. To add a variation, click the ‘add variation’ button. A new blank row will appear ready for you to input the data.

1. Click on one of your variations. You should now see a link entitled Add additional images (if you upgraded and transferred existing images, you should see them too).
2. add the main image in the default way, by clicking the main variation thumbnail.
3. Once your main variation thumbnail has been set, click Add additional images
4. The WordPress Media Library will be displayed. Here you can upload new images, or select any from your existing library.
5. Once your images have been chosen, click Add to Variation
6. You will see your images attached to the relevant variation. Click Publish or Update.

Image

When you now view your product on the frontend, the images will change when a final variation is chosen by the user.

Re-Ordering Additional Images
You can use drag and drop to re-order the additional images. Simply click and hold on one of the additional images,
then drag it into it’s new position.
After you have re-ordered them, click Publish or Update.

Delete Additional Images
To delete an additional image, simply click it.
After you have deleted any additional images, click Publish or Update.

Image

Price fields must be set per product

For more details, please follow the official docs

## Woocommerce

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t even need to leave your web browser. To do an automatic install of WooCommerce log in to your WordPress admin panel and go to: [Plugins] > Add New.

In the search field type “WooCommerce” and click Search Plugins. Once you’ve found the plugin you can view details about it such as the the point release, rating and description. Most importantly of course, you can install it by simply clicking Install Now. After clicking that link you will be asked if you’re sure you want to install the plugin. Click “yes” and WordPress will automatically complete the installation.

After you’ve installed and activated the plugin, be sure to select ‘Install WooCommerce Pages‘ to get started.

Image

#### Settings

Inside this panel you’ll find all the core WooCommerce settings such as catalog settings, pages, payment gateways, shipping methods and tax rates accessible via the tabs at the top of the screen.

To configure your shop go to WooCommerce > Settings. Then browse through the tabs below to get more information on the WooCommerce Options.

For more details, please follow the official docs

#### Single Product Featured Image

we have 3 different animations in displaying single product image

you can choose one of them in woocommerce -> woothumb
then choose from the drop down menu

Image

#### Header Tab (The Look)

as you can see in our demo, you can use our Header Tab to display a content/element. in our demo we use this to display "THE LOOK".

Image

now, if you want to have this "THE LOOK" tab, you can follow this instructions. first, go to your single product page editor (the one where you want to display the tab), then scroll down until you see "LaBomba Custom Settings tab"
Image

In Header Tab, you can fill the box as the text header/title of your tab (we use The Look) then, in text content custom tab, please use this code

`[the_look id="2507"][border color="#dbdbdb" style="solid" size="1px" margin="-7px 0 28px 0"][the_look id="2474"][border color="#dbdbdb" style="solid" size="1px" margin="-7px 0 28px 0"][the_look id="2175"]`

code explanation:
the_look id = you can change this with the product id you want to display
border color = the color of separator between products, use color code from color picker
style = the style of border (solid, dotted, dashed)
size = size of border in px
margin = add padding to border (top, right, bottom, left) e.g "-7px 0 28px 0"

*please note, the description in the look, will call the text you inserted in the product's short description

after that, update your product and you will see this newly created tab.

## Size Guide

Creating a predefined size guide is as easy as creating new page/post. A size guide can be added to a product post later, so you don’t have to create size guide in every post. To create your first size guide, first, find [size] tab in the left sidebar of your admin panel, choose the second option [add new], now you’ll see a familiar view on your screen, yes creating size guide is similar with creating new post So, Give a name, then assign it to a category (you can create a new one too). For the size guide itself you can create it with the visual composer or even the classic editor,

Image

For classic editor you can start with this code

Code

Measurement in cm[table ver="2"][table_tr][table_td] [/table_td] [table_td]X Small[/table_td][table_td]Small[/table_td][table_td]Medium [/table_td][table_td]Large[/table_td][/table_tr][table_tr][table_td]Length[/table_td] [table_td]88[/table_td][table_td]90[/table_td][table_td]92[/table_td][table_td]94[/table_td][/table_tr][table_tr][table_td]Chest[/table_td] [table_td]46[/table_td][table_td]48[/table_td][table_td]50[/table_td][table_td]52[/table_td][/table_tr][table_tr][table_td]Waist[/table_td] [table_td]37[/table_td][table_td]40[/table_td][table_td]43[/table_td][table_td]46[/table_td][/table_tr][table_tr][table_td]Hip[/table_td] [table_td]44[/table_td][table_td]47[/table_td][table_td]50[/table_td][table_td]53[/table_td][/table_tr] [/table] <a href="http://localhost/bomb/wp-content/uploads/2013/09/wp-placeholder_new_pot1.jpg"> <img class="size-medium wp-image-1134 alignleft" alt="wp-placeholder_new_pot" src="http://localhost/bomb/wp-content/uploads/2013/09/wp-placeholder_new_pot1-225x300.jpg" width="225" height="300" /></a>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

After you’ve filled all the credentials, hit publish button.

Now you can go to your product post, and assign them into a specific size guide. Please see this screenshot

Image

After you update your product post, the size guide button will appear in that post page.

Image

When you click it

Image

## Menus

Menu locations

This theme has 4 menu locations

1. Main Menu This is main navigation thats located in the header
2. Top bar Menu This is located at the top bar. This menu does not support dropdown
3. Footer Menu This is located at the bottom above copyright text. This menu does not support dropdown"
4. My Account Menu This menu is visible for logged in users at the left of mini cart. Menu is also located at the my account page template.

#### LABOMBA MENU

1. Create a menu
In order to build a labomba-menu, you will first need to create a new menu. Go to the left side of the WP-Admin panel, find “Appearance,” then “Menus”.

Image

first, click the 'create a new menu' hyperlink. then enter your menu name, and finally hit the blue 'create menu' button

2. Enable CSS Classes & Description
Now scroll up and find the “Screen Options” at the top right of the Menu, and click on the drop-down arrow: Now the screen looks like this:

Image

No matter what other items are checked, to create a labomba-menu, you MUST click/check the CSS CLASSES and Description box.
now click "save menu" and close the Screen Options view.

3. Insert the pages
Next, choose the Pages that will show on your labomba-menu. To do this, scroll to the bottom left of your Menus page and find “Pages”. Click on the Pages you want to show.
**Note - Sometimes only the “Most Recent” pages show. Click “View All” to show all your pages. Here is a screenshot of the pages we added:

Image

dont forget to set is as your primary menu and hit save button.
and this how it shows in the front end
Image

4. Create the LABOMBA MENU
To understand Labomba-Menu, please see this picture about the hieararchy system in our menu.

Image

now lets learn how to create that.

TIER 1.
to use your Menu as ar Tier 1 in Labomba-menu, you need to rename your menu's CSS classes to
labomba-menu
example

Image

now you can see that the tier 1 has become a labomba-menu (eventough the Tier 2 is still in a mess)

Image

to understand the management of Tier 2 you can see this size distribution chart:

Image 6 column

Image 5 column

Image 4 column

the size of the sub menu column is managed by a code, you just need to add this code to CSS classes

if you want a 6 column space in Labomba-menu, you can use these codes.

labomba-menu-1col
labomba-menu-2col
labomba-menu-3col
labomba-menu-4col
labomba-menu-5col
labomba-menu-6col
labomba-menu-last (add this to the last sub-menu)
labomba-image-menu (add this to the description box if you want to use image in your sub-menu column)

if you want a 5 column space in Labomba-menu, you can use these codes.

labomba-menu-51col
labomba-menu-52col
labomba-menu-53col
labomba-menu-54col
labomba-menu-55col
labomba-menu-last (add this to the last sub-menu)
labomba-image-menu (add this to the description box if you want to use image in your sub-menu column)

if you want a e column space in Labomba-menu, you can use these codes.

labomba-menu-41col
labomba-menu-42col
labomba-menu-43col
labomba-menu-44col
labomba-menu-last (add this to the last sub-menu)
labomba-image-menu (add this to the description box if you want to use image in your sub-menu column)

lets say you want to have 6 column, this is how you manage your code

Image 6 column

so lets try to fix our menu, in this picture below, im going to distribute the labomba-menu to a 3 column menu with three different col size of 1col, 2col and 3col. this is how i set it up

Image

and this is how its look like in my site

Note: you need to add 'labomba-menu-last' after the col size code

Image

The sub menu now have 3 different size of column as I wanted.

now you might want to add image in your labomba-menu, to do that you need to use 'labomba-image-menu' after the col size. and paste your image url in the description box. let's try it

Image

in the image above, I created another sub menu to accomodate image, and change the size of the Blog Large Menu to 1col.

this is how it looks in the front end

Image

note: the size of image depends on the size of the image, but if its a large image it will be resized to fit the column.

lets try to use 2col space for an Image, and i will use a smaller image.

in the back-end i set it to

Image

so in the front-end it will look like this
Image

adding third tier of labomba-menu requires no tricks or codes, you can just add the pages to your menu setting and put it as a child menu of your sub menu.

in the back-end i set it to

Image

so in the front-end it will look like this

Image

that's it! You may continue to experiment with your Labomba-Menu, including adding images to it, and so forth

## Theme Option

Theme option can be accessed from your wp-admin panel.

Image

Theme option page has various options like:

General Settings
- General Settings

  The general settings are for managing global settings and page templates.

  1. Custom logo

     In general settings you can upload your logo, You can add it by specifying the URL of the image or uploading it from your local computer by pressing Choose File

  2. custom favicon

     You can also upload or specify your favicon which is the small icon in your browser's address bar. Simply specify the url of the image or upload it from your local computer.

  3. RSS URL

     enter your RSS URL so your user can get your feed

  4. custom CSS

     Quickly add some CSS to your theme by adding it here

  5. Post/Page Comments

     Select where your user can post comment on your wevsite

  6. Pagination Style

     select which pagination style you'd like to use

Styling & Layout
- styling & layout

this is where you choose the styling and layout of your website. you can read the explaination there when customizing your website.

header
- header

you can choose from 4 header style

Featured Slider
- featured slider

enable/disable featured slider in your homepage. you can also set the nature of your slide here.

Woocommerce
- woocommerce

  choose the layout of your shop and product page, there are also more customization listed in this section. you can read the explanation there when customizing your website.
  there are also an option to customize what your user see when they access 'My Account' link.

  1. heading login
  2. subheading login
  3. content login
  4. button login
  5. heading register
  6. subheading register
  7. content register
  8. button register
Components
- components
  1. blog

     this is where you customize the layout and appearance of your blog template page.

     1. Blog Thumbnail Dimensions for template blog list choose the size of the thumbnails for your blog when using blog list template. note: the thumbnail size of masonry and full width are generated automatically.
     2. Category of blog you want to display in Editor Pick Type the slug of which category you want to show in Editor pick slider
  2. portfolio

     1. Portfolio masonry style turn on/off masonry feature in your portfolio pages
     2. Full width Image Display in single portfolio page. turn on/off full width image in your portfolio items page.
     3. Portfolio Items URL Base choose the URL base for each of your portfolio pages. please be careful in changing the URL, this can cause an URL crash if you use the same URL for your portfolio page/item
     4. Portfolio Thumbnail Dimensions change the portfolio thumbnail dimensions. NOTE: this only works if you turn off the mansory style. in masonry style the height of your image is reponsive according to the number of your portfolio items.
     5. Portfolio Items Link To choose how your portfolio items respond when clicked. NOTE: this only for the [view] button that appear when you hover your portfolio items. the title always lead to a single portfolio page.

there still more options in our theme option that we dont explain here, we give a description/explanation in each of the options to help you understand the function of the options.

## Visual Composer

This section will explain about the use of Visual Composer in LABOMBA

Image

LABOMBA use Visual Composer to help you customizing your pages. Now you’ll be able to create complex layouts within minutes! In Visual composer you will find lots of options such as adding elements and rows. While we are here to explain the elements and functions of Visual Composer we exclude some of the obvious elements that are user friendly enough without further explanations.

Classic Editor
Image

Classic Editor

We also have an upgraded wordpress editor for you who prefer to stay in the classic feel/way. We also add lots of shortcodes in the editor to make your work easier.

Image

you will also see classic editor in several Visual Composer elements. You can use this to add more contents in each element.

Limiting Visual Composer Access

Limiting Visual Composer Access

Image

You may not want all users to have unrestricted access for Visual Composer. To manage who can use Visual Computer and/or hiding the visual composer menu in a specific post type, you can go to your admin panel and choose [settings] -> Visual Composer.

Add Row
Image

Add Row
clicking [add row] button will provide you a new row column. You will see a big + sign in the middle of your new row, This is where you will add contents and elements of your page. There’s also a column layout button to choose how you’d want your contents/elements distributed in that row.

you can also change the background of your row, to do this please click the pencil-like button on the top- right of your row.

Image

to change the background you have to set the 'Row Style' to yes:

Image

now you will see several options to customize your row.

Minimal height
set the minimum height of the row even if it doesnt have any content.

Animation
Choose Animation that will be displayed in the row.

Background Image
this is where you can select the background image for your row

Background Position
choose the position of your row background

Background repeat
choose if/how a background image will be repeated

Full width Background
choose enable to set your row background to full width.

Fixed background
enable to use the actual size of the row background.

top & bottom padding
add padding before/after your row background

top & bottom margin
add margin before/after your row background

enable parallax
choose to enable parallax effect to your row background

This is the difference between a row with background (2) and without (1)

Image

Add Element
Image

Add Element
adding elements/contents in your page can be achieved by clicking the [add element] button or the + sign in your row. Clicking it will give you a pop up window where you can choose which elements you‘d want in your site.

Parallax

Parallax

Image

for the best result in adding parallax in your website. Please read this instructions first

IMPORTANT : you need to create a new row for parallax. DON’T use parallax with other contents in one row.

1. Background image Upload your background parallax image by clicking the green + button.
2. Unique Class Background Insert unique class of your background parallax image, this is to differentiate one parallax with the other. (esp. important when you have two or more parallax backgrounds in one page)
3. Background image parallax speed Set the scroll speed of your parallax background.
4. Height Set the height of your parallax background
5. Element of Image Add a parallax element (this is not background image)
6. top position image element Set the top position of parallax element (not background)
7. Background image element Speed Set the scroll speed of your parallax element
8. width of image element
9. height of image element
10. your content You can add content on your parallax by using this WYSWYG content editor (this content WONT have parallax animation)
11. content padding set padding for your content.

GAP

GAP

Image

Every element in Visual Composer has 0 margin and padding. To add space between each row or elements you can use this gap function. The default gap is 28px but you can change it as you need it.
Image

Text block

Text block

Image

add a text area in your page/post. you can write your text here.

Image

Separator (Divider) with text

Separator (Divider) with text

Image

add a line separator/divider with a text element in it. you can set the what text to display and the alignment for that text

Image

Message box

Message box

Image

add a message box to inform the user of something, such as the occurrence of an error.

Image

FAQ (Toggle)

FAQ (Toggle)

Image

add a toggle function on your page. Note: title font is using your theme Heading 1 font

Image

Single image

Single image

Image

add an image.

Image

Image gallery

Image gallery

add image gallery/slideshow

Tabs

Tabs

Image

We have two TAB style in Visual Composer : Default and Style1 You can see our screenshot to learn how to change the TAB Style

Image

Image

Tour section

Tour section

Image

We also have tow TOUR style in Visual Composer. Please see this screenshot to know more about the styles:

Image

Image

Accordion

Accordion

Image

add an accordion function in your page/post

Image

Posts slider

Posts slider

Image

add a slider element in your page/post

Image

Widgetised sidebar

Widgetised sidebar

Image

add another sidebar in your page/post

Image

Image

Button

Button

Image

add a button in your post/page.

Image

Video player

Video player

Image

add a video in your post/page

Image

Raw html

Raw html

Image

html box for your code. if you already have html code for your content, you can paste it here

Image

Raw js

Raw js

Image

Js box for your code. if you already have js code for your content, you can paste it here

Image

Progress Bar

Progress Bar

Image

you can add a progress bar with this.

Image

Pie chart

Pie chart

Image

use this to add a pie chart.

Image

Revolution slider

Revolution slider

Image

Image

add revolution slider in your page. note: you still need to create your slides first in revolution slider panel.

Image

Google maps

Google maps

Image

Image

add a google maps element in your post/page.

Image

Banner content

Banner content

Image

add a banner for your page/post. you can also add button and hover effect for your banner here.

the image size for banner content will follow the actual size of your image or the size of the column, you can see our PSD files to see how we set up our homepage banner

Image

Services content

Services content

Image

Image

add a services content element in your page/post. for complete list of useable icon please click here

Image

Services list content

Services list content

Image

same like services content, but displayed in a list.

Image

Social icon

Social icon

Image

add a social media icon. note : please use the complete url for your social media account e.g: htttp://www.twitter.com/dahztheme

Image

Teaser

Teaser

Image

add a teaser in your page/post.

Image

Teaser box

Teaser box

Image

add a teaser box in your page post

Image

Callout action

Callout action

Image

add a callout action in your page/post

Image

Box content

Box content

Image

Image

add a box content element in your page/post

Image

Blogpost grid

Blogpost grid

Image

Image

show your blogpost with grid view

Image

Blogpost list

Blogpost list

Image

Image

show your blogpost with list view

Image

Image

Testimonial

Testimonial

Image

add testimonial in your page/post

Image

Member

Member

Image

add a profile of your team / author . you can add their description, photo, email & social media links. note: the size of the image in the page will follow your actual image size and the layout of your row.

Image

Google font

Google font

Image

add google font in your page/post

Image

Highlight

Highlight

Image

add a higlighted text

Image

Blockquotoes

Blockquotoes

Image

add a blockquotes

Image

Table

Table

Image

add a table. to add a row please use [table_tr][/table_tr] , and use [table_td]list[/table_td] to add table data (column). a proper row code will look like this [table_tr][table_td]list[/table_td][table_td]list[/table_td][table_td]list[/table_td][table_td]list[/table_td][/table_tr]

Image

Divider

Divider

Image

add a divider (border)

Image

Portfolio

Portfolio

Image

add your portfolio in a page

Feedburner

Feedburner

Image

Feedburner ask your user to subscribe your feedburner ID

Image

Credit cards

Credit cards

Image

add credit cards logo in your page/post

Image

Products

Products

Image

Image

Image

Image

add a product slider in your page/post

Image

## Revolution Slider

This part of documentation is going to cover a step by step instruction how to import and/or create a revolution slider in your wordpress site.

Import/Export slider

#### Import/Export slider.

Image

#### Import

to import an existing slider you need to [create a new slider] from revolution slider, then in edit slider click on import/export tab, to see this options. then click browse and choose the Export file (txt) and click on Import Slider. To import CSS Settings you will need to copy / paste the CSS Settings you exported earlier in the EDIT CSS Section (under the Slide Editing View)

Choose the Export file (txt) and click on Import Slider. To import CSS Settings you will need to copy / paste the CSS Settings you exported earlier in the EDIT CSS Section (under the Slide Editing View)

#### Export

to save/export your slider you can click on the export slider there.

Create Slider

#### Create Slider

How to create new Slider ?

Select [Revolution Slider] from your admin panel then Press Create New Slider

Image

in the new screen Your First Slider

Set the Slider Title and the Slider Alias (NOTE: please dont use special chars and spaces here !) Select your Layout and Settings and press Create Slider. (below you will see a Description for each settings in and Possibilities)

Main Settings

#### Main Settings

Once you Created a Slider, you can open the Slider Settings (Edit Slider) any time to manage any general settings per Slider

Image

Image

Slider Settings
Slider Title

A Internal used Name for the Slider. Only for Backend Usage

Slider Alias

An individual name of the slider. Dont use Speical chars and spaces here. This will be used for ShortCode embeding and for any other art for embeding and corresponding / link internal to the slider.

Slider Shortcode

This is the Shortcode to embed into your Wordpress Pages, widgets etc.

Slider Layouts

1. Fixed

   A None Responsive Version of the Slider. Will have a prepared Width and height. Used for Older Themes

2. Custom (it has been called "Responsive" in Earlier version)

   A Custom Grid system to set size of Slider per Browser Size. You can define different Levels for sizes. Only used for Frameworks where no Fluid Widths has been used. (i.e. Skeleton)

3. AutoResponsive (it has been called "Fullwdith" in earlier versions)

   Used for Fluid Responsive themes, where the Slider calculates its onw size for every Browser size. Only max widt hand height of Grid should be defined. In case the Container Width is not Boxed, it will go Fullwidth Automatically

4. FullScreen

   Slider will take the height of Window and center the preseted Grid within. It will always try to go FullHeight and Fullwidth if the wrapping container allows.

Grid Settings

Depending on the Layout you can set the Width and Height of the Captions. The Slider will go Fullwdith or Fullwidth and Fullheight in case you set AutoResponsive or FullScreen. Caption Grid will be centered always within the slider container. In some cases (Custom) you can set multiple Levels depending on Screen Size. This is not needed in AutoResponsive and FullScreen mode.

Fullscreen mode allows you to set a Container (per class or ID) which heights decrease the height of the FullScreen Slider Container automatically in every responsive level

Update Slider

It updates your last settings to the Slider. If it is not pressed and you leave the Main Settings panel, your settings will be lost.

Delete Slider

Delete your current Slider.

Slides Settings
Edit Slides

Open the Edit Slide Panel for further settings per Slide

Preview Slider

Preview the current Slider with all its slides and settings in an iframe.

Image

Delay

Set the Delay Globaly for each slide. You can modificate the Delay Time per Slide under the Edit Slide function.

Shuffle Mode

Random Order of Slides on/off

Lazy Load

Use Dummy images during Document Load. Main images per slider are loaded on Demand when the slide is shown first time.

Load Google Font Used for Google Font Embeding in Slider. This is only used in older versions. Please for current Google Font usage use @import in the CSS Edit mode like shown below:

1. Open the slide Editor and Select any of the Captions (or create new one)
2. Click on EDIT CSS FILE
3. Visit The Google Font Page and search for your Font (Screenshot)
4. Click on Quick Use and Select @IMPORT Tab. Add this code to your CSS in Slider Revolution to the Top.
5. To integrate the font, copy the font-family settings from Google Font page to the caption where you wish to use

See also Caption HOW TO USE GOOGLE FONT later below

Stop Slider

Use this setting to stop the Slider after a predefined Loop and at a predefined Slide. Loops 0 means in the first loop to stop and Stop At Slide 1 would stop directly at First slide. i.e. Stop After Loops 2 and Stop At Slide 3 would stop the slider after 2 Loops ath the 3thd slide.

Image

The Position of the Slider within the Contaienr which is wrapping the slider.

Image

Shadow Type

Choose between different Shadow Effects under the slider. Shadow Height is exclued of the Slide Heigt ! You may need to set extra margin bottom via the Position Settings !

Image

Touch Enabled Turns on the Swipe function for navigation on mobile devices Stop On Hover

Stops the Main slide Timer on MOuse Hover. Captions are still playing within the slide

Navigation Type

Set the Layout of navigation. Only Bullets, Bullets and Arrow, Thumbnails or None

Navigation Arrows

Choose between custom positions (solo) or Fixed position next to the bullets /thumbnails.

Navigation Style

The Style / Art of the Navigation

Positions

Per Bullet, Navigation Arrow you can set a Position per Align and per Offsets. I.e. Left Center aligned arrow still can have an offset to move it in different directions

Image

Thumbnail Width and Height and shown Amount of Thumbs in same time. On Hover the Thumbs are scrolled.

Image

Hide Slider Under Width

The Slider will be hidden and stopped if the Browser Size goes under this presetted Size. Works only if Custom Sizes set to Slider

Hide Defined Layers under Width

Hides predefined Captions if the Browser Size is smaller then this predefined size. To select Captions to hide, go in the Slide Editor and turn on / off the option on the Captions one by one.

Hide All Layers Under Width

Hides All Captions if the Browser Size is smaller then this predefined size.

Image

You can set a different First Slide than the Slides Order use. You can set also a different First Transition then it defined in the Slide Editor to make sure that the first Transition is some Eye Catching animation, but later only use Slideing transitions i.e

Image

In Some Theme the Output of the Slider is broken , filled due br and p tags. Also soe theme has jQuery conflicts or embeding the jQuery library in a way which would breake the slider. In this case please turn on the OutPut Filters, and try the different settings to see if the Output art fix your issue. (most Problem solved by setting this to by Echo)

for more comprehensive and detailed guide in using and customizing revolution slider, please open the revolution slider documentation that distributed along this documentation.

## Sidebar and widget

#### Sidebar Setup

The Sidebar Generator feature gives you the ability to setup as many sidebars as you like. When you create a new product or page you can select a desired sidebar from the dropdown.

By default the theme only have primary sidebar, you can create new sidebar in [Appearance] - > [Sidebars]

Image

to create a Sidebar, you can follow this steps

1. Click the "Add Sidebar" link.
2. Enter your new Sidebar's name and clik "Ok".
3. Your new sidebar will be available in the Widgets area.

Then use the widgets to fill your sidebar via Appearance > Widgets. here you can just drop and drag the widgets to the desired sidebar, you can also modify some of the elements.

Image

dont forget to assign the sidebar in your pages/posts so it will be displayed.

Image

## Images setting

#### Image dimension settings

Product Image:

WordPress has a limited image resizing and cropping system, to optimize the display of image, we need to do a workaround. please follow this guidelines to get the best result for your image.

On the catalog tab, WP Dashboard -> WooCommerce -> Settings -> Catalog, of the WooCommerce settings you’ll see three image dimension inputs.

Catalog Images appear on your shop loops. Product categories, up sells / cross sells etc Single Product Image is the main image on your product details page Product thumbnails are the gallery thumbnails on your product details page (if you have a gallery)

The images you upload will be resized to match the values your input here accurately as possible. IE if your settings are 100×100 and you upload a 300×600 image it will be resized to 100×200. You can also choose to ‘hard crop’ your images which will force them to be the size specified in these settings, regardless of the raw image you upload, but will be cropped rather than distorted in scale.

this is the default image dimension setting in LABOMBA

Image

as you can see there, the default dimensions are in 4:3 ratio. so to get the best result (not stretched, blurred, or cut), we recommend to use 4:3 portrait images for your image product.

Remember if you change these settings after uploading product imagery you will need to regenerate your thumbnails within WordPress for the changes to be applied to your current imagery. To do this we recommend using the Regenerate Thumbnails plugin.

## Retina Display

If you want to avoid blurry images in high pixel density device you will need to upload two files for your images. Please use the same name with an additional "@2x" string added right before the extension of the second file.

Example:
Your-logo.jpg (80x80px)
Your-logo@2x.jpg (160x160px)

## Source and credit

ELEVATE ZOOM http://www.elevateweb.co.uk/image-zoom
SWIPER Mobile Touch Slider http://www.idangero.us/sliders/swiper/
OWL CAROUSEL http://www.owlgraphic.com/owlcarousel
JSCROLLPANE http://jscrollpane.kelvinluck.com/
jQuery Parallax http://www.ianlunn.co.uk/plugins/jquery-parallax/
Magnific Popup http://dimsemenov.com/plugins/magnific-popup/
jQuery Masonry http://masonry.desandro.com

## ChangeLog

#### Version 1.8

- * Added New Directory
- * Added Visibility Options in Visual Composer Row
- * Fixed WooCommerce My Account login/register
- * Fixed Sort By in woocommerce shop page
- * Fixed Add to cart from quickview is back
- * Update DF SHORTCODES 1.1
- * Update Visual Composer 4.2.1

#### Version 1.3

- * Wordpress 3.8 Ready
- * Added Facebook Connect
- * Added capability of single portfolio
- * Added Upload image "Back To Top" on theme options
- * Fixed Meta Product Share
- * Fixed classes Page My Account
- * Fixed CSS Top Cart Content
- * Fixed Theme Options style
- * Update Woothumbs Plugin 3.0.3.DT03
- * Update Revolution Slider 4.1.4

#### Version 1.2

- * Scrollbar on top search is back
- * Added Option minimal height on custom row VC
- * Added Option animation on custom row VC
- * Added Option Photo Thumbnails on search
- * Change template-home.php logic wp_reset_postdata to wp_reset_query
- * Fixed Parallax Zooming on Mobile
- * Update Woothumbs Plugin 3.0.3.DT02
- * Update Documentation

#### Version 1.1.2

- * Added Optional Retina Logo on LaBomba Theme Options
- * Added Scrolling on Wishlist Topbar
- * Added Mega Menu
- * Added Optional Ajax Simple Product add to cart on LaBomba Theme Options
- * Fixed Increment on Product Page
- * fixed Sidebar on Shop Page Category
- * Fixed CSS on IE Browser
- * Fixed Wishlist Count
- * Update Revolution Slider 4.1 + XML
- * Update Labomba Theme XML
- * Update Documentation

#### Version 1.1

- * Update Responsiveness on iPad
- * Update Woothumbs Plugin 3.0.3.DT01
- * Update Sticky Topbar Mobile Navigation
- * Update Layout & Revolution Slider XML
- * Added Wishlist Topbar

#### Version 1.0

- * Initial Release

## Final Words

We know this documentation is far from perfect, any needed explanation will be added in the future version. if you cant wait, you can drop us your questions in our support forums. so please register in our support forum here

**Please Note - Support DOES NOT include:
Problems with plugins not packaged with our framework and themes;
Plugin integration;
General WordPress support (see WordPress forums for that);
Adding new features or extending the features currently available;
Any type of modification or customization.

along with our support forum, you can contact us in:
- Email: dahz@daffyhazan.com
- Themeforest Comment Section
- Our twitter : @dhcalive

also keep in mind that our customer care is available daily from 9am – 6pm GMT+8.

so, thanks again for using LABOMBA, Have fun and Good Luck with Your Site!