“Kreativo Wordpress Theme” Documentation by “HeroWP” v1.0


Kreativo Wordpress Theme

Created: 25/09/2013
By: HeroWP - www.herowp.com
Email: admin@herowp.com

Thank you for purchasing Kreativo theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us HERE using the contact form, or by posting a question on the support forum. Thanks so much!




Note: If you're a little bit lazy, and want to replicate the live demo, we have included a button to Appearance -> Theme Options -> Importer.

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. Installation
  4. Setting up Homepage
  5. Theme Options
  6. Custom Posts / Pages
  7. Setting up menu
  8. Slides
  9. Shortcodes
  10. Footer Widgets
  11. Templates
  12. Sources and Credits

HTML Structure - top

This theme is a fixed responsive layout. All of the information within the main content area is nested within a div with an id of "main".


<header id="branding">
    <div class="header-content">
        <div class="logo">
            ......
        </div>
        <div class="top-menu">
            ......
        </div>
    </div>
</header>

<div id="main">
	<div class="center-full">
		<div class="center">
		.....
        	</div>
	</div>
</div>

<footer id="colophon">
.....
</footer>	
        

CSS Files - top

I'm using two CSS files in this theme. The first one is based on bootstrap.css .

The second file contains all of the specific stylings for the page. At the end of the file is the responsive CSS. The file is separated into sections using:

	/* Header Styles */

	some code

	/* Content Styles */
	
	some code
	
	/* Menu Styles */
	
	some code
	
	/* Footer Styles */
	
	some code
	
	etc, etc. 

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


Installation - top

Theme can be installed in 2 ways:

1) By FTP

2) Using Wordpress


Required Plugins - top

After activating the theme you will receive the notice, that you need to install Revolution Slider and Contact Form Plugins

