Installation

Getting Started

To install "Norma" theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

Update WordPress: To ensure a positive user experience, we highly recommend you update your WordPress to the latest stable version 3.5+. This will help to ensure that you are able to utilize all of the latest features of WordPress.

Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find norma.zip file.

You can install the theme in two ways:

  • via FTP: Extract norma.zip file and upload the extracted folder to /wp-content/themes/ folder on your server.
  • via WordPress:
    1. Login to admin panel.
    2. Go to Appearance - Themes and click on the tab Install Themes. Choose upload.
    3. Click on Browse..., select the downloaded theme file and click in Install Now.
    4. After successfull installation click on Activate or go to Appearance - Themes and click on Activate to activate the newly installed theme.
    5. Next you will see a new menu item Appearance - Theme Options.
      IMPORTANT: For first time activation, you need to setup options and hit Save All Changes under menu Appearance - Theme Options.

Theme Update

IMPORTANT: Backup your old theme folder. Download it to your computer locally.

You can upgrade the theme in a couple of ways:

Overwrite the entire theme folder

Extract norma.zip file and upload the extracted folder via FTP to /wp-content/themes/ folder on your server.

Re-upload via WordPress admin panel

Navigate to Appereance - Themes page. Activate a different theme. Delete previous version of Norma and re-upload the norma.zip file (refer to basic installation) downloaded from package.

What you start from

Now, you have installed and activated the theme 'Norma'. What's next?

The first thing you need to do is configure the parametres required, in the menu Appearance - Theme Options. There are quite a lot of them, but almost all of the parameters have default settings that will suit most of the users. Therefore, you can start with uploading a logo and favicon for your website, entering your personal data and saving the settings. All other parameters can be set up later on.

Main Slider

Now, let's set up the main theme's slider.

Build-in Theme Slider

Built-in theme slider allows you to display Featured images from the posts of the given category. You can select a category and specify the number of the posts displayed.

 

Revolution Slider

In the folder with the theme there is an archive with an extremely powerful and beautiful plugin - Revolution Slider. To install it, please, select Plugins - Add new - Upload, click the Browse button and select the file called revslider.zip. After installation, please, activate the plugin.

In the admin panel's menu an item Revolution Slider will show up, due to which you can create an unlimited number of sliders, and then set any of them as the main slider in the menu Appearance - Theme Options - Slider. To do this, set Revolution slider in the field Slider Engine, and specify the name of the slider in the Revolution Slider alias field.

Homepage

Now, let's proceed to creating our home page. Yes, you got me correctly - creating. You can create as many variants of the main page for your website, as your imagination allows you.

The basic building brick to create the homepage is a shortcode "Blogger".

We are offering you five ways to design a Homepage (like on our demo server). If you like, you may continue designing, and create a lot of your own variants.

Homepage Style 1

The picture below demonstrates the variant of the page we are aiming at:

