“Notable. - Responsive Business WordPress Theme” Documentation by “HB-Themes” v1.2


Notable.

Created: 8/21/2012
Last Update : 09/26/2012
By: HB-Themes
Current Version : 1.2
Email: support@hb-themes.com

Live Demo: Notable.
Our Portfolio: MOJO Themes

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here.

If you like this theme please don't forget to rate it on MOJO Themes, it means a lot. - Simply log in into your MOJO account, go to Downloads section and click 5 stars next to the Notable theme.

Thank you so much!


Table of Contents

  1. Theme Installation
  2. Theme Options
    1. Dashboard
    2. General Settings
    3. SEO Settings
    4. Logo Settings
    5. Sidebar Settings
    6. Slider Manager
    7. Footer Settings
    8. Post Types Settings
    9. Social Links
    10. Blog Settings
    11. 404 Page Settings
    12. Redirect Page Settings
    13. Font Settings
    14. Style Settings
    15. Backup Options
  3. How To
    1. Select your Home page
    2. Create and use Sidebars
    3. Create and use One By One Slider
    4. Create and use Flex Slider
    5. Create and use Orbit Slider
    6. Create and use Testimonials
    7. Create and use Staff
    8. Use Galleries
    9. Use Portfolio
    10. Create Page Templates
    11. Use Schemes
    12. Change Fonts / Google Web Fonts
    13. Use Inbuilt SEO
    14. Create Page With Comments
    15. Create Site Navigations
    16. Install FontAwesome and Entypo
    17. Use Child Theme
  4. Shortcodes
  5. Widgets
  6. CSS Files
  7. Javascript / jQuery Files
  8. Video Tutorials
  9. Credits
  10. Changelog

A) Notable Theme Installation - top

When you download the theme from ThemeForest, you will get an archive file in .zip extension. If you are using Windows you need WinZip or similar tool to unpack the archive. If you are using MacOS, double click on the archive file, and the archive will be unpacked in same folder, and you should see Notable_1.2 folder.

There are two ways to install the "Notable" theme.

Via FTP Server
1. Connect to your website host, using some of many FTP clients, for example FileZilla.
2. Go to your default WordPress themes folder, and copy NotableWP into that folder. Properly uploaded theme should have path like this : ../wp-content/themes/NotableWP

Via WordPress Install (Recommended)
1. Open your WordPress dashboard.
2. Go to Appearance > Themes. Click Install Themes tab, located at the top of the screen.
3. Click Upload.
4. Choose NotableWP.zip from the zip that you have downloaded from the ThemeForest.
5. Click Install Now

As soon as you have installed the theme, please install FontAwesome and Entypo. There is a Video Tutorial too.

You can view a video tutorial on installing the theme at our Video Tutorials section.

If you are having problems with theme installation, you can contact us over contact form, and we will install the theme for you.


B) Theme Options - top

Notable comes with amazingly powerful theme options. We used Slightly Modified Options Framework as base for our theme options.

You can access theme options, simply by clicking Appearance > Theme Options in your WordPress dashboard left sidebar menu. Once you have entered the theme options, you will see your Dashboard.

ThemeOptions

Options Reset - Use this button to restore all theme option values to default.
Save All Changes - Use this button to save any change on theme options. Don't forget to save your changes.

There are 15 sections. You may find more info about each section bellow.


1) Dashboard Settings - top

In the Dashboard section you can find button shortcuts to some useful settings or links.

Set Front Page button - This button will lead you to Appearance > Reading, where you can set what your front page (home page) shows. You can view a video tutorial on setting custom home page on our Screenr profile.

Create / Edit Menus - This button will lead you to Appearance > Menus, where you can create or edit your theme menus.

Sidebars & Widgets - This button will lead you to Appearance > Widgets, where you can populate your sidebars with our custom made widgets. If you need custom sidebars, you can create unlimited number of sidebars in Theme Options > Sidebar Settings.

Documentation - This button will lead you the theme's online documentation file.

Contact the authors - This button will lead you to our ThemeForest profile page where you can send us an email.

Follow us on Twitter - This button will lead you our Twitter profile page, where you can follow us to stay tuned for the upcoming theme updates and announcements.


2) General Settings - top

In the General Settings section you can change some of the most general settings of the theme.

GeneralSettings

Default E-Mail address - This email address is your default WordPress address, and it will be used for theme contact form shortcode as well as your default WordPress email address.

Enable / Disable Header Dropdown - Check this box to enable the header dropdown widgetized area. You can populate this area with widgets in Appearance > Widgets or Dashboard > Sidebars & Widgets.

Site Title - This is your default WordPress Site Title. This will be used as your logo if you haven't uploaded an image logo in the Theme Options > Logo Settings

Enable / Disable Tagline - Check this box if you want to display tagline bellow your theme image or text logo.

Site Tagline - This is your default WordPress Site Tagline. This will be used as your site tagine bellow your logo.

Enable/Disable Like Plugin - Check this box if you want to enable inbuilt like plugin used on blog and portfolio items.

Contact Form Success Message - Success message for the theme's contact form. This will be dispayed if user has entered information correctly and the message has been sent.

Contact Form Error Message - Error message for the theme's contact form. This will be dispayed if user has entered information wrong and the message hasn't been sent.

Enable / Disable NiceScroll - Check this box if you want to enable NiceScroll scrollbar plugin. If not selected, default OS/Browser scrollbar will be used.

Enable / Disable Search - Check this box if you want to enable website search on pages with title enabled. The search bar will be shown in the top right corner of the title.

Enable / Disable Socials - Check this box if you want to enable social icons from the Social Icons section on the pages where title is enabled. The social icons will be shown in the top right corner of the title section.

Custom CSS - Use this textarea to enter any custom styles. Example : #header, #footer { display:none; }

TIP : Don't forget to Save All Changes after any changes made.


3) SEO Settings - top

Whenever you enter a query in a search engine and hit 'enter' you get a list of web results that contain that query term. Users normally tend to visit websites that are at the top of this list as they perceive those to be more relevant to the query. If you have ever wondered why some of these websites rank better than the others then you must know that it is because of a powerful web marketing technique called Search Engine Optimization (SEO).

SEO is a technique which helps search engines find and rank your site higher than the millions of other sites in response to a search query. SEO thus helps you get traffic from search engines.

Notable comes with integrated SEO support.

In the fields bellow you specify metadata that will apply to those pages that do not have custom metadata. Don't forget that every page or post can have custom SEO metadata, but you have to check the option bellow. In case these fields are left empty, metatags will be set using WordPress.

TIP : If you want to use some other SEO plugin for WordPress, disable the built-in SEO.

SEOOptions

Enable / Disable SEO - Check this box if you want to enable theme's built-in SEO. If you want to use Custom SEO on each page you must check this box.

