Introduction

Thank you for your purchase!

This documentation will guide you through the customization possibilities of Blue Collar WordPress theme.
If you are new to WordPress, I highly recommend you to read through some
beginner tutorials first.

Don't forget to use your browser's search functionality to search any keyword in this documentation
if you have trouble finding a solution to your issue (CTRL + F or CMD + F if you are on Mac)

Installation

First step is to install the WordPress. If you need help with that, please read this tutorial

Now, let's install the theme itself. First make sure that you have downloaded full package .zip file from ThemeForest.

Click on Download button next to purchased item

Choose All files & documentation and download the zip file. Unzip the file

Enable email notifications if you want to be informed when the new update is available

If you like the theme, don't forget to rate it 5* please. Thank you!

When you unzip the downloaded file, you will get bunch of folders. The most important one is the THEME folder.

THEME folder contains the installable theme .zip.

Now go to wp-admin of your site and let's install the theme.

Hover over Appearance

Click on Themes

Click on Add New

Click on Upload Theme, choose theme .zip from THEME folder and install it

It is highly recommended to install the child theme as well. Learn more about child themes here.
Child theme .zip can be found in Child Theme folder. Install it in the same way as parent theme.

If you have installed both parent and child theme, let's activate the child one under Appearance / Themes.

Hover over child theme and click on Activate

After activation, you will see a notificatin about required plugins.

Click on Begin installing plugins

Select all plugins

Click on Bulk Actions selectbox

Choose Install

Click on Apply button

Now go to Plugins and activate those new plugins.

Select new plugins

Click on Bulk Actions selectbox

Choose Activate

Click on Apply button

Optional: you may also want to install the TablePress plugin which is very handy tool for creating tables.

Installation is complete, now let's set up this theme and add some content!

After you activate all plugins, you may see a notification about upgrading/purchasing license for Visual Composer in your admin. Ignore this notification (you can simply close it). Separate license is needed only if you want to keep it updated by yourself, without relying on theme updates. You definitely don't need to purchase the license to use Visual Composer with this theme.

Quick Reference

Header

Top bar. It is fixed by default,
but you can change this behaviour under Theme Options / Header Settings with Fixed Top Bar option

Page title. By default, standard page title will be used, but you can override this text
under Page Settings / Header using Override Page Title field when editing a particular page

Header background. You can upload your own background image under Theme Options / Header Settings
using Header Background Image field. Please note that color overlay is created via CSS,
so the image itself can be black and white for smaller file size.
If you want to change opacity of this color overlay, read this.
Also, you can define a Featured Image to override this image for individual pages

Header services. You can toggle header services under Theme Options / Header Settings
using Show Service List Globally option. This will show/hide them globally across all pages.
If you want to enable them just for individual pages, check out Page Settings / Header and use
Show Service List option when editing a particular page. Learn more about services here

Contact panel. It can be enabled under Theme Options / Header Settings
using Show Contact Panel Globally option. This will show/hide it globally across all pages.
If you want to enable it just for individual pages, check out Page Settings / Header and use
Show Contact Panel option when editing a particular page.
Contact info itself can be edited also under Theme Options / Header Settings using
Quick Contact Info 1 Icon, Quick Contact Info 1 Text,
Quick Contact Info 2 Icon ... etc. fields.

Social icons. They can be managed under Theme Options / General Settings
using Social Links option.
To toggle them in Contact panel, go to Theme Options / Header Settings and use
Show Social Icons in Contact Panel option

Footer

Footer CTA. It can be enabled under Theme Options / Footer Settings
using Enable Footer CTA Globally option.
This will enable it globally across all pages. If you want to enable or override it for individual pages,
check out Page Settings / Footer and use Footer CTA option

CTA button. This button is part of Footer CTA. It can be edited under Theme Options / Footer Settings
using Footer CTA Button Label and Footer CTA Button Link fields.
You can override its settings for individual pages under Page Settings / Footer using Footer CTA option set to Custom

Footer menu. You can manage your menus under Appearance / Menus.
Theme locations option should be set to Footer Menu

Social icons. They can be managed under Theme Options / General Settings
using Social Links option.
To toggle them in Footer, go to Theme Options / Footer Settings and use
Show Social Icons option

Post Types

Standard Page

The most important thing when creating a page is to choose suitable Template under Page Attributes.
Leave it to Default Template for basic pages, like for example Contact page. If you want to have a sidebar on this page,
use With Sidebar template.

