Avisio Wordpress Theme” Documentation by “Kriesi” v1.0


“Avisio Wordpress Theme”

Created: 20/06/2010
By: Christian "Kriesi" Budschedl
Email: Kriesi

Informations about Updates and New Themes are always announced on Twitter and Facebook. Twitter updates are usually more up to date, facebook updates are more detailed and easier to follow :)




Hello! First of all I would like to thank you for purchasing my theme! :)
If you have any questions that are beyond the scope of this help file, please feel free to ask your question on the item discussion page.

This file will teach you how to set up and use the “Avisio” - 3 in 1 Wordpress Theme.
This file is really extensive so you might think the theme is hard to use.
actually its not, you probably just might jump to the options page and explore everything yourself, this file is more of a reference work if you do not know what to do, or if you are not familiar to wordpress.

Have fun with your new theme! best regards
Kriesi


Table of Contents

  1. Folder Structure
  2. Installation
    1. Setting up the General Options
    2. Setting up the Mainpage
    3. Setting up the Slideshow Options
    4. Setting up the Portfolio
    5. Setting up the Blog
    6. Setting up the Contact Page
    7. Setting up the Menus of your site
    8. Setting up the Sidebar and Footer Area
    9. Using custom Widgets
    10. Adding Content (how to create entries and use preview images)
    11. Theme Shortcodes for content styling
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. PSD Files
  7. Image Sizes
  8. Sources and Credits

A) Folder Structure - top

 

B) Installation - top


You can either choose to upload the theme to your server via ftp (only upload the unzipped folder „Avisio“ into the folder wp-content/themes/ ) or via wordpress upload function. to use the upload function of the wordpress admin panel make sure to ONLY upload the “Avisio” folder and not the whole archive file that you recieved by themeforest.

Notice: if you are new to wordpress and have problems installing it you might want to check out this link: http://codex.wordpress.org/Installing_WordPress
After that is done activate the theme as you would activate any other theme at Appearance->Themes.
“Avisio default" is now the active theme.

If you are working on an Installation that already has images uploaded to the media folder and you want them to be resized automaticaly please make sure to make your cache folder writeable for the resizing script. If you do not know how to set the permission please google it, every ftp program has a slightly different approach. I would recommend googeling for „set chmod to 777 with [your-ftp-programm] (eg dreamweaver)“

If you are working on a new installation or dont plan to use any previously uploaded images as preview images you can skip the step above.

Adding Dummy Content:

The theme comes with the great option to add dummy content to make it look like my Themeforest Live preview. To use this feature activate the theme and then open the theme options page: Avisio Options. Check the checkbox for "add dummy content" and press the save button. The theme will import all post, page and category data and set it up similar to the live preview. Once done you can take a look how things are set up and use the dummy content as a starting point for your own cointent. that should make it much easier for you to use the theme, especially if you are new to wordpress.

If you dont want to install dummy content on your installation I would heavily recommend to create a test wordpress installation and try it to see how to setup everything :)


 

B 1) Setting up the general Options - top

If you want to change the general Options of the Theme go to the “Avisio” Options Panel (at the bottom of your admin areas sidebar) and click it, the first thing you will notice is an option to choose skins: Just choose the skin you like best from the dropdown menu. Once you have pressed the save button at the bottom of the page the new skin will be applied to your frontpage.
Notice: If you want to further customize your skin by changing the CSS directly: the main css file is style.css within your theme-root folder. The CSS file that holds all color informations is located in your /css/ folder. Depending on the skin you have choosen you need to edit syle1,2, or3.css

This option only changes the default styling of the theme. There are several other options which make it really easy to get a unique result. First you can choose a background color of your choice with the background picker that is included with wordpress 3 now. (of course a theme has to support this feature but Avisio has it enabled). You can find the link to the color picker page directly at your avisio general options.

Not only can you choose a background color, you can also select a background image and set the tiling of this image for further customization.

 


You also get the to choose if the layout should stretch with the browser wndow or be boxed and centered.

Last but not least you got the from several fonts that are applied with cufon for a unqiue header styling. The default character set it josefin common characters. Since there are sometimes characters in cyrillic and other languages that are not included you can also choose the full char set, but you should notice that this character file is much bigger in size.

 


Changing your Logo:
You got 2 options to change your Logo: The easiest way is to simply enter the url of your own logo file into the input field. The default Logo will be replaced as soon as you have saved the page.

The second option is to edit your CSS Files directly. Depending on the skin you have choosen you need to either edit style1.css, style2.css or style3.css in your folder /css/.
Search for the #logo selector and change the background picture.

The size of the logo is set to 247px * 94px. If you want to use a smaller or bigger logo you will need to change the size manually in style.css


Setup Google Analytics Code
Last thing on the general options page to do is to add your google analytics code if you want to. Just add the code to the textarea and google will start tracking ;)

 



B 2) Setting up the Mainpage - top


Frontpage Button
Choose a button text and a the page the button should link to


Mainpage additional Content
You can choose to display any number of pages on your front page. simply choose them at the dropdown and the will get applied in the same order as selectable tabs.

Please be aware that only the content of this page gets added to the tab, not the whole page. So if you write a new page only the text that gets added to the title input field and the content textarea are displayed here. No sidebars, portfolio items, or featured images can be shown automatically, since the need special template files.


B 3) Setting up the Mainpage Slideshow - top

The slideshow can be controlled with the help of backend options. single slides are created by adding new slider entries but the transitions, durations and slider styling is managed at the option page. The options are pretty self explanatory:

Number of slides:
How many slides should be displayed?


Autoplay duration
The Autoplay Duration sets the time between each transiition in seconds.


Autoplay
Do you even want autoplay? If so click yes. Once a user interacts with the slider the autorotation stops.


Autoplay duration
The Autoplay Duration sets the time between each transiition in seconds.



Rectangle Dimensions
The aviaslider uses rectangles or squares to create unique transitions. Here you can set the height and width of those rectangles/squares.


Transition
The transition direction can either be a coiling animation from the topleft or bottomright corner, a diagonal movement from the top left or the right bottom or a complete random appearance of the squares. You can choose to only use one transition or select a sequence that will be used for your transitions.


Box delay
The Time the script waits until the next square/rectangle gets displayed.


Transition Type
There are several transition type options for the rectangles. They can either just fade in, slide in or drop from top to bottom.


B 4) Setting up the Portfolio - top

Portfolio
To setup a portfolio first select the page that should display the portfolio items instead of the usual page content. then choose the portfolio categories that should be displayed on that page. (attention: those are not the normal post categories, portfolio categories can be setup at Portfolio Items>Portfolio Categories)

You can also choose how many columns should be used to display your items, if the portfolio should be sortable with javascript and ho many posts per page you want to shw. (please note that if you choose a sortable portfolio the posts per page setting gets ignored and the portfolio will show all entries)

You can create as many Portfolio Pages as you wantwith different or similar categories. The portfolio sorting option will be displayed as soon as you choose at least 2 categories.


B 5) Setting up the Blog - top

Blog Page

First please choose an existing page that should house your blog content. This page will be set as the default blog overview page. Setting Up the blog page is really easy: Best practice is to first create a blank page with the name of your choice, then add that page to your main menu with the Menu Manager and after that is done open Blog settings and choose the page at the select box here.


Exclude Categories
Since you sometimes want to exclude categories from the blog I've added an option to do so


Blog Preview Images
This option controlls the Preview image behaviour of the blog


Blog Extra Headline
The Blog extra headline can be set here


B 6) Setting up the Contact Page - top

Setting Up the contact form is really easy: Best practice is to first create a blank page with the name of your choice, then add that page to your main menu with the Menu Manager and after that is done open Contact Page settings and choose the page at the select box. You can also choose the E-Mail adress the message gets sent to.

The setup process for the submit design form is virtually the same only that the forms used in the front end are a little bit different.

FAQ Contact: If your contact page seems to work on the front-end but doesnt deliver a mail, be sure that your server supports the sendmail protocol. (ask your server admin if this is turned on)
If you cant activate it I would recommend to get a plugin for your contact page, like cformsII. Also if you want to do major modifications to the form, like adding a Captacha I would recommend to use a Plugin (cforms II also supports this) Using a plugin is by far the fastest way to pull this off :)



B 7) Setting up the Menus of your site - top

The Theme comes with support for the new Wordpress 3.0 Menu feature. Just open Appearance->Menu in your backends Sidebar and add a New Menu called "Main", then add to this menu whatever menu items you need. If no menu is created a fallback menu will get displayed that shows all pages and a home link.

Now before you add any menu items take a look at the top right of your browser window: you will find The "Howdy admin and Logout link" Directly below you can see the "screen options" tab. Click that tab and a panel with additional options will open. Check the checkbox in "Show advanced menu properties" that says "Description"

Now set up your menus. If you add Menu Itemsas children of other items you dont need to fill in the description. It wont get displayed. However top level items display the description directly bellow the Menu Item title in your front end.

Attention: you might need to delete some pre filled descriptions if you use pages in the second menu, since wordpress adds a content excerpt automatically to those items. Just remove that and enter a very short description of 2-7 words


B 8) Setting up the Sidebar and Footer Area - top

Next step is to select those categories and Pages that should get a unique set of sidebars. For every category or page choosen here the theme will add a new Sidebar Widget area at appearance/widgets. Once you have choosen the pages and categories press save and head over to the widget section of wordpress.

You will see that the new areas just got appended to the predefined ones.
So adding these areas is easy.

However be very careful when removing widget areas that already got widgets applied to them.
Wordpress doesn't remember where it stored widgets by name, it stores this information by number. So if I would add a text widget to Contact here (Nr6), and then delete the content widget area the widgets would then be in Jobs. (previously in 7, now the new 6)

 


Last step todo is to choose if you want the theme to apply dummy widgets to either your sidebar or footer if you didnt set a widget manually. Whatever option you choose here. once you have set a widget for a page or category the default dummys wont be added to this page any longer



B 9) Using custom Widgets - top

The Theme comes with a custom widge that lets you display blog posts from one or more articles within your sidebar

The Sidebar News widget needs a title, the number of posts to display and which post from which category you want to display. To choose the categories you need to enter the IDs of those categories. If you dont know how to find those IDs:

Once you're logged in your WordPress dashboard, go to Manage and then in Categories.Simply put your mouse cursor on the "edit" link related to the category you want to know the ID and look on your browser's status bar: As you can see on the screenshot below, 1 is the id of the category (quicktip and image by http://www.wprecipes.com)

If you have done everything correctly it should look like this.


B 10) Adding Content (how to create gallery entry and preview imagss) - top

Posts and Pages

Writing a Post or page doesnt really differ from doing so when using other themes. You add a title, add some content, and categories and thats about it. In Avisio you need to do a few more things:

if you want to create a blog entry:

All of this is really easy. When writing a post and scrolling down the textarea you will notice a few extra fields: Additional Post/page options and additional Gallery options. Set the additional behaviour to your likings

Setting a preview Picture
On the right border of your page you will find a field called Post Thumbnail. Once you click set thumbnail the media uploader will open and you get to upload a new image or choose an existing one. Once you have choosen dont klick the "add to post" button. Click the "set featured image" link instead and you are done. If you cant find thi sinput field it might be hidden and you can try to open the screen options tab that is located at the top left of your backend. For a reason I dont know the option to display the Post thumbnails is sometimes disabled.

Once you have added the image it should appear similar to my example:

When uploading a picture all different thumbnails needed for the theme are generated by wordpress. However this only happens if you add new pictures. if you are using pictures that were already uploaded before the Avisio theme was activated, wordpress cannot resize them. Then the timthumb php "on the fly resizer" kicks in as a fallback. Make sure to make the cache folder writeable if you want to use older images.

