Before Starting

Created: August 14 2017
Version: 3.1
Last Update: Dec 01 2017
By: Themez Hub
Email: themezhub@gmail.com

Thank you for purchasing the Job Stock Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

How To Install ?

Setting up the HTML template is a very easy job! For install it move HTML_folder in your ftp account or open your cpannel and move it.

HTML Structure

Here is the general structure for easly customization

Change Meta Info

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Best Responsive job portal template build on Latest Bootstrap.">
	<meta name="keywords" content="job, nob board, job portal, job listing">
	<meta name="robots" content="index,follow">
    <title>Job Stock - Responsive Job Portal Bootstrap Template | ThemezHub</title>

Header Navigation Structure

<!-- Start Navigation -->
<nav class="navbar navbar-default navbar-fixed navbar-transparent white bootsnav">
	<div class="container">            
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
			<i class="fa fa-bars"></i>
		</button>
		<!-- Start Header Navigation -->
		<div class="navbar-header">
			<a class="navbar-brand" href="index.html">
				<img src="img/logo.png" class="logo logo-display" alt="">
				<img src="img/logo-white.png" class="logo logo-scrolled" alt="">
			</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="navbar-menu">
			<ul class="nav navbar-nav navbar-left" data-in="fadeInDown" data-out="fadeOutUp">
				<li class="active"><input type="text" class="form-control" placeholder="Find Freelancer"></li>
				<li><a href="blog.html">Blog</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
				<li><a href="login.html"><i class="fa fa-pencil" aria-hidden="true"></i>SignUp</a></li>
				<li><a href="pricing.html"><i class="fa fa-sign-in" aria-hidden="true"></i>Pricing</a></li>
				<li class="left-br"><a href="javascript:void(0)"  data-toggle="modal" data-target="#signup" class="signin">Sign In Now</a></li>
			</ul>
		</div><!-- /.navbar-collapse -->
	</div>   
</nav>
<!-- End Navigation -->
<div class="clearfix"></div>

Footer Structure

<!-- Footer Section Start -->
<footer class="footer">
	<div class="row lg-menu">
		<div class="container">
			<div class="col-md-4 col-sm-4">
				<img src="img/footer-logo.png" class="img-responsive" alt="" /> 
			</div>
			<div class="col-md-8 co-sm-8 pull-right">
				<ul>
					<li><a href="index.html" title="">Home</a></li>
					<li><a href="blog.html" title="">Blog</a></li>
					<li><a href="pricing.html" title="">Pricing</a></li>
					<li><a href="faq.html" title="">FAQ</a></li>
					<li><a href="contact.html" title="">Contact Us</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="row no-padding">
		<div class="container">
			<div class="col-md-3 col-sm-12">
				<div class="footer-widget">
				<h3 class="widgettitle widget-title">About Job Stock</h3>
				<div class="textwidget">
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
				<p>7860 North Park Place<br>
				San Francisco, CA 94120</p>
				<p><strong>Email:</strong> Support@careerdesk</p>
				<p><strong>Call:</strong> <a href="tel:+15555555555">555-555-1234</a></p>
				<ul class="footer-social">
					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
					<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram"></i></a></li>
					<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
				</ul>
				</div>
				</div>
			</div>
			
			<div class="col-md-3 col-sm-4">
				<div class="footer-widget">
				<h3 class="widgettitle widget-title">All Navigation</h3>
				<div class="textwidget">
					<div class="textwidget">
					<ul class="footer-navigation">
						<li><a href="manage-company.html" title="">Front-end Design</a></li>
						<li><a href="manage-company.html" title="">Android Developer</a></li>
						<li><a href="manage-company.html" title="">CMS Development</a></li>
						<li><a href="manage-company.html" title="">PHP Development</a></li>
						<li><a href="manage-company.html" title="">IOS Developer</a></li>
						<li><a href="manage-company.html" title="">Iphone Developer</a></li>
					</ul>
				</div>
				</div>
				</div>
			</div>
			
			<div class="col-md-3 col-sm-4">
				<div class="footer-widget">
				<h3 class="widgettitle widget-title">All Categories</h3>
				<div class="textwidget">
					<ul class="footer-navigation">
						<li><a href="manage-company.html" title="">Front-end Design</a></li>
						<li><a href="manage-company.html" title="">Android Developer</a></li>
						<li><a href="manage-company.html" title="">CMS Development</a></li>
						<li><a href="manage-company.html" title="">PHP Development</a></li>
						<li><a href="manage-company.html" title="">IOS Developer</a></li>
						<li><a href="manage-company.html" title="">Iphone Developer</a></li>
					</ul>
				</div>
				</div>
			</div>
				
			<div class="col-md-3 col-sm-4">
				<div class="footer-widget">
				<h3 class="widgettitle widget-title">Connect Us</h3>
				<div class="textwidget">
				<form class="footer-form">
					<input type="text" class="form-control" placeholder="Your Name"> 
					<input type="text" class="form-control" placeholder="Email">
					<textarea class="form-control" placeholder="Message"></textarea>
					<button type="submit" class="btn btn-primary">Login</button>
				</form>
				</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row copyright">
		<div class="container">
			<p>Copyright Job Stock © 2017. All Rights Reserved </p>
		</div>
	</div>