Choose a template

Remember, when you are using any of the
Full Width templates, you will have to manually contain your elements in containers if you don't want them to stretch.
To do so, you can either nest them in Container shortcode if you are using Shortcode Generator,
or enable Wrap in Container option for Row elements when you are using Page Builder
(please read Page Builder section for more info).

At the bottom, there is a Page Settings section. All setting here should be self-explanatory.
Just remember, that for all options set to Global, appropriate settings from Theme Options will be used.

Standard Post (Blog)

Standard posts are the core for each WordPress site. They can be used for blogging or news.
First thing to do when you want to use posts is to create a standard page.

Title will be used on any place where a reference to post list page is needed (page title for post list, page title for single post, breadcrumbs)

Leave content blank. Even if you add a text here, it won't be displayed anywhere

If you have created your Blog page, go to Settings / Reading.

Choose A static page (select below)

Select your Blog page and save your changes

Please note, that Template option in Page Attributes have no effect on this page. If you want to enable sidebar for
Blog pages, you can do it under Theme Options / Blog (posts).

On the other hand, all settings under Page Settings will affect both your post list and single post (except "Override Page Title").

Check out Theme Options / Blog (Posts) for global Blog settings

Service

Services can be managed under Services in similar way to standard posts. LSVR Toolkit (Blue Collar) plugin must be installed to use this feature.

Slide

Slide is a special post type for use with Slider shortcode (either via Shortcode generator or Page Builder).
Slides can be managed under Slides in similar way to standard posts. LSVR Toolkit (Blue Collar) plugin must be installed to use this feature.

Slides can be grouped together via sliders. This works in a same way as categories for standard posts.
Then, when you insert a Slider shortcode, you can choose a specific slider and only slides associated with this slider will be displayed.

Featured Image will be used as slide's background (but you can also define a single background for whole slider when you insert Slider element).

Settings for single slide can be edited under Slide Settings.

Importing Demo Data

If you want to recreate a demo look ASAP, you may want to import the demo data.
Please note that demo images are NOT part of import file (read more).

How to import

Demo Data folder contains two files which can be imported: demo.xml for importing demo pages and posts
and theme_options.txt for importing demo Theme Options settings.

demo.xml can be imported under Tools / Import. Click on WordPress
and you will be prompted to install WordPress Importer plugin. Once installed and activated,
visit again Tools / Import, click on WordPress and choose demo.xml file from Demo Data folder in full package.

theme_options.txt can be imported in Theme Options / Import/Export.
Click on Import from file and paste content of the theme_options.txt file.

After import: don't forget to set up your menus under Appearance / Menus, widgets under Appearance / Widgets and Front and Blog pages

LSVR Toolkit (Blue Collar) plugin have to be installed and active when you are importing demo.xml file

Row element in Full Width templates

