“Progressio” Documentation by “Vamtam” v1.0
“Progressio”
Created: 20.09.2011
By: Vamtam
Email: office@vamtam.com
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us. And You should follow us on twitter to get the updates. Thanks so much!
Table of Contents
- Progressio Installation
- Theme options
- Framework Options
- Portfolios
- Slides
- Posts
- Pages
- Progressio Videos
- Credits
A) Progressio Installation - back to TOC
Download Progressio theme to a separate folder and unzip the package file.
Note: the following theme is Wordpress 3.1+ compatible. Use your ftp or ssh client to copy the “progressio” folder in your WordPress installation: [WP-Install]/wp-content/themes/ . All other resource folders are not required for theme installation.
Note: The progressio/cache folder (as well as the other cache files inside) need 755 privileges. This could be done with FileZilla or another FTP client where you open your-wordpress-install/wp-content/themes/progressio and right click on cache and select 755 for privileges plus the tick for recursive permission inheritance to the other files and folders inside. With plain console/shell it would be:
chmod 755 -R cache
for the cache folder. For more permission details please refer to Changing file permissions via FileZilla
If you are experiencing troubles with the css caches (broken layout, missing backgrounds), please set the priviliges of /cache/ to 777 and reactivate the theme.
After the transfer is complete, visit the WordPress administration => Appearance => Themes. Find the “Progressio” theme and activate it as your new website layout. In the sidebar you will see your new theme panels for Slides, Portfolios and Vamtam options:
If you need help installing Wordpress see the link below:
http://codex.wordpress.org/Installing_WordPress
B) Theme options - back to TOC
The Vamtam panel in your admin sidebar will help you to polish and configure your theme. There are different sets of options separated by type and area for your convenience.
B 1) General Settings - back to TOC
The General Settings tab includes the basic settings for your pages. Here you could enable or disable some of the visible panels for your website: the “Scroll to top” button in the right section of the website when you scroll down, the RSS button in the top right corner and the Feedback button link as well. All of these elements could be set visible or hidden according to your preferences. In Share icons you can select the social medias you want enabled and for which parts of the website to be shown.
B 2) Layout - back to TOC
In Layout you can set the the width of the sidebars in the body, and the height of the header and slider, sidebars and body content, footer widgets areas and subfooter area by dragging the blue sliders. You can enable or disable Boxed layout and Fixed header.
Progressio allows you to choose between the boxed or full width layout. In other words your website could be strictly wide a given amount of pixels or instead fill the whole width of your monitor. This is up to you - and in combination with the sliders this could give you infinite power to create a beautiful and powerful site with a great usability.
The Fixed header options together with the Boxed Layout helps you to use entirely gridded boxed layout, full width one or boxed layout with a full width header.
You can adjust Header height, Header slider height, Left and Right sidebars widths.
B 2.1) Header Layout - back to TOC
In Header Layout you can adjust the widget areas. They are placed between the slider and the body of the site. By default these areas are disabled. They can be enabled on every single page or post. You can either choose one of the predefined layouts or configure your own in the "Advanced" section.
Widget areas are a special Progressio feature in case that you need to use widgets in the content area. If you use some third party plugins with powerful widgets and want them to be visible in the actual content area, just enable them here and add your widgets.
B 2.2) Footer Layout - back to TOC
In Footer Layout are placed the footer widget areas are placed after the body of the site. You can either choose one of the predefined layouts or configure your own in the "Advanced" section if you want.
B 3) Styles - back to TOC
In Styles you can style General backgrounds, General links and General colors. In General backgrounds you can set background color or insert custom background picture or choose some of the preset background patterns we have created for you! Also you can set colors for different links.
B 3.1) General Typography - back to TOC
In Typography you can configure font size, line height for the fonts. You can choose for different font types, set font style and font color. Please keep in mind that CSS3 fonts and Google fonts use a technique which is not supported in IE7/8.
B 3.2) Header - back to TOC
In Header you can set custom background color or insert picture for your header background. Also you can set background color for slider or insert background image. You can adjust font for your Site title and set colors for links in you header. There are plenty of settings here for precise adjustment of your background or font settings.
For Menu you can style general menu font and set colors for submenu items as well.
B 3.3) Body - back to TOC
In Body you can set background color from palette and if you want you can insert image for background. Color pickers will assist you to select the appropriate color through the RGB color schemes. There are additional options for background positioning and layout.
B 3.4) Footer - back to TOC
In Footer you can set custom background colors or insert background images for Footer and Sub-footer backgrounds. Also you can set colors for widgets areas and select general footer font-size. In Link section you can adjust footer widget links colors to your taste.
B 3.5) Boxed Layout - back to TOC
In Boxed Layout you can set background color from palette or set custom background image. You may enable boxed layout using the "Enable boxed layout" option in the "Layout" section.
B 3.6) Forms - back to TOC
In Forms section you can adjust Buttons text and hover text colors and buttons border radius. Also you can set custom colors for text fields.
B 3.7) Tabs, accordions and toggles - back to TOC
Here you can customize different color settings for Tabs, accordions and toggles.
B 3.8) Media - back to TOC
The options in Media are only valid for shortcodes "Images" and "Video". Here you can adjust height and width of different media files.
B 3.9) Posts - back to TOC
In Posts you can set width and height for "Side image" and "Full image" dimensions. Also in Meta you can choose whether to
show or not these options categories and tabs, timestamp and comment count. These are the settings to be configured before you use your WordPress installation for a blog or news engine and further customizations on the look and feel of your posts.
B 4) Header Slider - back to TOC
In Header Slider you can enable or disable featured posts and full width to Header slider.
The Featured posts option adds all featured posts preselected by you to the header slider. When you navigate to a post editing panel, you could select a post as a featured so it could later be slided in the header slider.
You can choose from different options from Slider style, Pause time and Animation time in miliseconds, turn on/off Pause on hover. These options would change the behavior of your slider in a way for you to be able to modify the speed and duration of your animation.
Progressio is created with plenty of slider types and options and you are able to test them on our demo installation. The variety of effects and settings will let you polish your overall website vision. You have options to choose Autostart direction to Slider and if you want you can set text to "Next" and "Previous" buttons.
First slider style is Fade. This is our simpliest slider.
Then we have Slide slider. This is slider who changes images with plenty of Easing options.
Easing functions are mathematical functions that are used to interpolate values between two endpoints usually with non-linear results.
That is a fancy way of saying that they determine the way something moves.
Animation Easings are most visible with sliding type effects.
The Slide with multiple captions is like Slide but here we have animated Advanced captions which is add from Advanced captions in Slide Slideshow options.
Grid fade, Grid wave, Grid random are grid sliders.
There are different options for Grid. For example you can enable or disable Visible grid (which is one of our slider effects), set custom color and set numbers of cells for Grid rows and cols.
For optimum performance, please mind that rows*cols should not exceed 50.
For the waving slider you can choose Wave type and set Sub-side duration.
Zoom in, Peek and Shrink slide sliders are next from the list. It is important to say that the "shrink" style doesn't work work with a full width slider.
It is important to say that while most of the settings for the Header Slider in Theme options are global, you are able to override some
in the Post/Page settings, for example, Slider style. These options act as defaults for newly created Posts/Pages. This gives you opportunity
to have different styles for your Header Slider in different Posts/Pages.
To see how, check Pages Vamtam options or Posts Vamtam options
B 5) Save/Import Skin - back to TOC
The Vamtam theme gives you opportunity to Save current skin or Import saved skin that you saved before.
C) Framework Options - back to TOC
C 1) General - back to TOC
Here you can set custom Logo picture and choose Favicon. If you want you can add Copyright custom text to appear in the footer. You can paste your Google Maps API Key and Google Analytics Key easily. If you want you can put in footer custom javascript and CSS code.
C 2) Manage Sidebars - back to TOC
Here you can add new sidebars or delete already exists if you have added before. When you add new sidebar, you will be able to manage it from Widgets in your theme.
C 3) Quick Import - back to TOC
Vamtam gives you option to Import dummy content that we have prepared for you. You can edit content in any time you want. This is the perfect chance for you to install WordPress and Progressio and get all the existing demo content we provide on the demo site and only replace the text and images as you would do in your website assignment. Quick and clean solution combining all the shortcode combinations and skins that you have already seen on the demo.
D) Portfolios - back to TOC
You can add Portfolios and categories for them.
D 1) Portfolio Vamtam options - back to TOC
In Porftolios page you can turn on/off Feature in header slider. This is the same option mentioned above that allows you to add a post (or a custom post type) to the header listing. Feel free to combine posts and portfolios - the slider supports that too.
You can adjust Layout type for your porftolio and set options for Left and Right sidebars on the portfolio page. You can enable or disable Header widget areas and choose Custom background color or Insert custom image for portfolio background. So you could list your portfolio items in a grid and present a beautiful background image or color that suits your overall outlook.
You have additional settings for the Header slider. Here you can enable or disable slider and set a Slider style - as you could just hide the slider for that portfolio page or want to change the effects and appearance options. You can turn on or off Full width slider and choose to show slides only from specific slides categories (for better filtering).
You can select Portfolio data type from dropdown and insert Portfolio data url. Portfolios could embed different images, videos or other documents. An item can adjust width and height for Portfolio video and choose Portfolio link target. Also you can add images for Portfolio gallery.
D 2) Portfolio Vamtam templates - back to TOC
After styled your Portfolio from Vamtam options you can save current template or choose from saved templates for your porftolio. The template is an overall structure of your portfolio with the options and outlook and theme settings that you would normally use on another page. This makes it easier to replicate without the repetitive clicking of all options around the page.
E) Slides - back to TOC
In Slides section you add slides and slides categories for your Header slider.
E 1) Slide Slideshow options - back to TOC
In Slide Sledeshow options you can set background colors for Background and Caption background.
Certain slider styles may provide you with the option to have several captions each of which appears in a different place and/or have different
animation from the others.
Here you can add two Caption Helpers.
F) Posts - back to TOC
F 1) Posts Vamtam options - back to TOC
After the standard Progressio installation your Post editor for every post will attain the Vamtam options panel form where you can personalize every single post.
You can enalbe or disable Feature in header slider. You can adjust Layout type for your post and set options for Left and/or Right sidebars. You can enable or disable the Header widget areas (in order to add some widgets in the content part of your single post view) and choose Custom background color or Insert custom image for post background.
Also, there are the standard settings for the Header slider. Here you can enable or disable slider and set Slider style. You can turn on or off the Full width slider if you need some specific header layout for that post view and prefer to show slides only from specific slides categories.
Check the settings for Post format as this is a supported feature of Progressio based on the newest WordPress improvements. Link is to be set when you set "quote", "link", "audio" and "video" formats and Quote author for the "quote" post format. There are different layout and preview visibility settings for each post format supported by our theme.
F 2) Posts Vamtam templates - back to TOC
After styled your post from Vamtam options you can save current template or choose from saved templates for your post.
G) Pages - back to TOC
G 1) Pages Vamtam options - back to TOC
After Progressio is installed bellow Page editor for each page will show Vamtam options panel form which you can personalize every single page. You can add Descriptions for your page. You can adjust Layout type for your page and set options for Left and Right sidebars. You can enable or disable Header widget areas and choose Custom background color or Insert custom image for page background. You have settings for Header slider. Here you can enable or disable slider and set Slider style. You can turn on or off Full width slider and choose to show slides only from specific slides categories.
G 2) Pages templates - back to TOC
After styled your page from Vamtam options you can save current template or choose from saved templates for your page.
H) Progressio Videos - back to TOC
Here you can find videos for Progressio theme.
Progressio videos
I) CREDITS - back to TOC
Photos
http://www.sxc.hu/
Please note that the images on the demo site are not included in the dummy content of the site.
These are free stock images and can be obtained from the link above.
Patterns
http://subtlepatterns.com
Icons
http://www.iconsweets2.com/
960 Grid System - http://960.gs/
modernizr - http://modernizr.com
jQuery mColorPicker - https://github.com/meta100/mColorPicker
jQuery colorbox - http://colorpowered.com/colorbox/
jQuery corner - http://jquery.malsup.com/corner/
jQuery gmap - http://gmap.nurtext.de/
jplayer - http://jplayer.org
jQuery swfobject - http://jquery.thewikies.com/swfobject/
jQuery tweet - http://tweet.seaofclouds.com/
jQuery UI - http://jqueryui.com/
VideoJS - http://videojs.com/
Once again, thank you so much for purchasing this theme. As we said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our 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.
Vamtam