Getting Started

About the Theme


Created: May 4, 2013

Author: Pirenko

Author Website: www.pirenko.com

Twitter: @Pirenko

Facebook: Pirenko

Youtube: PirenkoThemes

If you have any questions that weren't clearly answered on this help file please feel free to email via my user page contact form at Themeforest. If you have time don't forget also to rate the theme on your downloads section.

Thank you for purchasing the Quest WordPress Theme!

Installation

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=sh7nOdjpVZ8.

This video explains the installation process.

Theme Options


General Tab

a) Main Layout Options - Decide here if you want your theme to adjust to smaller screens. You can set also the maximum width that the center are scales to (this is usefull for really wide screens so the that content doesn't stretch too much). It's also here where you can apply on of the theme pre-defined skins;

b) Background - From top to bottom the theme searches for an image, then for a pattern and only after that the solid color. So if you set an image it has priority on the other options. If a background image is set for a specific page it will also override these settings that apply in general to all the pages of the theme;

c) Fonts - There's a large number of google fonts available. Let me know if you need any sepcific font to be added;

d) Color Scheme - 10 colors are used all over the website and their names are self explanatory. Set also the opacity used on buttons and some other background blocks;

e) Borders and Lines - Set lines and shadows color and their opacity here. Set the opacity to 0 if you don't need any shadowing effect;

f) Header - Personalize your header here assigning a solid color and the opacity;

e) Footer - Personalize your footer here assigning a solid color and the opacity. Define also the text color and write your own some text there. HTML supported;

f) Google Analytics - Place your custom code here if you don't want to use any plugin for this;

g) Sidebars - Just decide if you want to use the 2 sidebars that are available and define the number of widgets per row on the bottom sidebar;

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=1oyFgVY2QIk.

This video shows the options that were just described.

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=VsDAkvZ3U7w.

This video shows the how to manage translations and also the Custom Scripts tab.

 

Branding

a) Logo Images - Not much to say here... Just upload your own images and they will be used across all the theme pages. You may also upload special images for high resolution screens. Depending on your logo configuration you might want to adjust the menu vertical placement and you can do this by adjusting the menu vertical displacement value;

b) Social Networks - Add up to 6 links to your preferred social networks. They will be displayed near the menu;

 

Custom Scripts Tab

a) The Custom CSS textfield is extremelly important to make adjustments to the theme styling;

b) You may also add some Javacript code on the Custom Javascript textfield;

 

Configuration

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=3qbGoub7gaA.

This video shows how to set up your homepage.

 

Content Managment

Portfolio/Portfolio Items


Recommended width for the images to use on these pages is 1200px (height is variable). If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some aditionnal notes:

a) You may use the portfolio categories to filter the entries. You may also add some tags to these items;

b) The featured image will be the thumbnail and the first image of the slider. If you only want this image to be the thumbnail you should select the default option to "Skip Features image on Lightbox and Slideshow" inside the Quest Portfolio Custom Options. In this case the theme will fecth the second image/video to the prettyphoto lightbox and it will be the first image of the slider. You can set up to 10 images/videos for each news entry inside the same window;

c) Here's a sample code to embed a Vimeo Video:

<iframe src="http://player.vimeo.com/video/40540343?color=ffffff&amp;autoplay=1" width="700" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

d) After adding some portfolio items probably you want a page to show these items. You should go to Pages>Add New and set the Template (on the right side menu) to Portfolio Page. The Classic Template type resizes the thumbs so that they all have the same height, while the Masonry Template type sets the same width to all and height is variable. You can also mark the post thumbnails as Featured and this will make the thumb have the double size on the Grid Multiple Sizes template type. If you want the Portfolio items always visible you can use also the Titled Portfolio template;

e) To set up multiple portfolios you need to use the Quest Portfolio Template Custom Options. This window will show after you save a page with the template "Portfolio Page" and there you can decide what categories you want to use. It's here where you decide too if you want the images to link to a single page or open a lightbox (enlarged image);

f) For each Portfolio Page you can use the Aax loading option (this will make the single post show without reloading the page).

g) If you decide to use the Ajax Features combined with the gallery layout your images description on bottom is the description you set for the image inside the WordPress Media Library;

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=KbZGwZpi8wc.

This video shows the Portfolio Pages Management.

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=JbRqR8fmmp4.

This video shows the Portfolio Single Posts Management.

 

Blog/Posts

Recommended dimensions for the image to use on this page are 1000px. If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some aditionnal notes:

a) News/Blog entries are Posts that you create on your Dashboard. You may use categories and tags to organize your content;

b) The featured image will be the thumbnail and the first image of the slider. If you only want this image to be the thumbnail you should not select the default option to "Use featured image on slideshow" inside the Quest Custom Post Options window. In this case the theme will fecth the second image/video to the prettyphoto lightbox and it will be the first image of the slider. You can set up to 10 images/videos for each news entry inside the Quest Custom Post Options window;

c) Here's a sample code to embed a Vimeo Video:

