“Picasso” Documentation by “Muhammad Faisal” v1.1


“Picasso Wordpress”

Updated: 29 January 2013
By: Muhammad Faisal
Email: mstrends.79c2@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact me.

Theme Support is now available only at our item discussion page. Go to our Portfolio, Select the theme about which you want to ask any question and post your question there in 'Item Discussion' section.


Table of Contents

  1. Quick Overview
  2. Installation
  3. Admin Theme Options
  4. Create Custom Menus
  5. Custom Page Templates
  6. Creating a new Blog
  7. Creating a new Gallery (Using wordpress native media gallery)
  8. Creating a new Portfolio (Using custom post type)
  9. Creating a new Contact page
  10. Creating a new Fullscreen page
  11. Creating a new Default page
  12. Setting up Image/Video background (Specifically for page/post)
  13. Setting up Background Audio (Specifically for page/post)
  14. Shortcode Generator
  15. Sidebars & Widgets
  16. Cascading Style Sheets (CSS files structre and use)
  17. Javascript Files
  18. Other Sources and Credits

A) QUICK OVERVIEW - top

The Picasso wordpress responsive theme is designed with Photographers, Designers in mind, however it will suit needs of most type of sites if proper background is used.

You can use unique background image(s) or video on any page of your site. its truly simple. Beside this gallery management has never been so easy. You just have to upload your images through the default WordPress Media Gallery, select your desired Gallery layout, click "Publish" and they're instantly ready and viewable!

Theme's admin tabs

 

For detailed list of theme features, visit our portfolio (http://themeforest.net/user/MsTrends/portfolio) and click on Picasso theme item. And most importantly if you find any bug or something like that please get in touch with us to see if there’s been human error. However, if you find our product helpful, please don't forget to rate it!


B) INSTALLATION - top

  1. Download and unzip theme package file. Unzip this file. In unzipped folder you can see following folders:

    • Picasso - theme files that you need upload to your wordpress installation.
    • Licensing - license for the theme.
    • Documentation - documentation files for current package.

  2. Before you install the theme, make sure your wordpress version is 3.0 or higher. Then upload the folder "Picasso" to the themes folder at your WordPress installation root directory: /wp-content/themes/ through your FTP Client. DO NOT UPLOAD THE WHOLE FOLDER of the zip package you downloaded from themeforest.

  3. Next Log into your WordPress admin panel and go to Appearance -> Themes subpanel. After that is done, activate the theme as you would activate any other theme.

  4. Once activated Picasso, you will see the new sub panel under Appearance -> Theme Options.

Theme's admin tabs

 

If you need help installing Wordpress see the link below:
http://codex.wordpress.org/Installing_WordPress


C) ADMIN THEME OPTIONS - top

The theme comes with a simple to use administration panel. You can access it by navigating to Appearance > Theme Options. On theme activation theme options page will automatically open. The theme options are conveniently spread over a number of tabs and each tab contains different sections differentiated by background colors. Details regarding each tab and each section under tabs is given below.

Theme's admin tabs

i. General

  1. Logo Options: You have multiple options regarding image logo uploading, the first is to upload an image directly from your computer and the second is to paste the URL of the image you want to use for your logo. You can set logo margin from logo container using logo offset option.
    You have also an option to upload image logo for your wordpress backend.

  2. Custom Favicon: Upload a 16 x 16 png/gif image that will represent your website's favicon.

  3. Image Resizing: – Theme uses Freshizer php class for resizing and cropping image functionality. By default, it is enabled, however, you can disable this class to work.

  4. Date and Blog Meta: You can globally disable date meta on blog and portfolio entries or blog meta information (e.g. author, category, number of comments) other than date, on blog entries.

  5. Footer Scripts: You can include javascript code to your site footer using provided text areas. Script will be implemented using wordpress wp_footer() function. So in this way, it will automatically be included in all the pages, posts and sections throughout your website. For example you can add Google Analytics code in this textarea and it will start tracking your visitors.

  6. Copyright Text: Enter here text you would like to br displayed in the footer of your site. You can also insert any HTML code (e.g. link tag) here.

ii. Social Profiles

Currently there is the ability to include up to 13 social networks inside your small footer at the bottom of the website. By entering in the URL associated with your Social Networks, they will automatically appear in the frontend of the website at the very bottom.

For example, to activate the "Twitter" social network, type in http://www.twitter.com/username.

Where there are no URLs typed in, these social networks will not be displayed on the website.

