Getting Started

About the Theme


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. I'll be adding some videos as soon as the theme is available for sell.

Thank you for purchasing the Queed 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) Logo and favicon images - Nothing to say here... Just upload your own images and they will be used across all the theme pages. 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) Background managment - 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. The overlay image it's a semi transparent pattern that place on top of the background image or pattern. This is usually used only when there's a background image.;

c) Header and Footer - Add some textures for the background and just set a color and it's relative opacity;

d) Colors - 4 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 like tags;

e) Fonts and icon sets - There's a large number of google fonts available. There are also 2 icon sets available (one with clear and the other with dark tones);

f) Sidebars, footer text and custom CSS - Just decide if you want to use a top sidebar and set you text shown at the very bottom of the page. The Custom CSS textfield is extremelly important to make adjustments to the theme styling;

 

Homepage Tab

a) Five elements can be set here: the welcome text (will always be on top), the slider, the portfolio feed, the blog feed and a HTML content box. Apart from the title the other elements can be placed on Top, Center Top, Center Bottom and Bottom. The can also be turned off by selection the option "No display";

b) For the slider you can filter here the content to display by selecting the category you might have created on the Slides section;

 

Translations Tab

It's important to explain how the theme translates the content displayed, because you have a translations tab, but you may also use .po files that are included on the "lang" folder. The priority on translations are the ones that you have set on Queed Options>Translations Tab! If the values here are the default ones then the theme will search if there are any .po files provided and will apply those translations. If you are familiared with working with .po files I recommend you to disregad the translations tab and use them to translate the theme.

 

 

Configuration

Content Managment

Portfolio/Portfolio Items


Recommended width for the images to use on this page is 620px (height is variable). The auto generated thumbs will have 234x234px. 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) To set up multiple portfolios you need to use the Queed 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;

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 Queed 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) The correct lightbox icon of image or video will be auto generated;

d) 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>

Blog/Posts

Recommended dimensions for the image to use on this page are 700px. When viewing more than on news entry the image dimensions will be set to 585x200px. 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 Queed 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 Queed 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>

Homepage Slider/Slides

Recommended dimensions for the image to use on the slider are 940x440px (You may use different heights). Here are some aditionnal notes:

a) 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 Queed Slides Custom Options;

c) You can organize your slides using categories. This is the way to create different sliders across the website;

Custom Backgrounds

You can assign specific backgrounds to Pages (only pages) by setting their featured image.

Shortcodes


Blockquote

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

Boxes

  • [ok_box]Your content here[/ok_box]
  • [info_box]Your content here[/info_box]
  • [warning_box]Your content here[/warning_box]
  • [error_box]Your content here[/error_box]
  • [simple_box bk_color="#EBEBEB" ct_color="#969696"]Lorem ipsum.[/simple_box]

Unordered lists

  • [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]

Team Members - remove the social links that aren't needed

  • [prk_team][prk_member name="Jack Doe" role="CEO" image="http://www.smaple.net/yourimage.jpg" delicious="http://www.google.com" deviantart="http://www.google.com" digg="http://www.google.com" facebook="http://www.google.com" flickr="http://www.google.com" instagram="http://www.google.com" linkedin="http://www.google.com" myspace="http://www.google.com" myspace="http://www.google.com" pinterest="http://www.google.com" skype="http://www.google.com" twitter="http://www.google.com" vimeo="http://www.google.com" yahoo="http://www.google.com" youtube="http://www.google.com" rss="http://www.google.com"]Member text here[/prk_member][/prk_team]

Toggle buttons

  • [toggle title="Toggle Button" state="closed"]Nunc placerat quam fermentum diam consequat porttitor. Nulla non nisi felis, quis blandit justo. Mauris dui mi, varius vel pellentesque quis, imperdiet vitae orci. Cras nunc est, bibendum ac pulvinar non, tincidunt eu magna. Duis aliquam porttitor volutpat.[/toggle]

Buttons

  • [theme_button link="http://www.google.com/"]This is a sample.[/theme_button]

140 Icons

  • [theme_icon icon="tags"][/theme_icon]

All icon names available can be seen inside the bootstrap.css file (near line 1800).

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_fifth]Your content here[/one_fifth]
  • [one_fifth_last]Your content here[/one_fifth_last]
  • [two_fifth]Your content here[/two_fifth]
  • [three_fifth_last]Your content here[/three_fifth_last]

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 http://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 2 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
  • PHP - shortcodes.php controls the shortcodes
  • jQuery - main.js has to do with functions used on the frontend
  • jQuery - admin_scripts.js has to do with functions used on the frontend

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