<iframe src="http://player.vimeo.com/video/40540343?color=ffffff&amp;autoplay=1" width="700" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

d) After adding some blog entries probably you want a page to show these items. You should go to Pages>Add New and set the Template (on the right side menu) to Blog Page. The Centered Template type shows the a vertical and wide layout, while the Timeline template shows them around a centered timeline.

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=8-DMH3bud78.

This video shows the Blog Pages Management.

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=-7pS_KbCxnA.

This video shows the Blog Single Posts Management.

 

Theme Slider Page Slider/Slides

Recommended dimensions for the image to use on the slider are 1280x1024px. If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some aditionnal notes:

a) When you create a slider if you want to use an image use the Featured image panel. If you want to use a video use the same code as for the portfolio section and place it on the Video HTML code textfield;

b) You can set the slides to link to other pages or external links. In this case fill the URL textfield inside the Quest Slides Custom Options. You may also change the text color and the position where that text is displayed;

c) You can organize your slides using Groups. This is the way to create different sliders across the website. After creating a Group(ex: first_group) and assigning some slides to this entity, you have 2 ways to use that group of slider:

c.1) You can show those slides directly on the top of a page like on the corporate theme preview landing page. In this case you must create a page and select the option show slideshow on top of this page ( then select on the option below the groups of slides);

c.2) You can show those slides using this shortcode (for correct slider interactions you should also set a unique id);

[slider id="first_slider" category="first_group"][/slider]


Important: The category should be the Group Slug (not the Group Name)

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=VPFoKPaFW6c.

This video shows ho to manage Sliders and Slides.

 

Teams/Team Members

Members are managed in a similar way to portfolios or slides. You can organize them into categories (teams) and you can show teams using shortcodes. Each member has a single page that you can add to the menu or to whatever section you want.

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=dM1URI1s6Bk.

This video shows the Team Members Management.

 

Custom Pages

The easy way to create pages and add theme elements is using the Visual Editor combined with the Theme Shortcode Button. Here are some notes:

a) There are 2 types of pages: normal pages and section pages. If you don't need any section to fill the whole width of the screen use the Defaul Page Template. On the other hand, if you are going to need zones that fill the whole screen horizontally you must use a Page with Sections and add those sections using the theme Shortcode button (or manually by copying and pastin the section shortcode;

b) If you want to use a special header with an image set up a featured image for that page;

c) Under the page content you'll find more options such as headings color and sidebar display;

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=VSxEJ8krppw.

This video shows how to manage a Page with Sections.

 

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=jpNHTtlv4D8.

This video shows the Contact Page.

 

Shortcodes and HTML elements

You The theme comes packed with a shortcode manager to simplify the content insertion process. To activate the shortcode manager button make sure that you select the HTML tab when editing a page or post content. You should see a button like this

When you click on that button wou'll be able to use most of the shortcodes below.


Accordion

  • [prk_accordion][prk_ac_single title="Section 1"]Text here.[/prk_ac_single][prk_ac_single title="Section 2"]Text Here.[/prk_ac_single][/prk_accordion]

Blockquote

  • [pirenko_blockquote bf_author="Author - " author="John Doe"]Ut placerat sollicitudin porta.[/pirenko_blockquote]

Button

  • [theme_button type="theme_button small" link="http://www.abc.com"]SMALL BUTTON[/theme_button]
  • [theme_button type="theme_button medium" link="http://www.abc.com"]MEDIUM BUTTON[/theme_button]
  • [theme_button type="theme_button large" link="http://www.abc.com"]LARGE BUTTON[/theme_button]
  • [theme_button type="theme_button_inverted small" link="http://www.abc.com"]SMALL BUTTON[/theme_button]
  • [theme_button type="theme_button_inverted medium" link="http://www.abc.com"]MEDIUM BUTTON[/theme_button]
  • [theme_button type="theme_button_inverted large" link="http://www.abc.com"]LARGE BUTTON[/theme_button]

Carousel

  • [prk_carousel title="Our Friends"]
    [prk_carousel_single path="yourimage.jpg"][/prk_carousel_single]
    [prk_carousel_single path="yourimage.jpg"][/prk_carousel_single]
    [prk_carousel_single path="yourimage.jpg"][/prk_carousel_single]
    [/prk_carousel]

Latest Comments

  • [pirenko_comments title="title here " items_number="number here"][/pirenko_comments]

Latest Portfolio

  • [pirenko_last_portfolios title="title here " items_number="number here" rows_number="number here"][/pirenko_last_portfolios]

Latest Posts

  • [pirenko_last_posts title="title here " items_number="number here" rows_number="3" cat_filter="print,web"][/pirenko_last_posts]

Layout

  • [one_half]Your content here[/one_half]
  • [one_half_last]Your content here[/one_half_last]
  • [one_third]Your content here[/one_third]
  • [one_third_last]Your content here[/one_third_last]
  • [two_third]Your content here[/two_third]
  • [one_fourth]Your content here[/one_fourth]
  • [one_fourth_last]Your content here[/one_fourth_last]
  • [one_sixth]Your content here[/one_sixth]
  • [one_sixth_last]Your content here[/one_sixth_last]
  • [five_sixth]Your content here[/five_sixth]
  • [five_sixth_last]Your content here[/five_sixth_last]