Default Title - SEO Title Element. One of the most important parts of a page (especially for placement in Google and Yahoo) and should ideally be SEO optimized for a small number of keywords or key phrases (preferably just the one main phrase for that page). This will be used as a default title if you haven't entered custom SEO settings in pages and posts.

Default Description - The meta description is probably the most important on-page SEO factor you control after the title tag. Enter the description of what the website is about.

Default Keywords - A meta keywords tag is supposed to be a brief and concise list of the most important themes of your page. The meta keywords tag takes the following form (example): HTML, Javascript, PHP, jQuery, Java, Python


4) Logo Settings - top

In the Logo Settings section you can upload your logo, favicon and Apple icon images which are used for Apple and Android devices.

LogoSettings

Site Logo - Click Upload button to show WordPress Media Uploader. Select an image from library or upload a new one and click on the Import Image button. After that the link to your logo image should appear in the input field.

Logo Width - If you want to resize your logo image enter width value in this field. The width value can be in pixels, percents or ems. For example : 150px

Logo Height - If you want to resize your logo image enter height value in this field. The height value can be in pixels, percents or ems. For example : 90px

NOTE : If you leave width and height fields empty, the default logo image dimensions will be used.

Favicon - Click Upload button to show WordPress Media Uploader. Select an image from library or upload a new one and click on the Import Image button. After that the link to your favicon image should appear in the input field.

Apple Icon 144x144 - Click Upload button to show WordPress Media Uploader. Select an image from library or upload a new one and click on the Import Image button. After that the link to your apple icon image should appear in the input field. This represents an 144 × 144 Apple Icon image for high-resolution iPad 'Retina' displays.

Apple Icon 114x114 - Click Upload button to show WordPress Media Uploader. Select an image from library or upload a new one and click on the Import Image button. After that the link to your apple icon image should appear in the input field. This represents an 114 × 114 Apple Icon image for high-resolution iPhone 'Retina' displays.

Apple Icon 54x54 - Click Upload button to show WordPress Media Uploader. Select an image from library or upload a new one and click on the Import Image button. After that the link to your apple icon image should appear in the input field. This represents an 54x54x Icon image for other Apple and Android devices.

NOTE : Find out more about Apple Icons here.


5) Sidebar Settings - top

Sidebar Settings allows you to create unlimited number of sidebars simply by clicking the button Add New Sidebar.

You can open details on each sidebar by clicking the arrow at the top right corner of each sidebar title. Details allows you to rename each sidebar or to remove it. You can reorder sidebars by draging the titles.

Once you have created the desired number of sidebars, go to Appearance > Widgets to populate them with Widget items..

SidebarSettings

Add New Sidebar - Click this button to create a new sidebar.

Sidebar Title - Enter the custom sidebar title.

X (Delete button) - Click this button to remove the selected sidebar.

NOTE : You can reorder sidebars by dragging them for titles. Don't forget to Save All Changes after making some.


6) Slider Manager - top

Here you can create unlimited number of three different types of sliders.

The theme uses One by One, Flex and Orbit Sliders.

You can open details on each slider by clicking the arrow at the top right corner of each slider title. Details allows you to change each sliders values, such as animation type, pause time, navigation, etc. Also there's a remove button. Once you have created the sliders, you need to create Slides.

IMPORTANT : Please read 'How To' section in this document to learn how to create sliders and slides on pages.

SliderManager

Add New One By One Slider - Click this button to create a new One By One Slider.

Add New Flex Slider - Click this button to create a new Flex Slider.

Add New Orbit Slider - Click this button to create a new Orbit Slider.

X (Delete button) - Click this button to the selected slider.

NOTE : Once you have created the slider you wanted, you need to create Slides (Images or OBO Slides) depending on which slider you have created. Please read 'How To' section in this document to learn how to create sliders and slides on pages.


7) Footer Settings - top

enter the text which will be shown at the footer of your website. Most people use this space for copyright text, but you can use it for anything.

You can use simple html tags : a, strong, em and similar tags.

SidebarSettings

Footer Text - Enter a text to show in the footer area, at the very bottom of your website. You can use XHTML tags.

IMPORTANT : Do not use double quotes in this field, use single quotes instead.
For example : Powered by <a href='http://wordpress.org'>WordPress</a>


8) Post Types Settings - top

Post Types Settings allows you to rename the post types name, slugs and singular names.

PostType

PostTypes

IMPORTANT : Be careful when changing the names, it will delete all info stored on that post type. Slug change only if necessary.


Social Links Settings allows you to enter links to your social networks profiles.

SocialLinks

Following social networks are included : Facebook, Delicious, DeviantArt, Dribbble, Flickr, Google Plus, Digg, LiveJournal, Twitter, Pinterest, Instagram, Reddit, LastFM, StumbleUpon, RSS.

These social networks will be displayed as icons in the top right corner on pages where title bar is enabled.

TIP : If you want to use default WordPress RSS feed, you can find more info about that on Codex page : http://codex.wordpress.org/WordPress_Feeds


10) Blog Settings - top

Blog Settings section allows you to change some basic blog settings.

SocialLinks

Comment Form Respond Title - This text will be displayed above comment form, where comments are available. Have a look at the image bellow.

CommentText

Posts Per Page - Enter how many blog posts you want per page. Pagination will be used if you have more posts than that number.

Comments Per Page - Enter the maxiumum number of comments to show per page. This setting will replace standard WordPress Reading > Discussion setting.

Short Excerpt Length - Change the size of exerpt on a standard (small) blog page.

Long Excerpt Length - Change the size of exerpt on a wide blog page.


11) 404 Page Settings - top

Notable comes with a customizable 404 page.

404 Page Settings section allows you to change some basic 404 page settings.

Page404

404 Page Title - Big title showed on 404 page.

404 Page Description - Description text that goes bellow 404 page.

Enable / Disable Buttons - Check this box to enable 'Back to Home' and 'Sitemap' buttons on 404 page.

Sitemap Link - Link to your Sitemap page. You need to create a Sitemap page first, using Sitemap Page Template.

404 Page Separator Icon Title - If buttons are selected, separator with icon will be shown. This text goes when you hover the separator icon.

404 Separator Icon - Separator Icon. There are two types of separator icons available. Have a look here.

Page404


12) Redirect Page Settings - top

Notable comes with an unique redirect page template which can be used for redirect or for download pages. Very cool.

Redirect Page Settings section allows you to change some basic redirect page settings.

RedirectPage

Timer Value - Enter the time in seconds to wait before redirect. Example : 15

Redirect Page Title - Enter the big title for redirect page.

Redirect Page Description - Description text that goes bellow page tite.