When you are using any of Full Width page templates (page templates can be set under Page Attributes)
you need to watch your top level Row elements as their content will be stretched to full width by default.
This behaviour is expected when you want to use Slider or Parallax Section element
(that's why you will use Full Width templates for pages containing those elements in the first place),
but you will probably do not want to see other elements stretched like that.

To fix this, open Row settings and check Wrap in Container option.

Open Row settings

Wrap this row in container if you are using any Full Width template and don't want content of this particular Row stretch to full width

Using pre-defined layout templates

As with default VC elements, not all default predefined VC layout templates are supported. But at the other hand, there are bunch of theme-specific ones available.

Open layout templates modal

Display predefined templates

"Tools" icon indicates that this is a theme-specific template

Description in brackets indicates which page template should be selected in Page Attributes
(but it may work with different page template as well, feel free to experiment).
If there is no description, then this layout is primarly designed for use with Default Template

Optionally, wrap this row in container if you are using Full Width One Page template and don't want content of this Row stretch to full width

Now, you need to create a separate header menu for this page. Navigate to Appearance / Menus and create a new menu.
Then set its location to Header Menu (One page).

First create a menu, then set its location to Header Menu (One page)

If you want to add a link pointing to One Page sections, click on Links and use "#" with section ID as a link.

Choose Links

Add your section ID prefixed with "#"

Title of this menu item

Insert this link to your menu

Custom Skin

The easiest way to create a custom color scheme (skin) is to make copy of the existing one from
library / css / skin folder and change some SASS variables.

First thing you have to do is to locate existing skin file. You can either find it
by extracting installable theme .zip file and navigate to library/css/skin,
or open default.scss directly from the demo.

Now copy content of this file to any text editor (I recommend Notepad++ if you are on Windows).
You will find all color variables at the top of the document, most important ones are $accent-1 and
$accent-2. You can change just those two colors to create a brand new skin, but of course,
you can play with values of all other variables to fine-tune your scheme. Visit colorhexa.com to see a comprehensive list of colors
and their hex values.

After you have made your changes, you should save this file anywhere on your local machine or online.
You never know if you would need it to make some additional changes in future.
Then navigate to any online SCSS to CSS converter, for example sassmeister.com.
Paste your code to corresponding field (SCSS or SASS) and copy generated CSS code.

Now, make sure that you are using Child Theme. If not, then please follow the whole installation guide to learn how you can install it.
Open child theme folder and navigate to library/css/skin and open myskin.css file you will see there.
Paste your generated CSS and save it. You can rename this file if you want.

The last step is to visit Theme Options / Styling,
enable Enable Custom Color Scheme option and insert the name of your skin to Custom Skin Name field (without extension).
So if you haven't renamed it, write myskin.

The final step. Insert name of your custom skin file under Theme Options / Styling in Custom Skin Name field

Icons

Some elements, inserted via Shortcode Generator or Page Builder, have an option for inserting icon name.
Choose any icon from FontAwesome library (click on icon to see its class)
or Nova icons libary and use its full class (with additional "fa" or "im" respectively).

How to update the theme?

When there is a new update, go to your Downloads on ThemeForest,
click on Download button next to purchased theme and choose Installable WordPress file only.
Now go to Appearance / Themes in wp-admin and delete parent theme. You will have to activate any other theme
to see an option to delete the active one. If the parent theme is deleted,
just install the updated one in the same way, as you did when you installed the theme for the first time.
Don't worry, your wp-admin settings and content won't be deleted.

How to add custom CSS?

You have two options to do that. The easier one is to add your CSS code under Theme Options / Custom CSS/JS in CSS Code field.

If you need to add more complex code, for example for different screen sizes, you should use Child Theme and edit
style.css found in its root.

How to create a Twitter feed widget?

How to obtain a correct link for Mailchimp widget?

You need to have a Mailchimp account in order to make subscribe form work.

Log in to Mailchimp and go to desired subscribers List which you want to connect with this template.
Click on Signup forms and build some basic signup form. If you want to use this template's subscribe form as it is,
you will need just an email field (field tag EMAIL).
When you are done building the form, go back to Signup forms and click on Embedded forms.
You should see the code of your form in Copy/paste onto your site section.
Copy it into your text editor, but you need just form's action URL. Search for "<form action="
and copy the whole URL. It should look similar to this: http://volovar.us8.list-manage.com/subscribe/post?u=76a50c9454ec8ab78914d1bf2&id=49e892f53d.

You need to edit it a little bit though. Replace "post?" with "post-json?" and add "&c=?" at the end.
You should get something similar to this: http://volovar.us8.list-manage.com/subscribe/post-json?u=76a50c9454ec8ab78914d1bf2&id=49e892f53d&c=?.

You can also replace "&" with "&amp;" for HTML to be valid. So the final link should look like this:
http://volovar.us8.list-manage.com/subscribe/post-json?u=76a50c9454ec8ab78914d1bf2&amp;id=49e892f53d&c=?.

Just change value of ".9" to any value from "0" (100% opacity) to "1" (no opacity).
For example use "0.5" for 50% opacity.
You can also change the value of ".6" on the next line to change opacity of additional gradient color.

How to activate all default Visual Composer elements?

If you are already familiar with Visual Composer, you may find out that not all default VC elements are available in this theme.
That's because they may not be 100% compatible or there are custom theme elements which substitute their functionality.

However, you can enable those hidden elements by editing visual-composer-settings.php
file in Includes folder (found in theme's root). Just delete any line containing vc_remove_element function.

I do not guarantee the proper functionality of those hidden elements. You are on your own when you decide to use them.

How to enable Visual Composer for Projects, Posts and Slides?

By default, Visual Composer is enabled only for Pages and Services. To enable it for other post types as well,
go to Settings / Visual Composer and check appropriate options under Content types.

Check lsvrproject to enable VC for Projects and lsvrslide to enable it for Slides.