The algorithm of our actions would be as follows:

  1. Select Pages - Add New and create a new page.
  2. Specify a name for it (e.g. Homepage Style 1)
  3. Set the parameters for page display in the Page Options secton:


    IMPORTANT: Display parameters of the slider are contained on your website's settings. If you want to change them for this page - simply select the desired values ​​in the corresponding fields (instead of Inherit).
  4. Now, we are desinging the body of the page. Let's take a more attentive look at this proccess:
    • The upper part of the page is occupied by the announcement block that contains four posts:



      To receive this block we insert the following shortcode:

      [blogger cat='services' count='4' descr='200' style='bubble_right' border='0' slider='0' order='desc']
    • Obviously, in your case you must specify slug or id of any of your category instead the category 'services'.

      IMPORTANT: The icons next to the name of categories are assigned to each post individually when creating/editing the post in the section Post Options.
    • After that, the carousel is coming, which displays several posts from the chosen category, and then - testimonial block.



      Here, 3/4 of the width of the window is occupied by the carousel and 1/4 - by testimonials. To get such layout, let's insert the following code:

      [columns count='4' top='40']

      [column_item span='3']
      [title type='2' style='underline']Recent works[/title]
      [blogger cat='portfolio' count='9' descr='0' style='image_medium' border='0' slider='3']
      [/column_item]

      [column_item]
      [title type='2' style='underline']Testimonials[/title]
      [testimonials user='john' top='24']Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad minim veniam[/testimonials]
      [/column_item]

      [/columns]

      We are going to explain a little bit the code shown above:

      • Container "[columns] ... [/ columns]" adds to the page the number of columns specified in the parameter "count". The parameter "top" indents the specified number of pixels from the overlying block.
      • The columns themselves are added with "[columns_item]Column content[/column_item]". Parameter "span" indicates how may columns (in width) takes the column.
      • Shortcode "[title]" add the title of the specified level (from 1 to 6) and underlines it.
      • And again "[blogger]" (this is not the last time you meet it)! Now, it displays nine posts from the category "portfolio" (you need to specify the id or a slug of any of your category) with pictures showing them in a carousel way in 3 posts
      • In the second column, we inserted the shortcode "[testimonials]" with the statement of one of the authors of the blog. One could also add the statement of a stranger indicating his data (see shortcode "testimonials").
    • The next area of our website is even more interesting (and a bit more complicated):



      Here, a half of the width of the window is occupied by the section with tabs that display posts by two from the specified categories. Then, 1/4 of the width is occupied by the accordion that has three elements, and the last quarter of the screen is taken by the block with a title and a picture. For this layout, insert the following code fragment:

      [columns count='4' top='40']

      [column_item span='2']

      [tabs tab_names='From the blog|Latest news' style='3' initial='1']

      [tab]
      [blogger cat='media' count='2' dir='vertical' descr='200' style='image_small']
      [/tab]

      [tab]
      [blogger cat='design' count='2' dir='vertical' descr='200' style='image_small']
      [/tab]

      [/tabs]

      [/column_item]

      [column_item]

      [title type='2' style='underline' bottom='16']About Us[/title]

      [accordion initial='1']
      [accordion_item title='Who we are']Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua.[/accordion_item]
      [accordion_item title='What we do']Item inner text here. Item inner text here. Item inner text here. Item inner text here[/accordion_item]
      [accordion_item title='Why choose us']Item inner text here. Item inner text here. Item inner text here. Item inner text here.[/accordion_item]
      [/accordion]

      [/column_item]

      [column_item]
      [title type='2' style='underline' bottom='14']Retina ready[/title]
      <img class="alignnone size-full wp-image-5" alt="retina_ready" src="http://yoursite/wp-content/uploads/2013/08/retina_ready.png" width="271" height="218" />
      [/column_item]

      [/columns]

      IMPORTANT: In the fourth column, you can insert an image by pressing the "Add Media" button (as in this example) or by using shortcode [image src="http://yoursite/wp-content/uploads/2013/08/retina_ready.png" width="271" height="218"]

    • That's all! Are you surprised? Turns out, designing a beautiful and modern homepage can be simple and at the same time an exhilarating experience!
  5. The only thing left is go to menu Settings - Reading and assign the page you have just created as Front page:



  6. Just in case, here is the complete code of the page:

    [blogger cat='services' count='4' descr='200' style='bubble_right' border='0' slider='0' order='desc']

    [columns count='4' top='40']

    [column_item span='3']
    [title type='2' style='underline']Recent works[/title]
    [blogger cat='portfolio' count='9' descr='0' style='image_medium' border='0' slider='3']
    [/column_item]

    [column_item]
    [title type='2' style='underline']Testimonials[/title]
    [testimonials user='john' top='24']Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad minim veniam[/testimonials]
    [/column_item]

    [/columns]

    [columns count='4' top='40']

    [column_item span='2']

    [tabs tab_names='From the blog|Latest news' style='3' initial='1']

    [tab]
    [blogger cat='media' count='2' dir='vertical' descr='200' style='image_small']
    [/tab]

    [tab]
    [blogger cat='design' count='2' dir='vertical' descr='200' style='image_small']
    [/tab]

    [/tabs]

    [/column_item]

    [column_item]

    [title type='2' style='underline' bottom='16']About Us[/title]

    [accordion initial='1']
    [accordion_item title='Who we are']Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua.[/accordion_item]
    [accordion_item title='What we do']Item inner text here. Item inner text here. Item inner text here. Item inner text here[/accordion_item]
    [accordion_item title='Why choose us']Item inner text here. Item inner text here. Item inner text here. Item inner text here.[/accordion_item]
    [/accordion]

    [/column_item]

    [column_item]
    [title type='2' style='underline' bottom='14']Retina ready[/title]
    <img class="alignnone size-full wp-image-5" alt="retina_ready" src="http://yoursite/wp-content/uploads/2013/08/retina_ready.png" width="271" height="218" />
    [/column_item]

    [/columns]

Homepage Style 2

We won't comment the other possible variants in such details. We will simply provide the image and the code that generates it.

IMPORTANT: Remember that for each variant of Homepage you have to create a separate page and set up its behavior in the Page Options Page Options (see the description of creation of Homepage Style 1).

The picture below demonstrates the variant of the page we are aiming at:

This page is generated with the following code:

[blogger cat='services' count='3' descr='200' style='bubble_down' border='0' slider='0' order='desc']

[title type='2' style='underline' top='40']Recent works[/title]

[blogger cat='portfolio' count='8' descr='0' style='image_medium' border='0' slider='4']

[columns count='4' top='40']

[column_item span='2']
[title type='2' style='underline']Latest news[/title]
[blogger cat='media' count='2' dir='vertical' descr='200' style='date']
[/column_item]

[column_item]
[title type='2' style='underline']About Us[/title]

[accordion initial='1' top='6']
[accordion_item title='Who we are']Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua.[/accordion_item]
[accordion_item title='What we do']Item inner text here. Item inner text here. Item inner text here. Item inner text here[/accordion_item]
[accordion_item title='Why choose us']Item inner text here. Item inner text here. Item inner text here. Item inner text here.[/accordion_item]
[/accordion]

[/column_item]

[column_item]

[title type='2' style='underline']Testimonials[/title]
[testimonials user='john' top='4']Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad minim veniam[/testimonials]
[/column_item]

[/columns]

Homepage Style 3

The picture below demonstrates the variant of the page we are aiming at:

This page is generated with the following code:

[title type='2' style='underline']From the blog[/title]

[blogger cat='media' count='4' descr='200' style='image_medium']

[columns count='4' top='40']

[column_item span='3']
[title type='2' style='underline']Services[/title]
[blogger cat='services' count='3' descr='200' style='bubble_right' order='asc']
[blogger cat='services' count='3' offset='3' descr='200' style='bubble_right' order='asc' top='40']
[/column_item]

[column_item]
[title type='2' style='underline']Testimonials[/title]
[testimonials user='jessica' top='4']Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad minim veniam[/testimonials]
[/column_item]

[/columns]

[section style='border:1px solid #e5e5e5; padding:20px;' top='40' bottom='20']