Redirect Page Icon - Enter icon for redirect page. There are two types of separator icons available. Have a look here.

RedirectPageDesc


13) Font Settings - top

In the Font Settings section you can change some basic font settings as well as embedding custom fonts from Google Web Fonts using CSS @import feature.

FontSettings

Enable/Disable Custom Typography - Check this box to enable custom typography which you specify in the fields bellow.

H1 ... H6 Heading - Specify font size, font family, font-weight and font color for each Heading.

Custom Font Import - This is a very important box. Here, you can enter any custom CSS you want. That means you can controll CSS elements through this box. For example if you want to change logo margin from the top you will enter something like this :

#logo { margin-top:120px; }
Another purpose is to use it for embedding over 500 Custom Google Web Fonts. Here's an example of embedded Google Web Font for let's say H1 Heading element.
/* Import the font from Google using @import */
@import url(http://fonts.googleapis.com/css?family=Codystar);

/* Use the font to change the H1 element */
h1 { font-family: 'Codystar', cursive !important; }

/* You can use !important to make sure that CSS is not overriden by some other styles */

VIDEO : You can view a video tutorial on embedding Google Web Fonts at our Video Tutorials section.


14) Style Settings - top

In the Style Settings section you can change theme color scheme, theme color focus, body background, upload your custom header & footer background image as well as creating your own scheme.

StyleSettings

Select Predefined Scheme - The theme comes with 15 predefined schemes. Select one or leave Default.

Custom Scheme CSS - Enter your custom scheme CSS here. Learn how to create schemes here. Note that if you enter any code into this field, Predefined Scheme will be discarder.

Theme Color Focus - Select a theme color focus. Note that Select Predefined Scheme needs to be set to Default or Custom Scheme CSS need to be entered. This is not applicable to Predefined Schemes, they have their own theme color focus.

Custom H&F Background - Upload a custom background for Header and Footer sections. Note that this will discard Scheme settings

Select Body Background Texture - Click on the image to select a background for website body.


15) Backup Options - top

Backup Options allows you to backup your theme options values. It will save your latest changes.

BackupOptions

Backup Options button - Backups your latest changes made to theme options. It will override all previous backups.

Restore Options button - Restores your latest backup.


C) How To - top

1) Select your homepage - top

  1. Open your WordPress dashboard. Make sure Notable is activated.
  2. Go to Settings > Reading.
  3. If you have at least one page created you should see Front page displays option.
  4. Click Select A static page (select below)
  5. Then, in Front Page dropdown, select a page which will be used as your home page.
  6. Posts Page dropdown leave -Select-


2) Create and use Sidebars - top

  1. Go to Appearance > Theme Options
  2. Click Sidebar Settings in order to get to the Sidebars Section.
  3. In the Sidebars Section, you can edit already created sidebars, or you can create a new one.
  4. Click Add New Sidebar to create a new sidebar.
  5. You can open details on each sidebar by clicking the arrow at the top right corner of each sidebar title. Details allows you to rename each sidebar or to remove it. You can reorder sidebars by draging the titles.
  6. Click Save All Changes when done.
  7. The newly created sidebar will appear in Appearance > Widgets as a new Widgetized Area which you can populate with widgets.
  8. The newly created sidebar will now be available to attach to any page, post or portfolio item.
  9. Select your newly created sidebar in the page metabox, while creating or editing a page, portfolio item or post.
  10. You can choose sidebar position there as well.

 


3) Create and use One By One Slider - top

  1. Go to Appearance > Theme Options
  2. Click Slider Manager.
  3. There are three slider sections. One By One, Flex and Orbit. We need One By One at this moment.
  4. Click Add New One By One Slider in order to create a new One By One Slider.
  5. You can open details on created slider by clicking the arrow at the top right corner of each slider title. Details allows you to change each sliders values, as well as removing the slider.
  6. There's explanation for each slider setting bellow the setting.
  7. Click Save All Changes when done.

Once you have created your slider, you need to create Slides and Slides Elements.

Creating OBO Slides

  1. Go to OBO Slides > Add New Slide
  2. From Attach this slide to a slider from the list choose the previously created OBO Slider.
  3. After you have attached the slide to a slider, click Add New Slider Element
  4. For each Slider Element you will be offered a Element Type dropdown list from where you can choose element type.
  5. Every element has the following settings: Position Left, Position Top, Element Animation.
  6. Elements will be animated in the order they were created.
  7. Each element can be erased by choosing the Element Type to Select.

VIDEO : You can view a video tutorial on creating One By One Slider on our Video Tutorials section.

Attaching Slider To A Page

  1. While creating or editing a page, you will be able to choose the newly created slider from the meta boxes bellow the content.


4) Create and use Flex Slider - top

  1. Go to Appearance > Theme Options
  2. Click Slider Manager.
  3. There are three slider sections. One By One, Flex and Orbit. We need Flex Slider at this moment.
  4. Click Add New Flex Slider in order to create a new Flex Slider.
  5. You can open details on created slider by clicking the arrow at the top right corner of each slider title. Details allows you to change each sliders values, as well as removing the slider.
  6. There's explanation for each slider setting bellow the setting.
  7. Click Save All Changes when done.

Creating Flex Slides

  1. Go to Image Slides > Add New Slide
  2. From Attach this slide to a slider from the list choose the previously created Flex Slider.
  3. After you have attached the slide to a slider, upload your slide image, enter the caption text and link.
  4. Click Publish when done.
  5. Click Add New Slide and add new image slides as many as you need.

Attaching Slider To A Page

  1. While creating or editing a page, you will be able to choose the newly created slider from the meta boxes bellow the content.


5) Create and use Orbit Slider - top

  1. Go to Appearance > Theme Options
  2. Click Slider Manager.
  3. There are three slider sections. One By One, Flex and Orbit. We need Orbit Slider at this moment.
  4. Click Add New Orbit Slider in order to create a new Orbit Slider.
  5. You can open details on created slider by clicking the arrow at the top right corner of each slider title. Details allows you to change each sliders values, as well as removing the slider.
  6. There's explanation for each slider setting bellow the setting.
  7. Click Save All Changes when done.

Creating Orbit Slides

  1. Go to Image Slides > Add New Slide
  2. From Attach this slide to a slider from the list choose the previously created Orbit Slider.
  3. After you have attached the slide to a slider, upload your slide image, enter the caption text and link.
  4. Click Publish when done.
  5. Click Add New Slide and add new image slides as many as you need.

Attaching Slider To A Page

  1. While creating or editing a page, you will be able to choose the newly created slider from the meta boxes bellow the content.


6) Create and use Testimonials - top

Notable comes with Testimonials custom post type, as well as Testimonial shortcode, testimonial page template and testimonial widget. You can find bellow information how to create Testimonials.

