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.

Thank you for purchasing the Fount WordPress Theme!

Installation

This theme is installed like any other WordPress Theme. Simply upload the fount.zip folder using the WordPress Dashboard or upload via FTP the fount folder into wp-content/themes folder.

After theme activation, you are advised to install some plugins that is bundled with the theme: Fount Framework and Envato WordPress Toolkit (for easy updates). To take full advantage of all this theme has to offer, it's strongly recommended that you install these plugins.

Here's a step by step video tutorial:

If you have any trouble opening this video you can view it online here https://www.youtube.com/watch?v=ynHoRnj3qOk.

One-click install demo content

The easiest and fastest way to generate sample posts, portfolio items, team members, slides and custom pages is using the feature One-click install demo content.

Here's a video tutorial showing how to do this:

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

Theme Options

General Tab

a) Main Theme Options - Decide here if you want your theme to adjust to smaller screens. There are also some important options related with the content width:

i) Set the maximum width that the content area scales to (this is useful for really wide screens so that the content doesn't stretch too much);

b) Fonts - There's a large number of google fonts available. The theme uses 2 types of fonts that can be selected here. If you need to add fonts that aren't bundled with the theme, you can use the method show here to add extra fonts: https://www.pirenko.com/blog/2013/08/27/extra-fonts-plugin-by-pirenko/.

c) Colors: General - Set the generic color scheme and style with these options. These colors will apply on multiple parts of the theme. You can also set up some background patterns here. If you need to add your own simply place your images inside the images/patterns/ folder that the theme will detect and make them ready for use;

d) Colors: Lines and borders - These values will apply to lines, borders and textfields. Some buttons will also receive a similar style (example: submit comment button). There's also the possibility to use shadows on some elements... Set the opacity to zero if you don't need any shadowing effect;

e) Colors: Buttons and Other - These specific colors will apply specifically to the elements that are described near each color picker;

f) Sidebars - Just decide if you want to use the 3 sidebars that are available. The right sidebar option can be overriden on certain page types too;

Branding

Not much to say here... Simply pload your own brand images and they will be used across all the theme pages. It is also here where you can set your website favicon that will be used on browsers that support it.

Menu Bar

Customize here the looks of the header bar where the menu is displayed. Besides the menu bar height (normal and collapsed) you can customize entirely the color scheme.

Overlayer

Customize entirely the color scheme of the overlayer bar that can be used to show portfolio entries.

Footer

Once again you can fully tweak the color scheme for this specific area. This element will stick to the lower part of the screen and you can also display some extra information under the widgetized area.

Blog

Besides other options whose name describes exactly what they do here are some notes:

a) Blog Categories Page Template - Decide the layout for the blog archives page;

b) Show author info under post - Decide if the information about the post author should be displayed. This info is set up under Users>Profile;

d) Social Sharing - Show/hide/select the social network sharing buttons;

Portfolio

Once again besides other options whose name describes exactly what they do here are some notes:

a) Skills Page Template - Decide the layout for the portfolio archives page;

b) Default Single Posts Layout - Half, Wide or fullscreen. This option can be overriden on each single post on it's respective options panel;

c) Social Sharing - Show/hide/select the social network sharing buttons;

Translations

There are 2 methods to translate the theme: using the Fount Options and using .mo/.po files that can be combined with WPML. You have the option to decide that on this translation tab. If you only need one language I would say that using the theme options is easier and faster, but if you need more than one language you need to use the .mo/.po files method.

If you decide to use the .mo/.po solution the language files are located inside the lang folder. With this method you can also use the plugin WPML, because the theme is fully compatible;

Custom Scripts

a) If you are using Google Analytics you can place the tracking code here;

b) The Custom CSS textfield is extremely important to make adjustments to the theme styling;

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

Advanced

Change some of the theme custom post types slugs that will be show on the URL browser address bar. Do not use any special characters here;

Here's another video tutorial showing the complete theme options panel:

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

Configuration

Content Management

This video is a general overview of how the theme manages the content creation process:

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

Blog/Posts

Recommended dimensions for the image to use on this page are 1200px. This value can be lower if your Maximum Content Width in pixels is much lower than this. 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 additional notes:

a) If you want to use a specific color for this post just set it up on the Featured Color option field;

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

c) 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 Featured image on Lightbox and Slideshow" inside the Theme Post Options panel. In this case the theme will fetch the second image/media to the lightbox and it will be the first image of the single page slider. You can set up to 10 images/videos for each news entry inside the same window;

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

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

e) 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. After this an options panel will be activated under the page content and will see multiple options for your blog page;

f) To set up multiple blogs you need to use the Theme Blog Options panel where you can decide what categories you want to use on this specific page;

Here's a video tutorial shwowing how to manage the blog content:

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

Portfolio/Portfolio Items

Recommended width for the images to use on these pages is 1200px (height is variable). This value can be lower if your Maximum Content Width in pixels is much lower than this. 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 additional notes:

a) If you want to use a specific color for this post just set it up on the Featured Color option field;

b) You may use portfolio skills to organize your entries. You may also add some tags to these items;

c) 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 Featured image on Lightbox and Slideshow" inside the Theme Portfolio Options panel. In this case the theme will fetch the second image/video to the lightbox and it will be the first image of the slider. You can set up to 20 images/videos for each news entry inside the same window, but if you are only using images the entries number is not limited (simply use the option bulk upload);

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

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