[button style='gray' size='large' link='http://themeforest.net/user/wpspace/portfolio' align='right' top='6']BUY NOW![/button]
[title type='1' style='' weight='500' top='0' bottom='0']NORMA IS INCREDIBLY RESPONSIVE, WITH A REFRESHINGLY CLEAN DESIGN![/title]
[columns count='1' top='6' bottom='0'][column_item]And it has some awesome features, unlimited colors, advanced theme options and so much more![/column_item][/columns]

[/section]

Homepage Style 4

The picture below demonstrates the variant of the page we are aiming at:

This page is generated with the following code:

[blogger cat='services' count='4' descr='200' style='bubble_right']

[title type='2' style='underline' top='40']Recent works[/title]
[blogger cat='portfolio' count='9' descr='0' style='image_large' slider='3']

[columns count='3' top='40']

[column_item]
[title type='2' style='underline']Latest news[/title]
[blogger cat='media' count='2' dir='vertical' descr='200' style='date']
[/column_item]

[column_item]
[title type='2' style='underline']Services[/title]
[blogger cat='services' count='3' descr='200' style='accordion' order='asc']
[/column_item]

[column_item]
[tabs tab_names='About Us|Testimonials' style='3' initial='1']

[tab]
[image src='http://yousite/wp-content/uploads/2013/08/photo-1.png' align='left']
Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua enim minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur.
[/tab]
[tab]
[testimonials style='flat' user='john' top='4' bottom='16']Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad minim veniam[/testimonials]
[/tab]
[/tabs]
[/column_item]

[/columns]

Homepage Style 5

The picture below demonstrates the variant of the page we are aiming at:

This page is generated with the following code:

[blogger cat='services' count='4' descr='200' style='bubble_down' border='1']

[title type='2' style='underline' top='40']Recent works[/title]
[blogger cat='portfolio' count='9' descr='0' style='image_large' border='0' slider='3']

[columns count='4' top='40']

[column_item span='3']
[title type='2' style='underline']From the blog[/title]
[blogger id='from_blog' cat='media' count='7' descr='0' style='image_medium' border='0' slider='3']
[/column_item]

[column_item]
[title type='2' style='underline']Testimonials[/title]
[testimonials user='john' top='4']Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad minim veniam[/testimonials]
[/column_item]

[/columns]

We have examined five different layouts of homepage. And this is only the beginning! Get creative,experiment, amaze! And your website will not look like thousands of others!

Blog

Now, you have finished up the appearance of the homepage of your website. It is time to start a blog.

To use the blog's functionality in our theme, you need create the blog stream page. To do this, you need to:

  • Go to Pages under the WordPress menu and then click on Add New.
  • Put your Title as usual ("Blog streampage" for example)
  • Choose "Blog streampage" as the page's template

  • Publish this page.

Blog Items

Now you can create blog posts.

  • Go to Posts under the WordPress menu and then click on Add New.
  • Put your Title as usual.
  • Put Content if needed.
  • Select one or more categories to the Categories.

  • Select desired Post Format.

    1. Standart - just set the featured image or without featured image.
    2. Gallery - add a gallery in the post with standard means of Wordpress (with Add Media button located above the editor). In the theme settings, you can specify whether you want to replace the original gallery with the built-in theme slider.
    3. Video - Add the YouTube or Vimeo video with the shortcode[video]
    4. Audio - Add the Audio with the shortcode[audio]
    5. Quote - Add text of the quotes, and after it - a link to the original source.
    6. Link - Add a link to the body of the post
  • For every post item it is needed to upload an image and to set it as a featured image. Click Set featured image on the right in the Featured Image section.

  • Click Select Files button and select image to upload (the full size image). WordPress will crop the image, depending on which portfolio template you will use.

  • After image was uploaded you need to set this image as featured. Click Use as featured image.

  • IMPORTANT: In the Post Options section, you can flexibly customize the appearance and behavior of each of the post: select or hide the slider above the post, select and set sidebars and their position (or hide the unnecessary ones), set up the display of different parts of the page and the post (information about the author, related posts , a comment block and many more). There are default setting for each post that are specified in the category to which the post belongs. If the settings are not specified in category - then they are inherited from the overlying category. If there is no settings specified in any of the parental categories - the settings indicated in Appearance - Theme Options - Blog will be used.

  • Publish this post.

Theme Options

Now, let's talk about the theme's settings: Appearance - Theme Options. Here you will get full control over display and functionality of the web-site.

Some groups of the settings have been described above, in the sections dedicated to the Home Page, Slider and Blog.

Here we will consider the rest of the settings.

General

In this section you can set the following settings:

  • Main menu position - Do you want the main menu bar to "stick" to the top of the window and was always in the visibility when you scroll the screen?
  • Favicon - In this field you can upload the icon to your website.
  • Logo - In this field you can upload the logo to your website.
  • Image Dimensions - What dimensions will be used to display images on the pages: "Original" - precise dimensions of the image block are used; "Retina Ready" - the image twice bigger fits into the original block (for accurate display on Retina).
  • Responsive Layouts - Does your site haveto use different layouts for different devices or should it be displayed in full size everywhere?
  • Header "Call us" text - The text displayed in the "Call us" field in the header of the website.
  • Additional filters in admin panel - Wether to use extra filters for Post Format and Tags in admin panel when viewing the list of the blog posts.
  • Footer copyright - The text that is displayed at the bottom of the page

Colors and Backgrounds