iii. Backgrounds

  1. Global Background Type: Choose which type of background do you want to use globally or as a fallback for such site pages/posts for which no background image/video is defined specifically.

  2. Global Image Background: Here you will want to upload an image that will be assigned to all pages, sections and posts as your default Global Background. This background image can be changed per page and post by using the Background & Caption meta panel present when editing / creating a new page or post (defined here). If you are not using the Custom home page, this image will become your homepage background.
    You can also define some other settings like slideshow transition, transition speed, slide interval and background image stretching behaviour.

  3. Global Video Background: Theme uses html 5 video technology for displaying background video. So, for cross browser compatibility you have to provide background video file in multiple format (e.g. mp4, ogv and webm). Video file defined here will be used as default global video background, and just like image background you can change it for each page or post using Background & Caption meta panel.
    You have also option to disable video autoplay on page load, disable video looping and disable video audio. It should be noted that if your video background have its own audio and you dont want to use it, rather you want to play a seperate audio file, you can do so by disabling video audio and than defining Background Audio (defined here) seperatly.

  4. Global Audio Background: Just like video background, audio background is also based on html 5 audio technology. So, for cross browser compatibility you will have to provide audio file in two formats (mp3 and oga). Audio file defined here will be used as default global audio background and it can also be chanegd for each page and post.
    Unlike, image and video background just defining file url's is not enough, you will have to check Enable Audio option to enable it. Further, like video background setting you can also disable audio background autoplay and looping globally.

iv. Style & Typography

  1. Theme Skin: This theme has a few predefined skins to be used for your site. By default "Green" skin will be used. However, if you plan to use your custom skin, first choose Custom under Predefined Skins label and than choose any custom Skin Color you want.

  2. Google Fonts: Theme has integrated a system to use any google font as your primary site heading. See the below steps for instructions:

    a. Open google fonts site (http://www.google.com/webfonts/). Choose any font you want to use and click on Quick Use link.

    Theme's admin tabs

    A detailed page for that font will appear. Scroll down, untill you see the following screen. Copy font name (marked as red) and paste it in Google Font Name field in the theme options.

    Theme's admin tabs

    b. In the same page you can see the font weights, something like this.

    Theme's admin tabs

    Choose font weight which you want to use for the selected font. Font wieght is numeric fiqure (e.g. 200, 300, 400, 500 ... ). Some fonts have multiple weights. However, normally most of the fonts have only 400 weight available. So, if google font is not working on your site please make sure you have entered font weight value which is supported by that font and enter only numeric value of weight in Google Font Weight field in Theme Options.

    c. Some of the fonts in the Google Font Directory support multiple scripts (like Latin and Cyrillic for example). The more script font use the more characters will be available in that font. In order to specify which subsets should be downloaded with the font enter comma seperated font subset value(s) in Google Font Subsets field. Normally most of the fonts will work with latin as subset value. You can check how many subsets are available for your selected font is the same page, you will see some thing like this. Copy/Paste only marked values in Google Font Subsets field.

    Theme's admin tabs


  3. Background Overlay: This section deals with the overlay effect over your image or video background. Currently 14 styles of overlay patterns are avaiable, you can choose any one according to your taste. You can also set the opacity (between 0-100) of your background overlay pattern. Higher the opacity, darker the pattern will be. However, you can also opt to disable overlay pattern effect completely.

  4. Custom CSS: You will often need to use some CSS rules for some minor customization of theme. So, instead of inserting CSS code in the theme core files this section is provided. Here you can insert any CSS code for your site customization. CSS code inserted here will overwrite any CSS rule defined in theme core files.

D) CREATE CUSTOM MENUS - top

Since the release of WordPress 3.0, creating menus has never been so easy. You can drag, drop and organize your menus with complete ease. Even link outside your website to other site URLs.

This theme also comes with one custom navigation location called “Primary Navigation”. Which is used for top navigation at the top.

Theme's admin tabs

To setup your custom menus, navigate to Appearance > Menus. Give your menu a name and build it up using the available widgets. You can add a variety of items including pages,  categories, custom links. To extend the available widgets, click  the screen options tab at the very top of the screen and configure your options.



E) CUSTOM PAGE TEMPLATES - top

The theme comes with a number of in built custom page templates. These templates can be used on individual pages to alter the display or functionality.

  1. Fullscreen Template: This template is usually used for Home Page or Fullscreen Gallery, You can populate fullscreen template with multiple background images. For detailed procedure click here.

  2. Blog Template: This template is used for “Blog”. For detailed information click here.

  3. Gallery Template: This template is used for “Gallery” which uses native WordPress Media Gallery for displaying your photos and images, It has 6 layouts (4 columnar, 1 grid, 1 galleria style). For detailed information click here.

  4. Portfolio Template: This template is used for “Portfolio” and uses custom post type functionality. For detailed information click here.

  5. Contact Template: This template is used for simple “Contact” page with client and server side validation. For detailed information click here.

  6. DefaultTemplate: If you are creating a page which do not fall under the scope of any above template, use this template. For more detail click here.

F) CREATING A NEW BLOG - top

Inside your WordPress Dashboard, in the left-hand sidebar you will see the "Posts" menu option. Click this and you will have the option to view "All Posts" entries, "Add New" blog entry, and create "Categories" that you can use to organize the different type of blogs you wish to display on your site. This also enables you the ability to create multiple blogs and assigning categories.

i. Adding a Blog Entry

  1. Click "Add New" and this will open the Add New Post page for the blog.

  2. Type in the title of your blog entry where it says "Enter title here".

  3. Add in your actual post contents specific to that blog entry. This information will be displayed when the "Read More" button is clicked on.

  4. On the right hand side you will see a panel, with heading "Featured Image" containing a link Set featured image. This link is when clicked will open a new window in lightbox. It will allow you to attach image file directly from your computer. This image will be used as your post featured image.

  5. Again, on the right hand side you can see a panel, with heading "Categories", select appropriate category for your post. You can assign multiple categorie with your project.

  6. By default, theme will use first paragraph of your entry content as a summary to show in blog index page. However, if you want more control over this summary you can also define custom summary for you project, under "Excerpt" meta panel.

  7. This step is Optional, but required for advanced configuration. Scroll down till you see the "Entry Details" meta panel, here you can setup a few options:

    Theme's admin tabs

    a. Read More Text: Enter here text which you want to use for read more button. By default "Read More" text is used. Type '0' in this field to disable read more button.

    b. Entry Custom Link: Enter here link which you want to open when entry title, thumbnail or read more button is clicked. By default single post link will be used.

    c. Entry Enhancement: This section is used for misc. blog single entry setting.

    • Disable Sidebar: By default, a sidebar will appear on every blog single entry page. However, if you dont want this sidebar to appear check this option to have a full-width single entry page.

  8. That’s it. It’s pretty simple! Now click the "Publish" button to create new blog entry.

ii. Creating a Blog Page

So now you've successfully added Blog entry(ies), you'll want to learn how to display those items. To do this, you need to create a new page using the page template "Blog". Once you create a Blog Page, you just simply assign which category for your Blog you want displayed and the rest is done automatically. See the below steps for instructions:

  1. Go to "Pages" in your sidebar and click "Add New".

  2. Title the blog page accordingly, ie., "News" or "Updates".
    - You can create multiple blogs by creating new pages.

  3. In the right sidebar of this page, look for "Page Attributes" and under Template heading select from the dropdown "Blog Template". This will assign Blog template to current page.

  4. This step is Optional, but required for advanced configuration. Scroll down till you see the "Template Configuration" meta panel, here you can setup a few options:

    Theme's admin tabs

    a. Custom Page Heading: Define custom page heading which will appear on page header. By default original page title will be used.

    b. Page Sub-Heading: Define subheading for your page, it will appear just beside main page heading with smaller font size and darker color. By default it is blank.

    c. Category: Select category from which you want to populate your blog template. If you dont want to choose any specific category, blog template will show posts from all categories.

    d. Entries per Page: Set number of blog posts to show per page. Use -1 to show all avaiable posts on single page and disable pagination. By default, 10 blog entries will be shown on one page.

    e. Blog Style: There are basically 3 type of blog layouts (standard, list, magazine), however you can variate these styles by disabling sidebar. Choose whatever blog style you want.

    • Standard Layout (available with or without sidebar - see demo site)
    • List Layout (available with or without sidebar - see demo site)
    • Magazine Layout (available with or without sidebar - see demo site)

    e. Blog Enhancements: This section is used for misc. blog template setting.

    • Disable Sidebar: By default, a sidebar will appear on every blog template page. However, if you dont want this sidebar to appear check this option to have a full-width blog template
      .
    • Enable Full Content: Check this option if you want to show full content, instead of summary of blog posts in blog index page. This option applies only to Standard blog style.

  5. That’s it. Now click the "Publish" button to create new blog index page.

Note: If you want text to show above your blog, when creating this page, just add the text to the contents box / editor and that text will display above the blog.

Once you have created this page, you’ll want to link it to your menu / navigation. To do this, go to "Appearance" > "Menus" and add the new page you just created to your navigation. Click save and once done you should be able to see the new item in your menu.

 


To set up the gallery, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title of “Gallery”, you do not have to include any content in the editor. Select the “Gallery Template” from the Page Attributes section. By selecting this template “Template Configuration” meta panel will be populated with different options regarding configuration of gallery.

i. Uploading Images

We've decided to make use of the native WordPress Media Gallery for displaying your photos and images, It involves less work, less steps and faster end results...

To add your images, you just need to locate the "Add Media" button at the top of your "WordPress editor", and just beneath the "Title" area of that page. This button, when clicked will open a new window in lightbox.


Theme's admin tabs


This will allow you to attach / upload new media (image) files directly from your computer. You can also select more than just one image at a time by dragging your mouse and selecting multiple images at once.

