Your Inspiration Minimal

Transcription

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

2 SUMMARY 1. LICENSE AND CREDITS SUPPORT PACKAGE CONTENTS PSD FILES XHTML STRUCTURE CSS JAVASCRIPT GENERAL PERSONALIZATION HOME PAGE ADDING OR MODIFYING SLIDER PROJECTS Home page Modifying content in the three lower sections ABOUT MODIFYING THE MASCOTTE IMAGE AND BALLOON TEXT PORTFOLIO ADDING OR MODIFYING WORK/PRODUCT DESCRIPTIONS CONTACTS SETTING UP YOUR E MAIL CONTACT

3 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. 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 you ll 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 you ll find all layers and graphic elements used in the theme. The mascotte and the social network icons are free and available on the web. 3

4 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. 4

5 7. Javascript YourInspirationMinimal was developed using ten javascripts: coda-slider js FancyZoom.js FancyZoomHTML.js functions.js jquery.validate.min.js jquery 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. 5

6 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 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. 6

7 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. 7

8 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 It s very easy to modify or add a new project to the profile page. 8

9 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 contact To set up the contact form, just insert a valid 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 - ******************************************************************************************** 9