In this section you can customize you theme

  • Show Theme customizer - Do I need to display for visitors the customization window to select the main color theme, and background settings (background pattern or image)
  • Theme font - The main theme font.
  • Theme color - The main color for the accented elements of the theme.
  • Body style - The way of page displaye - the full screen or boxed-version.IMPORTANT: The following settings are effective only if in Body style boxed is ticked
  • Background color -The background color for all pages of the theme
  • Background predefined pattern - One of the built-in theme images filling the background as tile (repeated both vertically and horizontally).
  • Background custom pattern - Here you can upload your own image filling the background as tile (repeated both vertically and horizontally).
  • Background predefined image - One of the built-in theme image used as a background (not repeated).
  • Background custom image - Here you can upload your own image to be used as a background (not repeated).
  • Background custom image position - Here you can select the position of the uploaded image.

Slider

And here you are setting the type and behavior of the slider.

  • Show Slider -Do you want to display a slider at the top of all pages? IMPORTANT: If you want to display the slider only on selected pages (for example, only on the Homepage) - set this field to "No", and in the settings of the page in which you want to display a slider, instead of the default "Inherit" select "Yes".
  • Slider Display - How should slider be displayed: Fullwidth - the full width of the window or Fixed width - the width of the text of the site.
  • Slider Engine - The type of the slider: Flex slider or Revolution slider. IMPORTANT: Revolution slider is available only if you have installed the plugin revslider.zip, located in the folder with the theme.
  • Revolution Slider Alias - Alias of the ​​slider, set up in the control panel of Revolution Slider.
  • FlexSlider: Category to show -Here you can select the category of posts which will be used to design the slider.
  • FlexSlider: Number posts or comma separated posts list - How many recent posts from the category will be used for to design a slider (select one number) or a make a comma-separated list of ID's of the posts you need.

Sidebars

Here you can add and remove sidebars. You will be able to onfigure the widgets for the newly created sidebars in the menu Appearance - Widgets

Blog

This section will let you to flexibly set up the appearence and behavior of the blog stream page and single pages.