</footer>
<div class="clearfix"></div>
<!-- Footer Section End -->

Premium Job Tag Structure

<span class="tg-themetag tg-featuretag">Premium</span>

Browse Job Structure

<a href="job-detail.html" class="item-click">
	<article>
		<div class="brows-job-list">
			<div class="col-md-1 col-sm-2 small-padding">
				<div class="brows-job-company-img">
					<img src="img/com-1.jpg" class="img-responsive" alt="" />
				</div>
			</div>
			<div class="col-md-6 col-sm-5">
				<div class="brows-job-position">
					<h3>Senior front-end Developer</h3>
					<p><span>Autodesk</span><span class="brows-job-sallery"><i class="fa fa-money"></i>$750 - 800</span></p>
				</div>
			</div>
			<div class="col-md-3 col-sm-3">
				<div class="brows-job-location">
					<p><i class="fa fa-map-marker"></i>QBL Park, C40</p>
				</div>
			</div>
			<div class="col-md-2 col-sm-2">
				<div class="brows-job-type">
					<span class="full-time">Full Time</span>
				</div>
			</div>
		</div>
	</article>
</a>

Brouwse Company Structure

<a href="company-detail.html" class="item-click">
	<article>
		<div class="brows-company">
			<div class="col-md-2 col-sm-2">
				<div class="brows-company-pic">
					<img src="img/com-1.jpg" class="img-responsive" alt="" />
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="brows-company-name">
					<h4>AutoDesk</h4>
					<span class="brows-company-tagline">Software Company</span>
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="brows-company-location">
					<p><i class="fa fa-map-marker"></i> FALBROOK NSW 2330</p>
				</div>
			</div>
			<div class="col-md-2 col-sm-2">
				<div class="brows-company-position">
					<p>6 Opening</p>
				</div>
			</div>
		</div>
	</article>
</a>

Browse Resume Structure

<a href="resume-detail.html" class="item-click">
	<article>
		<div class="brows-resume">
			<div class="row no-mrg">
				<div class="col-md-2 col-sm-2">
					<div class="brows-resume-pic">
						<img src="img/can-2.png" class="img-responsive" alt="" />
					</div>
				</div>
				<div class="col-md-4 col-sm-4">
					<div class="brows-resume-name">
						<h4>Alexander Weir</h4>
						<span class="brows-resume-designation">IOS Developer</span>
					</div>
				</div>
				<div class="col-md-4 col-sm-4">
					<div class="brows-resume-location">
						<p><i class="fa fa-map-marker"></i> Saint Paul, MN 55102</p>
					</div>
				</div>
				<div class="col-md-2 col-sm-2">
					<div class="browse-resume-rate">
						<span><i class="fa fa-money"></i>$14/hour</span>
					</div>
				</div>
			</div>
			<div class="row extra-mrg row-skill">
				<div class="browse-resume-skills">
					<div class="col-md-9 col-sm-8">
						<div class="br-resume">
							<span>css</span><span>html</span><span>photoshop</span><span>wordpress</span>
							<span>css</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-4">
						<div class="browse-resume-exp">
							<span class="resume-exp">Exp. 2.5 Year</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</article>
</a>

Java Script

This theme imports three Javascript files.

jQuery
My custom scripts
Some plugin

Company Brand Carousel Script

You can customize easly like carousel navigation, auto-play etc.

 $("#company-brands").owlCarousel({
	items:5,
	itemsDesktop:[1199,5],
	itemsDesktopSmall:[979,4],
	itemsTablet:[768,3],
	itemsMobile: [600, 2],
	pagination: false,
	navigation:false,
	navigationText:["",""],
	autoPlay:true
});

Testimonials Script

Customize your testimonials script .

$("#client-testimonial-slider").owlCarousel({
	items:3,
	itemsDesktop:[1199,3],
	itemsDesktopSmall:[979,2],
	itemsTablet:[768,1],
	pagination: false,
	navigation:false,
	navigationText:["",""],
	autoPlay:true
});