You can set an image or video to override the "large version". Which means you could set an image of a snowboarder as thumbnail for example and when the user clicks that image you could show him another image in the lightbox preview, or even better, a video. Also the small previes generated on portfolio pages or at the front page may sometimes not be as you like it, you can overwrite the images here manually.

How to enter an Image/video link at the " Full Size Pic/Video Input field"
You have two options when adding a link: either manually by typing the full address (eg: http://www.yourdomain/path/to/image.jpg)
or you can press the button next to the input field. the media library will open, you can upload a new image or choose an existing one and then as if you would add an image to your post press the „add image to post“ button. The lightbox will close and instead of addint the image to the post the image url will be added to the input field.
Adding videos can get a little more tricky since you need to add a height and width for most of the video links with your url, so entering by hand is recommended here.

Some examples of valid links would be:
if adding an swf file you need to pass height and width by appending ?width=792&height=294
http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294

if adding a youtube video you dont need to pass it:
http://www.youtube.com/watch?v=qqXi8WmQ_WM

adding a vimeo video doesnt need it either:
http://vimeo.com/1084537

however if you want a size that doesnt match the default size you can pass it and the lightbox will adjust:
http://vimeo.com/1084537?width=850&height=450

more examples can be found on the homepage of the lightbox creator:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

 

Additional Headings
You can set additional headings for posts, pages and also portfolio entries. those headings get applied to the theme directly belot the menu and above the page content area.


 

SLIDESHOW ENTRIES

Slideshow entries are similar to posts, yet the do not have as many fields to fill out. they will only be shown on the frontpage, however you can set a link to any page or post if you click the image. you can also add an image or video link to open a lightbox when clicked. You can also choose if and where you want to display the caption, if you want to add a button to the caption that holds the link that you define, or if the link should be apllied to the whole image.


 

PORFOLIO ENTRIES

Portfolio entries are very similar to posts: they need a full text, an excerpt to be displayed in the portfolio overview, as well as categories ans post images. Once all of this is added and saved the post will appear on the portfolio page. Add and delete categories here as well but be aware that these categories are not shared among real "posts" and portfolio entries.

 


 

 


B 11) Using shortcodes - top

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), and in the the editor type a shortcode in brackets, such as:

[pullquote]This is a pullquote.[/pullquote] 

to generate a pullquote. the theme comes with quite a few shortcodes that are described here.

Attention: Please make sure to always enter a line break before and after the shortcode, most of the time you wont encounter any errors if you don't do that but unfortunatley wordpress does mess up the html sometimes. This is true for all shortcodes but dropcaps, the are the only ones that need to be added withhout any line breaks or spaces.

Column Shortcodes:
Use these shortcodes to create several columns on a page or post. Make sure that the last column always gets the keyword "last" applied!

[one_half]Content here.[/one_half] [one_half last]Content here.[/one_half] 
[one_third]Content here.[/one_third] [one_third]Content here.[/one_third] [one_third last]Content here.[/one_third] 
[one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth last]Content[/one_fourth] 
[one_fourth]Content here.[/one_fourth] [three_fourth last]Content here.[/three_fourth]
[one_third]Content here.[/one_third] [two_third last]Content here.[/two_third]

Pullquote Shortcodes
To create neat pullquotes use the pullquote shortcode:

[pullquote]This is a left aligned pullquote.[/pullquote] 
[pullquote right]This is a right aligned pullquote.[/pullquote] 

Dropcaps Shortcodes
[dropcap1]T.[/dropcap1]his is a dropcap
[dropcap2]T.[/dropcap2]his is a dropcap
[dropcap3]T.[/dropcap3]his is a dropcap
 

Delimiter Shortcodes
Creates a horizontal ruler (hr) either with a link to the top of the page or not, or even with title

[hr]
[hr top]

[hr title='This is a special title']

Toggle Content Shortcodes
The basic toggle got a title attribute to set the clickable title and the "active" keyword to create an opened toggle

[toggle title='here goes the title of the toggle' active]
		Content goes here 		
[/toggle]
[toggle title='here goes the title of the toggle']
		Content goes here 