IMPORTANT: You can override any settings of this section in the settings of the category (they will work with all posts of surrent categories and sub categories contained in it), as well as to set them individually for each page, and the post (in Post Options section for creating / editing a post (page).

Usually when creating / editing categories and / or posts you do not need to configure each of them! It would be very tedious. It is enough to once configure the display parametres of separate pages and blog in Appearance - Theme Options - Blog, and, and not to change the settnigs within categories (posts, pages) (in all fields, leave the default value - "Inherit").

And only in those categories (posts, pages) that should not look like others, you can change these settings.

General blog parameters
  • Exclude categories - In this list, you can mark the categories that should not be displayed in a blog stream page and in the list of categories (Widget Categories). This may be, for example, some service category.
  • Blog counters - Which counters to display on the blog stream page, in the widget and a shortcode: post review counter or comments counter .
  • Substitute standard Wordpress gallery -Do I need to replace the original Wordpress gallery in the body of the post with our slider?
  • Substitute audio tag and shortcode - Do I need to additionally edit tag <audio> and shortcode [audio] in the post body (used for audio files from the server soundclouds)
  • Substitute video tag and shortcode - Do I need to additionally edit tag <video> and shortcode [video]in the post body (used for audio files from the server youtube and vimeo)
Blog streampage parameters

Below is a set of parameters that affects the display of the blog stream page:

  • Blog style -Display style of blog stream page and single posts.
  • Blog mode - In what details to display the posts in the blog stream page: Short Blog mode - show only a brief summary of the post (Excerpt); Full Blog mode - show the full version of the post (of the part before tag "Read more")
  • Blog posts per page - The number of posts per page (overrides the same setting from Settings - Reading).
  • Use Isotope slider for portfolio - Should I use Isotope slider to display posts in the categories with the style "Portfolio"(apply for categories with a small number of posts) or display these categories similarly to blog stream page.
  • Show title&breadcrumbs area - Whether to display the area of ​​the page with the titles of the category (pages, post) and breadcrumbs:
  • Show main sidebar - Allows you to select the position of Main sidebar: left, right or hide (without sidebar)
  • Select main sidebar - Allows you to select a set of widgets to display in the Main sidebar on blog stredam page.
  • Show advertisement sidebar - Enable/Disable Advertisement sidebar
  • Select advertisement sidebar - Allows you to select a set of widgets for display in the area of Advertisement sidebar on the blog stream page under the list of posts.
  • Show footer sidebar - Enable/Disable Footer sidebar
  • Select footer sidebar - Allows you to select a set of widgets to display in the Footer sidebar on blog stream page (bottom of the page)
Single (detail) page parameters

Below is a set of parameters that affects the display of the single posts:

  • Show featured image before post -Do I need to show the image attached to the post (featured image) at the top of the post.
  • Show breadcrumbs area -Whether to display the area of ​​the page with the titlr of the category (pages, post) and breadcrumbs:
  • Show post title area -Whether to display the header area of ​​a single post (page)
  • Show text before "Read more" tag - Whether to display the text of the post, located before tag "Read more"
  • Show main sidebar - Allows you to select the position of Main sidebar: left, right or hide (without sidebar)
  • Select main sidebar - Allows you to select a set of widgets to display in the Main sidebar
  • Show advertisement sidebar - Enable/Disable Advertisement sidebar
  • Select advertisement sidebar - Allows you to select a set of widgets to display in Advertisement sidebar area under the body of the post
  • Show footer sidebar - Enable/Disable Footer sidebar
  • Select footer sidebar -Allows you to select a set of widgets to display in the Footer sidebar area (bottom of page)
  • Show post author - Enable/Disable Post author section in single post
  • Show post social share - Enable/Disable Social share section in single post
  • Show related posts - Enable/Disable Related posts section in single post
  • Show comments - Enable/Disable Comments section in single post

Social

In this section you can set the following settings:

  • Twitter, Facebook, Google Plus ... URL - URLs of popular social networks. Only icons with filled URL are displayed in widget "Social".

IMPORTANT: If you want to show icon in header - check it.

Contacts

Here you have to fill in your contact information:

  • Show Google map in header on Contact page -Whether to display the Google map at the top of the website on the page "Contacts"
  • Address -address (used to show your location on Google map)
  • Phone, Fax, E-mail, Site - phone, fax, e-mail and url of your website - are displayed in the Widget "Contacts"

Widgets & Sidebars

Norma theme comes with 3 default widget sidebars. Have a look in Appearance - Widgets.

And also, due to Appearance - Theme Options - Sidebars you can create an unlimited number of additional sidebars. For each category, the page post you will be able to assign the sidebars to be used.

Norma theme has 9 custom widgets. Have a look in Appearance - Widgets.

Custom widgets:

  1. WP Space - Advertisement block: Used to insert advertising blocks - images with links or arbitrary HTML-blocks. IMPORTANT: Be careful to use extraneous HTML-code inorder not to disrupt the design of the page.
  2. WP Space - Contact form: Allows you to page a contact form for feedback from your website visitors.
  3. WP Space - Contacts: Displays your contact details (shown on th page Appearance - Theme Options - Contacts)
  4. WP Space - Flickr photos: Shows photos from your Flickr account.
  5. WP Space - Most Popular & Commented: Displays the most visited and most commented articles.
  6. WP Space - Recent Blog Posts: Displays the most recent posts. Unlike the standard widget, it displays the post's author's name, comments or views number and post's featured image.
  7. WP Space - QR Code VCard: Displays VCard 3.0 with your personal data (address, phone, email, etc.) as QR Code. Also you can display as QR Code any text (or link).
  8. WP Space - Social Links: Displays icons of social networks, the parameters of which are filled on the page Appearance - Theme Options - Social
  9. WP Space - Twitter timeline: Displays the Twitter timeline. IMPORTANT: On 11 June 2013 the company Twitter has closed public access to the users' pages, and now to display twitter timeline on your website, you must do the following:
    • press the button "Settings" in your Twitter account and select "Settings" from the menu that appeared;
    • go to the "Widgets" section and create a new widget;
    • select the type of "User timeline" and fill out the required settings;
    • copy the generated code and paste it into the corresponding field or write down the generated widget's ID and its username and insert them into the corresponding fields of our widget.

Custom pages

Now we can prepare the other pages of our blog. This is not required, but if you want to change the display settings on Page 404, Archive pages or Search results - you have to create separate pages and customize them.

Consider the example of the Page 404. For pages Archive pages or Search results (if needed) configuration should be done the same way.

Page 404

Let's set up an error 404 page. To do this, you need to:

  • Go to Pages under the WordPress menu and then click on Add New.
  • Put your Title as usual ("Page 404" for example)
  • Choose "Page 404" as the page's template

  • In "Page Options" area we set up the display of this page:
    • We do not need a slider on this page - in the "Show slider" select "No" instead of 'Inherit'
    • We are hiding the header area of ​​the page - in the field"Show post title area" choose "No"
    • We are hiding the right sidebar - in the field "Show main sidebar" select "Hide (without sidebar)"
    • We are hiding Advertisement sidebar - in the field "Show Advertisement sidebar" select "No"
    • We are removing details of (author, related posts, Social Share, Comments) - select "No" in corresponding fields
  • Publish this page.

Archives

Archives Page Setup is similar to "Page 404"(see above)

Contacts

On the example of Contacts page we will take a look at the work with aditional sidebars.

  • So, first fill in the contact details on page Appearance - Theme Options - Contacts



    If you want to display Google map - indicate "Yes" in the field "Show Google map in header on Contact Us page". Or simply add Google map into the text of the page with corresponding shortcode.
    Save the settings wpressing "Save All Options" button at the bottom ot he page.
  • Then, we are preparing an additional sidebar. To do this, you must go to Appearance - Theme Options - Sidebars, and with the button "+ Add Item" we are adding a new sidebar and giving it a name "Contact Us".



    Save the settings by clicking "Save All Options" at the bottom of the page.
  • Now go to Appearance - Widgets and drag widgets "WP Space - Contacts" and "WP Space - Social" on the newly created sidebar.
  • Go to Pages under the WordPress menu and then click on Add New.
  • Put your Title as usual ("Contact Us" for example)
  • Put your Text as usual
  • Choose "Contact Us page" as the page's template
  • In "Page Options" area, let's set up the display of this page:
    • We do not need a slider on this page - in the filed "Show slider" slect "No" instead of "Inherit"
    • Hide the header area of the page - in the area "Show post title area" select "No"
    • In the right sidebar, we want to show the other one (made on the previous stages) - in the filed "Select main sidebar" selsect "Contact Us"
    • Hide Advertisement sidebar - in the filed "Show Advertisement sidebar" select "No"
    • We are removing details of (author, related posts, Social Share) - select "No" in corresponding fields
    • Add a comment to this page - in the "Comments" choose "Yes".
  • Publish this page.

Shortcodes

Shortcodes are a cool feature in WordPress that essentially allows you to do some pretty incredible things by just inserting a shortcode into a page or post. Using Shortcodes is a breeze, just insert one where you want the relevant content to show up.

The theme comes pre-packed with a number of shortcodes allowing you to add the info easier.

IMPORTANT: Please make sure to always start new shortcodes on new lines. Most of the time you wont encounter any errors if you don't do that but unfortunately WordPress does mess up the html sometimes. This is true for all shortcodes, but the inline ones like highlight, those are the only ones that don't need a new paragraph.

Please note that almost all the parameters allow shortcodes top and bottom, the value of which is the number - the margin in pixels from the top and bottom of the block, respectively.

Here's a list of the shortcodes included in Norma theme.

Title

Generates standard html title tag.

Parameters:

  • type - (number). The title level from 1 to 6
  • weight - font weight - normal|medium|bold
  • style - (empty)|underline|bubble_right|bubble_down.
  • bubble_color - (string). The bubble's color. You can specify the color (white|black|red|blue|green|brown|... - up to 140 styles) ot its code in format #rrggbb, where rr is a hexademical value of the red component, gg - a hexademical value of the green component, bb - a hexademical value of the blue component
  • icon - Only used for style = bubble_right|bubble_down. Contains the name of the icon that is displayed on top of the icon "bubble".
[title type="1" style="underline" top="20" bottom="10"]Title text here[/title] [title type="2" style="bubble_right" icon="mobile"]Title text here[/title]

Line

It creates the link of the set style

Parameters:

  • style - (string). The line style. It can take one of the following values: none|solid|dashed|dotted|double|groove|ridge|inset|outset
  • width - (number).The line width. It can be set in pixels (simply specify the number) or as a percentage of the page width (specify number with percents). If this parameter is not specified - it gets100%.
  • height - (number). Line width (in pixels)
  • color - (string). The color line. You can specify the color (white|black|red|blue|green|brown|... - up to 140 styles) ot its code in format #rrggbb, where rr is a hexademical value of the red component, gg - a hexademical value of the green component, bb - a hexademical value of the blue component
[line style='solid' top='10' bottom='10' width='100%' height='1' color='#FF0000']

Infobox

Creates different types of messages.

Parameters:

  • style - (string). The infobox style. It can take one of the following values: regular|info|success|error|result. If this parameter is not specified - it gets 'regular'
  • static - (number). Sign of the static block. If this parameter is set to 0 - right in the block there is a button "x" and the block may be closed (disappear) when you click on it. If this parameter is not specified - it gets 1.
[infobox style='regular' static='1']Highlight text here[/infobox]

Button

Creates different types of buttons.

Parameters:

  • style - (string). The button style. It can take one of the following values: grey|red|green|blue. If this parameter is not specified - it gets 'grey'
  • size - (string). The button size. It can take one of the following values: small|medium|large. If this parameter is not specified - it gets 'medium'
  • link - (string). The URL where the link from the button leads to.
  • target - (string). The window where the link leads to. If this parameter is not specified - URL will open in the same window.
  • align - (string). The way to align the button left|right|center.
[button style='red']Button caption[/button]

Highlight

Used to highlight a text with the font's color and / or background.

Parameters:

  • color - (string). The color of the text. You can specify the color (white|black|red|blue|green|brown|... - up to 140 styles) ot its code in format #rrggbb, where rr is a hexademical value of the red component, gg - a hexademical value of the green component, bb - a hexademical value of the blue component
  • backcolor - (string). The background color of the text. The same parameter as color.
  • style - (string). Arbitrary set of CSS-properties (for advanced users only)
[highlight color="white" backcolor="red"]highlighted text[/highlight]

Image

Inserts an image into the text, pressing it (image) to the left or right edge of the text, and the next image text flows around it on the opposite side.

Parameters:

  • src - (string). URL of the image
  • width - (number). the image's width (in pixels).
  • height - (number). the image's height (in pixels).
  • title - (string). Text at the bottom of the image.
  • align - (string). Alignment of the image. It can take one of the following values​​: left|right
[image src="images/1200.jpg" width="300" height="150" title="Funny cat" align="left"]

Quote

Used to emphasize the big and small quotes in the text.

Parameters:

  • style - (number). The style of citations disply. It may be 1 or 2.
  • cite - (string). URL of the site with the original.
  • title - (string). Title for link to the site with the original.
[quote]Et adipiscing integer, augue mus vel tincidunt porta[/quote] [quote style="2" cite="http://somesite.com" title="Mike Adams"]Et adipiscing integer, augue mus vel tincidunt porta[/quote]

Tooltip

Used to create pop-up tips that appear when you hover over a given piece of text.

Parameters:

  • title - (string). Tooltip text.
[tooltip title="Tooltip text here"]Et adipiscing integer[/tooltip]

Dropcaps

Used to create the dropcaps effect - special highlighting of the first letter in a paragraph.

Parameters:

  • style - (number). Display style of the first letter. The value can be 1 or 2. If not specified - use 1.
[dropcaps]Paragraph text[/dropcaps] [dropcaps style="2"]Paragraph text[/dropcaps]

Audio

Inserts an audio file.

Parameters:

  • url or src - (string). URL of an audio file
  • controls - (number). Whether to display the playback controls. The value can be 0 or 1.
  • width - (number). The audio container's width (in pixels).
  • height - (number). The audio container's height (in pixels).
[audio src="http://somesite.com/audio/filename.mp3" controls="1"]

Video

Inserts a video file from one of the most popular video hosting services - youtube or vimeo.

Parameters:

  • url or src - (string). URLof a video file
  • width - (number). Video frame width in pixels.
  • height - (number). Video frame height in pixels
[video url="http://vimeo.com/20245032" width="350" height="170"]

Section

Surrounds the selected text to the block and gives it the properties of a given class from the style table.

Parameters:

  • id - (string). ID of the block
  • class - (string). The name of class of the block
  • style - (string). CSS-style for the generated block
[section id="mini_window" style="width:200px;height:100px;overflow:auto;"]Et tincidunt porta[/section]

Columns

Creates columns in the text

Parameters:

  • count - (number). The number of columns in the generated block. IMPORTANT: Inside the block [columns] ... [/columns] the number of blocks [column_item] ... [/column_item] must correspond to the parameter count.
  • span - (number). Applied only to the shortcode [column_item]. Indicates the number of merged columns.
[columns count="2"]
[column_item]Et adipiscing integer, scelerisque pid, augue mus vel tincidunt porta.[/column_item]
[column_item]A pulvinar ut, parturient enim porta ut sed, mus amet nunc, in.[/column_item]
[/columns]
[columns count="4"]
[column_item]Et adipiscing integer, scelerisque pid, augue mus vel tincidunt porta.[/column_item]
[column_item span="2"]This column's width twice enlarges. A pulvinar ut, parturient enim porta ut sed, mus amet nunc, in.[/column_item]
[column_item]A pulvinar ut, parturient enim porta ut sed, mus amet nunc, in.[/column_item]
[/columns]

List

Creates lists of different styles

Parameters:

  • style - (string). List display style. It can take one of the following values​​: regular|check|mark|error. Can be used both ih a shortcode [list] to set the style of all the elements of the list, and in the shortcode [list_item] to change the style of one item in the list.
  • title - (string). Used only in the shortcode [list_item] to indicate the pop-up tip of the item in the list.
[list style="check"]
[list_item]Et adipiscing integer.[/list_item]
[list_item]A pulvinar ut, parturient enim porta ut sed, mus amet nunc, in.[/list_item]
[list_item style="mark"]Duis sociis, elit odio dapibus nec, dignissim purus est magna integer.[/list_item]
[list_item]Nec purus, cras tincidunt rhoncus proin lacus porttitor rhoncus.[/list_item]
[/list]

Tabs

Creates blocks with tabs

Parameters:

  • tab_names - (string). Headlines tabs listed per the sign "|" (vertical bar)
  • style - (number). The tab display. It may be from 1 to 3
  • initial - (number). The number of previously open tabs (from 1 to the number of tabs)
[tabs tab_names="Planning|Development|Support" style="1" initial="2"]
[tab]Randomised words which don't look even slightly believable.[/tab]
[tab]Fact reader will be distracted by the readable content of a page when.[/tab]
[tab]Distracted by the readable content of a page when. Looking at its layout.[/tab]
[/tabs]

Accordion

Creates blocks of the "accordion" type . Attention: at the same time only one of the blocks can be open

Parameters:

  • initial - (number). The number of the initially open block (from 1 to the number of blocks)
  • title - (string). Applied only for the shortcode [accordion_item]. Contains the title for the current element as favorite.
[accordion style="2" initial="2"]
[accordion_item title="Et adipiscing integer"]Et adipiscing integer, scelerisque pid.[/accordion_item]
[accordion_item title="A pulvinar ut"]A parturient enim porta ut sed, mus amet nunc.[/accordion_item]
[accordion_item title="Duis sociis"]Duis sociis, elit odio dapibus nec.[/accordion_item]
[/accordion]

Toggles

Creates blocks of type "toggles". Comparing to the "accordion" you can close all the blocks or open more than one.

Parameters:

  • initial - (number). The number of the initially open block (from 1 to the number of blocks)
  • title - (string). Applied only for the shortcode [toggle_item]. Contains the title for the current element as favorite.
[toggles initial="1"]
[toggles_item title="Et adipiscing integer"]Et adipiscing integer, scelerisque pid.[/toggles_item]
[toggles_item title="A pulvinar ut"]A pulvinar ut, porta ut sed, mus amet nunc.[/toggles_item]
[toggles_item title="Duis sociis"]Duis sociis, elit odio dapibus nec.[/toggles_item]
[/toggles]

Table

Displays the table

[table]
Paste here table content, generated on one of many public internet resources, for example:
http://html-tables.com/
or http://tablegen.nfshost.com/
or http://www.impressivewebs.com/html-table-code-generator/
[/table]

Google Map

Displays Google map at the address you specified

Parameters:

  • address - (string). The address to which you want to display the map
  • latlng - (double,double). The latitude and longtitude coordinates for map center
  • zoom - (number). Initial map zoom (from 1 to 20)
  • width - (number). Map frame width (in pixels or percents)
  • height - (number). Map frame height (in pixels)
[googlemap address="25 Broadway, New York" width="400" height="300"]

Display Contact form

Parameters:

  • title - (string). The Contact form's title
  • description - (string). The Contact form's description. Displayed under title.
[contact_form title="Contact Form" description="Mauris aliquam habitasse magna a arcu eu mus sociis"]

Hide

Hide any html block with desired selector (id and/or classes combination).

IMPORTANT: For advanced users only! Careless hide of objects can disrupt the design of your site. Be extremely careful.

Parameters:

  • selector - (string). Id and/or classes combination (CSS-selector)
[hide selector="#sidebar .calendar"]

Skills

Shows the levels of your abilities as a horizontal bar graph with percentage.

Parameters (only for [skills_item]):

  • title - (string).The name of the current element.
  • level - (number). Ability level for the current element (from 0 to 100)
  • color - (string). Color block with percentahge for the current element. The main color of accented theme's elements is used by default.
[skills]
[skills_item title="PHP" level="95%"]
[skills_item title="MySQL" level="90%" color="#55ff55"]
[skills_item title="Javascript" level="90%"]
[/skills]

Team

Displays the members of your team (photo with description)

Parameters:

  • style - (string). Display style of the list: normal|big
  • user - (string). Applies only to the shortcode [team_item]. It contains the user login to your blog.The user's data contains the description and links to the user profile in popular social networks.
[team style="big"]
[team_item user="martha"]
[team_item user="john"]
[team_item user="mike"]
[/team]

Testimonials

It generates a block with the statement of one of your team members or any other person (you must also specify its parameters)

Parameters:

  • style - (string). Display style of the block: flat|callout
  • user - (string). It contains the user login to your blog. The user's data has their name and position. If you show a block with a statement of another person (not registered on your blog) - specify other parameters)
  • photo - (string). The displayed name (unless user parameter is specified)..
  • name - (string). The displayed name (unless user parameter is specified).
  • email - (string). E-mail (unless user parameter is specified)
[testimonials user="mike" style="callout"]Testimonials text[/testimonials] [testimonials email="mike@gmail.com" name="Mike Newton" position="Developer" photo="photo_url"]Testimonials text[/testimonials]

Blogger

Well, we ahev finally arrived at the punch line of our collection - shortcode "Blogger". On the one hand, it is rather simple - it just displays the specified number of posts from a given category. But just look how it's doing that! It can do this in many different ways and styles. And by skillfully combining them you can easily create such blocks as Announce, ad units, interviews and much more. I think you had a chance to make sure of that by the example of creating of five different homepages.

Let's examine its parameters more carefully:

  • style - (string). Block display style: date|underline|image_large|image_medium|image_small|bubble_right|bubble_down|accordion
  • bubble_color - (string). Цвет bubble in the title of each post (only for style = bubble_right or bubble_down).
  • ids - (numbers). Comma-separated ID posts to be displayed.
  • cat - (number or string). ID or slug of the category, which puts out the most recent (or the first) posts added (unless ids parameter is specified).
  • count - (number). The number of posts displayed from the category.
  • offset - (number). How many posts to skip before starting output.
  • orderby - (string). The way to sort posts: date|views|comments.
  • order - (string). The order to sort posts: asc|desc.
  • descr - (number). The maximum length post description (excerpt). If 0 - description not showed.
  • readmore - (number).
  • Show (1) or not (0) link "» "(read more) at the end of the post. dir - (string). The direction of the output of the posts: horizontal | vertical
  • border - (number). The presence of a border : 0|1
  • slider - (number). Whether to use slider when displaying posts. If you specify this parameter and it is less than count, then count posts is being prepared, but immediately it shows immediately as much as specified by the slider parameter. Next, you can scroll the list using the slider control elements.
[blogger ids="123,24,543" descr="200" dir="vertical" style="underline"] [blogger cat="portfolio" orderby="views" order="desc" count="9" descr="250" dir="horizontal" style="image_medium" slider="3"]

Slider

And one more feature of our theme - shortcode "Slider". It can display all posts from a specific category or the slideshow of the Revolution Slideras you have prepared beforehand, as a slider (if you have previously installed the plugin revslider.zip, included in the delivery of our theme).

Let us examine its parameters:

  • engine - (string). The engine of the slider: flex|revo. Revo option is available if the plugin revslider.zip. is installed. The default parameter is flex.
  • alias - (string). Name of the slide show, prepared in Revolution Slider (if engine=revo)
  • ids - (numbers). Comma-separated ID posts to be displayed in the slider (if engine=flex).
  • cat - (number or string). ID or slug of the category, which puts out the most recent (or the first) posts added (unless ids parameter is specified).
  • count - (number). The number of posts displayed from the category.
  • offset - (number). How many posts to skip before starting output.
  • border - (number). The presence of the border around the slider: 0|1
  • width - (number). The slider's width (in pixels or percents).
  • height - (number). The slider's height (in pixels).
  • align - (string). The alignments of the slider: left|center|right
[slider ids="123,24,543" width="400" height="300"] [slider engine="revo" alias="homeslider" width="100%" height="250" top="20" bottom="10"] [slider engine="flex" cat="portfolio" count="10" width="500" height="350" align="center" top="10" bottom="10"]

PSD Files

We've included 21 PSD files with this theme. All PSD files you can find in the folder PSD

Demo Content

We've included XML file Norma_Demo_Content.xml with content from our demo site that you can find in DemoContent folder inside the archive that you have downloaded from ThemeForest.

To import this information into a WordPress site follow these steps:

  1. Log in to that site as an administrator.
  2. Go to Tools: Import in the WordPress admin panel.
  3. Install the "WordPress" importer from the list.
  4. Activate & Run Importer.
  5. Upload the file "Content.xml" file using the form provided on that page.
  6. You will first be asked to map the authors in this export file to users on the site. For each author, you may choose to map to an existing user on the site or to create a new user.
  7. WordPress will then import each of the posts, pages, comments, categories, etc. contained in this file into your site.

Also in folder DemoContent you find folder Revolution Slider Demo.

To import this information into a WordPress site follow these steps:

  1. Install plugin revslider.zip
  2. Upload all images from folder images to folder http://yoursiteurl/wo-content/uploads/2013/08/
  3. In WP admin panel go to menu Revolution Slider, press button Import Slider and select file homeslider.txt
  4. After import open Homepage slider (homeslider)
  5. Press Edit slides
  6. Press Edit slide near any slide.
  7. In Slide editor window press Edit CSS File button and replace all css-rules with file homeslider.css content

Sources and Credits

This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification.

  • Fonts:
    • Ubuntu (non standard) and other 40 Google fonts
    • Fontello (non standard, icons set)
    • Arial (standard)

All non standard fonts are from Google Web Fonts and Fontello icons set

We have used the pictures from:
http://www.bigstockphoto.com/

All images are copyrighted to their respective owners and not available for download with this theme.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form from our Profile Page on ThemeForest. Thank you so much!

wpspace