Check all the plugins, and click on Install (don't worry about Activating them, they will Activate on their own after this step)


Revolution Sider - top

If you need additional help please visit the official page of this plugin!


Setting up homepage - top

In order to make your homepage look like in the demo, you just need to create a slider via Revolution Slider, and copy it's shortcode to Appearance -> Theme Options -> Homepage Options -> Enter revolution slider shortcode.

Also make sure you check to show/display services items, and portfolio items. Start adding portfolio items and services from the left menu and they will appear on homepage.


Setting up contact page - top

  • First create a contact form, from Contact menu(left menu in wordpress administration) and copy the code bellow. After finishing copy it's shortcode.

  • <p>[text* your-name placeholder "Your name (required)"] </p>
    <p>[email* your-email placeholder "Your email (required)"] </p>
    <p>[text your-subject placeholder "Subject"] </p>
    <p>[textarea your-message placeholder "Your message"] </p>
    <p>[submit "Send Message"]</p>
    		  

  • Navigate to Pages -> Add New -> (Create a page - select the Contact template), and paste the contact shortcode there.

  • Theme Options - top

    You can find theme options in WP admin : Appearance->Theme Options

    First you can click 'Options Reset' button to get the values from psd files.

    There are a lot of options there, and you can customize the theme:

    1. Homepage Options
    2. Blog Options
    3. Portfolio Options
    4. Team Options
    5. Services Options
    6. General Options
    7. Styling Options
    8. Features
    9. Contact Settings

    Custom Posts / Pages - top

    There are 3 custom posts / pages options:

    1. Portfolio(you can add a page that list portfolio items by creating a page using portfolio template (Pages -> Add New -> on the right side choose Portfolio Page Template ). Also support categories.)

      The portfolio items custom fields :
      Portfolio Short Description, Portfolio Bottom Text, Visit button Text, Visit button URL.

    2. Team(you can add a page that list team items by creating a page using team template.)(Pages -> Add New -> on the right side choose Team Page Template )

      The Team member custom fields :
      Function, Skills, Facebook Address, Twitter Address, Vimeo Address, LinkedIn Address, Quote, Quote Author.

    3. Services(you can list them on homepage if you want! from Appereance -> Theme options)

      The Services Item custom fields :
      Subtitle, Description.

    All custom posts have a title, a content and a featured image like a normal wordpress post.


    In order to setup your menu

    1. Login to your Worpdress Administration, navigate to Appearance -> Menus
    2. Click on "Create a new menu", enter menu name and click Create.
    3. From the left side, check items that you need, and click Add to Menu.
    4. You can edit each menu label/description by expanding it's tab.
    5. Give it a name, save it, and check primary menu at the bottom.


    Shortcodes - top

    You can add the following shortcodes into the content:

    Columns:

    // 2 Columns layout
    [open-span-two]
    .....
    [close-span]
            
    // 3 Columns layout
    [open-span-three]
    .....
    [close-span]
    
    // 4 Columns layout
    [open-span-four]
    .....
    [close-span]
    
    // 5 Columns layout
    [open-span-five]
    .....
    [close-span]
    
    for the first item you need to add  status="first" to ignore margin left 
    
    [open-span-three status="first"]
    .....
    [close-span]
            

    Alerts & Info Boxes:

    [alert-info]
    ......
    [/alert-info]
    
    [alert-success]
    .....
    [/alert-success]
    
    [alert-error]
    .....
    [/alert-error]
    
    [alert-alarm]
    .....
    [/alert-alarm]
    
    [alert-block]
    .....
    [/alert-block]
            

    Acordion:

    [acordion]
    
        [acordion-item title="I am an accordion slide" name="ac1" status="in"]
        ......
        [/acordion-item]
        
        [acordion-item title="Looks like I’m the last one" name="ac3"]
        ......
        [/acordion-item]
    
    [/acordion]
    
    status="in" is for the active item
    name="" should be different for all items.
    		

    Tabs:

    [tabs-navigation]
    
        [tabstitle name="item1" status="active"]...[/tabstitle]
        
        [tabstitle name="item2"]...[/tabstitle]
        
        [tabstitle name="item3"]...[/tabstitle]
    
    [/tabs-navigation]
    
    [tabs-content]
    
        [tabs-item name="item1" status="active"]
        .....
        [/tabs-item]
        
        [tabs-item name="item2"]
        .....
        [/tabs-item]
        
        [tabs-item name="item3"]
        .....
        [/tabs-item]
    
    [/tabs-content]
    
    status="active" is for the active item
    name="" should be different for all items and the same in relation titles<->items.
    		

    Buttons:

    [button to="#" color="#ffde00" textcolor="#111111" hover="#ffffff"]yellow[/button]
    
    to="#" - url
    color="#ffde00" - button color
    textcolor="#111111" - text color
    hover="#ffffff" - button hover
            

    Pricing Plans:

    [pricing-plans]
    
        [open-span-four status="first"]
            [pricing-item price="9.75 $" time="month" title="Tiny Bear" to="#" btttext="buy now"]
                .....
            [/pricing-item]
        [close-span]
        
        [open-span-four]
            [pricing-item price="9.75 $" time="month" title="Tiny Bear" to="#" btttext="buy now"]
                .....
            [/pricing-item]
        [close-span]
        
        [open-span-four]
            [pricing-item price="9.75 $" time="month" title="Tiny Bear" to="#" btttext="buy now"]
                .....
            [/pricing-item]
        [close-span]
        
        [open-span-four]
            [pricing-item price="9.75 $" time="month" title="Tiny Bear" to="#" btttext="buy now"]
                .....
            [/pricing-item]
        [close-span]
    
    [/pricing-plans]
    
    price="9.75 $" - price
    time="month" - price / time
    title="Tiny Bear" - title
    to="#" -url
    btttext="buy now" - button text
            

    Footer widgets - top

    In order to add footer widgets

  • Login to your Worpdress Administration, navigate to Appearance -> Widgets and drag the desired widgets to footer widgets

  • Templates - top

    There are 5 templates:


    @HeroWP

    Go To Table of Contents