e) 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. Just like with the blog, after this an options panel will be activated under the page content and will see multiple options for your portfolio parent page

f) To set up multiple portfolios you need to use the Theme Portfolio Options panel where you can decide what skills you want to use on this specific page;

Here's a video tutorial shwowing how to manage the portfolio content:

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

Theme Sliders/Slides

Recommended width for the images to use on these pages is 1200px (height is variable). Just like before value can be lower if your Maximum Content Width in pixels is much lower than this. 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 additional 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 Theme Slide 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) you can select it when you are adding a slider to a page;

d) If you want your slider to fill the whole screen vertically make sure that you select the option "Make slider fill the window height". This option is shown on the panel located undeer the content when you are editing a Theme Page;

e) You can also show those theme sliders using the Visual Composer Plugin and selecting the Theme Slider button;

Important: When using the visual composer the slides group must be the Group Slug (not the Group Name);

Here's a video tutorial shwowing how to manage slides and sliders:

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

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.

Under each Team Member page content you have some options under the page content. Just on note to let you know that if you don't want to link the thumbs to team member single pages you can do this by selecting the respective option on this very same options panel;

Teams can be added to pages using the Visual Composer by selecting the options Team Members.

Here's a video tutorial shwowing how to manage the team members:

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

Testimonials

Testimonials are a great way of showing some sort of feedback that you need to display. They are managed like any other custom post type. You can organize them into categories (sets) and you can inser them into pages using the Page Builder. The elemnt to use in this case is Testimonials and you have multiple options to customize the frontend display.

Here's a video tutorial shwowing how to manage testimonials:

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

Managing pages & Visual Composer

This theme was developed to work combined with the Visual Composer Plugin. You'll find all the necessary elements to create all sorts of content across all your pages. Here are some notes:

a) Besides WordPress default page the theme offers a custom page template: Theme Page. The difference this page and the default WordPress page is the number of options that are available under the page content. Because it is much more flexible I recommend always using the Theme Page for regular pages;

b) If you want to create a full width section (fills the screen horizontally) click on the edit button on the row and you'll find that option there. It's also here that you can set up you background and margins. You can also set up some background patterns here. If you need to add your own simply place your images inside the images/patterns/ folder that the theme will detect and make them ready for use;

c) If you want to add some extra vertical spacing between elements simply add an empty row between them. There also an element called "Vertical Spacer" that you can add using the composer on which you can simply set up a value in pixels for a margin (positive or negative);

d) Under each page content you'll find more options such as the title text, title color, featured slider and sidebar display. The featured slider allows you to display a full width slider on top of a page;

e) The theme comes with 2 sets of font icons that you can use anywhere. To see their graphics and the respective classes open this page and/or this PDF document (each link has different icons);

f) The theme has a special page template to create Mini Sites. In this case you should create a menu based on HTML anchors and make them match with id's that you should assign to the pages rows too. Example: If you have a row with the id work the URL of the menu button that jumps to that section must be #work.

Here's a video how to create a single page site:

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

g) Most of the composer elements that you add have the option to add some custom CSS classes. This is extremelly important if you want to style some elements in a different way. Here are some custom CSS classes that are really useful:

  • simple_fade - the element will perform an opacity reduction on rollover
  • simple_scale - the element will perform a scale reduction on rollover
  • hide_later - the element will be hidden only on screens that are smaller that 768px
  • show_later - the element will be shown only on screens that are smaller that 768px
  • hide_much_later - the element will be hidden only on screens that are smaller that 480px
  • show_much_later - the element will be shown only on screens that are smaller that 480px
  • delay-300 - the element will be animated by CSS only 300 miliseconds after the show even is triggered. You can replace the valu 300 for any other that suits you

Here's a video showing how to build pages using the WP Dashboard page builder:

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

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:

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:

<div class="fount_chimp"> Subscribe and stay updated with the latest news from us. We never spam! </div>
<div class="fount_chimp">
<div class="fount_chimp_label">First Name:</div>
<input type="text" name="FNAME" class="pirenko_highlighted">
</div>
<div class="fount_chimp">
<div class="fount_chimp_label">Email:</div>
<input type="email" id="mc4wp_email" name="EMAIL" required class="pirenko_highlighted" />
</div>
<div class="theme_button">
<input type="submit" value="Ok, Sign Me Up" />
</div>

Final Notes

Theme and Plugins 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.

Here's also a video showing how to update the plugins that are bundled with the theme:

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

Customization Tips

If you need to dig into the code to make some sort of adjustments the most important files are located at the inc and js folders. Here are some notes:
  • CSS - inside the css folder you'll find the 5 CSS files used all over the theme. Their names explain where they are used and other.css contains all styles related with plugins and widgets
  • PHP - functions.php and inc/helper.php controls most of the frontend content
  • jQuery - main.js has to do with functions used on the frontend (all .js files located in the js folder)
  • jQuery - other.js has to do with functions used on the frontend related with plugins and widgets

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

Rating the theme

You are more than welcome to rate this theme. It will help me to move forward and eventually implement improvements on future updates. Here's an image showing how to do it from themeforest.net: