Your Inspiration Folio

Your Inspiration Folio Design by: Sara Presenti - Code by: Nando Pappalardo - Supporto jQuery: Giustino Borzacchiello Created on: 16 November 2009 for YourInspirationWeb [ http://www.yourinspirationweb.com/] Contact info: info@yourinspirationweb.com

Your Inspiration Folio by Your Inspiration Web

SUMMARY
1. LICENSE AND CREDITS ............................................................................................................................................. 3 2. SUPPORT ................................................................................................................................................................ 3 3. PACKAGE CONTENT ................................................................................................................................................ 3 4. PSD FILE .................................................................................................................................................................. 3 5. XHTML STRUCTURE................................................................................................................................................. 4 6. CSS .......................................................................................................................................................................... 4 7. JAVASCRIPT ............................................................................................................................................................ 5 8. GENERAL PERSONALIZATION .................................................................................................................................. 5 8.1 HOME PAGE - MODIFYING THE BALLOON TEXT .................................................................................................................... 5 8.2 ABOUT MODIFIYING THE BALLOON CONTENT.................................................................................................................... 6 8.3 PORTFOLIO MODIFYING THE PAGE TITLE AND CATCHPHRASE ............................................................................................... 6 8.3.1 Portfolio Presenting a new work .................................................................................................................... 7 8.4 CONTACTS MODIFYING THE BALLOON CONTENT ............................................................................................................... 7 8.4.1 Contacts Setting the contact module ............................................................................................................. 8 8.5 CONFIGURING THE CONTACT SECTION UNDER THE NAVIGATION............................................................................................... 9

the community of inspiration dedicated to web design www.yourinspirationweb.com/en/

Your Inspiration Folio by Your Inspiration Web

1. License and credits

The template is released under the license of Creative Commons Attribuzione 3.0; which means that you are free to reproduce, distribute, and modify this work provided that you attribute authorship to us leaving our Credits on the topic unaltered. This is something trivial if you take into consideration the work we have done, moreover we have worked hard to complete this template in order to render it graphically captivating and simple to personalize, and now we are offering it to you free of charge. What we ask from you is to acknowledge and make our work known. Your Inspiration Folio by Your Inspiration Web is licensed under a Creative Commons Attribuzione 3.0 Unported License.

2. Support
If you are experiencing trouble with the personalization of the template or need to clarify any other issue, you can leave a comment on the respective article (link) or visit our support forum (link). If needed open a new thread: we will get back to you as soon as possible.

3. Package Content
Inside the archive you have downloaded you can find: The Photoshop (.psd) souce file so that you can easily modify the graphic elements of the template; Theme folder in xhtml & css; Screenshots and a brief description of the theme characteristics; Users license.

4. PSD File
In the .psd file you can find all levels with the graphic elements used for the theme, from the background image to the balloon levels. The icons used on the left menu (twitter,e-mail, and skype) are free of charge and are available on the web.

the community of inspiration dedicated to web design www.yourinspirationweb.com/en/

Your Inspiration Folio by Your Inspiration Web

5. XHTML Structure
The theme has a fixed layout in two columns, designed in such a way that the left column always remains the same and the right column scrolls vertically thanks to the use of a javascript. In particular, four standard pages have been already prearranged: Home: The themes main page, which contains a brief and incisive welcome message; About: section in which you can introduce yourself and talk about yourself and your work experiences; Portfolio: page in which you can insert a thumbnail of your works: with the javascript light box, by clicking on one of the thumbnails, details of an enlarged image will open. Contacts: a functioning contact module is included in this page and, moreover, in the right section, you can insert your contact details.

6. Css
The file includes five css files: Ie.css Ie6.css Screen.css Print.css 960.css

Screen.css is the main style sheet which contains the styles of all pages, the colors, the formatting, etc. Ie.css and Ie6.css contain the adaptations of style for Internet Explorer. These browsers interpret some html elements incorrectly and thanks to these css it is possible to correct some of these imperfections. The 960.css file is a css framework while print.css is a print stylesheet.

the community of inspiration dedicated to web design www.yourinspirationweb.com/en/

Your Inspiration Folio by Your Inspiration Web

7. Javascript
YourInspirationFolio has been developed by means of eight javascripts: 1. jquery.js 2. unitpngfix.js 3. mootools-yui-compressed.js 4. fancyzoom.js 5. scroll.js 6. dustismo_400.font.js 7. cufon-yui.js 8. form-contact-validate.js Dustismo_400.font.js and cufon-yui.js are the javascripts that enable the loading of the non standard font used for the theme (dustismo). Unitpngfix.js is used for loading transparent images on Ie6. Fancyzoom.js and mootools-yui-compressed.js are used for the portfolio and allow the opening in a modal window of the images details by clicking on the associated thumbnail. Scroll.js is the javascript that scrolls the site vertically. Form-contact-validate.js is the javascript which enables the validation of the contact module.

8. General Personalization
8.1 Home page Modifying the balloon text
To modify the text of the first balloon, enough searching on the code the section contained in the div with the same class as home, which you can see in the screenshot below:

The text to be modified is underlined in red, enclosed within the h1 tag. In order to modify the color of certain words from grey to red, enough writing the following syntax before and after the word to be formatted: <span>text in red</span>

the community of inspiration dedicated to web design www.yourinspirationweb.com/en/

Your Inspiration Folio by Your Inspiration Web

8.2 About Modifying the balloon content

In the about page it is possible to modify the title , the text content and the avatar. In order to do it enough finding the div with the same class as container-about and modify: 1. The text inserted inside the h2 tag for writing the page title. 2. The texts inserted inside the (<p>) paragraphs for modifying the description. 3. Modify the url address or the name of the image to be loaded as avatar, if saved with a different name avatar.jpg or in a folder different from images.

8.3 Portfolio Modifying the page title and the catchphrase

Like in the other pages, in the portfolio page you can also modify the title, by changing the script inside the <h2> tag. Moreover, you can personalize the catchphrase positioned in the top-right corner by modifying the text inserted inside the <h4> tag

the community of inspiration dedicated to web design www.yourinspirationweb.com/en/

Your Inspiration Folio by Your Inspiration Web

8.3.1 Portfolio Presenting a new work Presenting a new work on the portfolio page is not difficult, enough following the same steps correctly. 1- Open a div with same class as photo 2- Create a link to the project, which will be recalled later on the page, after the section containing the thumbnails. 3- The code inside the <img> tag serves to generate the thumbnail. Modify the images name and leave the rest unaltered. 4- In the section where images are loaded, recall the project with the div of the same class as the link assigned in number 2. 5- Create a link of the projects image. 6- If you want, insert the name and a brief description of the project.

8.4 Contacts Modifying the balloon content

In the contacts page you can easily modify the title and contact info in the right column. Inside the div of a container-contact class, modify the text inside the h2 tag to modify the page title and in the (<p>) paragraphs of the div with the same class as grid_4 omega contact-info personalize the information that you want to display on the right colum, next to the contact form.

the community of inspiration dedicated to web design www.yourinspirationweb.com/en/

Your Inspiration Folio by Your Inspiration Web

8.4.1 Contacts Setting the contacts module For setting the contact module and setting up your e-mail address for the receiving of messages, you have to open the config.php file which is to be found in the include folder and substitute the e-mail info@example.com with your e-mail address.

Always in this file you can also personalize the heading and the body of the e-mail.

the community of inspiration dedicated to web design www.yourinspirationweb.com/en/

Your Inspiration Folio by Your Inspiration Web

8.5 Configuring the contact section under the navigation

For configuring the contact options for Facebook, Twitter and the e-mail, enough inserting your Twitter and Skype profile links and your e-mail address.

******************************************************************************************** The team of YIW thanks you for downloading this theme. Once again we invite you to contact us in case you have any doubt regarding the template or you need our support. See you soon! - Your Inspiration Web ********************************************************************************************

the community of inspiration dedicated to web design www.yourinspirationweb.com/en/