Flatness

Documentation


Preview Profile Support

Overview

Flatness is Wordpress theme designed for a personal blog. If you are bloggers, travelers, instagram lovers or you have story to tell, Flatness Theme can be what you are looking for. Flatness giving you the power to customize your blog with stunning visual editor and with a huge options. Popular features such as a full-width Instagram footer area, featured area slider and carousel. Unique navigation style with drop lines. Delightful parallax effect. Flatness clean, delightful design is guaranteed to wow effect!

Template Layout

All template files have fixed structure consisting of preloader, navbar, content, social block, Instagram block and footer as shown below:



Zip archive contains following files and folders:
- flatness.zip         -> zip file with template inside
- flatness-child.zip   -> zip file with child theme
- Documentation        -> Contains this document and other plugin documentations
- Plugins              -> Available template plugins
- Demo Data            -> Demo Data with all data from demo page - http://wp.nkdev.info/flatness/
- flatness             -> Unpacked template

Install

Download the latest version from Themeforest.

Install Theme

  1. Log into your WordPress blog.
  2. Look down the left hand column for "Appearance" -> "Themes" and then click on the button "Add new".
  3. In the "Add new" page, click “Upload Theme” on top
  4. In the "Upload" page, click “Browse” to browse for the theme installation file in donwloaded package flatness.zip. Click "Install Now".
  5. After installed successfully, click "Activate" to make the Applay active

Install Plugins

  1. Look down the left hand column for "Appearance" -> "Install Plugins"
  2. In the "Install Plugins" page, select plugins.
  3. After selecting plugins click Install. Plugins will be installed and activated.

Import Demo Data

  1. Look down the left hand column for "Tools" -> "Import"
  2. Click on "Wordpress".
  3. Install plugin.
  4. Select file from theme archive /Demo Data/content.xml.

Menu Setup

There are 4 menu locations: Pimary, Primary Right, Footer Social Links and Footer Menu.




Widgets

There is no predefined widgets, but you can use default Wordpress text widget and nK shortcodes inside.

About Me

[nk_image src="33" size="500x500_crop" link="http://wp.nkdev.info/flatness/about-me/" style="circle" effect="1" icon="" class="mw-200 mauto"]

<div class="h2 text-center">Amanda Ray</div>

<p class="mb-0 text-center">Shall Together blessed. Also thing, the upon Created fourth. Rule beginning. Our behold over.</p>

Social Networking

<ul class="social-icons">
    <li>
        <a href="#" target="_blank"><i class="fa fa-instagram"></i></a>
    </li>
    <li>
        <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
    </li>
    <li>
        <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
    </li>
    <li>
        <a href="#" target="_blank"><i class="fa fa-pinterest"></i></a>
    </li>
</ul>

Recent Posts

[nk_posts style="widget" post_type="post" count="3"]

Instagram

[nk_instagram class="small-gutter" style="4" images_count="6" user_id="708572263" get_type="user"]

Facebook

Used Facebook Widget - https://ru.wordpress.org/plugins/facebook-pagelike-widget/

Theme Options

Flatness uses default Wordpress customizer with live preview.

To open theme options go to "Appearance" -> "Customize"

Options Panel

General

  • Site Title - title tag text.
  • Tagline - text after title text.
  • Site Icon - icon will be show in browser address bar / tabs/ bookmark.
  • Smooth Scroll - Enable smooth scroll.
  • Show Preloader - Enable preloader

Typography

  • Body Text - text style for all text on site (google font, font size, line height, letter spacing).
  • Display Headings - style for display headings (google font, line height, letter spacing).
  • Display-1 Font Size - font size for Display-1.
  • Display-2 Font Size - font size for Display-2.
  • Display-3 Font Size - font size for Display-3.
  • Display-4 Font Size - font size for Display-4.
  • Display-5 Font Size - font size for Display-5.
  • Display-6 Font Size - font size for Display-6.

Style

  • Style:
    • Dark
    • Light
    • Custom - custom color scheme:
      • Main Color
      • Back Color 1
      • Back Color 2
      • Back Color 3
      • Back Color 4
      • Text Color
      • Text Color Mute
      • Primary Color
      • Success Color
      • Info Color
      • Warning Color
      • Danger Color
      • Gray Base Color
      • Gray Darker Color
      • Gray Dark Color
      • Gray Color
      • Gray Light Color
      • Gray Lighter Color
  • Body Background - pages background color or image

Navbar

  • Logo - image for logo in navbar
  • Fixed - fixed navbar position
  • Small Size - small navbar
  • Collapsed - collapsed navbar

Layouts

You can set different layouts for some pages.

  • Sticky Sidebar - sticky sidebar for all pages
  • Archive - layout for archive pages
  • Single Post - layout for single posts
  • Search Page - layout for search page
  • Author Page - layout for author page
  • 404 page - layout for 404 page

Posts

  • Settings
    • Posts Divider - posts divider image.
    • Show Author Info in Single Post
    • Show Related in Single Post

  • Share
    • Show Share Block
    • Title - title for share block.
    • Show Like
    • Show Twitter
    • Show Facebook
    • Show Google+
    • Show Pinterest
    • Show LinkedIn
    • Show Vkontakte

Footer

  • Instagram
    • Show Instagram Section
    • Get Type - get type for instagram images
    • Title - title on instagram block
    • Text - text under title

  • Menu
    • Show Menu Section
    • Logo - logo image in footer menu
    • Show Scroll Top - show scroll top button

  • Copyright
    • Show Copyright Section
    • Copyright Text - copyright text

Instagram

  • Instagram Client ID - client ID for all instagram widgets/shortcodes on the site.

Post Formats

With Flatness you can use different post formats: Standard, Aside, Image, Gallery, Video, Audio, Quote, Link.
For each post you can set custom layout.

Standard

Aside

Image

Gallery

Video

Audio

Quote

Link

Shortcodes

I highly recommend you to use Visual Composer for building pages. All shortcodes you can configure without this documentation.

Posts Shortcode

[nk_posts style="classic" grid_cols="3" post_type="post" ids="" exclude_ids="" custom_query="" count="3" pagination="false" class=""]
  • style: classic, grid, grid_2, list, list_2, parallax, widget
  • grid_cols: columns for grid style
  • slider_small: small slider
  • post_type: post type or "ids", "custom_query"
  • ids: list with post id's
  • exclude_ids: stop show post with id's
  • custom_query: custom query
  • count: maximum posts count
  • pagination: show pagination
  • class: custom classes
Posts shortcodes you can find on the following pages:

Classic posts - http://wp.nkdev.info/flatness/posts-classic-right-sidebar/
Grid posts - http://wp.nkdev.info/flatness/posts-grid-full-width/
List posts -
Parallax posts - http://wp.nkdev.info/flatness/posts-parallax/

Posts Carousel Shortcode

[nk_posts_carousel style="carousel" carousel_size="3" slider_small="false" interval="0" post_type="post" ids="" exclude_ids="" custom_query="" count="5" class=""]
  • style: carousel, slider
  • carousel_size: number of carousel slides in view
  • slider_small: small slider
  • interval: autoplay time in ms
  • post_type: post type or "ids", "custom_query"
  • ids: list with post id's
  • exclude_ids: stop show post with id's
  • custom_query: custom query
  • count: maximum posts count
  • class: custom classes


Button Shortcode

[nk_button href="http://nkdev.info" target="_self" size="lg" color="success" full_width="false" active="false" rounded="false" icon_before="fa fa-html5" icon_after="" class=""]Youplay[/nk_button]
  • href: link on button click
  • target: target for link
  • size: lg, md, sm, xs
  • color: default, primary, success, info, warning, danger
  • full_width: enable button-block style
  • active: enable active state
  • rounded: enable rounded button
  • icon_before: class for icons before button text
  • icon_after: class for icons after button text
  • class: custom classes

Tabs Shortcode

