Krome Wordpress Theme Documentation

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to post your queries on our support forum. Thanks so much!


Author: Designova
Support: Through Forum Only
Author URL: Designova
Item URL: Check Demo Now
Current Theme Version: 1.0
Krome Shortcodes Version: 1.0
Krome Posttypes Version: 1.0
Documentation Version: 1.0
Created: 30-Aug-2016
Modified:

WordPress Technical Requirements

  • for localhost you can use xampp, wamp or any Apache with PHP and ourSQL server.
  • Microsoft IIS with PHP 5.2.4+ and ourSQL 5.0+ support.
  • Livesite (preferably a sub-domain for testing) with PHP 5.2.4+ and ourSQL 5.0+.
  • For Manual Theme Installation, you need a full installation package for WordPress, so download here and don't forget about WordPress Server Requirements, or you may already have a WordPress powered website.

Manual Theme Installation

This refers to installing the theme on your WordPress powered website. This means you already have a website powered by wordpress CMS.So here's what you have to do:

  • Unpack all files and folders of the Package file you downloaded from Themeforest and open the Krome Theme folder.
  • Copy the Krome.zip file to your desktop for your convenience.
  • Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  • Go to Appearance menu in the left sidebar and click Themes.
  • Click Install Themes tab and then click the Upload link just below. This will show a file upload form.
  • Click Browse and find the installation file Krome.zip (should be on your desktop as we instructed you just above), click the file when found and then click the Open button.
  • Click Install Now button. The theme is now installed.
  • Go to Manage Themes tab and find the newly installed theme.
  • When found, click the Activate link just below it.

Alternatively you can install the theme though FTP method. Here are the steps

  • Unpack all files and folders of the Package file you downloaded from Themeforest and find the Krome folder.
  • Upload the folder to wp-content/themes folder of your wordpress installtion using any FTP clients like Filezilla
  • Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  • Go to Appearance menu in the left sidebar and click Themes.
  • Go to Manage Themes tab and find the newly installed theme.
  • When found, click the Activate link just below it.

Required Plugins Installation

Krome theme requeries Krome Shortcode plugin to get all the page builder elements available for this theme. This plugin is an extension for Visual Composer Page builder. You can find the plugin files inside the downloadpack under Plugins folder. Before activating the plugin ensure that you have installed Visual Composer plugin.

Here are the steps to install the plugin

  • Unpack all files and folders of the Package file you downloaded from Themeforest and find the Krome Shortcode folder inside the Plugins folder.
  • Upload the folder to wp-content/plugins folder of your wordpress installtion using any FTP clients like Filezilla
  • Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  • Go to Plugins menu in the left sidebar
  • Go to Installed Plugins tab and find the newly installed plugin.
  • When found, click the Activate link just below it.

You must install WP Retina 2x plugin from Wordpress Plugin Repository to make your graphics looks great on HiDPI devices.

For easy plugin installation we have included automatic plugin installation class which will help you to install all required plugins.


One-Click Demo Installer

We have included an option for easier demo data installtion.You can install the demo with just one click from Theme Options >> Import Demo Data.


Classic Demo Data Installation

Ingore the following steps if you are using one-click demo importer

For beginner users and those who want to take a look at the demo content, you can install the demo data:

  • Unpack all files and folders of the Package file you downloaded from Themeforest and open the Demo Data folder.
  • Copy the demo.xml file to your desktop for your convenience.
  • Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  • Go to Tools menu in the left sidebar and click Import.
  • Click WordPress and then install the Wordpress Imported plugin.
  • Once installed go back to Tools menu in the left sidebar and click Import.
  • Click Browse and find the demo.xml file on your desktop (should be on your desktop as we instructed you just above), click the file when found and then click the Open button.
  • Click Upload now and import. It will take a minute to download the demo images from our demo site, but after that, the demo data is installed.

Click on images to open them in new tab for better view

Getting Started

After activating the theme click on the Theme Options link inside the Appearance tab (Dashboard >> Theme Options)


