.........
Hydro
Creative One Page Multipurpose Template
- Created: 5 / August / 2015
- latest Update: 5 / August / 2015
- By: buddhathemes
- Email: ram@iamdesigning.com
Thanks for purchasing our template! We understand that no business will complete without a prompt after sales support. If you have any questions that are beyond the scope of this help file, please feel free to contact us and you can mail us via our user page contact form. We will be more happy to be of any service as and when you require.
Folder Structure
- style.css - main style.css
- The css folder - contains the CSS for all major browsers, prettyphoto, responsive to site makes responsive for all devices and the font awesome (Please ensure that your new styles are applied. Also make sure that they carry enough "weight" and there isn't a style lower in the CSS file that is being applied after yours.)
- The fonts folder - contains the font awesome font files.
- The images folder - contains all the images that are being used in the stylesheets for the layout purpose and it has a subfolder like blog-images, portfolio-images, which contains images used in posts, pages and other areas
- The Assets folder - contains icons and image files, which is used on sliders.
- The js folder - contains javascript files and plugins as follows,
- Modernizr
(modernizr-2.6.2.min.js) - Classie for Mockup Slider
(classie.js) - BX Slider
(jquery.bxslider.min) - CarouFredSel plugin
(jquery.carouFredSel-6.2.0-packed.js) - Touch Swipe
(jquery.touchSwipe.min.js) - Donut Chart
(jquery.chart.min) - Google Map plugin
(jquery.gmap.min.js) - Gridrotator for Grid Slider
(jquery.gridrotator.js) - FullScreen Header
(fullscreen-header.min.js) - Masonary Portfolio
(jquery.isotope.min, jquery.isotope.perfectmasonry.min.js) - One Page Nav plugin
(jquery.nav.min.js) - Parallax Scrolling
(jquery.parallax-min.js) - Prettyphoto
(jquery.prettyPhoto.min.js) - Tabs
(jquery.tabs.min.js) - Retina
(retina.js) - Sticky Navigation
(jquery.sticky.min.js) - For Scroll
(jquery.scrollTo.min.js) - For Revolution Slider Plugins
-
jquery.themepunch.revolution.min.js -
jquery.themepunch.tools.min.js
-
- Easing Effect
(jquery-easing-1.3.js) - Migrate
(jquery-migrate.min.js) - Mockup Slider
(mockup.js) - Minified Plugins
(plugins.min.js) - Slidebars
(slidebars.js) - Tiltfx
(tiltfx.js) - Touch effects
(toucheffects.min.js) - Velocity
(velocity.min.js) - And custom js
(custom.js)
- Modernizr
HTML Structure
Here is the HTML Structure of the Template (simplified):
CSS files Structure
The style.css is main CSS file used in this template. This file also contains some general styling such as anchor tag colors, font-sizes and etc. Keep in mind that these values might be overridden somewhere else in the file.
@charset "UTF-8";
/* CSS Document */
@import "css/reset.css";
1. General
1.1 Headings
1.1 Transition
1.1 Text Elements
1.1 Tables
1.1 Definition Lists
1.1 Forms
1.1 Images
1.1 Widgets
1.1 Newsletter widget
2. Layout
2.1 Container
2.2 Float
3. Header
3.1 Header Type - 1
3.2 Header Type - 2
3.3 Header Type - 3
3.4 Header Type - 4
3.5 Header Type - 5
3.6 Header Type - 6
4. Parallax
5. Sliders
5.1 Parallax Slider
5.2 Mockup Slider
5.3 Grid Slider
5.4 Fixed BG Slider
5.5 Video Slider
6. Breadcrumb
7. Content
7.1 Blog
7.1.1 Blog-single
7.2 Portfolio
7.2.1 Recent Gallery
7.2.2 Portfolio Single
7.3 Twitter Parallax
7.4 Footer
7.5 Boxed Styles
8. Back To Top
9. Retina Ready
10. Loader Style
If you like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Javascript
This template imports the following Javascript files.
- Modernizr
(modernizr-2.6.2.min.js) - Classie for Mockup Slider
(classie.js) - BX Slider
(jquery.bxslider.min) - CarouFredSel plugin
(jquery.carouFredSel-6.2.0-packed.js) - Touch Swipe
(jquery.touchSwipe.min.js) - Donut Chart
(jquery.chart.min) - Google Map plugin
(jquery.gmap.min.js) - Gridrotator for Grid Slider
(jquery.gridrotator.js) - FullScreen Header
(fullscreen-header.min.js) - Masonary Portfolio
(jquery.isotope.min, jquery.isotope.perfectmasonry.min.js) - One Page Nav plugin
(jquery.nav.min.js) - Parallax Scrolling
(jquery.parallax-min.js) - Prettyphoto
(jquery.prettyPhoto.min.js) - Tabs
(jquery.tabs.min.js) - Retina
(retina.js) - Sticky Navigation
(jquery.sticky.min.js) - For Scroll
(jquery.scrollTo.min.js) - For Revolution Slider Plugins
-
jquery.themepunch.revolution.min.js -
jquery.themepunch.tools.min.js
-
- Easing Effect
(jquery-easing-1.3.js) - Migrate
(jquery-migrate.min.js) - Mockup Slider
(mockup.js) - Minified Plugins
(plugins.min.js) - Slidebars
(slidebars.js) - Tiltfx
(tiltfx.js) - Touch effects
(toucheffects.min.js) - Velocity
(velocity.min.js) - And custom js
(custom.js)
Color Schemes
Our template comes with 20 predefined color variations. By default we have called skins/ "skin-name" /style.css (Line No 41) which is present in head tag. And, here we have listed the available colors. Please choose your favorite color and update it with all the pages.
Avocado = <link id="skin-css" href="skins/avocado/style.css" rel="stylesheet" media="all" />
Blue = <link id="skin-css" href="skins/blue/style.css" rel="stylesheet" media="all" />
Blueiris = <link id="skin-css" href="skins/blueiris/style.css" rel="stylesheet" media="all" />
Blueturquoise = <link id="skin-css" href="skins/blueturquoise/style.css" rel="stylesheet" media="all" />
Brown = <link id="skin-css" href="skins/brown/style.css" rel="stylesheet" media="all" />
Burntsienna = <link id="skin-css" href="skins/burntsienna/style.css" rel="stylesheet" media="all" />
Chillipepper = <link id="skin-css" href="skins/chillipepper/style.css" rel="stylesheet" media="all" />
Chocolate = <link id="skin-css" href="skins/chocolate/style.css" rel="stylesheet" media="all" />
Eggplant = <link id="skin-css" href="skins/eggplant/style.css" rel="stylesheet" media="all" />
Electricblue = <link id="skin-css" href="skins/electricblue/style.css" rel="stylesheet" media="all" />
Graasgreen = <link id="skin-css" href="skins/graasgreen/style.css" rel="stylesheet" media="all" />
Gray = <link id="skin-css" href="skins/gray/style.css" rel="stylesheet" media="all" />
Green = <link id="skin-css" href="skins/green/style.css" rel="stylesheet" media="all" />
Orange = <link id="skin-css" href="skins/orange/style.css" rel="stylesheet" media="all" />
Palebrown = <link id="skin-css" href="skins/palebrown/style.css" rel="stylesheet" media="all" />
Pink = <link id="skin-css" href="skins/pink/style.css" rel="stylesheet" media="all" />
Radiantorchid = <link id="skin-css" href="skins/radiantorchid/style.css" rel="stylesheet" media="all" />
Red = <link id="skin-css" href="skins/red/style.css" rel="stylesheet" media="all" />
Skyblue = <link id="skin-css" href="skins/skyblue/style.css" rel="stylesheet" media="all" />
Yellow = <link id="skin-css" href="skins/yellow/style.css" rel="stylesheet" media="all" />
Note - It's also easy to change the color of any element such as background, font, link and etc.., Just copy and paste the property of the respective color from the above list.
Full-width & Boxed Layout
For Boxed Version, Please add the boxed class inside the body tag as shown below. We have 15 different patterns and 3 images in the image folder. If you wish to add your own pattern instead of the default pattern,then just place you own pattern in the images folder. After that you can call the pattern imageas shown in the below example.
Example
<body class="boxed" style="background-image:url(images/patterns/pattern1.jpg);">
Transparent Header
..........
Smart Fixed Navigation Header
Header with Iconed Menus
..........
Slidebar Header
..........
Toggled Menu Navigation
Header with FullScreen Menu
Portfolio Setup
Skeleton to add portfolio items
Blog Setup
Skeleton to add blog items
.........
Shortcodes - Click here
Buttons
Code for Small Button Type1 - Small Button
Code for Medium Button Type1 - Medium Button
Code for Large Button Type1 - Large Button
Code for Xlarge Button Type1 - XLarge Button
Code for Small Button Type2 - Small Button
Code for Medium Button Type2 - Medium Button
Code for Large Button Type2 - Large Button
Code for Xlarge Button Type2 - XLarge Button
Code for Small Button Type3 - Small Button
Code for Medium Button Type3 - Medium Button
Code for Large Button Type3 - Large Button
Code for Xlarge Button Type3 - XLarge Button
Code for Small Button with Icon Type1 - Small
Code for Medium Button with Icon Type1 - Small
Code for Large Button with Icon Type1 - Small
Code for Xlarge Button with Icon Type1 - Small
Code for Small Button with Icon Type2 - Small
Code for Medium Button with Icon Type2 - Small
Code for Large Button with Icon Type2 - Small
Code for Xlarge Button with Icon Type2 - Small
Code for Small Button with Icon Type3 - Small
Code for Medium Button with Icon Type3 - Small
Code for Large Button with Icon Type3 - Small
Code for Xlarge Button with Icon Type3 - Small
Table Styles
| Header1 | Header2 | Header3 | Header4 | Header5 |
|---|---|---|---|---|
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Header1 | Header2 | Header3 | Header4 | Header5 |
|---|---|---|---|---|
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Header1 | Header2 | Header3 | Header4 | Header5 |
|---|---|---|---|---|
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Header1 | Header2 | Header3 | Header4 | Header5 |
|---|---|---|---|---|
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
Service Type - 1
Service Type - 2
Service Type - 3
Service Type - 4
Tabs
Horizontal Tabs
Vertical Tabs
Toggles
Standard Toggle
Toggle 1
......................
Toggle 2
......................
Toggle 3
......................
Framed Toggle
Toggle 1......................
Toggle 2......................
Toggle 3......................
Accordion
Standard Accordion
Accordion 1
......................
Accordion 2
......................
Accordion 3
......................
Framed Accordion
Accordion 1......................
Accordion 2......................
Accordion 3......................
Pricing Table
Type 1
-
-
<h4> ......... <h4>
......................
......................
-
-
......................
......................
......................
-
......................
......................
......................
-
......................
......................
......................
-
......................
......................
-
-
<h4> ......... <h4>
......................
......................
-
-
......................
......................
......................
-
......................
......................
......................
-
......................
......................
......................
-
......................
......................
-
-
<h4> ......... <h4>
......................
......................
-
-
......................
......................
......................
-
......................
......................
......................
-
......................
......................
......................
-
......................
......................
-
-
<h4> ......... <h4>
......................
......................
-
-
......................
......................
......................
-
......................
......................
......................
-
......................
......................
......................
-
......................
......................
Type 2
<h3> ......... <h3>
......................
- <
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
<h3> ......... <h3>
......................
-
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
<h3> ......... <h3>
......................
-
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
<h3> ......... <h3>
......................
-
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
<h3> ......... <h3>
......................
-
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
<h3> ......... <h3>
......................
-
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
<h3> ......... <h3>
......................
-
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
<h3> ......... <h3>
......................
-
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
<h3> ......... <h3>
......................
-
......................
-
......................
-
......................
-
......................
-
......................
-
......................
......................
.....................
Twitter Setup
1. Please find the "custom.js" file from the template directory at "js/custom.js"
2. Find the script (Line.No: 78) for Tweets.
3. Please Change your username here to show your tweets in tweets page.
Sliders
1. Parallax Slider
2. Mockup Slider
3. Grid Slider
4. Fixed BG Slider
5. Revolution Slider
- Revolution Slider Responsive jquery - How to use it?
Revolution Slider - have a look at our template here
-
-
-
6. Video Slider
Homepage Creation
Hydro Creative HTML Template comes with 6 different Headers and Sliders. And so, you can easily create 36 different homepages for your site within a minute. Just copy the respective HTML codes,and jQuery on the page to be created.
Example 1: Creating a homepage with Header1 & Slider2
- Copy section class="home" from index-slider2.html
- Replace the copied section in index-header1.html
- And then, move to the bottom of index-slider2.html, copy the respective jQueries, and paste at the bottom of index-header1.html(above custom.js)
Example 2: Video Demonstration for creating a homepage with Header3 & Slider4
Click Here for VideoContact Form
We have used form in contact page
Here is the basic skeleton of the form:
Animations
Here is the list of available animations
- flash
- shake
- bounce
- tada
- swing
- wobble
- pulse
- flip
- flipInX
- flipOutX
- flipInY
- flipOutY
- fadeIn
- fadeInUp
- fadeInDown
- fadeInLeft
- fadeInRight
- fadeInUpBig
- fadeInDownBig
- fadeInLeftBig
- fadeInRightBig
- fadeOut
- fadeOutUp
- fadeOutDown
- fadeOutLeft
- fadeOutRight
- fadeOutUpBig
- fadeOutDownBig
- fadeOutLeftBig
- fadeOutRightBig
- bounceIn
- bounceInUp
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceOut
- bounceOutUp
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- rotateIn
- rotateInUpLeft
- rotateInDownLeft
- rotateInUpRight
- rotateInDownRight
- rotateOut
- rotateOutUpLeft
- rotateOutDownLeft
- rotateOutUpRight
- rotateOutDownRight
- hinge
- rollIn
- rollOut
- lightSpeedIn
- lightSpeedOut
- slideDown
- slideUp
- slideLeft
- slideRight
- slideExpandUp
- expandUp
- expandOpen
- bigEntrance
- hatch
- floating
- tossing
- pullUp
- pullDown
- stretchLeft
- stretchRight
Apply the animation to any element using the below format.
Eg: Using in html element:
Sample Text here
You can add animation to any (div, span, p, img etc) element. We just showed the example with div.
Google Map Setup
1. Please find "custom.js" file which is located in js/custom.js.
2. Find the script (Line No 199 - 224) for google map.
3. Please change your address as shown in the following Screenshot
Fonts
We have used Google Fonts (Open Sans, Merriweather) in our template. You can use any Google font simply as following,
1. Please replace the following lines in all layout files.
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300);
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
2. Find the following lines in style.css / shortcodes.css and replace with your new font family.
body { font-family: 'Lato', sans-serif; }
article.blog-entry .entry-details .entry-meta .date { font-family: 'Oswald', sans-serif; }
#logo a, .logo a { font-family: 'Open Sans', sans-serif; }
Icons
We have used FontAwesome icons in this template.
You can see the complete list of FontAwesome icons we've used at, here
Source & Credits
We would really like to thank,
- jQuery
- jQuery Easing Plugin
- Fontawesome
- BX Slider
- G Map
- Isotope
- Parallax
- jQuery Tabs
- PrettyPhoto
- Revolution Slider
- Gridrotator Slider
- Mockup Slider
- Slidebars
- Revolution Slider
Once again, thanks a lot for purchasing our template. As we said at the beginning, we would be glad to help you if you have any questions that are related to this template. We'll do our best to assist you. If you have a more general question relating to the template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
BuddhaThemes