Nobb Documentation

by Orkun Gursel / support@cloudfw.net

Welcome  ·  Thank You

Thank you for purchasing

Thank you for purchasing the theme Nobb. This theme is easy to use and it has user-friendly admin panel - CloudFw. I hope you like it.

If you have any question or problem about the theme, please contact us by using our support center. However before getting support, please read this documentation and watch video tutorials.

Enjoy it!

"Orkun Gursel - Signature"

Welcome  ·  Requirements

Requirements

  • PHP 5.2.4 or greater
  • MySQL 5.0 or greater
  • WordPress 3.4 or greater
Getting Started  ·  Downloading from Themeforest

Downloading from ThemeForest

Download the Nobb theme package from ThemeForest and unzip the theme package. Any good quality zip program will do. Just follow the unzip instructions of your program carefully. Some give you the option of unzipping only a portion, or all, of the files. You want to select "all". Once unzipped, you will find the following folders will be in the unzipped directory:

  • nobb.zip - the zip file of the theme
  • nobb_with_demo_contents.zip - the zip file of the theme with one click demo contents
  • documentation/ - theme document
  • licensing/ - license for the theme
  • resources/
    • sample skins/ - importable skin files
    • sample sliders/ - importable slider files
    • cufon/ - custom cufon fonts to copy into wp-content/themes/nobb/resources/cufon folder
    • fontface/ - custom fontface fonts to copy into wp-content/themes/nobb/resources/fontface folder
    • plug-ins/ - optional plug-ins which can be used with the theme
    • psd/ - all psd files of the theme
  • change log/ - changelog files for the theme versions
Getting Started  ·  Installation

Installation

To install this 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

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

  • FTP Upload: Unzip the nobb.zip file and using a FTP client software, upload the unzipped theme folder into the /wp-content/themes/ folder on your server.

    The folder must be like this: (/wp-content/themes/nobb/)

  • WordPress Upload: Navigate to AppearanceAdd New ThemesUpload. Go to browse, and select the zipped theme file in the package (nobb.zip). Hit “Install Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to AppearanceThemes and activate your chosen theme.

More Info: Using Themes http://codex.wordpress.org/Using_Themes

Getting Started  ·  Install sample content

Install Sample/Dummy Content

  • 1. step: Go to Control PanelDahsboard (Also the importer can be found in Control PanelSystemDemo Contents tab.)
  • 2. step: Select the content types which you wish to import and hit button
  • 3. step: Hit button to import contents.

Important: DO NOT INSTALL demo contents on your live website. It will corrupt your existing data(pages, widgets, skins, sliders and options). We suggest you install demo contents only on a clean WordPress setup. We do not hold any responsibility if you lost existing data.

1
2

Creating Pages  ·  Home page  ·  Setting up homepage

Setting up Homepage

To set up the homepage you must create a new page, you can do so by navigating to PagesAdd New

You can give this page a title yet you do not have to include any content. Select the a template from the Page. And click or

You can create the homepage's content using the content composer or classic wordpress editor. (See: using of the content composer)

Creating Pages  ·  Home page  ·  Setting the homepage as static page

Setting the homepage as static page

After creating your home page, navigate to SettingsReading, set Front page displays: A static page, and select your home page as front page.

Your homepage can be viewed by visiting your root URL.

Creating Pages  ·  Blog page  ·  Setting up blog page

Setting up Blog Page

To set up the blog, you must create a new page with no content, you can do so by navigating to PagesAdd New. Name it "Blog" and set a template for the page and click

Creating Pages  ·  Blog page  ·  Displaying blog posts on the blog page

Displaying blog posts on the blog page

After creating your blog page, navigate to SettingsReading, set Front page displays: A static page, and select your page named Blog as posts page.

Your blog index can be viewed by visiting the page you just published.

Creating Pages  ·  Portfolio page  ·  Setting up portfolio page

Setting up Portfolio Page

  1. To set up the main portfolio page, you must create a new page, you can do so by navigating to PagesAdd New. Name it as "Portfolio" or another name you wish. And hit button.

  2. After creating the main portfolio page, go to Control PanelPortfolioGeneral Portfolio Settings and select your portfolio page for the Porfolio Page option.

  3. Back to portfolio edit page ( PagesAll PagesPorfolioEdit )

  4. Add a Portfolio module to the page by using the content composer. (See: using of the content composer)

  5. You can change the module options to customize your portfolio page.

  6. Now, we should create some portfolio posts to display them on the main portfolio page. (See: creating portfolio posts)

Creating Pages  ·  Portfolio page  ·  Creating portfolio posts

Creating portfolio posts

  1. To create a portfolio post, navigate to PortfolioAdd New page,
  2. Insert a title for your portfolio post,
  3. Set a featured image,

    1
    2
    3

  4. Set the portfolio's options

  5. And hit button.

Creating Pages  ·  Contact page  ·  Setting up contact page

Setting up Contact Page

  • You should use Contact Form 7 plugin for contact form.

  • After installing it, go to ContactAdd new (or edit current one) and in Form field paste what's below:

[1of2]<p>Your Name (required)<br />
    [text* your-name class:input-half] </p>[/1of2]

[1of2_last]<p>Phone (required)<br />
    [text* text-phone class:input-half] </p>[/1of2_last]

[1of2]<p>Email (required)<br />
    [email* your-email class:input-half] </p>[/1of2]

[1of2_last]<p>Website<br />
    [text text-website class:input-half] </p>[/1of2_last]

