Black Theme Documentation

WordPress Responsive Multi-Purpose Theme

By: annabalashova
themeforest.net/user/annabalashova

Thank you for purchasing our theme. It has an understandable documentation that is easy to setup. If you still have some questions that you could not find in this help file, please contact us through email via our user page contact form here. You can also follow us on Themeforest for our future themes, that you could be interested in. Thank you very much!

Theme Installation

There are several ways to install wp themes, we prefer using FTP but you may choose any other ways. Please read more about theme installation on the official website at http://codex.wordpress.org/Using_Themes

If you choose to use ftp, do the following:

please unzip the installable zip file that you downloaded from ThemeForest (blacktheme.zip);
upload "Black Theme" theme folder to the theme directory of your WordPress via ftp;
log into your WordPress admin dashboard and activate "Black Theme" theme in the Appearance => Themes section;

Note, "Black Theme" contains built-in Evatheme Page Builder. You don't need to install the plugin. It will be activated automatically on the pages and posts sections after theme installation.

Theme Plugins

After activation of "Black Theme" you will be suggested to install the plug-ins listed below. For your convenience in the theme archive the plugins were not invested (1. WooCommerce and 3. Contact Form 7 (occupy a large space)). You will have to download them yourself.

1. WooCommerce - a powerful, extendable eCommerce plugin that helps you to sell anything. For more information please head to WooCommerce.

2. Slider Revolution - This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. For more information please head to Slider Revolution.

3. Contact Form 7 - Just another contact form plugin. Simple but flexible. For more information please head to Contact Form 7.

Theme Options Panel Overview

This theme comes with its own theme options panel. You can manage general theme settings panel. Let's review it:

General: In this item there is a disconnection of Evatheme Page Builder, preloader loading, choosing of layout style, choosing of filling or a background images, changing of page 404 text and connection Google Analytics code;
Additional: installation of the information about the author in a single post, the height of the default portfolio images and title for the single post;
Header and Footer: Site header installation (fixed/not fixed), display of the main buttons (search, sidebar) downloading and the choice of position for logo and favicon, settings for the footer;
Colors and Styling: adjust theme color options (main theme color, heading, menu, footer colors etc).
Typography: theme uses google web fonts. Please choose the desired font from the drop down menu for content fonts, typography H1, H2, H3, H4, H5,H6;
WooCommerce: changing the title on the page and position of the sidebar;
Social Icons: the full list of available social links;
FB Twitter API: Selection user comments options (standard / Facebook) and making API keys for twitter;
Custom CSS: fields for custom settings input;
Backup Options: You can use the two buttons below to backup your current options, and then restore it back at a later time. This is useful if you want to experiment on the options but would like to keep the old settings in case you need it back.

Import Demo Content

It is very simple.

If you are using the theme to build a new website which does not have any content yet, we strongly recommend to use the demo content files. This theme includes XML and settings data files which will allow you to upload the demo content to your website. The structure is the same as in the Live Demo Preview. (images are excluded)

You need to import Theme Option Settings for Admin Panel. For this you need to - open the settings.txt file located in archive - copy the code and paste it in the Transfer Theme Options data field, click Import Options and Save All Changes. If you perform the import correctly you should receive a confirmation message.

Next step is to import the import.xml data

Browse to the folder called "Demo Content"
Find the import.xml file
Log into WordPress
Go to Tools -> Import
Click on "WordPress - B3Themes"
Click to select your file
Choose the xml file you want to import.

Note: For correct import of all products you need to activate the plugin WooCommerce

Note: Do not forget to checkmark the "Download and Import File Attachments" option in order to import images too.

Theme Layout Settings

Our theme has the options which allow you to change its layout.

1. Deafult theme layout. You can set different theme layouts: Boxed, Fullwidth, Bg Image, Bg Color. To change the default theme layout, please go to Theme Options Panel => General.

2. Header and Footer. Here the setup header and the footer of the site are given. Changing the logo and favicon, hiding of the softkeys of Hader, footer layout, as well as text of the copyright. Theme Options Panel => Header and Footer.

You can also set individual settings of sidebar and its location, separately for each post or portfolio from work.

Theme Color Settings

You can easily change the colors of the main elements like links theme color, background color, header background color, footer widget area background color. Please review the Colors and Styling section in your Theme Options Panel. Also you have the possibility to change the color in some separate elements from Evatheme Builder.

Evatheme Page Builder Elements Overview

This WordPress theme comes with the built-in Evatheme Page Builder section, which allows you to create custom page layouts with ease.

Here is the full list of available modules:

Accordion - add simple accordion style with collapsible components;
Blog - display standard style blog to the page;
Carousel - display the scrollable posts elements, images from portfolio, reviews and partners logos;
Column - display any content (theme shortcodes, shortcodes outside, html);
Content - display entire content available in the visual editor;
Counter - display numeric data;
Divider - add divider to separate module blocks;
Google Map - add simple google map;
Heading - add simple heading;
Image - add an image or a link to the image;
Message Box - add different message box types;
Partners - display the partners logos from existing list;
Portfolio - add non-ajax portfolio to the page;
Price Table - add simple and advanced price table;
Progress Bar - add advanced and flexible progress bar;
Promo Text - add special promo text with call to action button;
Services - add custom services;
Sidebar - add the chosen widgets in the sidebar;
Slider - add any slider plugin;
Tabs - add tabbed content area;
Team - display selected team members from existing list;
Testimonials - display the selected testimonials from existing list;
Toggle - add simple toggle style with collapsible components;
Video - add vimeo or youtube video.

Home Page Setup

Here is the explanation on how to setup your home page:

first you need to create a blank page;
if you want to have a slider on the home page, you have to install the Layerslider plugin and create a slideshow using Layerslider. To install the slider, read the Installation guide below;
when the slider is created, please go to the home page and choose in "Page settings" Header type ? => Slider, and in Select Slideshow name of your created slider;
please note that you can drag and drop the modules;

Blog Page Setup

Here we will explain you how to setup your blog page:

the first thing you have to create a blank page;
if you want to have a sidebar on the blog, please select page layout;
once the page is created, please add "Blog" module using Evatheme Page Builder;
click edit to adjust blog posts listing settings.

Portfolio Page Setup

To create a portfolio page on your site, please follow the steps below:

please go to Portfolios section in the main WordPress menu and click Add New;
there are 3 possible options of format (gallery, video and image)... For the gallery it is needed in the paragraph "Portfolio gallery settings" upload pictures and specify the height of the pictures. To display the video you need in paragraph "Portfolio video settings" to fill one of the fields, or "M4V File URL" and "Video Thumbnail Image", or "Embeded Code";
then please add the content to your portfolio item page, text, featured image (very important as it will be a thumbnail for your portolio page);
when all the items are created, it's needed to create a portfolio page, please go to the pages and add new page;
create a page on which you want to display your portfolio, select Portfolio;
please check the module settings, just click edit;
when it is done, save the changes, and preview the page.

Custom Sidebars Setup

Our theme has the option to create unlimited number of custom sidebars, let's have a look how to create a custom sidebar and add it to the page.

1. Please go to Appearance => Sidebars and create a sidebar.

2. The next step is to add widgets to this custom sidebar. Please go to Appearance => Widgets. You will see a custom widget on the right. Please drag and drop the widgets you want to display in the sidebar.

3. The last step is to add the custom sidebar to the page. Please open the page where you want to display the custom sidebar. Select Left / Right sidebar option "Select page layout", transfer to the appeared in the space element of page builder "Sidebar", click "edit", in drop-down list, select your desired Sidebar. Save page settings and preview the page.

Revolution Plugin Installation

There are several ways to install WordPress plugin, we do prefer using FTP but you can choose other ways.
Please read more about plugin installation on the official website at http://codex.wordpress.org/Managing_Plugins

Contact Form 7 Plugin Settings

There are several ways to install WordPress plugin, we suggest to use FTP but you can choose any other ways.
Please read more about plugin installation on the official website at http://codex.wordpress.org/Managing_Plugins

The first thing you need to do is to create a contact form. Please go to the Contact plugin section. You can see it in the main WordPress menu.

If you want to get the form titles appear inside the contact form fields follow the instructions:

please open the created contact form in the plugin section;
add special code to the Form area.
save changes.

Code of contact form from the page "Contacts"

<div class="clearfix">
<div class="left_column">
[text* your-name watermark "Your Name"][email* your-email watermark "Your E-mail"][tel* your-phone watermark "Your Phone"][url your-website watermark "Web site"]
</div>

<div class="right_column">
[textarea your-message watermark "Message"][submit "Submit your message"]
</div>
</div>

Code of contact form the footer site

<div class="clearfix">[text* your-name watermark "Your Name"][email* your-email watermark "Your E-mail"]</div>

<div>[textarea your-message watermark "Message"]</div>

<div>[submit "Send"]</div>

When the form is created, you need to follow these steps to add the contact form to the page

please copy the contact form shortcode, please see screen shot above;
then you need to open the page where you want to add the contact form to;
add "Column" module to the page, click edit and put the contact form shortcode into the text area (see screen shot below);
please preview the page.