Once you have uploaded your images click "X" button at top right to exit out of the lightbox window. DO NOT INSERT THESE IMAGES INTO YOUR POST AFTER UPLOADING otherwise you will notice you have two types of galleries displaying in the Gallery Page you've just created. Remove the inserted gallery if you've done this.

The way we have designed this template is it will automatically take those images you've uploaded and display them in the page you've created.

It should be noted here that we have added 2 additional fields to WordPress default attachement or media upload window.

Theme's admin tabs
  1. Custom URL: enter here any type of URL or link, whether it is internal ot external (e.g. Any other Gallery page link, YouTube Video page link). This link will open if you click respective gallery image.

  2. Link Type: It fulfill two purposes ... [applicable to portfolio and gallery image]

    a. Determines icon which would be appear when you hover over the image(s) on front end.

    b. Enable/Disable lightbox script on portfolio featured or gallery image(s). Based on link type selected (e.g. it will disable lightbox for image if 'link' or 'post' is selected as link type)

ii. Managing your Images

You can manage your images through the "Media Gallery". Just return to the page you've created for your gallery, click the same "Add Media" button and this will load the lightbox window once more.

Inside here, you will see, at the top, a select box having option "All media items" selected by default. Change it to "Uploaded to this page" and you'll be shown all the images related to this specific page.

Theme's admin tabs

Once you see the images, you can drag and drop those images in the specific order you'd like them to appear in the frontend of your website. You can also change attachment details of any gallery image from right hand sidebar.

iii. Template Configuration Meta Panel

This step is Optional, but required for advanced configuration. Scroll down till you see the "Template Configuration" meta panel, here you can setup a few options:

Theme's admin tabs


  1. Custom Page Heading: Define custom page heading which will appear on page header. By default original page title will be used.

  2. Page Sub-Heading: Define subheading for your page, it will appear just beside main page heading with smaller font size and darker color. By default it is blank.

  3. Images per Page: Set number of gallery images to show per page. Use -1 to show all avaiable images on single page and disable pagination.

  4. Gallery Style: There are 6 type of gallery layouts (4 columnar, 1 grid and 1 galleria style), Choose whatever gallery style you want.

    • 2 Column Layout (available with ColorBox, FancyBox and prettyPhoto - see demo site)
    • 3 Column Layout (available with ColorBox, FancyBox and prettyPhoto - see demo site)
    • 4 Column Layout (available with ColorBox, FancyBox and prettyPhoto - see demo site)
    • 5 Column Layout (available with ColorBox, FancyBox and prettyPhoto - see demo site)
    • Grid Layout (available with ColorBox, FancyBox and prettyPhoto - see demo site)
    • Galleria Layout (lighbox not available - see demo site)

  5. Lightbox Script: There are 3 type of lightbox scripts included in this theme, These are applicable to Columnar and Grid style gallery. Choose whatever lightbox script you want. To keep harmony and unity in theme design and lightbox script, black skin is used for all lighbox scripts, and this skin is almost same in look and feel for all the scripts.


  6. Gallery Enhancements: This section is used for misc. gallery setting.

    • Enable Masonry: Check this if you want to enable Masonry effect on gallery. This effect is avaiable for Columnar and Grid layout galleries. By default columnar and grid layout will use fixed height for gallery images.

      • 2 Column Masonry Layout (FancyBox and Masonry Enabled - see demo site)
      • 3 Column Masonry Layout (FancyBox and Masonry Enabled - see demo site)
      • 4 Column Masonry Layout (FancyBox and Masonry Enabled - see demo site)
      • 5 Column Masonry Layout (FancyBox and Masonry Enabled - see demo site)
      • Grid Masonry Layout (FancyBox and Masonry Enabled - see demo site)

Now you have completely configured this meta panel for your  gallery. Click on “Publish” button to create new gallery page.

Note: If you want text to show above your gallery, when creating this page, just add the text to the contents box / editor and that text will display above the gallery images.

Once you have created this page, you’ll want to link it to your menu / navigation. To do this, go to "Appearance" > "Menus" and add the new page you just created to your navigation. Click save and once done you should be able to see the new item in your menu.


H) CREATING A NEW PORTFOLIO - top

This theme uses custom post type functionality of wordpress to create portfolio page(s). Inside your WordPress Dashboard, in the left-hand sidebar you will see the "Portfolio" menu option. Click this and you will have the option to view all "Portfolio" items, "Add New" portfolio items, and create "Project Types" that you can use to organize the different type of projects you wish to display on your site. This also enables you the ability to create multiple portfolios and assigning categories.