[1of1]
<p>Subject<br />
    [text your-subject class:input-full] </p>[/1of1]

<p>Your Message<br />
    [textarea your-message class:input-full] </p>

<p>[submit "Submit Message"]</p>

<style>
.input-half {
    width: 274px !important;
} .input-full,
.wpcf7-form-control-wrap.your-message textarea {
    width: 582px;
}
</style>
  • Than you should insert the form using the content composer.

1
2
3

  • And hit and save your page.
Content Composer  ·  Import / export page contents

Import / export page contents

Content Composer  ·  Save / load the composer's templates

Save / load the composer's templates

Shortcode Generator  ·  Using shortcode generator

Using Shortcode Generator

You can see the shortcode generator button at the top of all pages of your admin panel. Just hit the Shortcode Generator button and generate your shortcode easily.

Slider Manager  ·  Creating a slider

Creating a slider

  1. To create a slider, navigate to Slider Manager, and hit the button.

  2. Insert a name for your new slider and select a slider type. Then hit button again.

  3. Now, you will see the slider options for your new slider. Set the options and save the slider.

  4. We can pass the next step: creating slider items.

Slider Manager  ·  Creating slider items

Creating slider items

  1. After our slider created, we should create some slides for our slider. For that we must go to slider items managing page. And hit button.

  2. Upload your image and set other item options and hit button.

  3. After creating slider items, you can sort your slider items by drag drop method.

  4. How to insert sliders into your pages

Slider Manager  ·  Insert sliders into your pages

Insert sliders into your pages

  1. To insert a slider into your pages, you should add Slider module into your pages via the content composer.

  2. After adding the Slider module, hit to Options icon, then you will see module options.

  3. Select the slider name that you wish to insert your pages. And save the page.

Also you can insert a slider into your pages via [slider] shortcode. (See: how to create shortcodes)

Slider Manager  ·  Importing sliders

Importing sliders

You can find demo slider files inside resources/sample sliders/ folder in the theme package that downloaded from ThemeForest.

  1. Go to Slider Manager, and hit button.

  2. Selet one of importable slider file, and hit button again.

You can find demo slider files inside resources/sample sliders/ folder in the theme package that downloaded from ThemeForest.

Customization  ·  Visual Settings  ·  Creating new visual set

Creating new visual set

  1. Go to Control PanelVisual SettingsAll Visual Sets, and hit button.

  2. Type a name for your set and hit button again.

  3. After creating your new set, click to edit icon to see all visual options.

Customization  ·  Visual Settings  ·  Importing visual set

Importing visual set

You can find pre-defined importable visual setting files inside resources/sample skins/ folder in the theme package that downloaded from ThemeForest.

  1. Go to Control PanelVisual SettingsAll Visual Sets, and hit button.

  2. Selet one of importable visual setting file, and hit button again.

You can find pre-defined importable visual setting files inside resources/sample skins/ folder in the theme package that downloaded from ThemeForest.

Customization  ·  Visual Settings  ·  Searching customizable visual element

Searching customizable visual element

  1. Go to visual setting editing page, and click Search Visual Element button or press CTRL/CMD + F keys.

  2. Type an element name to search and hit button.

Customization  ·  Visual Settings  ·  How-to  ·  Examples

Examples

Customization  ·  Typography Settings  ·  Installing font files

Installing font files

We have not added any font file to the theme as default due to performence issues what maybe occured during install. So you have to install the font files manually to your website.

To install the font files to your website, you should upload cufon/ and fontface/ folders in resources/ folder in the theme package to wp-content/themes/nobb/resources/ folder of your website using a FTP client software.

package/resources/cufon/copy toserver/wp-content/themes/nobb/resources/cufon/
package/resources/fontface/copy toserver/wp-content/themes/nobb/resources/fontface/

Customization  ·  Typography Settings  ·  Activate Google Webfonts & FontFace fonts

Activate Google Webfonts & FontFace fonts

  1. Go to Control PanelTypography@Font-Face page. And turn on Enable @font-face? option. And hit to button.

  2. You will see the fontface and google web fonts list below. Select the font types which you wish to load to your pages. And hit to button.

    If there is no any font in the list, follow this: Installing font files
    Important: Please don't activate more than 2 fontface or google web fonts. If you do so, this may occur some performance problems.

  3. Now, you can customize text elements on your pages. To customize elements, go to Control PanelTypographyCustomize page.

Customization  ·  Typography Settings  ·  Activate Cufon fonts

Activate Cufon fonts

  1. Go to Control PanelTypographyCufon page. And turn on Enable Cufon option. And hit to button.

  2. You will see the cufon fonts list below. Select the font types which you wish to load to your pages. And hit to button.

    If there is no any font in the list, follow this: Installing font files
    Important: Please don't activate more than one cufon font. If you do so, this may occur some performance problems.

  3. Now, you can customize text elements on your pages. To customize elements, go to Control PanelTypographyCustomize page.

How-to  ·  Creating custom sidebar

Creating custom sidebar

To crete a custom sidebar, navigate to Control PanelGlobal SettingsSidebar Manager

How-to  ·  Setting up navigation menu

Setting up navigation menu

How-to  ·  How to use different visual set on a page

How to use different visual set on a page

The theme Nobb supports to use different visual sets on pages.

  1. First, create a visual set.

  2. Go to page editing, you will see Custom Skins section at the right-top of page. Select a different skin from your primary skin here to use it on the page.

How-to  ·  How to import custom icon set

How to import custom icon set