Sei sulla pagina 1di 9

Your Inspiration Minimal

Your Inspiration Minimal Created on: 10 February 2010 for YourInspirationWeb [ www.yourinspirationweb.com] Contact info: info@yourinspirationweb.com

YourInspirationFoliobyYourInspirationWeb

SUMMARY
1.LICENSEANDCREDITS..........................................................................................................................................3 2.SUPPORT.............................................................................................................................................................3 3.PACKAGECONTENTS............................................................................................................................................3 4.PSDFILES.............................................................................................................................................................3 5.XHTMLSTRUCTURE..............................................................................................................................................4 6.CSS......................................................................................................................................................................4 7.JAVASCRIPT.........................................................................................................................................................5 8.GENERALPERSONALIZATION ...............................................................................................................................6 . 8.1HOMEPAGEADDINGORMODIFYINGSLIDERPROJECTS........................................................................................................6 8.1.1HomepageModifyingcontentinthethreelowersections...........................................................................6 8.2ABOUTMODIFYINGTHEMASCOTTEIMAGEANDBALLOONTEXT...........................................................................................8 8.3PORTFOLIOADDINGORMODIFYINGWORK/PRODUCTDESCRIPTIONS.....................................................................................8 8.4CONTACTSSETTINGUPYOUREMAILCONTACT.................................................................................................................9

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

YourInspirationFoliobyYourInspirationWeb

1. License and credits


This template is licensed under a Creative Commons Attribution 3.0 license; this means that you're free to reproduce, distribute and modify this work as you please. Your Inspiration Folio by Your Inspiration Web is licensed under a Creative Commons Attribuzione 3.0 Unported License.

2. Support
If you have difficulties personalizing this template or you need to clarify something, you can leave a comment on the launch article or you can visit our support forum. If needed, open a new thread: we'll respond as soon as possible.

3. Package contents
Inside the archive you downloaded youll find: The Photoshop source files (.psd) so you can easily modify the graphic elements of the template. The theme folder in (x)HTML & CSS. Screenshots and a brief description of the theme characteristics. User's license.

4. PSD Files
In the included .psd files youll find all layers and graphic elements used in the theme. The mascotte and the social network icons are free and available on the web.

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

YourInspirationFoliobyYourInspirationWeb

5. XHTML structure
The theme is comprised of 4 standard pages: Home: The first page of the theme contains a slider which, thanks to a javascript Coda Slider, enables the user to flip through your latest products/works. About: section in which you can introduce yourself and talk about your work experience; Portfolio: page in which you can insert miniatures of your works: by using the javascript light box, clicking on a miniature will open a larger, more detailed image. Contacts: this page contains a functional contact form and, in the section on the right side, you can insert your contact information.

6. Css
The file includes six css files: Ie.css Ie6.css Screen.css Print.css 960.css project.css Project.css is the stylesheet for the homepage slider. Screen.css is the main stylesheet that contains the styles, colors, formatting, etc. for all pages. Ie.css and Ie6.css contain the style conversions for Internet Explorer. These browsers incorrectly interpret some html elements and these css files enable the correction of some of these imperfections. The file 960.css is a css framework and print.css is a stylesheet for page printing.

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

YourInspirationFoliobyYourInspirationWeb

7. Javascript
YourInspirationMinimal was developed using ten javascripts: coda-slider.1.1.1.js FancyZoom.js FancyZoomHTML.js functions.js jquery.validate.min.js jquery-1.3.1.min.js jquery-easing.1.2.pack.js jquery-easy-compatibility.1.2.pack.js scripts.js twitter.js Coda-slider, jquery 1.3.1, jQuery Easing 1.2.pack and jQuery easing-compatibility are the javascripts that allow the function of the homepage slider; FancyZoom and FancyZoomHTML are used to enlarge the images on the profile page; jQuery.validate is the javascript that checks for errors in the contact form; twitter.js enables the automatic insertion of your latest tweets on the home page. The other javascripts are general scripts that allow various effects to work.

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

YourInspirationFoliobyYourInspirationWeb

8. General Personalization
8.1 Home page - Adding or modifying slider projects
In order to modify or add a new project to the slider, take a look at the section inside of the comment <!START PROJECT -->, as you can see in the following screenshot.

To add a new project, simply copy and paste the entire section highlighted in the screenshot, then modify: 1. The name and/or path of the project image; 2. The project name (on the website it will be displayed on a black background); 3. The project description

8.1.1 Home page Modifying content in the three lower sections

The three lower sections present on the home page and about page are contained in the div class container_12 bottom.

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

YourInspirationFoliobyYourInspirationWeb

Inside this div you can: 1. Modify the twitter section title (the text inside the span class orange will be shown in orange); 2. Specify your twitter account information: modify the username by inserting your username in place of YIW. Modifying the number specified in count=2 you can choose how many tweets will be displayed. 3. Modify the title of the testimonial section; 4. Modify the text of the testimonial section; 5. Modify the title of the contact section; 6. Modify the images in the contact section.

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

YourInspirationFoliobyYourInspirationWeb

8.2 About Modifying the mascotte image and balloon text


In the central section of the about page you can modify the critter image and the text inside the balloon. The text inside the span class darkorange will be shown in dark orange.

8.3 Portfolio Adding or modifying work/product descriptions


Its very easy to modify or add a new project to the profile page.

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

YourInspirationFoliobyYourInspirationWeb

As seen in the image, in these lines of code you can: 1. Modify the project title; 2. Modify the project description; 3. Modify the project image. The class screenshot gives the image a background, rather a shadowed photo effect. The class widePreviewImg is linked to the FancyZoom javascript and provides an animated display of the larger image when a user clicks on the miniature.

8.4 Contacts Setting up your e-mail contact


To set up the contact form, just insert a valid e-mail address in the opening lines of code on the contact.php page, as seen in the following image.

*************************************************************************************
The YIW team thanks you for having downloaded this theme. Once again we invite you to contact us if you have any doubts about the template or if you need our assistance. Bye for now! - Your Inspiration Web ********************************************************************************************

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

Potrebbero piacerti anche