i. Adding a Portfolio Project

  1. Click "Add New" and this will open the Add new post for the portfolio item.

  2. Type in the title of your portfolio project where it says "Enter title here".

  3. Add in your actual project contents specific to that project item. This information will be displayed when the "Read More" is clicked on.

  4. On the right hand side you will see a panel, with heading "Featured Image" containing a link Set featured image. This link is when clicked will open a new window in lightbox. It will allow you to attach image file directly from your computer. This image will be used as your project featured image and will be displayed on portfolio index page.

  5. If you want to attach multiple images gallery with your project entry, you can use native WordPress Media Gallery to upload multiple images. For complete procedure is same as uploading images for gallery page, so for detail click here. These images will appear on single project page, if defined. Else, featured image will be used.

  6. Again, on the right hand side you can see a panel, with heading "Project Type", select appropriate project type/category for your project. You can assign multiple project types with your project.

  7. By default, theme will use first paragraph of your project content as a summary to show in portolfio index page. However, if you want more control over this summary you can also define custom summary for you project, under "Excerpt" meta panel.

  8. This step is Optional, but required for if you want to define project url and other advanced configuration. Scroll down till you see the "Project Details" meta panel, here you can setup a few options:

    Theme's admin tabs

    a. Read More Text: Enter here text which you want to use for read more button. By default "Read More" text is used. Type '0' in this field to disable read more button.

    b. Entry Custom Link: Enter here link which you want to open when entry title, thumbnail or read more button is clicked. By default single post link will be used.

    c. Project Button Text: Enter here text which you want to use for visti site button. By default "Visit Site" text is used.

    d. Project Link: Enter here link (including http://) of your project. Leave it blank to disable "Visit Site" button button.

    e. Project Enhancements: This section is used for misc. project setting.

    • Disable Slider: Check this option if you want to disable slider for gallery images in project single page.

  9. That’s it. Now click the "Publish" button to create new portfolio item.

ii. Creating a Portfolio Page

So now you've successfully added Portfolio item(s), you'll want to learn how to display those items. To do this, you need to create a new page using the page template "Portfolio". Once you create a Portfolio Page, you just simply assign which category for your Portfolios you want displayed and the rest is done automatically. See the below steps for instructions:

  1. Go to "Pages" in your sidebar and click "Add New".

  2. Title the portfolio page accordingly, ie., "Music Videos" or "Photography".
    - You can create multiple portfolios by creating new pages.

  3. In the right sidebar of this page, look for "Page Attributes" and under Template heading select from the dropdown "Portfolio Template". This will assign Portfolio template to current page.

  4. This step is Optional, but required for advanced configuration. Scroll down till you see the "Template Configuration" meta panel, here you can setup a few options:

    Theme's admin tabs

    a. Custom Page Heading: Define custom page heading which will appear on page header. By default original page title will be used.

    b. Page Sub-Heading: Define subheading for your page, it will appear just beside main page heading with smaller font size and darker color. By default it is blank.

    c. Entries per Page: Set number of projects to show per page. Use -1 to show all avaiable projects on single page and disable pagination. By default, 10 portfolio projects will be shown on one page.

    d. Category: Select category or project type from which you want to populate your portfolio template.
    If you dont want to choose any specific category, portfolio template will show projects from all categories.

    e. Lightbox Script: Select lightbox script for featured images of your project, lightbox can be disabled individually for each project.

    f. Portfolio Enhancements: This section is used for misc. portfolio setting.

    • Enable Filteration & Sorting: Check this option if you want to show “Filteration and Sorting” navigation bar on top of your portfolio entries amd just below page header.

    • Enable Full Content: Check this option if you want to show full content, instead of summary of portfolio entry in portfolio index page.

  5. That’s it. Now click the "Publish" button to create new portfolio index page.

Note: If you want text to show above your portfolio entries, when creating this page, just add the text to the contents box / editor and that text will display above the portfolio projects.

Once you have created this page, you’ll want to link it to your menu / navigation. To do this, go to "Appearance" > "Menus" and add the new page you just created to your navigation. Click save and once done you should be able to see the new item in your menu.


I) SETTING UP THE CONTACT PAGE - top

To set up the contact page, you have to create a new page, you can do so by navigating to Pages > Add New. You can give this page a title of “Contact”, you do not have to include any content in the editor. Select the “Contact Template” from the Page Attributes section. By selecting this template “Template Configuration” meta panel will be populated with different options regarding configuration of contact form.


Theme's admin tabs

  1. Custom Page Heading: Define custom page heading which will appear on page header. By default original page title will be used.

  2. Page Sub-Heading: Define subheading for your page, it will appear just beside main page heading with smaller font size and darker color. By default it is blank.

  3. Email Address: Provide email address to whom mail would be sent. By default administrator email address will be used.

  4. Default Message: Define default message which would be appear just above the contact form when form is not submitted.

  5. Success Message: Define success message which would be appear when form is submitted succefullly.

  6. Failure Message: Define default message which would be appear when form is not submitted succesfully.

Once you have created this page, you’ll want to link it to your menu / navigation. To do this, go to "Appearance" > "Menus" and add the new page you just created to your navigation. Click save and once done you should be able to see the new item in your menu.