List

  • [list_with_icons icon="minimal_check"]
    <ul>
    <li>Unordered item 1</li>
    <li>Unordered item 2</li>
    <li>Unordered item 3</li>
    </ul>
    [/list_with_icons]
  • [list_with_icons icon="green_check"]
    <ul>
    <li>Unordered item 1</li>
    <li>Unordered item 2</li>
    <li>Unordered item 3</li>
    </ul>
    [/list_with_icons]
  • [list_with_icons icon="squared"]
    <ul>
    <li>Unordered item 1</li>
    <li>Unordered item 2</li>
    <li>Unordered item 3</li>
    </ul>
    [/list_with_icons]
  • [list_with_icons icon="rounded"]
    <ul>
    <li>Unordered item 1</li>
    <li>Unordered item 2</li>
    <li>Unordered item 3</li>
    </ul>
    [/list_with_icons]

Message

  • [error_box]<strong>Alert:</strong>This is a message![/error_box]
  • [warning_box]<strong>Alert:</strong>This is a message![/warning_box]
  • [info_box]<strong>Alert:</strong>This is a message![/info_box]

Pricing Tables

  • [prk_price_table featured="Title here" header="Header here" color="#00FF00" price="50 USD per Year" button_label="Sign Up" button_link="http://www.google.com"]
    <ul>
    <li>Something here</li>
    <li>Add more li if needed</li>
    </ul>
    [/prk_price_table]

Progress Bars

  • [prk_progress]
    [prk_progress_bar title="Title here..." pctg="50" active_color="#000000" background_color="#CCCCCC" show_pctg="true"][/prk_progress_bar]
    [prk_progress_bar title="Title here..." pctg="50" active_color="#000000" background_color="#CCCCCC" show_pctg="true"][/prk_progress_bar]
    [/prk_progress]

Sections

  • [prk_section align="center" bk_type="prk_inner_block" bk_color="" bk_pattern="" bk_image="" text_color="" ]Normal Size Section[/prk_section]
  • [prk_section align="center" bk_type="prk_full_width" bk_color="" bk_pattern="" bk_image="" text_color="" ]Full Width Section[/prk_section]

Services

  • [prk_service name="Swift Coding" link="#" image="icon-gauge" ]Seed image him morning was years void land female fifth. Moved she'd light winged behold second and. Replenish divide Air waters earth.[/prk_service]

Tabs

  • [prk_tabs][prk_tab title="Title1"]Tab Content1[/prk_tab][prk_tab title="Title2"]Tab Content2[/prk_tab][/prk_tabs]

Team Members

  • [prk_members columns="3" category=""][/prk_members]

Titles

  • [prk_styled_title align="center" text_color="" show_lines="no" use_italic="" title_size="medium"]Your text here...[/prk_styled_title]

Toggle

  • <div class="prk_toggle">[prk_accordion type="toggle"][prk_ac_single title="Title here..."]Your text here...[/prk_ac_single][/prk_accordion][prk_accordion type="toggle"][prk_ac_single title="Title here..."]Your text here...[/prk_ac_single][/prk_accordion]</div>

Mailchimp Integration

If you use Mailchimp for nwesletter subscriptions, I strongly recommend using the Mailchimp for WP plugin by ibericode. Here's an example of a form that you can copy/paste:

<p>
Subscribe and stay updated with the latest news from us. We never spam!
</p>
<p class="quest_chimp">
<label>Email address:</label>
<input type="email" name="EMAIL" placeholder="Your email address" class="pirenko_highlighted" required />
</p>
<div class="theme_button big">
<input type="submit" value="Sign up" />
</div>

Using WPML for multi-language sites

If you need to use multiple languages with this theme, I strongly recommend using the WPML plugin. Yes it is paid, but it is worth every penny.

Here's a quick list of things that can be useful during this process:

Theme Update

The theme will be updated whenever new features are added or bugs appear. If you have the recommended Envato WordPress Toolkit Active the process is automated as long as you already have placed the necessary information on the plugin settings.

If you prefere to do it manually the video below shows how to update your theme (the video shows another theme, but the update process is always the same on my themes):

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=hjBLV58VhYw.

Final Notes

Customization Tips


If you need to dig into the code to make some sort of adjustments the most important files are located at the includes folder and at the js folder. Here are some notes:
  • CSS - inside the css folder you'll find the 3 CSS files used all over the theme
  • PHP - custom.php controls most of the frontend content (located on the "inc" folder)
  • PHP - theme_options.php controls most of the backend custom content
  • jQuery - main.js has to do with functions used on the frontend
  • jQuery - admin_scripts.js has to do with functions used on the backend

Send me an email via Themeforest if you need any further help