Creating Testimonial Posts

  1. In your WordPress dashboard go to Testimonials > Add New Testimonial.
  2. Fill in the testimonial title (used only for testimonial widget, not showing anywhere)
  3. Fill in the testimonial text in the main text editor.
  4. Bellow the main text editor you can enter the testimonial author name. For example : John Doe, Imagination INC
  5. Click Publish when done.
  6. If you upload a Featured Image, it will be used only for Search Results.
  7. Each testimonial post represent one testimonial. Repeat this step as many times as needed.

Testimonial Page Template

  1. Click Pages > Add New Page
  2. From the Template dropdown (on the right hand side of your text editor) select Testimonials Page template.
  3. Fill in the optional content if you want.
  4. Setup your template settings (Sidebar, Layout, Slider, Breadcrumbs...) and click Publish.

Testimonial Shortcode

[testimonial author="Author Name" size="col-4" last_column="true" bottom_margin="true"]

NOTE : Notable comes with powerful shortcode generator which creates shortcode code for you.

Testimonial Widget

  1. Go to Appearance > Widgets.
  2. Look for widget called Custom Testimonials Widget.
  3. Fill in the required info and click Save.

7) Create and use Staff - top

Notable comes with Staff custom post type, as well as Staff shortcode, staff page template and staff widget. You can find bellow information how to create Staff Members.

  1. In your WordPress Dashboard go to Staff > Add New Member
  2. Fill in the title, which will be used as Member's name.
  3. Fill in the content, which will be used as member's description.
  4. Bellow the content you can find Member Position and Social Networks.
  5. You can add Staff Members to Staff Departments, which are basically Categories.
  6. Click Publish when done.

Staff Page Template

  1. Click Pages > Add New Page
  2. From the Template dropdown (on the right hand side of your text editor) select Staff Page template.
  3. Fill in the optional content if you want.
  4. Setup your template settings (Sidebar, Layout, Slider, Breadcrumbs...) and click Publish.

Staff Shortcode

[staff name="Staff Member Name" size="col-6" last_column="true" bottom_margin="true"]

NOTE : Notable comes with powerful shortcode generator which creates shortcode code for you.

Available Shortcode Options

Staff Widget

  1. Go to Appearance > Widgets.
  2. Look for widget called Custom Testimonials Widget.
  3. Fill in the required info and click Save.

8) Use Galleries - top

Notable uses WordPress inbuilt feature 'image attachments' in order to create galleries. It's both, fast and easy to create galleries this way. Here's how to upload images and create galleries using Gallery Shortcode.

  1. In your WordPress dashboard go to Media > Add New.
  2. Add as many images you want using WordPress Media Uploader.
  3. When done, go to Media > Library.
  4. You wull see the list of your images there, look for column where says Attached to.
  5. Find the image you would like to add to gallery and click Attach.
  6. Search for a page where you would like to attach the image (Usually Gallery page, or something like that, you can attach image to a post or a portfolio item as well)
  7. Click Select when you found the page/post.
  8. Repeat the process for as many images as you want.
  9. When added all the images you wanted, go to Pages > All Pages.
  10. Find the page you added images and click Edit.
  11. You can fill in the page just like any other page. Use the following shortcode to display the galleries.
[hb_gallery number="8" size="col-3"]

NOTE : Notable comes with powerful shortcode generator which creates shortcode code for you.

Available Shortcode Options

VIDEO : There's a video tutorial on how to create galleries at our Video Tutorials section.


9) Use Portfolio - top

Notable comes with Portfolio custom post type, as well as "From Portfolio" shortcode and portfolio widget. Information about creating Portfolio items is located bellow.

  1. In your WordPress Dashboard go to Portfolio Items > Add New Portfolio
  2. Fill in the title.
  3. Fill in the content.
  4. Bellow the content you can find Portfolio Item Settings. Here you can enter embedded video link which will be used instead of the featured image. Use this if you want your portfolio item to be video.
  5. Bellow the content you can find Portfolio Settings. Here you have options which will be displayed on a portfolio single page.
  6. You can add Portfolio Items to categories. This category is used to extract exact portfolio items in pages, shortcodes and widgets.
  7. Add Filters to your portfolio. These are also categories, but these are used in the filter, located in portfolio pages.
  8. Click Publish when done.

Portfolio Template

  1. Click Pages > Add New Page
  2. From the Template dropdown (on the right hand side of your text editor) select Portfolio Page or Portfolio Page With Filter template.
  3. Fill in the optional content if you want.
  4. Setup your template settings (Sidebar, Layout, Slider, Breadcrumbs...) and click Publish.

Portfolio Shortcode

[from_portfolio number="12" slugs="portfolios, notable" size="col-4"]

NOTE : Notable comes with powerful shortcode generator which creates shortcode code for you.

Available Shortcode Options

Portfolio Widget

  1. Go to Appearance > Widgets.
  2. Look for widget called Custom Portfolio Widget.
  3. Fill in the required info and click Save.

10) Create Page Templates - top

Notable comes with various predefined page templates. These templates are incredibly simple to populate and manipulate, minimal effort is required. Custom settings for each template are shown dynamically, which makes them easy to find and fill in.

Every page can be set up with custom SEO settings. These setting can be found in the meta boxes bellow the content, named Custom SEO Settings. You have to have enabled Custom SEO in Theme Options. In these settings you can find: Use Custom SEO checkbox, SEO Title, SEO Description and SEO Keywords.

Supported Page Templates


Default Template - Live Preview

This template contains a content area as well as a sidebar area. The sidebar is optionaly put on the left or the right side, and any sidebar created in theme options is available to select. Comments are available on this template only, and they are turned on or of in the Discussion Settings.

Archive Template

This template extracts your website data. The content is divided into 3 columns and they contain:

  1. Latest 30 Posts
  2. Archives By Month
  3. Archives By Year
  4. Browse By Post Format
  5. Browse By Categories
  6. Browse By Tags
  7. List Of Pages

You can choose the layout of this page, a slider to attach and breadcrumbs to show. Also a custom page title is available for this template

Blog Page - Live Preview

This is a template which extracts and displays your blog posts. Characteristic Custom Setting is the Exclude Categories From Blog where you can enter blog category slugs which will be excluded from this blog page. Slugs are separated by commas.

You can choose the layout of this page, a slider to attach and breadcrumbs to show. Also a custom page title is available for this template

This template includes a sidebar which can be either on the right or the left side, and any sidebar created in theme options is available for this template.

Blog Page Wide - Live Preview

This template does exactly the same as a regular Blog Page, except it's differently styled.

Contact Page - Live Preview

This page features a map with your location and a contact form. The map is extracted from the embedded link you must enter in the Map embedded link box. Email used in this template is located in Appearance > Theme Options > General Settings.