J) CREATING A FULLSCREEN PAGE - top

To set up the fullscreen page you need to create a new page using the page template "Fullscreen". This template is usually used for custom Home Page or Fullscreen Gallery, You can populate fullscreen template with multiple background images or single video. See the below steps for instructions:

  1. Go to "Pages" in your sidebar and click "Add New".

  2. Title the fullscreen page accordingly, ie., "Home" or "Gallery".
    - You can create multiple fullscreen pages.

  3. In the right sidebar of this page, look for "Page Attributes" and select from the dropdown "Fullscreen Template". This will assign fullscreen template to current page.

  4. This step is optional, but required if you dont want to use default global background image or video. Scroll down to Background and Caption meta panel and set it up as described here.

  5. This step is also optional, but required if you want to enable background audio for your fullscreen page. Scroll down to Background Audio meta panel and set it up as described here.

  6. That’s it. Now click the "Publish" button to create the fullscreen page.

Once you have created this page, you’ll want to link it to your menu / navigation. To do this, go to "Appearance" > "Menus" and add the new page you just created to your navigation. Click save and once done you should be able to see the new item in your menu.


K) CREATING A DEFAULT PAGE - top

If you want to create a page which do not have to use any of the template described above you can create a default page in which you can enter your custom content. See the below steps for instructions:

  1. Go to "Pages" in your sidebar and click "Add New".

  2. Title the page accordingly, ie., "FAQ" or "About Us".
    - You can create multiple default pages.

  3. In the right sidebar of this page, look for "Page Attributes" and make sure "Default Template" is selected by default.

  4. This step is Optional, but required for advanced configuration. Scroll down till you see the "Template Configuration" meta panel beneath the content editor, here you can setup a few options:

    Theme's admin tabs

    a. Custom Page Heading: Define custom page heading which will appear on page header. By default original page title will be used.

    b. Page Sub-Heading: Define subheading for your page, it will appear just beside main page heading with smaller font size and darker color. By default it is blank.

    c. Template Configuration: This section is used for misc. default template setting.

    • Disable Sidebar: By default, a sidebar will appear on every default page. However, if you dont want this sidebar to appear check this option to have a full-width default page template.

  5. That’s it. Now click the "Publish" button to create the default page.

Once you have created this page, you’ll want to link it to your menu / navigation. To do this, go to "Appearance" > "Menus" and add the new page you just created to your navigation. Click save and once done you should be able to see the new item in your menu.


L) SETTING UP IMAGE/VIDEO BACKGROUND - top

This section is completely optional, as mentioned previously any page or post of your site will use default global background image or video defined in Theme Options. But if you want more control over individual page/post background you will have to setup image or video background for that specific page/post using Background and Caption meta panel, present when editing/creating a new page or post beneath the wordpress content editor. You can basically define two type of backgrounds (image or video) using this meta panel.

i. Image Background Type



Theme's admin tabs

  1. Background Images: Basically there are two fields under this label, however you can add multiple background images by clicking on Add button below these fields and defining each field as instrcuted below:

    a. Url: When you click on this field, wordpress native WordPress Media Gallery uploader will appear, from here you can upload any background image from your computer or use any existing image from media gallery. After choosing image click on Insert into Post button. Image link will automatically be inserted in the url field.

    b. Caption: Define here caption for your image. Which will appear on a black bar over background image.

  2. Background Enhancements: There are two options under this heading too:

    a. Disable Autoplay: If you have defined multiple backgound images, by default, images will keep changing automatically after a given interval (defined in Theme Options). However, if you dont want this functionality you can disable autoplay of background image slideshow.

    b. Display Random: If you have defined multiple images and dont want to follow the order in which background images is defined you can check this option to show background images randomly.

ii. Video Background Type


Theme's admin tabs

  1. Background Video: There are four fields under this label, one for poster image and three for video background files. You have to define url of video file in three formats (mp4, ogv and webm) for cross browser compatibility.
    Just like defining image url above, When you click any of this field, wordpress native WordPress Media Gallery uploader will appear, from here you can upload any poster image or background video from your computer or use any existing poster image/video from media gallery. After choosing file click on Insert into Post button. Link of that file will automatically be inserted in the appropriate field.

  2. Video Caption: Type caption text for your video background defined above.

  3. Background Enhancements: There are three options under this label:

    a. Disable Autoplay: By default, background video will start playing automatically on page load (provide sufficient portion of video file itself is also loaded). To stop this behaviour you can check this option to stop autoplay of background video.

    b. Disable Loop: By default, video background will keep looping and will not stop after ending once. To stop this looping behaviour of video check this option.

    c. Disable Audio: If your video background have its own audio and you dont want to use it, rather you want to play a seperate audio file, you can do so by disabling video audio and than defining Background Audio (defined here) seperatly.

 


