Download OFFICIAL THEME USER GUIDE Interactive Parallax Theme
Transcript
Version 2.1 OFFICIAL THEME USER GUIDE Amazeaxa Interactive Parallax Theme – Responsive HTML5 G R EET I NG S FR OM DESIG NO VA Thank You For Purchasing Our Product. If you like this theme, we really need your support, So kindly rate our theme on themeforest. How to rate this theme on themeforest? Setp 1: Go to themeforest dashboard page (the page where you have downloaded this theme). Step 2: In the same panel you can see this theme’s name listed under your downloads section. Step 3: Please post your ratings via STAR symbols found there. That’s all and you are Done! An example screenshot from Our Dashboard is shown below: Important - FAQ: 1) What is this User Guide for ? This user manual is under the scope of ordinary users in order to setup their static website using this HTML5 theme. If you are looking for advanced customization please note that you need to familiarize the relevant technologies used to build this theme. 2) How to use this HTML5 theme? This theme is purely HTML template used to create a static website. This theme is not compatible with WordPress, Weebly or FrontPage systems. If you are looking for WordPress themes please visit our themeforest portfolio and check themes with title as “WordPress”. 3) “Stylesheet missing” error. Why? As we have already mentioned on themeforest page, this is HTML5 template and not a WordPress theme. But if you try to install this theme on any WordPress system then the above stated error occurs. There is nothing can be done about this rather than purchasing a WordPress version (if available) . 4) How to get theme updates and future versions? We regularly release updates and bug fixes on our themes and we send notifications via newsletters. You may subscribe to our weekly newsletter by visiting the following link: http://eepurl.com/xDO_v We also use Twitter to announce it to our customers. Please follow us @designovastudio 5) How to get support on this theme? This user manual covers everything you need to setup the website. But if you find any bugs, issues and limitations on this theme please contact our support team via email to: [email protected]. When you send a support request email you must include the purchase code and purchase date of the product (received from Envato). Support request emails without these information will not be answered. Also give us 24 to 48 hours turn around time to get back to you – we are a small team, but we will surely make a response as soon as we are free. 6) Support v/s Theme Customization? When we offer free support, we are always here to help you when bugs and issues are reported on our themes and we will not charge anything for this service as we are committed to give our level best on our premium products. But this free help does NOT mean to be any free customization or modification of our themes. We are a small team and we are not available for any free customization services at the moment. But if you like you can opt for premium theme customization services, kindly let us know via email to: [email protected]. If our developers are available we will get back to you with a nice plan and schedule Table of Contents Chapter 01 - Theme Information Chapter 02 - Files Included a. Directory Structure Chapter 03 - Template Layout and UI Framework a. Setting Up Navigation b. Setting Up Theme Layout c. Bootstrap Framework Setup d. Upgrading Bootstrap on future Chapter 04 - Theme Styling and Skinning Chapter 05 - Parallax Engine and Operations a. Turning off / on the parallax effect b. Stylesheet Hook c. Parallax on Mobile Devices d. How to find Scroll Index value and setup parallax animations? Chapter 06 - Featured Modules and Markup a. Full Screen Slider on Home Page b. Testimonials Slider c. Milestones Slider d. Filterable Portfolio (ISOTOPE) e. Google Map Setup f. Contact Form Configuration g. Skill Graph Setup Chapter 06 - Fonts and Typography Chapter 07 - Images, Icons and Graphics Chapter 08 - Sources and Credits Chapter 09 - Theme Updates and Bug Fixes Chapter 10 - Vote of Thanks AMAZE - VERSION2.1 - THEME USER GUIDE Chapter 1 Theme Information B eing a premium HTML5 template, Amaze is a highly unique and interactive creative parallax theme with fully responsive layout built using Bootstrap framework version 2.2. Amaze is the first first theme being released on our Interactive Foreground Parallax Theme series known as AXA. This theme features Single Page Scroll-Down layout with Foreground parallax elements and this theme is powered by revolutionary Skrollr Parallax library. Amaze comes with a completely editable layout with the power of Bootstrap framework. This can make it extremely easy for ordinary users to setup their own website. But it is also possible to extend the template to any level as your creative freedom. You can even extend this template to build stunning animated parallax websites. This template includes w3 valid cross browser compatible HTML5 markup. Main Features Stunningly Unique Foreground Parallax theme with a nice design - a creative theme best suitable for creative agency / individual portfolios and for innovative business showcase. Skrollr Parallax Library - a stunning JS engine which can render any HTML5 element to be an animated parallax component. Unimited layers with unlimited possibility for animations via any CSS3 properties including Transitions and Transforms. Very easy to setup and edit parallax functionality, no need to know any JS coding. Only basic CSS understanding is needed. Perfectly responsive across all devices including iOS mobile devices, android and windows phone platforms. Built with Bootstrap 2.3.0 – World’s best Responsive Front-end Framework. Most easy to use and customize. Unlimited Parallax Layers + Overlay Content that produces a stunning scrollable panel visual effect. AMAZE v2.1 – Premium Theme from Designova AMAZE - VERSION2.1 - THEME USER GUIDE ISOTOPE (Premium Plugin Worth USD 15) Powered Filterable Portfolio / Gallery with Lightbox. Full Screen BG Image Slideshow – Image slideshow on the background of the page. Project Info + Images Slider inside Lightbox via AJAX – the best way to showcase your project information and images at the same time. Full Screen Image + HTML slider on home page powered by MaxImage plugin. Product Showcase with Carousel Slider – a very usable carouFredSel carousel implementation that supports any HTML5 content. Image Sliders, Animated Skill Graphs, Carousels, Pricing Tables etc. Also includes all UI patterns from Bootstrap. Precisely hand-coded HTML5 template with w3 valid cross-browser compatible markup. Working contact form with validations and PHP Email sender Our awesome support team is always available to help you on bugs and issues related with our themes. AMAZE v2.1 – Premium Theme from Designova AMAZE - VERSION2.1 - THEME USER GUIDE Chapter 2 Files Included Amaze includes a clean and clearly defined file structure so that our users can easily understand the hierarchy of theme assets. This will make it easy to edit the theme and customize it (for experienced users). Kindly find the directory structure explained with screenshot given below: Directory Structure AMAZE v2.1 – Premium Theme from Designova FOLDER / FILE NAME DESCRIPTION WHAT TO DO assets Contains files for Bootstrap framework along with some re-usable extensions Just replace the inner files if you need to manually upgrade to a newer version of Bootstrap images Contains all image resources used in this theme Please replace placeholder images with your own images, don’t forget to keep exact dimensions and format as original placeholders javascripts Contains all JS / jQuery library files used in this theme Edit / Replace only if you are familiar with JS / jQuery codes mail Contains resources for PHP email sender Please DO NOT modify unless you know exactly what you are doing stylesheets Contains all CSS files used within this theme. This includes CSS files specific to plugins and modules used in this theme Modify only STYLE.CSS for changing the look and feel of theme. If you are unsure about other CSS files please keep them unchanged. Error404.html File for “Page Not Found” cases – Error Page Keep this file exactly on same location as it is. You can change the name if it is required by your web hosting provider. Index.html Main web page / home page Keep this file exactly on same location as it is. DO NOT change the name. Project.html Additional web page / standalone project page Clone this page and edit as you may have many projects to be represented. AMAZE v2.1 – Premium Theme from Designova Mail.php Mail sending PHP module Keep it on place. DO NOT modify Sendcontact.php Email sender configuration PHP script You have to change some values in this file; this will be explained on following section within this guide. Project-ajax.html Web page to show a single project (shown inside lightbox via AJAX only). Use this as a template to display separate project information. Clone this and build as many pages as your projects are. You have to manually rename and link them from portfolio module. This will be explained on following section within this guide. Twitter (newly added on v2.1) Contains resources for Twitters revised API integration Please DO NOT modify Thanks.html Web page displayed as a response after sending the contact form message via home page. Feel free to edit the contents. DO NOT change the name of this file. AMAZE v2.1 – Premium Theme from Designova AMAZE v2.1 – Premium Theme from Designova Chapter 3 Template Layout and UI Framework Amaze is a single page website with scroll-down sections which stands for ‘pages’ inside this theme. So you have different sections on a one-page, you can easily add/remove sections as needed. Kindly follow the guidelines given below: 1. Setting up Navigation: Setting Up Scrolling Navigation (updated in v2.1): As a one page template, Amaze has navigation which is a collection of “click to scroll” links that contains offset position to scroll. We use jQuery to scroll down to various sections (pages) inside the same file (index.html). Please see the markup corresponding to Main Navigation, given below (refer Index.html – Line 121): Here the ANCHOR tag (<a>) holds an HREF attribute which contains the target (ID) of the section. DATA-MENU-TOP contains value of the Scrolling Index (target position, calculated from TOP, measured in pixels) to be scrolled to. In order to learn more about finding Scrolling Index please see the upcoming sections. AMAZE v2.1 – Premium Theme from Designova When user clicks on this anchor tag, the page will be scrolled down to the section having that particular Scroll Index. <a id="about-linker" href="#about" data-menu-top="665">About</a> When clicked on this link, page will be scrolled down to: <section id="about" class="page clearfix"> Setting Up Mobile Only Navigation: In this theme we are introducing a new style of mobile navigation which is the most popular Drop Down style mobile navigation. We have used a jQuery plugin to build this awesome navigation panel: https://github.com/viljamis/responsivenav.js This mobile navigation is simple to edit and use, just follow the markup given below and it is self-explaining stuff. 2. Template Layout Setup: Setting up a section / page: A section / page are a markup region contained within an HTML5 SECTION tag, example as given below: AMAZE v2.1 – Premium Theme from Designova We use the above region to wrap up each section and inside this region we build other elements using Bootstrap framework’s native arrangements via HTML5 markup. So, you have to understand how to create elements using Bootstrap, please read on. 3. Bootstrap Framework Setup: Amaze is completely built with Bootstrap 2.3.0 responsive framework which is the best front-end development framework available at present. It is very easy to edit the layout as well as for making any advanced customization. Kindly note, you have to familiarize Bootstrap’s native arrangements (it is easy) and short codes before you proceed. Bootstrap’s grid system The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. Setting up the grid – HTML For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). Please see the markup: 1. <div class="row"> 2. <div class="span4">...</div> 3. <div class="span8">...</div> 4. </div> AMAZE v2.1 – Premium Theme from Designova Offsetting columns Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns. 1. <div class="row"> 2. <div class="span4">...</div> 3. <div class="span3 offset2">...</div> 4. </div> We are having page limitation to explain everything about Bootstrap here. So for more information we refer to original documentation for Bootstrap, found here: http://twitter.github.com/bootstrap/scaffolding.html Upgrading Bootstrap on Future: As Web is always changing day by day, we would like to keep our themes expandable and adaptable to innovations. We have kept all assets and files related to Bootstrap framework on a separate folder called ASSETS found on the following location: AMAZE v2.1 – Premium Theme from Designova [THEME’S ROOT FOLDER]/assets Please replace the following files contained in this ‘ASSETS’ folder with your new files coming from Bootstrap’s download ZIP pack. You can see exactly the same folders there. Replace the inner files exactly as it is. [THEME’S ROOT FOLDER]/assets/img [THEME’S ROOT FOLDER]/assets/css [THEME’S ROOT FOLDER]/assets/js [THEME’S ROOT FOLDER]/assets/ico AMAZE v2.1 – Premium Theme from Designova Chapter 4 Theme Styling and Skinning Amaze is completely styled majorly with a single CSS file that contains all the style rules for this theme. Please see the following file: [THEME’S ROOT FOLDER]/stylesheets/style.css Feel free to modify / change the rules stated in this CSS file. You better have a basic understanding of CSS. Building a new skin variant (optional): Just clone the entire ROOT FOLDER and go the STYLE.CSS. Now you can see the color specific values (Hex Value) related to each component on the template. For example, in the case of main heading and promo text found in each section (page) such as: Here the components are: AMAZE v2.1 – Premium Theme from Designova And the style rules are: Style.css: You can also change many other styling parameters such as font style, font size, spacing and alignment etc. AMAZE v2.1 – Premium Theme from Designova Chapter 5 Parallax Engine and Operations Introduction The parallax engine is powered by SKROLLR - AStand-alone parallax scrolling lib for mobile (Android + iOS) and desktop in just over 3.8k (minified + gzipped) for desktop. And another 6.5k for mobile support (which is optional). Designer friendly. No JavaScript skills needed. Just plain CSS. Actually, skrollr is much more than "just" parallax scrolling. It's a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzzwords. By the way, skrollr leverages HTML5 and CSS3 ;-) skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top scroll offset. Turning Off / On the parallax: The parallax engine is user-controllable in a way that you can manually turn off / turn on the parallax effect on various scenarios such as: 1) Only on all Mobile Devices 2) On all Browsers and Non-Mobile Devices In order to make this happen kindly see the following code from INDEX.HTML: AMAZE v2.1 – Premium Theme from Designova In the above code segment, if you want to activate parallax effect on all (supported) mobile devices please activate (uncomment) the line 880. If you want to deactivate total parallax effect on all browsers then deactivate (comment) line 886. If you want to deactivate total parallax effect on all mobile devices as well as desktop browsers please deactivate line 879 and activate line 886. So, the default setup (what is shown on the above code preview) is that the parallax effect activated on nonmobile devices. Stylesheet Hook: The parallax engine when disable on mobile devices, can access a particular stylesheet which contains style rules needed only for such mobile devices. This CSS file can be found here: [THEME’S ROOT FOLDER]/stylesheets/mobile-hook.css Mobile Device Support: Please note that the rendering of advanced scripts and heavey parallax layers may cause it have any lag on some mobile devices – Smoothscrolling effects may not be experienced. But reloading will make it cache the assets and make it improved. Technically speaking, this Skrollr Parallax Scrolling is properly working on iOS mobile devices with the help of iScroll jQuery hook which is integrated within this parallax library. This will over-ride the native scrolling limitations of iOS mobile hence the layout will work properly on such devices. For more info please find this: https://github.com/Prinzhorn/skrollr#mobile-support AMAZE v2.1 – Premium Theme from Designova Main Files: Files you should know about javascripts/skrollr.min.js - The skrollr core file. That's all you need for modern desktop browsers. javascripts /skrollr.ie.min.js - For IE < 9, include it after the core using conditional comments. The plugin makes IE understand opacity, rgb() and hsl() (the ones with alpha are mapped to them) and it creates a very simple document.querySelector polyfill which only supports ID selectores (using getElementById). Needed if you want to use data-anchor-target. javascripts /skrollr.mobile.min.js - Includes iScroll and a bridge script which initializes iScroll and makes it work with skrollr. Include it after the core when you need mobile support. How to find the Scrolling Index and setup Skrollr Parallax Animations? skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. The horizontal scroll bar position (we say, Scroll Index value) of any element can be easily found with the help of a jQuery plugin, we have included this as “helper plugin Please see the following: When you scroll the site, you will get scroll position of the scroll bar on any element and you have to copy this value. Now all you need to do is define key frames for each element at certain points in top scroll offset by supplying this Scroll Index value as well as the animation CSS rule as explained in the Operation Examples given in the next section. Note: We have disabled this Helper Plugin on live preview of our theme, but we have enabled it on downloadable theme pack. Once you have done all editing of your site, you can disable it by removing / commenting the following element: AMAZE v2.1 – Premium Theme from Designova Operation Examples: If you're familiar with CSS, you already know the style attribute. In order to create an animation you would need several, at least two, of them. That's what skrollr does. You use the HTML5 dataattributes to define multiple sets of styles (we call each of them keyframe) and skrollr interpolates between them. #1 Let's change the background-color of a div starting at #00f when the scrollbar is at the top and ending with #f00 when the user scrolled 500 pixels down <div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div> View this example: http://prinzhorn.github.com/skrollr/examples/docu/1.html #2 Now let's do a barrel roll at the same time <div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="backgroundcolor:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div> View this example: http://prinzhorn.github.com/skrollr/examples/docu/2.html #3 Now let the rotation bounce like it were a hip-hop video <div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="backgroundcolor:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div> View this example: http://prinzhorn.github.com/skrollr/examples/docu/3.html AMAZE v2.1 – Premium Theme from Designova Extended Usage and Possibilities: In the previous session we have covered the basic usage examples for setting / editing the parallax via Skrollr engine. There is more stuffs possible within this library which will help you to build amazing websites if used wisely and precisely. In this basic user guide we are not having enough room to cover all these information. So kindly refer original documentation of the plugin from here: https://github.com/Prinzhorn/skrollr More Live Web Examples: http://pixeljuice.ru/en http://everylastdrop.co.uk/ http://erfgenaam.submarinechannel.com/en/ http://www.guardian.co.uk/world/interactive/2012/dec/21/2012-america-year-review http://www.guardian.co.uk/world/interactive/2012/nov/06/america-elect-graphic-novel http://www.officeline.se/kampanj/ http://www.direct.tv/thekingsroadmap/ http://www.evanshalshaw.com/bondcars/ http://www.caavadesign.com/ http://erikreyna.com/ofthestreet/index.html https://squareup.com/careers/creative http://happy.is http://www.futuremylove.com/ http://jonnyacevedo.com/ More Tutorials and Resources: https://github.com/Prinzhorn/skrollr-stylesheets AMAZE v2.1 – Premium Theme from Designova http://www.guardian.co.uk/info/developer-blog/2012/nov/20/how-we-built-america-elect-graphic-novelinteractive http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/jazz-up-a-static-webpage-with-subtle-parallax/ http://pepsized.com/merry-scrolling-with-skrollr-js/ https://rubygems.org/gems/skrollr-rails AMAZE v2.1 – Premium Theme from Designova Chapter 6 Featured Modules and Markup 1) Full Screen Slider Page Background We have arranged a full screen slider which showcases any images along with content which you may have to display on your website. In order to make things pretty nice we have kept this as page background itself. This nice module is powered by jQuery Backstretch plugin. The BG images are supplied using JS only. No markup is needed / created on the static page. A script for initialization of this plugin is shown below. Please see the source code screenshot given below (index.html): AMAZE v2.1 – Premium Theme from Designova images/bg.jpg = first image shown on the slider images/bg1.jpg = second image shown on the slider and so on. Backstretch plugin is extremely powerful carousel plugin which has a wide variety of options. You can refer original documentation of the plugin to see more possibilities: http://srobbin.com/jquery-plugins/backstretch/ 2) Project Showcase Slider We have a simple but useful testimonials slider. Even if we call it as testimonials slider you can use it to display any HTML5 elements including images and content. Bootstrap’s traditional carousel is used to build this module. This module is very easy to use and we have kept this within a common JS file: [ROOT FOLDER]/javascripts/script.js AMAZE v2.1 – Premium Theme from Designova A script for initialization of this plugin is shown below: interval: false - means auto sliding disabled interval: 1500 - means auto sliding enabled with 1.5 ms slide delay Bootstrap Carousel has more advanced options. You can refer original documentation of the plugin to see more possibilities: http://twitter.github.com/bootstrap/javascript.html 3) Filterable Portfolio / Gallery (ISOTOPE) with Lightbox We have a stunning and premium portfolio module within this theme which is powered by an amazing jQuery plugin known as ISOTOPE. This is a premium plugin worth USD 15. This filterable portfolio / gallery section includes a stunning filterable animated gallery built with grid based blocks. Each of these block are linked with separate categories and these categories can be triggered via categories filters. FILTERS: Filters are organized as <li> items in the first list as shown below: Note that each filter item is having the following markup: AMAZE v2.1 – Premium Theme from Designova <a href="#" data-option-value=".category1">Design</a> Here the DATA-FILTER holds the value which is the CLASS NAME FOR A PARTICULAR CATEGORY block inside the gallery. When user clicks on this filter item, the gallery item blocks having only that class name will be show via an animation. GALLERY / PORTFOLIO ITEM BLOCKS: And on the second portion, each <div> holds portfolio item which can be triggered via categories assigned as CLASS values as shown above. Just replace these values as you like, please keep the exact value combinations on HREF attribute of filter items also. For more information please refer the original preview along with demonstrations shown on plugin’s source page http://isotope.metafizzy.co/ The plugin in invoked inside: [ROOT FOLDER]/javascripts/script.js All the images contained in this module are located inside: [ROOT FOLDER]/images/portfolio LIGHTBOX TYPE 1 : PROJECT VIEW INSIDE LIGHTBOX: Each portfolio item when clicked, displays lightbox containing a larger image or project information which can also include an image slider within the lightbox. This lightbox is implemented with ColorBox plugin. The location of files to be opened in this lightbox is given via: <a class="folio-item project-view" href="project-ajax.html" title="Project Title"> when clicking on this link to trigger lightbox for this item. Here we have href="project-ajax.html" attribute which is the name of project page to be loaded into the lightbox when clilcked. This loading is performed via AJAX via jQuery. AMAZE v2.1 – Premium Theme from Designova IMPORTANT: In order to showcase more projects via lightbox please do the following: 1) Clone the file project-ajax.html 2) Rename it to something else 3) Now link this new file to any portfolio block (explained above) and on clicking this portfolio item the AJAX is loading the content from this newly linked file. 4) Repeat the same procedure for all project blocks / project pages. Fore more settings on this lightbox please visit http://jacklmoore.com/colorbox Image Slider inside Project View Lightbox: We have a nice image slider inside the Lightbox which act as project image slider. You can see these images in the following location: [ROOT FOLDER]/images/projects/project1/01.jpg These images are declared inside each and evey project page (AJAX feed), as shown below: [ROOT FOLDER]/ project-ajax.html This plugin is FLEX Slider which has more options which can be found here. http://www.woothemes.com/flexslider/ LIGHTBOX TYPE 2 : BIG IMAGE INSIDE LIGHTBOX: Each portfolio item when clicked, can also show a single Big image. This lightbox is implemented with PrettyPhoto plugin. The location of files to be opened in this lightbox is given via: <a class="folio-item image-view" href="images/portfolio/full/dummy.jpg" data-gal="prettyPhoto[portfolio]"> AMAZE v2.1 – Premium Theme from Designova when clicking on this link to trigger lightbox for this item. Here we have href=" images/portfolio/full/dummy.jpg " attribute which is the name of Single Image to be loaded into the lightbox when clilcked. This loading is performed via jQuery plugin prettyPhoto. Fore more settings on this lightbox please visit http://www.no-margin-for-errors.com 4) Contact Form Configuration The template is featuring a fully working contact form with PHP mail sending ready. We have kept everything ready, you have to only provide your own email id instead of the predefined demo email id. This can be done by simply modifying the email id, as shown in the SENDCONTACT.PHP file, located in root directory. [ROOT FOLDER]/sendcontact.php Setting Up Email Credentials Open this file via a code editor / text editor and now go to the code segment: Line 4 to 6. Please see the screenshot: The value “[email protected]” should be replaced with your own email so that the emails will be sending to this email id. The value inside ‘subject’ should be changed to something meaningful since this will be displayed as the subject of the email message send via the contact form. That’s all for basic setup. All PHP mail sending library files and server scripts are stored in MAIL folder in the root. For advanced users who need in-depth customizations, the PHP script can be modified appropriately. The PHP file is ‘processForm.php’ and it is located in the root folder. AMAZE v2.1 – Premium Theme from Designova 5) Skill Graph Setup The template is featuring animated (on parallax effects) skill graph. The values can be supplied via DATA attributes given to the bar graph, as found in the following code segment (INDEX.HTML): In order to change the values, please edit : data-950="width:80%" PLEASE NOTE: When parallax effect is disabled (as mentioned earlier) the values should be manually supplied via MobileHook CSS file (mentioned earlier). Kindly see the parallax setup section for details about this CSS file. AMAZE v2.1 – Premium Theme from Designova Chapter 7 Fonts and Typography Fonts Directory and Declaration We have used CSS3 Font-Face technology to render fonts in this template. We have defined all font rules via the following CSS file: [ROOT FOLDER]/assets/css/typography.css And we have included all font resource files inside the following folder: [ROOT FOLDER]/assets/css/fonts Setting Up Font-Face Rules An example usage of Font-Face is defined as follows: @font-face { font-family: 'MyFontFamily'; src: url('fonts/mywebfont.eot'); /* IE9 Compat Modes */ src: url('fonts/mywebfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/mywebfont.woff') format('woff'), /* Modern Browsers */ url('fonts/mywebfont.ttf') /* Safari, Android, iOS */ format('truetype'), url('fonts/mywebfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } Now apply the font to any element via CSS rule targeting that element, for example if the element is #something, then we can apply the above declared font as: AMAZE v2.1 – Premium Theme from Designova #something { font-family: 'MyFontFamily', Fallback, sans-serif; } Typography Arrangements: We have used H1 tag for Main Heading and H3 tag for Sub Headings. We have kept separate style rules for all typographical elements via a single stylesheet: [ROOT FOLDER]/stylesheets/style.css AMAZE v2.1 – Premium Theme from Designova Chapter 8 Images, Icons & Graphics Amaze features many images and graphical elements. We have kept such image resources in a single folder: [ROOT FOLDER]/ images/ Images featured on live preview are not included in the download pack since they are copyrighted properties of original photographers and authors. Instead we have included exact placeholder (dummy) images with same dimensions and format. Please replace them with your preferred images, don’t forget to keep exact dimensions as placeholder images. Icon Fonts We have not included any Icon Fonts for this theme. So this will be more easy for ordinary users to replace simple images rather than setting up a new Icon Font. Image Credits Images on live preview are exclusive properties of original authors. Please find the theme information page (from where you bought this theme) to see image sources and credits information. If you want to use any of such images on your site you have to either purchase the original stock images or contact their authors (we are not). Graphics / Icons Credits We have used some Icons and created some graphics based on some icons available free over web. The sources are as follows: http://iconmonstr.com/ http://www.tenbytwenty.com/sosa.php AMAZE v2.1 – Premium Theme from Designova Chapter 9 Sources & Credits Included Libraries & Resources: jquery-1.7.2.min.js http://jquery.com/ bootstrap.js http://twitter.github.com/bootstrap/ jquery.easing.2.1.js http://gsgd.co.uk/sandbox/jquery/easing/ jquery.colorbox.js http://jacklmoore.com/colorbox jquery.isotope.min.js http://isotope.metafizzy.co jquery.nivo.slider.js http://nivo.dev7studios.com waypoints.min.js https://github.com/imakewebthings/jquery-waypoints/ jquery.carouFredSel-6.2.1-packed.js http://caroufredsel.frebsite.nl AMAZE v2.1 – Premium Theme from Designova Chapter 10 Theme Updates & Bug Fixes This user manual covers everything you need to setup the website. But if you find any bugs, issues and limitations on this theme please contact our support team via email to: [email protected]. When you send a support request email you must include the purchase code and purchase date of the product (received from Envato). Support request emails without this information will not be answered. We regularly release updates and bug fixes on our themes and we send notifications via newsletters. You may subscribe to our weekly newsletter by visiting the following link: http://eepurl.com/xDO_v We also use Twitter to announce the latest news and updates to our customers. Please follow us @designovastudio AMAZE v2.1 – Premium Theme from Designova Chapter 11 Vote of Thanks Once again, Thank You for purchasing our product. We hope you like our theme as well as this documentation. We have done our level best to make things pretty clean and clear. Anyway if you have queries, support requests or something to know more from us, kindly contact us via email to: [email protected]. Support Requests - Please note: When you send a support request email you must include the purchase code and purchase date of the product (received from Envato). Support request emails without this information will not be answered. This is needed to prevent pirated users and spammers from our support system. About Us: We are Designova, a small team of young web designers and developers and we are good people to work with We are from Kerala – the God’s own country and we work on UTC +5.30, Monday to Friday during 09.30 to 16.30. We have more premium themes, please visit our portfolio: http://themeforest.net/user/designova/portfolio Designova Official Website: http://designova.net/ AMAZE v2.1 – Premium Theme from Designova amaze Version 2.1 Build: 24 June 2013 Designed with Love in Kerala A premium theme from Designova www.designova.net AMAZE v2.1 – Premium Theme from Designova