Add Dynamic Field Script

$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).on('click', function(e) {
	$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
	if ($('.multi-field', $wrapper).length > 1)
		$(this).parent('.multi-field').remove();
	});
});

Bootstrap Wysihtml5 editor

$('.textarea').wysihtml5();

Setting & Uses

Setup the basic infortation.

Setting The Site Title

To change your site title and discription go to template folder and open index file in any editor and change your site title in header like:

<title>Job Stock - Responsive Job Portal Bootstrap Template | ThemezHub</title>

Setting The Footer Copyright

<div class="row copyright">
	<div class="container">
		<p>Copyright Job Stock © 2017. All Rights Reserved </p>
	</div>
</div>

Setting for set up logo

To changing logo very easy job! Put your logo in img file with logo.png. And put same path in index file like:

/*img src="img/logo.png" class="img-responsive"*/

Add Dynamic Field

<div class="row bottom-mrg extra-mrg">
	<form>
		<h2 class="detail-title">Resume Content</h2>
		<div class="col-md-12 col-sm-12">
			<textarea class="form-control textarea" placeholder="About Company"></textarea>
		</div>	
		
	</form>
</div>
<div class="row bottom-mrg extra-mrg">
	<form>
		<h2 class="detail-title">Add Education</h2>
		<div class="multi-field-wrapper">
			<div class="multi-fields">	
				<div class="multi-field">
					<div class="col-md-12 col-sm-12">
						<input type="text" class="form-control" placeholder="School Name, e.g. Master Of Technology">
					</div>
					<div class="col-md-12 col-sm-12">
						<input type="text" class="form-control" placeholder="Qualification, e.g. Master Of Arts">
					</div>
					<div class="col-md-6 col-sm-6">
						<div class="input-group">
							<span class="input-group-addon">Date From</span>
							<input type="text" class="form-control" placeholder="10 June 2010">
						</div>
					</div>
					<div class="col-md-6 col-sm-6">
						<div class="input-group">
							<span class="input-group-addon">Date To</span>
							<input type="text" class="form-control" placeholder="10 August 2013">
						</div>
					</div>
					<div class="col-md-12 col-sm-12">
						<textarea class="form-control textarea" placeholder="Notes"></textarea>
					</div>
					<button type="button" class="btn remove-field">Remove</button>
				</div>
			</div>									
			<button type="button" class="add-field">Add field</button>
		</div>
	</form>
</div>

Note: For the change headeing color and paragraph color you need to go same file (style.css).

Map Settings

For Map Settings just add this js code in your file (html or php file) and just change latitude & longitude in both place center: & latLng in this code.

<script type="text/javascript">
				$('#map_full_width_one').gmap3({
					map: {
						options: {
							zoom: 5,
							center: [41.785091, -73.968285],
							mapTypeControl: true,
							mapTypeControlOptions: {
								style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
							},
							mapTypeId: "style1",
							mapTypeControlOptions: {
								mapTypeIds: [google.maps.MapTypeId.ROADMAP, "style1"]
							},
							navigationControl: true,
							scrollwheel: false,
							streetViewControl: true
						}
					},
					marker: {
						latLng: [40.785091, -73.968285],
						options: {animation:google.maps.Animation.BOUNCE, icon: 'assets/img/marker.png' }
					},
					styledmaptype: {
						id: "style1",
						options: {
							name: "Style 1"
						},

					}
				});

			</script>

for find latitude and longitude go here and input you address. latlong

Colors Option

Now you can change more than 5 color option easly. We have add +5 color option

blue-style.css
dark-red-style.css
green-style.css
orange-style.css
pink-style.css
purple-style.css
red-style.css
sea-blue-style .css

if you want change color so please see how to add css: after responsive.css

<link href="assets/css/responsiveness.css" rel="stylesheet">

add this css like this:

<link href="assets/css/colors/red-style.css" rel="stylesheet">

you can replace red-style.css to other color css like: blue-style.css, orange-style.css, purple-style.css

Note: In download package not include html files in all color. You have to change css file.

Credits

Images: Pexels/ And Pixabay
Carousel: Owl Carousel & Themeforest
Grid Layout: Bootstrap 3.3.7
Bootsnav: Bootsnav
Icon: Font Awesome, Line Icon
Fonts: Google Fonts
Default Content: Lipsum
Animation Css: Animation
wysihtml Editor: wysihtml
Date Dropper: Date Dropper

Note: Images not Included in download file. but screens and iphone include which made by Themez Hub

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Thank you, the customer, for purchasing Job Stock Job Poratl Template

Kind regards,
Themez Hub Team

Job Stock Job Portal Template