M) SETTING UP BACKGROUND AUDIO - top

This section is also optional, as mentioned previously any page or post of your site will use default global background audio defined in Theme Options. But if you want more control over individual page/post background audio you will have to setup audio background for that specific page/post using Background Audio meta panel, present when editing/creating a new page or post beneath the wordpress content editor. Details regarding its fields are below:

Theme's admin tabs

  1. Audio Details: There are two fields under this label, for cross browser compatibility you have to provide audio file in two formats (mp3 and oga).
    When you click any of this field, wordpress native WordPress Media Gallery uploader will appear, from here you can upload any audio file from your computer or use any existing audio from media gallery. After choosing audio click on Insert into Post button. Audio link will automatically be inserted in the required field.

  2. Background Enhancements: There are two options under this label:

    a. Disable Autoplay: By default, background audio will start playing automatically on page load (provided sufficient portion of audio file itself is also loaded). To stop this behaviour you can check this option to stop auto playing of background audio.

    b. Disable Loop: By default, audio background will keep looping and will not stop after ending once. To stop this looping behaviour of audio check this option.
Note: Unlike, image and video background just defining file url's is not enough, you will also have to choose Enable under the label of Background Audio to enable it.



N) SHORTCODE GENERATOR - top

The theme comes with easy to use shortcode generator, you can find it (while adding new or modifying post/page) just below the wordpress content editor.

You can generate code for basically 14 shortcodes using this generator. Just select "Shortcode Type" from select option, fill the require fields (each fields is self explanatory, for short info about the field click on [+] more info link above the field) and then click on "Create Shortcode".

It will generate and send shortcode to the editor. Here is an example of shortcode generator meta panel for Google Map shortcode ...

Theme's admin tabs


A. Widget Ready Areas: This theme comes with 3 widget ready sidebar areas. Its details are following ...


Theme's admin tabs

  1. Sidebar: This sidebar would only be shown on high resolution screen (e.g desktop computer) at the right hand side of the page, if sidebar is enabled for that page.

  2. Footer (High Resolution): This footer widget area would only be shown on high resolution screen (e.g desktop computer).

  3. Footer (Low Resolution): This footer widget area would only be shown on low resolution screen (e.g mobile, tablet).

B. Custom Widgets: The theme comes with 6 custom widgets that can be used to configure how your site displays content - they can be found under Appearance > Widgets. Its details are following ...

  1. Blog Entries List Widget: Entries widget, which will list blog entries from any specified blog category. Posts can be sorted as recenet or popular.

  2. Theme's admin tabs

  3. Blog Comments List Widget: This widget will list comments for blog entries from any specified blog category, You can limit the number of comments to show.

  4. Theme's admin tabs

  5. Flickr Photostream Widget: This widget will show latest photostream from any flickr account, for this you will require to specify Flickr ID of that account. You can find out Flickr ID of any account at http://www.idgettr.com


  6. Theme's admin tabs

  7. Twitter Stream Widget: This widget shows latest tweets from any twitter account, for this you need to specify twitter username (without @). You can also limit number of tweets to display.


  8. Theme's admin tabs

  9. Video Widget: Like all other widget this widget is also resposive, which accepts video embed code and will output responsive code for that video.

  10. Theme's admin tabs

  11. Contact Info Widget: This widget is used for displaying a summary of contact information.

  12. Theme's admin tabs


P) CASCADING STYLE SHEETS - top

The theme includes a few CSS files that are used at various times depending on theme requirements.

A. All CSS files, with the exception of the main CSS file (style.css) can be found in the (theme_root/lib/css/) folder.

  1. core.css - The theme’s main stylesheet and determines the majority of the theme’s styling.

  2. dynamic.php - This file is used do dynamically add CSS rules to your site including custom css rules defined in "Theme Options".

  3. fonts.php - This file contains CSS rules to integrate custom fonts using @font-face method and to dynamically implement Google Font for site headings, defined in "Theme Options". You can also find rules regarding fonts which are most likely to be adjusted in case of change of google font.

  4. desktop.css - This file contains CSS rules for screens having width of at least 1024px. Normally, tablet with landscape mode and computer falls in this range

  5. smart.css- This file contains CSS rules for screens having width upto 989px.

  6. res_768.css- This file contains CSS rules for screens having minimum width of 768px or maximum width upto 989px. Normally, tablets with potrait mode falls in this range

  7. res_480.css- This file contains CSS rules for screens having minimum width of 480px or maximum width upto 767px. Normally, smartphone with landscape mode falls in this range.

  8. res_320.css- This file contains CSS rules for screens having width upto 479px. Normally, smartphone with potrait mode falls in this range.

B. CSS files located in (theme_root/lib/css/_patches) provide some browser specific styles and fixes.

C. CSS and PHP files located in (theme_root/lib/css/_skins) provide some basic builtin and dynamic skin functionality which is controlled from "Theme Options"

