GuideBook

IMMORTAL HEADER & SLIDER

Last updated
( 09 September 2015 )

Thank You for Purchasing IMMORTAL HEADER & SLIDER. Please do not hesitate if you have any queries about this item. We are always there for your help 24/7. You can contact us on this e-mail address szthemes53@gmail.com.

What We Have Prepared ?

We have prepared a set of headers with sliders. We have also included different and essential components of any theme in this set like different forms.

Features

How To...

First of all add the following files in <head/body> portion of your html file:

You can find these files in the following sub-folders of Main immortal folder:


Or

You can load Bootstrap, Font Awesome and jQuery files with a single line of code from their official online sources. You don't even have to download or install anything!


Use of CSS

In Immortal Folder you will find "CSS" sub-folder. In this folder you will find Three more sub-folders "single_css_file" , "multi_css_files" and "compress_css_files". You can use Immortal CSS files by following three ways:

By Using Files From "single_css_file" Folder

In "single_css_file" folder, for every single HTML file you have to use single mega CSS file as you can see below:

By Using Files From "compress_css_files" Folder

You can use compress CSS files from "compress_css_files" folder. In "compress_css_files" for every single HTML file you have to use single min_css file as you can see below:

By Using Files From "multi_css_files" Folder

In "multi_css_files" folder, for every single HTML file you have to use three CSS files as you can see below:

Use of JavaScript/JQuery

In Immortal folder you will find "js" sub-folder. In "js" folder you will find "immortal_header.js" file. Just attach this file in <head/body> of your HTML file.

Now

Animation Plug-in

We used animate.css of Daniel Eden for animation. So you should also attach this from css folder in your HTML file.

You can create your own animation easily by using animation.css plugIn. Just read the following complete tutorial about animation.css;

You can also read more about animation.css plugIn usage from this article;

It will look like this:


<!DOCTYPE html>

<html lang="en-US">

	<head>

		<!--======= Awesome Font StyleSheet =========-->		
		
		<link href="font-awesome-4.4.0/css/font-awesome.min.css" rel="stylesheet" media="all">
		
		
		<!--======= Helping Plug-in StyleSheets =========-->	
		
		<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
		<link href="css/animate.min.css" rel="stylesheet">
		
		
		<!--======= Immortal Header StyleSheets =========-->	
		
		<link href="css/single_css_file/fixed_width_header_mega.css" rel="stylesheet" media="all">

	</head>
	
<body>


		<!--/////////////// Header ///////////////-->
		
		<header>
		
		</header>
        
		
		
		<!--======= jQuery =========-->
		
		<script src="js/jquery-1.11.3.min.js"></script>
		
		
		<!--======= Bootstrap =========-->	
		
		<script src="js/bootstrap.min.js"></script>
		
		
		<!--======= Immortal Header JavaScript =========-->	
		
		<script src="js/immortal_header.js"></script>

    
</body>

</html>

How To Use HTML

After attaching all above files you will be able to attach HTML. There are 25 types of HTML files in the immortal folder. To use HTML Code Please follow the instruction:

HTML Structure

<body>
				
	<!--///////////////  Header  ///////////////-->		
	<header id="immortal_header">
	
	
		<!--///////////////  TOP BAR  ///////////////-->
		<div class="container-fluid top_bar_container_fluid">
		
		
		</div> <!--///////////////  End Top Bar  ///////////////-->

		
		
		<!--///////////////  Navigation Bar  ///////////////-->
		<nav class="navbar navbar-default top_bar_navbar" data-spy="affix" data-offset-top="100" data-offset-bottom="0">
					
					
					
		</nav> <!--///////////////  End Navigation Bar  ///////////////-->
		
		

		<!--///////////////  BOOTSTRAP CAROUSEL  ///////////////-->
		<div id="immortal_carousel" class="carousel scale_carousel top_bar_carousel_wrapper" data-ride="carousel" data-interval="6000" data-pause="hover">
		
				<!--======= First slide =========-->
				<div class="item active">
				
				</div>
				
				<!--======= Second slide =========-->
				<div class="item">
				
				</div>
				
		</div> <!--///////////////  End BOOTSTRAP CAROUSEL  ///////////////-->
		
		
		
		<!--///////////////  Modal Section  ///////////////-->
		
				<!--======= Modal =========-->
		
		<!--///////////////  End Modal Section  ///////////////-->
		
		
		
	</header> <!--///////////////  End Header Section  ///////////////-->
		
</body>

How To Change Images

You can find images sub-folder in the immortalfolder. You just have to replace all the Pics/Video of images folder with your own.

Image Resolution Image Resolution
Complete Logo 400 x 55 Slider Images 1732 x 1155
Logo Icon 63 x 55 Separate Header Post Image 1732 x 311
Mega Dropdown Image 367 x 175 One Color Header 1732 x 1155
Mega Dropdown Post Images 360 x 360 Video Slider Header 1900 x 900
Shop Dropdown Images 422 x 200 Modal Login Form Icon 460 x 460

Note: Images used in the demo are not include in Pack.

Classes

The Immortal pack build with Bootstrap. So we used our own classes names to override its formatting.

Layouts Nav Bar Slider Modal
Default .navbar .carousel .modal-dialog
Top Bar Header .top_bar_navbar .top_bar_carousel_wrapper .top_bar_modal_dialog
Logo Bar Navbar .logo_bar_navbar .logo_bar_carousel_wrapper .logo_bar_modal_dialog
Large Tabs Header .large_tabs_navbar .large_tabs_carousel_wrapper .large_tabs_modal_dialog
Fixed Width Header .fixed_width_navbar .fixed_width_carousel_wrapper .fixed_width_modal_dialog
Full Transparent Header .full_transparent_navbar .full_transparent_carousel_wrapper .full_transparent_modal_dialog
Note: Above classes examples are showing just pattern and writing style of classes names.

Fonts

We Used Following Fonts

Support

Please do not hesitate if you have any queries about this item. We are always there for your help 24/7. You can contact us on this e-mail address szthemes53@gmail.com

Copyright © 2015 SZ_Themes All Rights Reserved