OFFICIAL THEME USER GUIDE Simple Creative Theme
Contents
1. E S ROOT FOLDER assets img E S ROOT FOLDER assets css E S ROOT FOLDER assets js E S ROOT FOLDER assets ico T E ET A E m m Mm Mm UNIQ Premium Theme from Designova Chapter Theme Styling and Skinning Unig 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 Changing Color Scheme You can see the whole skin of this theme under the following file THEME S ROOT FOLDER stylesheets style css In order to change the accent color of this theme default is Blue all you have to do is to replace all values supplied as 29ABC1 to any other color value in whole CSS file you have to do this This will change the color of this theme from default Blue to your preferred color UNIQ Premium Theme from Designova uniQ home whatwedo whoweare let swork reach to us hire us c what we do A perfectly minimal creative theme featuring simple and easy to use layout which is amazingly beautiful and fully responsive You can also change many other styling parameters such as font style font size spacing and alignment etc UNIQ Premium Theme from Designova UNIQ Premium Theme from Designova Chapter Fonts and Typography Fonts Directory2. A premium theme from Designova www designova net UNIQ Premium Theme from Designova
3. matrix 1 1 637 2568 685 2305 fi font family LeagueGothic ize 22 gt AND BRAND IDENTITIES lt text gt Please learn more about this component from the following tutorial http tympanus net codrops 2013 02 06 interactive infographic with svg and css animations ANIMATED SKILL DIAGRAM The skill diagram is powered by Raphael s library which manipulates the skill values and renders SVG animations lt div cla lt span class text gt jQuery lt span gt lt input type hidden cl percent lt input ty hidden c color ss arc gt text gt CSS3 lt span gt hidden hidden c lt div gt lt div class text gt HTML5 lt span gt lt input t hidden cla percent lt input ty lt div gt lt div class arc gt lt span cla text gt PHP lt span gt lt input ty hidden class percent value 83 gt lt input type hidden c value 313D6D lt div gt lt div class arc gt lt span text gt MySQL lt span gt lt input type hi class ae jes 6DBACC You can setup the value percentage as given here lt input type hidden class percent value 95 gt Please learn more about this component from the following tutorial http tympanus net codrops 2011 04 22 animated skills diagram UNIQ Premium Theme from Designova 7 Testimonial Slider We have a simple but useful testimonials slider Even if we call it as testimonials slider you can use it to display any H
4. 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 wanted to sound hip and use some buzz words By the way skrollr leverages HTML5 and CSS3 Skrollr Main Files Files you should know about e javascripts skrollr min js The skrollr core file That s all you need for modern desktop browsers e javascripts skrolir ie min js For E lt 9 include it after the core using conditional comments The plugin makes IE understand opacity rgb and hsl the ones with aloha are mapped to them and it creates a very simple document querySelector polyfill which only supports ID selectores using getElementByld Needed if you want to use data anchor target e javascripts skrolir 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 UNIQ Premium Theme from Designova How to setup Skrollr Parallax amp Animations skrollr allows you to animate any CSS property of any element
5. a gt lt 1i gt gt let s work lt a gt lt 1i gt gt reach to us lt a gt lt 1li gt gt hire us lt a gt lt 1i gt Setting up a section page A section page are a markup region contained within an HTML5 SECTION tag example as given below UNIQ Premium Theme from Designova We use the above region to wrap up each section and inside this region we build other elements using Bootstrap frameworks native arrangements via HTML5 markup So you have to understand how to create elements using Bootstrap please read on 2 Bootstrap Framework Setup Unig 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 1 1 1 1 1 1 1 1 1 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 12 column grid each span spans a number of those 12
6. 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 ecot iefix format embedded opentype IE6 IE8 1 fonts mywebfont woff format woff Modern Browsers K SS 1 fonts mywebfont ttf format truetype Safari Android iOS K 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 UNIQ 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 UNIQ Premium Theme from Designova UNIQ Premium Theme from Designova Chapter Parallax Engine and
7. 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 Print Design Please see the following Scroll position 0 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 uniQ 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 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 data attributes to define multiple sets of styles we call each of them keyframe and skrollr interpolates between them UNIQ Premium Theme from Designova 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 lt div data 0 background color rgb 0 0 255
8. it for experienced users Kindly find the directory structure explained with screenshot given below Directory Structure assets fonts ey es Mail stylesheets A amp A interactive Mail php thanks images javascripts error404 index project ajax sendcontact php AMAZE Premium Theme from Designova FOLDER FILE NAME DESCRIPTION WHAT TO DO assets Contains files for Bootstrap Just replace the inner files if framework along with some you need to manually re usable extensions upgrade to a newer version of Bootstrap images Contains all image resources Please replace placeholder used in this theme 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 Please DO NOT modify unless email sender you know exactly what you are doing stylesheets Contains all CSS files used Modify only STYLE CSS for within this theme This changing the look and feel of includes CSS files specific to theme If you are unsure plugins and modules used in about other CSS files please this theme keep them unchanged Error404 html File for Page Not Found Keep this file exactly on same cases Error Page location as it is You can change the name if it is requ
9. it is located in the root folder UNIQ Premium Theme from Designova 5 Nivo Slider The template is featuring an awesome utility content and image slider called Nivo Slider this is a simple plugin to setup BHN towed gt This lt gt is an example of a lt em gt HTML lt em gt caption with lt gt a link lt In order to change the captions please edit title tname where name holds the caption content Themes for Nivo Slider You can use any skin of Nivo Slider already included Just replace the class name lt gt Change theme light to something else You can find possible class names from here 6 SVG Components The template is featuring some interactive SVG components they are A Milestones Show B Skill Diagram These components are explained as given below MILESTONES SHOW The milestone show is integrated SVG feed into the markup as shown below lt gt lt gt UNIQ Premium Theme from Designova The SVG file can be located on the root folder as shown here ROOT interactive svg You have to open this SVG file inside a code editor and thereafter edit the color and property values inside this SVG file and they will be immediately applied to the markup lt g id design details gt x 616 468 y 650 4 fi none width 187 height form matrix 1 1 630 1738 663 6289 fi font family LeagueGothic 22 gt WE CREATE LOGOS FLYERS lt text gt m
10. 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 UNIQ Premium Theme from Designova Sources amp Credits Included Libraries amp Resources jquery 1 7 2 min js http iquery com bootstrap js http twitter github com bootstrap jquery easing 1 0 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 minjs https github com imakewebthings jquery waypoints jquery carouFredSel 6 1 0 packed js http caroufredsel frebsite n UNIQ Premium Theme from Designova Chapter Chapter Theme Updates amp 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 info designova net When you send a support request email you must include the purchase code and purchase date of the product received from Market place website Support request emails without this information will not be answered We regularly release updates and bug fixes on our themes and we send notific
11. Q Premium Theme from Designova current height J numberDivs children first O number current height first css number current numberDivs first css current current 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 lt li gt items in the first list as shown below gt all lt a gt lt 1i gt gt branding lt a gt lt 1i gt gt web lt a gt lt 1i gt gt ecommerce lt a gt lt 1i gt t gt print lt a gt lt 1li gt gt digital lt a gt lt 1li gt gt modern lt a gt lt 1i gt gt creative lt a gt lt 1i gt gt modern and lt lt lt lt lt lt lt lt lt lt We the Wie ie We Ts le ie TH Nira UES ieee TAR Ween TBR E S creative lt a gt lt 1i gt lt 2 er e gt All not including web lt a gt lt 1i gt lt ul gt gt UNIQ Premium Theme from Designova Note that each filter item is having the following markup lt a href data option value
12. TML5 elements including images and content gt gt Simple gt Live is an amazing parallax theme lt lt gt 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 A script for initialization of this plugin is shown below easytabs animationSpeed j updateHash cycle easytabs animationSpeed updateHash UNIQ Premium Theme from Designova Chapter Images Icons amp Graphics Unig features many images and graphical elements We have kept such image resources in a single folder ROOT FOLDER images Images featured on uniq 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 uniQ 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
13. Version 1 0 Simple Creative Theme Responsive HIML5 WVaesignova Thank You For Purchasing Our Product Ifyou like this theme we really need your support So kindly tweet or comment on market place 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 Ifyou 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 Ifyou are looking for WordPress themes please visit our market place portfolio and check themes with title as WordPress 3 Stylesheet missing error Why As we have already mentioned on market place 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 Pl
14. ations 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 UNIQ Premium Theme from Designova Chapter 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 info designova net 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 Market place website 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 TF portfolio http Ahemeforest net user designova portfolio Designova Official Website http designova net UNIQ Premium Theme from Designova uniQ Version 1 0 Build 25 April 2013 Designed with Love at Kerala Waesignova
15. categoryl gt Design lt a gt 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 lt div gt 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 gt lt a gt gt lt gt lt a gt gt Caption lt 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 FOLDERJ 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 lt a href project ajax html target _blank class zoom info title Project Title gt lt div class icon link sosa folio trigger icon gt lt div gt lt a gt UNIQ Premium Theme from Designo
16. columns and should always add up to 12 for each row or the number of columns in the parent Please see the markup I lt div class row gt 2 lt div class span4 gt lt div gt 35 lt div class span8 gt lt div gt 4 lt div gt UNIQ 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 4 3 offset 2 3 offset 1 3 offset 2 6 offset 3 Lg lt div class row gt 23 lt div class span4 gt lt div gt 3 lt div class span3 offset2 gt lt div gt 4 lt div gt 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 UNIQ 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
17. data 500 background color rgb 255 0 0 gt WOOOT lt div gt View this example http prinzhorn github com skrollr examples docu 1 htm 2 Now let s do a barrel roll at the same time lt div data 0 background color rgb 0 0 255 transform rotate Odeg data 500 background color rgb 255 0 0 transform rotate 360deg gt WOOOT lt div gt View this example http prinzhorn github com skrollr examples docu 2 htm 3 Now let the rotation bounce like it were a hip hop video lt div data 0 background color rgb 0 0 255 transform bounce rotate Odeg data 500 background color rgb 255 0 0 transform bounce rotate 360deg gt WOOOT lt div gt View this example http prinzhorn github com skrollr examples docu 3 htm Turning Off On the parallax Global Setup UNIQ Premium Theme from Designova 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 opera 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 devic
18. e gt lt div class icon zoom sosa folio trigger icon gt lt div gt lt a gt 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 Fore more settings on this lightbox plugin please visit http jacklmoore com colorbox 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 john example com 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
19. ease 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 info designova net When you send a support request email you must include the purchase code and purchase date of the product received from Market place website 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 asmall 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 info designova net If our developers are available we will get back to you with a nice plan and schedule Table of Contents Theme Information Files Included Directory Structure Template Layout and Ul Framework Bootstrap Setup Upgrading Bootstrap on future Theme St
20. es 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 non mobile 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 UNIQ Premium Theme from Designova 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 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 use
21. ired 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 Mail ohp Mail sending PHP module Keep it on place DO NOT modify UNIQ Premium Theme from Designova 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 htm 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 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 UNIQ Premium Theme from Designova Chapter Template Layout and UI Framework Unig 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 Template Layout Setup Setting Up Navigation As a one page template Uniq has navigation which is a collection of click to scroll links We u
22. o use The first focus of this theme is the usability and simplicity Users can create a site within a few minutes that s pretty easy e Perfectly responsive across all devices including iOS mobile devices android and windows phone platforms e Built with Bootstrap 2 3 0 World s best Responsive Front end Framework Most easy to use and customize e ISOTOPE Premium Plugin Worth USD 15 Powered Filterable Portfolio Gallery with Lightbox e Full Screen BG Image Slideshow Image slideshow on the background of the page AMAZE Premium Theme from Designova AMAZE VERSION1 0 THEME USER GUIDE e Project Info Images Slider inside Lightbox via AJAX the best way to showcase your project information and images at the same time e Testimonials Slider a very usable content slider that supports any HTMLS5 content e Image Content Sliders Carousels Nivo Slider etc e Also includes all UI patterns from Bootstrap e Precisely hand coded HTML5 template with w3 valid cross browser compatible markup e 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 Premium Theme from Designova AMAZE VERSION1 0 THEME USER GUIDE Files Included Uniq 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
23. r 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 UniQ Web Examples e 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 e http www officeline se kampanj e http www direct tv thekingsroadmap http www evanshalshaw com bondcars http www caavadesign com http erikreyna com ofthestreet index html e https squareup com careers creative http happy is e ttp www futuremylove com e g p jonnyacevedo com UNIQ Premium Theme from Designova More Tutorials and Resources e https github com Prinzhorn skrollr stylesheets e http www guardian co uk info developer blog 2012 nov 20 how we built america elect graphic novel interactive e http webdesign tutsplus com tutorials htmlcss tutorials jazz up a static webpage with subtle parallax e http pepsized com merry scrolling with skrollr js e https rubygems org gems skrollr rails UNIQ Premium Theme from Designova Chapter Featured Modules and Markup 1 Full Screen Slider Page Backgro
24. se 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 137 gt gt home lt a gt gt what we do lt a gt gt who we are lt a gt gt let s work lt a gt ct gt reach to us lt a gt gt hire us lt a gt Here the ANCHOR tag lt a gt holds an HREF attribute which contains the target ID of the section When user clicks on this anchor tag the page will be scrolled down to that section UNIQ Premium Theme from Designova lt li class links gt lt a id about linker href about gt who we are lt a gt lt li gt When clicked on this link page will be scrolled down to lt section id about class page clearfix gt So there is an image contained in the anchor tag which acts as the icon of this navigation item as you s on the theme Also there is a tooltip displayed on left side of this icon which holds the value of title About Setting Up Mobile Only Navigation In this theme we are introducing a new style of mobile navigation which is Sidr Navigation We have used this plugin build this awesome sliding navigation panel httos github com artberri sidr This mobile navigation is simple to edit and use just follow the markup given below and it is sel explaining stuff gt intro lt a gt lt 1i gt gt what we do lt a gt lt 1i gt gt who we are lt
25. und 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 UNIQ Premium Theme from Designova gt backstretch r L fade k duration images bg jog first image shown on the slider images bg1 jog 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 Globe Vertical Text Slider We have a simple but useful text slider Even if we call it as text slider you can use it to display any HTML5 elements as permitted by the design s scope gt Web Design lt gt gt Interfaces lt gt gt Typography lt gt gt Graphics lt gt gt Print Design lt gt A custom JS 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 A script for initialization of this plugin is shown below UNI
26. va 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 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 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 UNIQ Premium Theme from Designova lt a href images portfolio full dummy jpg class zoom info title Project Titl
27. yling and Skinning Fonts and Typography Parallax Engine and Operations Turning off on the parallax effect Stylesheet Hook Parallax on Mobile Devices Featured Modules and Markup Full Screen Slider on Home Page Vertical Text Slider Filterable Portfolio ISOTOPE Contact Form Configuration Nivo Slider Setup SVG Components Testimonials Slider Images Icons and Graphics Sources and Credits Theme Updates and Bug Fixes Vote of Thanks AMAZE VERSION1 0 THEME USER GUIDE Chapter Theme Information eing a premium HTML5 template Unig is a highly minimal clean and simple theme with fully responsive layout built using Bootstrap framework version 2 3 Uniq is very easy to use you can can build the website within few minutes no more complex modules or advanced plugin setup is is needed It is simple and straight forward This theme features Single Page Scroll Down layout with responsive layout Uniq 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 This template includes w3 valid cross browser compatible HTML5 markup Main Features e Very clean and minimal theme with a ultra nice design a creative theme best suitable for creative agency individual portfolios and for innovative business showcase e Simple and easy t
Download Pdf Manuals
Related Search