[/toggle]
[toggle title='here goes another title of the toggle']
		Content goes here 
[/toggle]


Accordion Toggles:
Same code as before but each toggle gets the attribute "close='true"

[toggle title='here goes the title of the toggle' close='true']
		Content goes here 		
[/toggle]
[toggle title='here goes the title of the toggle' close='true']
		Content goes here 
[/toggle]
[toggle title='here goes another title of the toggle' close='true']
		Content goes here 
[/toggle]


Tabed Content Shortcodes
To create a tabbed content box you need to first use a wrapper shortcut and then a shortcut for each tab. One of the Tabs needs the keyword active"

[tab_container]
[tab title='Tab1' active]Tabcontent here[/tab]
[tab title='Tab2']Tabcontent here[/tab]
[tab title='Tab3']Tabcontent here[/tab]
[/tab_container]

Slideshow Shortcodes
To create a inline content slideshow you need to use the slideshow shortcut and add severals slides. The src attribute needs to point to the image and is mandatory, the url attribute is the link that should be oppened when the image is clicked. The AviaSlider is used to create the slides and therefore it is possible to apply a lot of transitions.

[slideshow]

[slide src='http://domain.com/medium1.jpg' url='http://www.open.this/site/in/link/']
[slide src='http://domain.com/medium1.jpg' url='http://www.open.this/image/in/lightbox.jpg']
[slide src='http://domain.com/medium1.jpg']

[/slideshow]

This would create a basic fade slider. however you can make use of several options and apply them to the openening slideshow shortcode tag:

blockslider:

[slideshow height='60' width='60' transition='slide' ]


curtain slider

[slideshow height='full' width='60' transition='drop' delay='100' ] 



Possible options:

 

 



C) HTML Structure - top

The HTML is valid xhtml 1.0 strict and comes with predefined classes for common elements needed in web design.
All templates share basic elements like header, footer, main, and entry so be carefull when editing those or adding/changing the CSS for those ids and classes :)

 


D) CSS Files and Structure - top

The CSS for the theme is split into two files: one that holds the basic markup for layout and one that contains the specific color information for the 5 different styles. The fist one (style.css) is shared among all skins, but each skin has
a separate second file for the aforementioned color information. If you want to create a unique layout just change the settings in on of the stylessheets of folder "CSS"

To change the color scheme open the html template files file and look into the html head, here you will find style1.css linked and the others as comments. just exchange the one linked with one of the files in the comments and you switched color scheme.


E) JavaScript - top

The theme uses advanced jQuery functions. You do not need to know how to use jQuery to activate them, almost everything is controlled by wordpress. All the function calls as well as as the custom created jQuery plugins like the aviaslider are located in the custom.js file.

Lightbox: prettyphoto (my_lightbox("a[rel^='prettyPhoto'], a[rel^='lightbox']");)

the lightbox gets automatically applied to links that contain images, youtube videos, vimeo videos, mov files and swf files. if you dont want to activate the lightbox on any of those links add the class 'noLightbox'. if you manually want to apply the lightbox to a link you can add the rel='lightbox' attribute to the <a> tag.

Better documentation can be found here:
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/


F) PSD Files - top

Among with the theme come all psd files needed to edit the different skins. With these psds you can even create your own unique Avisio skin.


F) Image Sizes- top


'width'=>70, 'height'=>50 // small preview pics eg sidebar news
'width'=>192, 'height'=>130 // medium preview pic for portfolio with 4 columns
'width'=>274, 'height'=>170 // medium preview pic for portfolio with 3 columns
'width'=>436, 'height'=>230 // medium preview pic for portfolio with 2 columns
'width'=>574, 'height'=>268 // image for blog posts and 1 column portfolio
'width'=>940, 'height'=>440 // big images for fullsize pages and mainpage slider

you can change these settings in functions.php. the theme will then create different thumbnail sizes according to your changes on upload. You might need to reflect those changes within your CSS file, depending on what you have changed ;)


G) Sources and Credits - top


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.

Kriesi

Go To Table of Contents