You can upload your brand logo on the logo field, which will be displayed on top left of the header bar aswell as left side of the footer

Footer Cover Image: This theme features a slide out menu. The menu has a dark background image in cover mode. If you want to change the default image you can use this option

Copyright Text: Text that appears on the bottom right side of the footer.

Footer Text - Below Logo: Short paragraph that appears below the footer logo

Optional Preloader Image: By default logo will act as pre-loader image. If you want to change it to a custom preloader please do upload the file here. You can upload .gi/.png/.jpg. Please not the fact that you can't upload css3 based preloaders through this option


Social Media Links

Add respective account handles, icon will appear on the footer. You can add your own icons also. Kindly follow the fotrmat described under the 'Custom Social Media' field.

                            
                            <li><a href="URI">TEXT</a></li>
                            
                        
Footer Explained


Custom CSS

Custom CSS option is to create your own styles for the theme. You can also use this feature to override some existing css rules.


Colors

Choose highlighted areas color for the site. For row ,column and many other elements, there will be color choosers in Visual Composer


Fonts

You can choose fonts for four major text items, heading, bolder heading , body font and speciality headings. You can choose anyfont from google fonts pallete for all of them


Backup

You can export your theme options settings for backup , migration etc. Its a standard feature for Redux Framework.


Create new page

To create a new page, open your DashboardPagesAdd New:

This is how you can add a page. You need to choose the right template and configure the meta options properly to make the pages appear as displayed in our demos

In the following sections we will explain page templates and use of meta options in detail based on the usages in our demo website.

Krome supports Visual Composer PageBuilder. We have created an extension for Visual Composer with theme specific components. We have also included the Visual Composer plugin inside the download pack

Krome Addon details has been explained later on this docs

  • Default Template
  • No Title Page - Page without default title
  • Video Background - For Video backgrounds

Page Meta Options

Page Meta Options

There is only one field in page meta option which is for sub heading. It will work only on pages which uses 'Default Template'


Krome has got one custom post type for portfolio.

The posts will be displayed through 'Visual Composer' -> Krome -> Portfolio Grid.

Please ensure that you have installed and activated 'Krome Posttypes Plugin'


Portfolio

Drag and Drop 'portfolio grid' from 'Krome' group in VC page builder elements. The grid item can be expanded as three types lightbox image, light box video and standalone project page.

There are eight layouts available for the portfolio grid 2 column, 3 column, 4 column and 6 column in fluid and spaced variants. For proper layouting you should use uniform thumbnail sizes. Kindly follow the image dimensions as shown in our demos.

To add a new portfolio item DashboardPortfolioAdd New Project:

Add the title and necessary contents and add your projects to respective categories. You can add a portfolio item in more than one categories.

We have added another taxonomy for the 'Portfolio' post type called 'Group'. This is for grouping various portfolio layout. You can choose the layout style and sorting group from portfolio grid shortcode option

Please do check the theme demo, where we have employed this technique to sort the portfolios in many differnt layouts.

Portfolio Post Meta Options

The portfolio metaboxes are grouped in three differnt segments Portfolio Thumbnail Image , Portfolio Item Options and Standalone Project Page Options. You must upload a Thumbnail image otherwise the item will be omitted from the portfolio grid.

Portfolio Thumbnail Image

Thumbnail Image: Upload your thumbnail image for the the portfolio item. If you are using square layouts try to upload images with same resolution.

Portfolio Item Options

Thumbnail Click Action: Set the user experience while clicking a portfolio item. You can set three differnt mods for a portfolio item. Lightbox image, lightbox video and standalone project page.

Lightbox Image (based on the Click Action):

To show a single image on lightbox popup.


Lightbox Video (based on the Click Action):

To show a single video from youtube/vimeo on lightbox popup. Please add video id only. It will automatically decide between youtube/vimeo id to show



Posts

You can display your blog items through 'Posts'. Its a default wordpress feature. To show posts as in in the picture below, please use 'Blog Posts Grid' shortcode from VC > Krome Tab

Krome supports Visual Composer, install Visual Composer provided with this downloadpack (Auto install option available with theme through TGM Plugin Activation. Follow the instructions from Admin notice bar after theme install). We have created an extension for the Visual Composer with theme specific componenets. You can see them inside 'Krome' tab on VC builder elements.



You need to adjust some of the default styles for Visual Composer. Go to Dashboard => Visual Composer => General Settings => Role Manager (Tab)




Shortcodes Explained


Super Heading

Mega font size heading text.


Promo Paragraph

Custom themed paragraph text with color chooser.


Thin Bold Heading

You can choose thin and bold parts of a paragraph (as in pic above) using this shortcode.


Main Heading

Basic heading with bold and light font options and a text color chooser


Image Slider

Image slider with dot navigation


Image Carousel

Image slider with right and left arrows navigation

Settings are excatly same as in 'Image Slider'


Status Counters

Incrementing numeric animation status counter. Numbers will animate into the view while scrolling.


Testimonials

Testimonials carousel with two column or three column layout with alternate background colors. You can choose 'Black and Silver' or 'Black and White' background color combos


Blockquote

A simple blockquote with thin text and bold sub text. This shortcode is also used as section headings in various situations through out the theme demo


Project Info Card

A small block of text with heading, description and URL field. Please refer the pic above

Settings are self explonatory


Skills Bars

Animated skill bars. You can easily arrange them in any column layout.


Blog Posts Grid

This shortcode will show blog posts in a grid style as shown in following picture

See it in action

Parallax Showcase

Stack of parallax images with caption on hover.

Make suer that visual composer row is in full width mode. Refer the picture below

See it in action

Service Item

Its a composition layout with a heading , icon and a block of text. In our demo we use SVG icons, you can either use SVG or PNG.


Team Members Carousel

Team members displayed in carousel format. It has member photo, short bio and three social icons option


Google Map

Add Lattitude and longitude of your location and it will display place marker on google map with the specified location in center

1. See it in action
2. Get lattitude and longitude of your place

Contact Form

A simple ajax based contact form which sends messages from customers to your email id

See it in action

Portfolio - Grid

Its a dedicated portfolio theme and you can set many differnt portfolio layouts with this single shortcode and portfolio post type. The setup is simple and all you want to take care of is about grouping the type of posts to respective 'Categories' and 'Groups'. The concept of 'Groups'; an extra taxonomy for portfolio posts has been explained already on the post type section.

We have included eight types of portfolio layouts to choose from

  • 2 Column Spaced
  • 3 Column Spaced
  • 4 Column Spaced
  • 6 Column Spaced
  • 2 Column Fluid
  • 3 Column Fluid
  • 4 Column Fluid
  • 6 Column Fluid

Please do upload thumbnail images according to the layout you are choosing. For square layouts uploading images with same height and width is mandatory otherwise you may end up in creating pretty weired layout


Please do set Visual Composer row to Full width (no padding) to display the grid full fluid layout


Fullscreen Background Video

Fullscreen background video with heading and button on overlay. See it in action

It will only work with 'Video Background' page template. This shortcode cannot be used in single post page and portfolio standalone pages


Krome Button

Button Shaped Link. There are three variants choose from, the theme colored, white and the hard black.





/*Text Alignments*/

.text-left
.text-center
.text-right


/*Padding Adjustments*/

.pad-top
.pad-bottom

.pad-top-half
.pad-bottom-half

.pad-top-quarter
.pad-bottom-quarter

.inner-pad

You can use this classes on builder elements with Custom CSS attribute.

We have tried to cover all basic stuffs needed for you to quickly customize this template. That is all for the initial setup and basic customization. If you need help, we will be always in your reach though our support forum. We appreciate you follow us on twitter, we are @designovastudio on twitter. We hope you have found this quick tutorial as helpful. If you like our works, please rate our themes at themeforest (theme’s page). This will help us to produce more awesome themes. http://www.themeforest.net/user/designova. Please visit our fb page for more new stuffs and freebies.