[nk_tabs class=""]
   [nk_tab title="Home" active="true"]...[/nk_tab]
   [nk_tab title="Other"]...[/nk_tab]
[/nk_tabs]
  • title: title for tabs
  • active: set active for one of tabs
  • class: custom classes

Accordion Shortcode

[nk_accordion class=""]
    [nk_accordion_tab title="Home" active="true"]...[/nk_accordion_tab]
    [nk_accordion_tab title="Other"]...[/nk_accordion_tab]
[/nk_accordion]
  • title: title for panels
  • active: set active for one of panels
  • class: custom classes

Carousel Shortcode

[nk_carousel interval="4000" size="1" class=""]
   [nk_carousel_item class=""]Item Content[/nk_carousel_item]
   [nk_carousel_item class=""]Item Content[/nk_carousel_item]
[/nk_carousel]
  • interval: interval for autoplay in ms
  • size: number of items in view
  • class: custom classes

Features Shortcode

[nk_features icon="fa fa-css3" counter="76" title="nK" description="Description" class=""]
  • icon: class for icon
  • counter: value for counter
  • title: title text
  • description: description text
  • class: custom classes


Image Shortcode

[nk_image src="14" size="full" style="default" link="" effect="true" icon="fa fa-css3" class=""]
  • src: add link or ID of wordpress media image
  • size: image size
  • style: default, rounded, circle
  • link: link on click
  • effect: hover effect
  • icon: icon class to show on hover
  • class: custom classes

Gallery Shortcode

[nk_gallery img_src="14,17" style="1" gutter="false" class=""]
  • img_src: images in gallery
  • style: 1, 2, 3, 4
    • 1 - 3 columns
    • 2 - 4 columns
    • 3 - Slider
    • 4 - Slider small (for grid usage)
  • gutter: spacing between images
  • class: custom classes

Heading Shortcode

[nk_heading style="h2" display="2" class=""]My Text[/nk_heading]
  • style: from h1 to h6
  • display: from 1 to 6
  • class: custom classes

Progress Bar Shortcode

[nk_progress percent="40" color="success" striped="true" small="false" class=""]40% Complete (success)[/nk_progress]
  • percent: progress width from 0 to 100
  • color: primary, success, info, warning, danger
  • stripped: stripped style
  • small: small style
  • class: custom classes

Label Shortcode

[nk_label color="primary" text="Label" class=""]
  • color: primary, success, info, warning, danger
  • text: label text
  • class: custom classes

Alert Shortcode

[nk_alert color="primary" dismissible="false" class=""]Well done! You successfully read this important alert message.[/nk_alert]
  • color: primary, success, info, warning, danger
  • class: custom classes

Instagram Shortcode

[nk_instagram style="1" client_id="" get_type="user" user_id="" tag="" images_count="6" class=""]
  • style: 1, 2, 3, 4
    • 1 - 6 in row
    • 2 - 6 in row + gutter
    • 3 - 3 in row
    • 4 - 3 in row + gutter
  • client_id: Leave the field blank if you want to use Client ID from theme Customize options.
    To get instagram to work in your site you need a valid client id from Instagram's API. You can easily register for one on Instagram's website.

    If you need help with that step, try Googling "How to get an Instagram client ID"
  • get_type: user, popular, tagged
  • user_id: used for "get_type" == user. Note that User ID corresponds to your Instagram account ID (eg: 4385108), not your username.

    If you do not know your account ID, Google "What is my Instagram account ID?". There are several free tools available online that will look it up for you.
  • tag: used for "get_type" == tagged
  • images_count: count for instagram image
  • class: custom classes

Section Shortcode

[nk_section style="1" img_src="13", parallax="true"]My Text[/nk_section]
  • style: 1, 2
  • img_src: background image
  • parallax: parallax background image
  • class: custom classes

Sidebar Shortcode

[nk_sidebar name=""]
  • name: sidebar name

Credits

Plugins

Images

All images from https://pexels.com.

THIS IMAGES NOT INCLUDED IN THEME PACKAGE! Used only in demo pages.