D. Whereas, (theme_root/lib/css/_fonts) includes custom font(s) used in this theme using @font-face method. This theme uses following font(s).


Q) JAVASCRIPT FILES - top

The theme imports various Javascript files depending on the page being viewed, widget configuration and settings in the theme options.

A. jquery-1.7.2.min.js - jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. More information can be found at http://jquery.com/

B. ie.min.js - This files includes 3 scripts:

  1. Html5 Shiv: A simple script which enables Html5 semantics tags styling in IE 6-8. More information can be found at http://code.google.com/p/html5shiv/

  2. Html5 Inner Shiv: A script to apply Html5 Shiv on newly added elements by ajax. More information can be found at http://jdbartlett.github.com/innershiv/

  3. Selectivizr - Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. More information can be found at http://selectivizr.com/

C. footer.min.js - This files includes 10 scripts:

  1. Superfish: Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds much-sought-after enhancements. More information can be found at http://users.tpg.com.au/j_birch/plugins/superfish/

  2. Supersubs: This plugin automatically adjusts submenu widths of suckerfish-style menus to that of their longest list item children. More information can be found at http://users.tpg.com.au/j_birch/plugins/superfish/#sample5

  3. Supposition: An optional enhancer for Superfish jQuery menu widget. More information can be found at http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/

  4. Supersized: Supersized is a fullscreen background slideshow built using the jQuery library. More information can be found at http://buildinternet.com/project/supersized/

  5. Flex Slider: An awesome, fully responsive jQuery slider plugin. More information can be found at http://www.woothemes.com/flexslider/

  6. Colorbox: A lightweight customizable lightbox plugin for jQuery. More information can be found at http://www.jacklmoore.com/colorbox/

  7. prettyPhoto: PrettyPhoto is a jQuery lightbox clone that support images, videos, flash and iframes. More information can be found at http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

  8. Fancy Box: FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. More information can be found at http://fancybox.net/

  9. Galleria: Galleria is a JavaScript image gallery framework. The aim is to simplify the process of creating professional image galleries for the web and mobile devices. More information can be found at http://galleria.io/

  10. imagesLoaded: A jQuery plugin that triggers a callback after all the selected/child images have been loaded. Because you can't do .load() on cached images. More information can be found at https://github.com/desandro/imagesloaded

  11. Masonry: Masonry is a dynamic grid layout plugin for jQuery. It arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall. More information can be found at http://masonry.desandro.com/docs/intro.html

  12. Hover Intent: hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! More information can be found at http://cherne.net/brian/resources/jquery.hoverIntent.html

  13. ScrollTo: Provides smooth scrolling effect when clicked on anchored links. More information can be found at http://plugins.jquery.com/project/ScrollTo

  14. LiveQuery: Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated. More information can be found at http://docs.jquery.com/Plugins/livequery

  15. Buzz: Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It degrades gracefully on non-modern browsers. More information can be found at http://buzz.jaysalvat.com/

D. jquery.form.validation.js - This is the custom made jquery script to validate contact form in the theme.

E. jquery.gmap.min.js - Lightweight jQuery plugin that helps you embed Google Maps, using the API V3, into your website. More information can be found at https://github.com/marioestrada/jQuery-gMap

F. supersized.shutter.js - Lightweight and minmal supersized plugin theme customized for picasso.

G. galleria.classic.min.js - The original and the best. First Galleria theme ever to be made.

H. functions.js - This file configuration for various js scripts and some custom made jquery snippets.


R) OTHER SOURCES & CREDITS - top

The theme uses a few other resources by third parties, details are below.

A. WPAlchemy – The WPAlchemy_MetaBox PHP class can be used to create WordPress meta boxes quickly. It will give you the flexibility you need as a developer, allowing you to quickly build custom meta boxes for your themes and plugins. More information can be found at http://www.farinspace.com/wpalchemy-metabox/

B. Freshizer – This script will allow you to resize & crop WordPress images on fly. More information can be found at https://github.com/boobslover/freshizer

C. Komodo Social Icons – The Social Network Icon Pack consists of 40+ 16 pixel x 16 pixel icons and 40+ 32 pixel by 32 pixel icons all in 32-bit PNG format. More information can be found at http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/#icons

D. Mono Icons – The Icon Pack consists of 105, 32 x 32 pixel icons all in 32-bit PNG format. More information can be found at http://www.tutorial9.net/downloads/108-mono-icons-huge-set-of-minimal-icons/

E. Icons Sweet 2– The Icon Pack consists of 1000+, 16 x 16, 32 x 32 and 64 x 64 pixel icons all in psd format. More information can be found at http://www.iconsweets2.com/

F. Glyph Icons –It is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.. More information can be found at http://glyphicons.com/


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.

Muhammad Faisal

Go To Table of Contents