You can choose the layout of this page, a slider to attach and breadcrumbs to show. Also a custom page title is available for this template

This template includes a sidebar which can be either on the right or the left side, and any sidebar created in theme options is available for this template.

Contact Page with Wide Map - Live Preview

This template uses the same settings as a regular Contact Page except the map is differently styled.

Fullwidth Page - Live Preview

This template is an empty fullwidth page. You can fill it's content with shortcodes or any other content.

You can choose the layout of this page, a slider to attach and breadcrumbs to show. Also a custom page title is available for this template

Landing Page - Live Preview

Portfolio Page - Live Preview

This template extracts items from the custom post type Portfolio Items. You can specify which items will display by entering portfolio category slugs in the Specify Portfolio Category setting bellow the content. Portfolio items are displayed in 2, 3 or 4 columns.

You can choose the layout of this page, a slider to attach and breadcrumbs to show. Also a custom page title is available for this template

Portfolio Page with Filter - Live Preview

This template uses the same settings as a regular Portfolio Page except a filter is included above the portfolio items, as well as a text line and separator with icon, both of which are changeable in the meta boxes.

Redirect Page - Live Preview

This template is a page which is displayed for a certain time before it redirects to a link of your choice. The link is specified bellow the content, in the Template Settings. The rest of the page details, such as title, description, icon and time are defined in Theme Options.

Sidebar Page - Live Preview

This template uses the same settings as Default Template.

Sitemap - Live Preview

This template extracts your website data. The content is divided into 3 columns and they contain:

  1. Pages
  2. Blog Categories
  3. Portfolio Categories
  4. Feeds
  5. Tags
  6. Archives By Month
  7. Archives By Year

You can choose the layout of this page, a slider to attach and breadcrumbs to show. Also a custom page title is available for this template

Staff Page - Live Preview

This template extracts items from the custom post type Staff. You can specify which items will display by entering staff department slugs in the Specify Staff Department setting bellow the content. Separate the slugs with commas.

You can choose the layout of this page, a slider to attach and breadcrumbs to show. Also a custom page title is available for this template

This template includes a sidebar which can be either on the right or the left side, and any sidebar created in theme options is available for this template.

Testimonials Page

This template extracts items from the custom post type Testimonials - Live Preview

You can choose the layout of this page, a slider to attach and breadcrumbs to show. Also a custom page title is available for this template

This template includes a sidebar which can be either on the right or the left side, and any sidebar created in theme options is available for this template.


11) Use Schemes - top

Notable comes with 15 predefined color schemes. Scheme settings are located in Appearance > Theme Options > Style Settings.

There you will find Predefined Schemes dropdown where you can select one of fifteen predefined color schemes.

Creating Custom Scheme

In the Styles section, you can create your own custom scheme. We suggest using this generator for creating CSS3 gradients : http://www.colorzilla.com/gradient-editor/

Once you have created the gradient you like, you should get code like this (example) :


background: #9dd53a; /* Old browsers */

background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */

background: linear-gradient(to bottom,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */

Then, once you got the code, you need to find your custom theme color focus. You can use this online color picker : http://www.colorpicker.com/
When you are done, your hex color code should look (example) :

#FF7260

Use the following CSS structure in the Custom Scheme CSS textarea :

#header, #footer { 

    /* Paste your gradient color here, example bellow */
	
    background: #9dd53a; /* Old browsers */
    background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}

	/* Scheme Focus Color */
	/* Color example bellow is #FF7260, replace this with your custom color */

	.tipsy-arrow-n { border-bottom-color: #FF7260; }
	.tipsy-arrow-s { border-top-color: #FF7260; }
	.tipsy-arrow-e { border-left-color: #FF7260; }
	.tipsy-arrow-w { border-right-color: #FF7260; }

	#footer { border-top: solid 2px #FF7260; }
	#header { border-bottom: solid 2px #FF7260; }

	a:hover,
	.focus-plan .plan-item-header,
	.focus-slogan-text h4,
	.focus-sep-text,
	.page-numbers:hover,
	.blog-pagination div a:hover,
	.blog-pagination div.alignleft a:hover,
	.blog-pagination div.alignright a:hover,
	.from-the-portfolio-sec-text a:hover,
	.from-the-portfolio-title h3,
	#sort-categories .current-category a,
	#sort-categories .current-category a:hover,
	.focus-heading,
	ul.tabs li.active a,
	.trigger.active a,
	.trigger-button:hover,
	.trigger-button.active,
	#redirect-span,
	#nav li a:hover,
	.breadcrumb-wrapper a:hover { color: #FF7260; }

	.blog-details a.blog-header-text:hover h4 { color: #FF7260 !important; }
	.page-pagination span.current { background: #FF7260; }

	.plan-item-button a:hover,
	.newsletter-box-inner input[type=submit]:hover,
	.tipsy-inner,
	.flex-direction-nav li .next:hover,
	.flex-direction-nav li .prev:hover,
	div.slider-nav span.left:hover,
	div.slider-nav span.right:hover { background-color: #FF7260; }
	::-moz-selection,
	::-webkit-selection,
	::selection { background-color: #FF7260; }
	div.jp-play-bar,
	div.jp-volume-bar-value,
	input[type=submit]:hover,
	.button:hover { background: #FF7260; }

	#header-dropdown .flickr_badge_image:hover,
	#sidebar-content .flickr_badge_image:hover,
	.flickr_badge_image:hover { border: 4px solid #FF7260; }

	/* Place any additional CSS Styles bellow */

	/* *************************************************************************** */

Changing Theme Color Focus

You can change the theme color focus simply by changing the color wheel in Theme Color Focus value. Note that, scheme needs to be Default or Custom Scheme CSS needs to be entered.

Custom Header & Footer Background Image

If you want to use custom header and footer background, you need to check the Custom H&F Background checkbox first. Then simply upload your header and footer background texture or image. Specify background-repeat and background-attachment values.

Change Body Background Texture

In this section you can change main body texture. You can select one of 38 predefined body background textures.


12) Change Fonts / Google Web Fonts - top

Notable comes with some basic typography settings. For some bigger changes we strongly suggest using Google Web Fonts plugin for WordPress.

Importing Google Web Font

Here's how to import a custom Google Web Font.

  1. Go to http://www.google.com/webfonts
  2. Find the font you like and click Quick Use button.
  3. Look for @import
  4. Copy the code inside @import tab. It should look like :
    @import url(http://fonts.googleapis.com/css?family=McLaren);
  5. Scroll down the page and look for Integrate the fonts into your CSS. It should look like :
    font-family: 'McLaren', cursive;
  6. Find the appropriate HTML tags you would like to change. For example p, body, blockquote
  7. Your Import Code and CSS code should look like this (put that code in Custom Font Import textarea)
    /* Import Google Web Font */
    @import url(http://fonts.googleapis.com/css?family=McLaren);
    
    /* Change body, p and blockquote font family, color and size. */
    body,
    p,
    blockquote 
    { 
        font-family: 'McLaren', cursive; 
        font-size:13px; 
        color:#000; 
    }

13) Use Inbuilt SEO Settings - top

SEO is a technique which helps search engines find and rank your site higher than the millions of other sites in response to a search query.

Notable comes with inbuilt SEO settings. Each page or post can have it's own custom SEO settings like different title, keywords and description.

NOTE : You have to enable Custom SEO Settings in theme options.

Go to Appearance > Theme Options > SEO Settings. There you need to check checkbox Enable/Disable SEO.

If you are going to use SEO Plugins For WordPress like All In One SEO, WordPress SEO by Yoast or any other, you should disable Inbuilt SEO Settings in theme options.

If you check the SEO settings, you can fill in the default SEO values, which will be used everywhere where you didn't specify custom SEO. For example if you have created a new page and you didn't enter Custom SEO settings, the default ones will be used. Also the default ones will be used on some pages where is immpossible to use Custom SEO, like 404 page, category page and similar.

Ok, you have checked the SEO Option, let's set different Custom SEO for every page you want.

While editing or creating a new page scroll down the page until you find Custom SEO Settings. There you can define custom title, keywords and description for your page.


14) Create Page With Comments - top

View a live demo.

With Notable you can create page with comments. However it's only possible with the Default (Sidebar) page template. Here are the steps for creating a page with comments :

  1. Go to Pages > Add New Page
  2. Select Default or Sidebar page template.
  3. Make sure Discussion meta box is visible. Have a look at the screenshot bellow.
  4. In the Discussion meta box make sure Allow comments are checked.
  5. Click Publish / Update


  1. Go to Appearance > Menus
  2. Click Add New Menu button
  3. Drag pages you want onto your menu or add custom links
  4. Save the menu
  5. Choose it in the Main Menu dropdown
  6. For the Footer Menu, create a new menu this way (steps 2-4) or choose the same one as the Main Menu


16) Install Font Awesome and Entypo - top

As soon as you have installed the theme, it is recommended that you install Font Awesome and Entypo.

Download Font Awesome

Go to http://fortawesome.github.com/Font-Awesome/ and click Download Font Awesome 2.0. The download should start automatically. Unzip the downloaded file.

Download Entypo

Go to http://www.fontsquirrel.com/fontfacedemo/entypo and click Download @font-face Kit. The download should start automatically. Unzip the downloaded file.

Transfer the files into the theme

Connect to your WordPress themes folder via FTP client. Open the NotableWP > css > font-face folder. In there you should find two empty folders : Entypo and FontAwesome.

From the downloaded and unzipped FontAwesome folder, copy the files from the font folder into the according folder on your FTP account. There should be 4 files to upload.

From the downloaded and unzipped Entypo folder, copy all files into the FTP Entypo folder. There should be 7 files to upload.

The font installation is now done.

Check out the Video Tutorial on how to install Font Awesome and Entypo.


17) Use Child Theme

The version 1.1 (and higher) comes with Child theme support.

A child theme inherits the functionality of a parent theme, which usually holds the base for the layout, structure, function and basic style. A child theme expands upon or modifies the parent theme within a separate set of files. It keeps all of your customizations in their own folder. With a little understanding of HTML and CSS, you can make that very basic child theme modify the styling and layout of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved.

For this reason, child themes are the recommended way of making modifications to a theme.

With a basic understanding of PHP, WordPress Templates, and the WordPress Plugin API, you can make the child theme extend virtually every aspect of a parent theme, and again, without actually changing the parent theme files.

Using Starter Child Theme
In folder Notable_1.2 you should find Child Theme folder. Open that folder and install the ChildThemeWP.zip theme through your WordPress theme install. Simply activate the child theme.

Find more about Child Themes.

D) Shortcodes - top

Notable theme comes with a beautiful shortcode generator which makes shortcodes incredibly simple to insert into your posts or pages. These shortcodes are designed specially for Notable, and they will give your website a unique look with no effort.

In order to enter the shortcode generator, you need to be creating or editing a post/page. In the Visual view, a button with HB-Themes heart logo will appear. Click on the button and the shortcode generator will popup.

Every shortcode is listed bellow with detailed instruction on how to use them properly.

Available Shortcodes: Accordion, Action, Animation, Blockquote, Button, Circle Column, Clear, Column, Dropcap, Focused Text Shortcode, From Blog, From Portfolio, List, Gallery, Headings, Icons, Icon Column, Image, Infobox, Map, Media Screen, Pricing Table, Pullquotes, Read More Button, Section, Separator, Service, Slider, Slogan, Social, Spacer, Tabs, Testimonial, Toggle, Typography, Video


Accordion ( Live Preview )

Every [accordion_item] belongs to a group wrapped with [accordion]. This group makes the accordion section.

[accordion]
	[accordion_item title="Accordion Title 1"]Accordion Content Goes Here[/accordion_item]
	[accordion_item title="Accordion Title 2"]Accordion Content Goes Here[/accordion_item]
	[accordion_item title="Accordion Title 3"]Accordion Content Goes Here[/accordion_item]
[/accordion]

Preview:

Accordion width can be changed by wrapping the whole accordion into a column, respecting the column rules.

Available arguments are:


Action ( Live Preview )

Action Shortcode is great for promoting anything. Name it, describe it and put a link to it with style!

[action title="Action" size="col-8" last_column="true" layers="true" 
				btn_color="red" btn_title="Button" btn_link="#" btn_icon="Q"]
	Action Content Goes Here
[/action]

Preview:

Available arguments are:


Section

Section is a shortcodes which adds a clearfix to your content. Use this shortcode to wrap every row of content in order to have proper spacing between rows.

[section]Section Content Goes Here[/section]

Service ( Live Preview )

Service shortcode is a boxed service column. These columns are extremely beautiful, with layered style and an icon of your choice.

[service title="Service Title" size="col-4" last_column="true" link="#" icon="9" layers="true"]
	Service Content Goes Here
[/service]

Preview:

Available arguments are:


Slogan ( Live Preview )

Get everyone's eyes on your target. This slogan will definitely attract attention with it's big and beautiful letters.

[slogan title="Slogan Title" subtitle="Slogan Subtitle"] Slogan Content Goes Here [/slogan]

Preview:

Available arguments are:

Slogan width can be changed by wrapping the whole accordion into a column, respecting the column rules.


Column ( Live Preview )

Notable is styled using 960 grid. Columns are created by adding a class named col-number, where the number represents how many number/12 parts is the column long. For example col-4 is actually 4/12 which is 1/3 content width. When the sum of col numbers is equal to 12, then you have to set the last_column attribute to true, which means it's the end of that row.

[column size="col-6" bottom_margin="true"]Column Content[/column]
[column size="col-3" bottom_margin="true"]Column Content[/column]
[column size="col-3" bottom_margin="true" last_column="true"]Column Content[/column]

In this example, we had col-6 + col-3 + col-3 = col-12. Since the last col-3 gives the sum of 12, it must have the attribute last_column set to true.

Available arguments are:


Separators ( Live Preview )

Notable comes with 3 different kinds of separators: icon, text and small separator.

// Empty fullwidth separator
[separator]
	
// Icon Separator
[separator icon="briefcase"]

// Text Separator
[text_separator]Separator Text[/text_separator]

// Small Separator
[separator_small]

Preview:

Icon separator can use Font Awesome or Entypo icons


Toggle ( Live Preview )

[toggle title="Toggle Title 1"]Toggle Content Goes Here[/toggle]
[toggle title="Toggle Title 2"]Toggle Content Goes Here[/toggle]
[toggle title="Toggle Title 3"]Toggle Content Goes Here[/toggle]

Preview:

Toggle width can be changed by wrapping the whole toggle group into a column, respecting the column rules.

Available arguments are:


Tabs ( Live Preview )

Every [tab] belongs to one [tabs] group.

[tabs]
	[tab title="Tab 1"]Tab Content Goes Here[/tab]
	[tab title="Tab 2"]Tab Content Goes Here[/tab]
	[tab title="Tab 3"]Tab Content Goes Here[/tab]
[/tabs]

Preview:

Tabs group width can be changed by wrapping the whole [tabs] group into a column, respecting the column rules.

Available arguments are:


Clear

It's recommended that you use [clear] shortcode after each row of your content if that row is not wrapper in a [section].

[clear]

Spacer

This shortcodes makes emty vertical space with a specified height. If content is to close for your taste, feel free to separate them with more space using this awesome shortcode.

[spacer height="50px"]

Button ( Live Preview )

Buttons have never been this easy to create and style. Choose from predefined sizes, colors and shapes to create a beautiful button in no time.

[button title="Button Title" link="#" size="large" color="black" icon="Q" rounded="true"]

Available arguments are:


Infobox ( Live Preview )

Notify, inform, alert or warn your viewers using this stylish boxes. Choose whether viewers can close them or you want them to stay on that page.

[infobox size="col-6" last_column="false" bottom_margin="true" closable="true" color="blue"]
	Infobox Information
[/infobox]

Preview:

Available arguments are:


Blockquotes ( Live Preview )

There are two types of blockquotes supported in this theme: big and regular blockquote.

[blockquote]Blockquote Content Here[/blockquote]

[big_blockquote]Big Blockquote Content Here[/big_blockquote]

Preview:

Available arguments are:


Headings ( Live Preview )

There are two types of headings, regular and focused heading.

// Regular Headings
[h1]Heading 1[/h1]
[h2]Heading 2[/h2]
[h3]Heading 3[/h3]
[h4]Heading 4[/h4]
[h5]Heading 5[/h5]

// Focused Headings
[h1_focus_heading]Focused Heading 1[/h1_focus_heading]
[h2_focus_heading]Focused Heading 2[/h2_focus_heading]
[h3_focus_heading]Focused Heading 3[/h3_focus_heading]
[h4_focus_heading]Focused Heading 4[/h4_focus_heading]
[h5_focus_heading]Focused Heading 5[/h5_focus_heading]

Preview:


Dropcap ( Live Preview )

[dropcap]T[/dropcap]his is a sentence.

Preview:


Pullquote ( Live Preview )

Put this shortcode inside a piece of text, and it will shine through.

[pullquote position="left"]This is a left pullquote[/pullquote]

Preview:

Available arguments are:


Animation ( Live Preview )

Spice up your pages with these interesting animations. You can animate every object on a page, from any shortcode to any custom piece you have written. Bring spark to your pages with this one.

[animation animation="shake" duration="2s" delay="0s" iteration="1"] 
	Animation Content Here
[/animation]

Available arguments are:


Pricing Table ( Live Preview )

These pricing tables are perfect for your business offer promotion.

[pricing_row] shortcodes are grouped into a [pricing_item] shortcode. The group makes a table.
That group of [pricing_item] shortcodes (tables) are grouped into a [pricing_wrap]. Which makes a set of tables.

[pricing_wrap]

	[pricing_item title="SubPricing" size="col-4" layers="true" bottom_margin="true"]
		
		[pricing_row is_price="true"]$110[/pricing_row]
		[pricing_row]Pricing row 1[/pricing_row]
		[pricing_row]Pricing row 2[/pricing_row]
		
	[/pricing_item]

	[pricing_item layers="true" title="Table Title" focus="true" last_colum="false" 
			bottom_margin="true" size="col-4" button_title="Click" button_link="#"]
			
		[pricing_row is_price="true"]$240[/pricing_row]
		[pricing_row]Pricing Row 1[/pricing_row]
		[pricing_row]Pricing Row 2[/pricing_row]
		
	[/pricing_item]

	[pricing_item title="SubPricing" size="col-4" last_column="true" layers="true"]
	
		[pricing_row is_price="true"]$110[/pricing_row]
		[pricing_row]Pricing row 1[/pricing_row]
		[pricing_row]Pricing row 2[/pricing_row]
		
	[/pricing_item]

[/pricing_wrap]

Preview:

Available arguments for [pricing_item] are:

Available arguments for [pricing_row] are:


From Portfolio ( Live Preview )

This shortcode extract elements from portfolio custom post type. You can control the size of displayer items, as well as which items will be extracted.

In the example bellow, portfolio elements that belong to a category which slug is notable or portfolio will be extracted, while the other items will not. Only latest 3 element which satisfy the category requirement will be displayed, and their size will be column size col-4.

[from_portfolio slugs="notable, portfolio" number="3" size="col-4"]

Preview:

Available arguments are:


Typography Shortcodes ( Live Preview )

This is [sup]sup[/sup] element.
This is [sub]sub[/sub] element.
This is [del]del[/del] element.
This is [mark]mark[/mark] element.
This is [mark_dark]mark dark[/mark_dark] element.
This is [dfn]dfn[/dfn] element.
This is [strong]strong[/strong] element.
This is [code]code[/code] element.
This is [abbr title="ABBR element"]abbr[/abbr] element.

Preview:


Read More ( Live Preview )

[read_more_button link="#"]Read More[/read_more_button]

Preview:


Focused Separator Text

[focus_separator_text]OR[/focus_separator_text]

Preview:


Map

This shortcode uses embedded map link as the content.

[map width="100" height="100"]Long Embedded Map Link[/map]

Circle Column ( Live Preview )

[circle_feature size="col-4" last_column="false" color="red" title="Title" link="#" number="1" 
			bottom_margin="true"]
	Circle Feature Column Content
[/circle_feature]

Preview:

Available arguments are:


Social ( Live Preview )

A group of [social_icon] is wrapped in [social]. Check out the Live Demo for cool hover effects.

[social]
	[social_icon type="twitter" link="#" in_new_tab="true"]
	[social_icon type="facebook" link="#" in_new_tab="true"]
	[social_icon type="dribbble" link="#" in_new_tab="true"]
[/social]

Preview:

Available arguments for [social_icon] are:


List ( Live Preview )

These list can use any Entypo or FontAwesome icon as its bullet. Neat!

A group of [list_item] is wrapped with a [list].

[list]
	[list_item size="" icon="beaker" hex_color=""]List Item[/list_item]
	[list_item size="" icon="globe" hex_color="444"]List Item[/list_item]
	[list_item size="" icon="ok" hex_color="6F0"]List Item[/list_item]
	[list_item size="large" icon="plane" hex_color="045"]List Item[/list_item]
[/list]

Preview:

Available arguments are:


Slider

This shortcode can extract slides only from image slider type. Set the slider name, width and height of the shortcode and you're all set.

[slider name="Flex Slider" width="100" height="100"]

Available arguments are:


Newsletter ( Live Preview )

This shortcodes uses your MailChimp embedded Sign Up Form as the content. It extracts the required data so you can paste the whole code in the shortcode without any trouble.

[newsletter_mailchimp size="col-6" last_column="false" layers="true" 
	title="Did we mention it's free?"
	description="Yup, it's that straight forward! Enter your email address below and we'll 
		send you the confirmation link to your inbox. No worries, we don't do spam." 
	bottom_margin="true"]
	
		MailChimp Embedded Code Here
[/newsletter_mailchimp]

Preview:

Available arguments are:


Icon Column ( Live Preview )

[icon_column size="col-4" last_column="false" icon="9" title="Icon Column Title" 
		link="#" color="f60" bottom_margin="true"]		
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nulla ut 
	ante malesuada in semper eros vestibulum.
[/icon_column]

[icon_column size="col-4" last_column="false" icon="Q" title="Icon Column Title" 
		link="#" color="BB4" bottom_margin="true"]		
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nulla ut 
	ante malesuada in semper eros vestibulum.
	
[/icon_column]

[icon_column size="col-4" last_column="true" icon="7" title="Icon Column Title" 
		link="#" color="099" bottom_margin="true"]		
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nulla ut 
	ante malesuada in semper eros vestibulum.
	
[/icon_column]

Preview:

Available arguments are:


Testimonial

This shortcode extract items from testimonial custom post type. One or more items are extracted by author name or by testimonial name.

[testimonial author="" name="" size="col-4" last_column="false" bottom_margin"]

Available arguments are:


Gallery ( Live Preview )

This shortcode extract media library items attached to the page where this shortcode is used.

[hb_gallery number="12" size="col-3"]

Preview:

Available arguments are:


Image

[hb_image white_frame="true" width="300" height="180" fancybox_rel="" align="left"]
	Image Link Goes Here
[/hb_image]

Available arguments are:


From Blog ( Live Preview )

This shortcode extract blog posts. It's incredibly simple, choose a size from a predefined list in the shortcode generator, and specify how many items to extract and you're all set.

In the example bellow, latest 3 blog posts will be extracted and displayed in column size col-4.

[latest_from_blog size="col-4" number="3"]

Preview:

Available arguments are:


Media Screen ( Live Preview )

This shortcode is very convenient. It displays different content depending on the device its displayed on. Put different content for those on tablets, phones or desktops.

[screen size="phone"]This is displayed only on phones[/screen]
[screen size="desktop"]This is displayed only on desktops[/screen]
[screen size="tablet"]This is displayed only on tablets[/screen]

Available arguments are:


Video ( Live Preview )

[hb_video width="" height="" white_frame=""] Video Embedded Link Goes Here [/hb_video]

Preview:

Available arguments are:


Icon ( Live Preview )

This shortcode uses FontAwesome and Entypo icons.

[icon size="20px" color="F60" icon="bolt"]
[icon size="80px" color="060" icon="briefcase"]
[icon size="40px" color="773" icon="beaker"]
[icon size="55px" color="BBB" icon="random"]

Preview:

Available arguments are:


E) Widgets - top

Notable comes with 15 custom widgets. You can find them in Appearance > Widgets along with some WordPres built-in widgets.

The list of custom made widgets :

Note : You can use any shortcode inside Text Widget.

Use widgets simply by dragging them into desirable widgetized area and filling in the required info.


F) CSS Files - top

The following CSS files are imported into the theme when needed. They are located inside css folder.


G) Javascript/jQuery Files - top

The following JS files are imported into the theme when needed. They are located inside scripts folder.


H) Video Tutorials - top

LINK : You can view our Screenr profile here.


I) Credits - top

A huge thanks to all great authors. Feel free to view their work in the links bellow.


J) Changelog - top

Updated to 1.2 - 09/26/2012


  *ADDED* Audio Portfolio (Including new Audio Template)
  *ADDED* WordPress Gallery Drag & Drop Sorting
  *ADDED* Different Footer Columns (10 Layouts)
  *ADDED* Recent Blog Posts Widget From A Category
  *ADDED* Option To Disable Responsive Styles
  *ADDED* Option To Add Multiple Images To Single Portfolio (Lightbox Slider)
  *ADDED* Optional Top Info Bar
  *FIXED* Changed Portfolio Permalinks To Showcase
  *FIXED* Target Blank In Link Elements
  *FIXED* Image Resize Function
  

Updated to 1.1 - 08/28/2012


  *ADDED* Child Theme Support with Starter Child Theme
  *ADDED* IE8 Support
  *ADDED* Blog & Portfolio Related Posts Option
  *ADDED* Slider Option to Single Blog Post & Single Portfolio Post
  *ADDED* Option to disable like plugin in theme options
  *ADDED* Tags on Single Blog Post
  *ADDED* Tag Description on Tag Archive page
  *ADDED* Custom CSS Field in theme options
  *ADDED* Previous and Next Buttons in Portfolio Single Post
  *FIXED* Small synthax errors
  

Still not found answer to your questions? Send us an email and we will respond within 24 hours (working days).

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 a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Branko Conjic & Hristina Zlateska, HB-Themes

Go To Table of Contents