Freelancer Responsive HTML Template

Getting Started

We would like to thank you for purchasing Freelancer Responsive HTML Template for your website. We outline all kinds of good information, and provide you with all the details you need to use this template.

If you are unable to find your answer here in our documentation, feel free to ask for help from our support team, all you have to do is contact with us via email tivatheme@cloodo.com.

Introducing Freelancer Responsive HTML Template

Freelancer Responsive HTML Template is a full-responsive html template which is used for job and recruitment page. It has 17 HTML pages. Every single element of Tiva Freelancer is entirely responsive, as content can be viewed from desktop and mobile devices.

Files Structure

  • /HTML
    • /css (Template CSS)
    • /fonts (Font Faces, Font Awesome, etc..)
    • /img (All Images)
      • /image
      • /testimonials
      • /blog
      • /default
    • /js (Template JS)

Javascript

It's possible to change the JS settings by extending the defaults from the template, that way is so much easier to update the theme changing only one JS file.
Here are a few samples on how to do that:

Changing Settings


1. Scroll to top (js/custom.js) 
function goup(){
    // to top
    $(".go-up").hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            $('.go-up').fadeIn();
        } else {
            $('.go-up').fadeOut();
        }
    });
    $('.go-up a').on('click', function (e) {
        e.preventDefault();
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });
}
2. Google map (js/custom.js) 
function initialize(latitude, longitude, address, zoom) {
    var latlng = new google.maps.LatLng(latitude,longitude);

    var myOptions = {
        zoom: zoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title: "location : " + address
    });
}
3. Price filter (js/custom.js) 
$("#price-filter").slider({
	from: 0,
	to: 100,
	step: 1,
	smooth: true,
	round: 0,
	dimension: " $",
	skin: "plastic"
});
4. Click Advanced search (js/custom.js) 
$(".job-advancedsearch a").on('click', function(e){
    e.preventDefault();
    $(".job-searchform").toggleClass('open');
});

$(".job-searchform .btn-close").on('click', function(e){
    e.preventDefault();
    $(".job-searchform").toggleClass('open');
});

HTML Structure

We are using Bootstrap framework. So, basic HTML structure is same as it is used in Bootstrap.

<!DOCTYPE html>
<html>
	<head>
		<!-- Bootstrap & Other CSS files -->
	</head>
	<body id="index" class="index">
		<div id="all">
			<header id="top-header" class="clearfix">
				<!-- Logo, Menu, Login, Resgister... -->
			</header>
			<div id="columns" class="columns-container">
				<!-- Main Content -->
			</div>
			<footer id="the-footer">
				<!-- Footer Social, Copyright -->
			</footer>
			<div class="go-up">
				<!-- Go To Top button -->
			</div>
		</div>
		
		<!-- Include JS files -->
	</body>
</html>

CSS Structure

The organization of the CSS is one of our priorities.

These are the CSS file we're using in the template:

  • global.css - (Main css style)
  • responsive.css (Css responsive)
  • font-awesome.min.css (Font awesome css style)
  • jquery.fullPage.css (Full page css style)
  • jslider.css (Price filter css style)

Customization & Styles

Fonts

To change the embedded font, please take a look in the head part of the website and you will find this tag:

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700%7CDroid+Serif" rel="stylesheet">

To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.

RTL

To activate the RTL mode please follow the steps:


1. Add the "dir" attribute in the HTML tag:


2. Add the Bootstrap RTL version after the default Bootstrap file and custom file RTL in the HTML:

Icons

1. Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.

If you need more information, please visit this site: http://fontawesome.io/ 

<i class="fa fa-edit"></i>
<i class="fa fa-search"></i>
...

Source & Credits

Getting Support

If you are unable to find your answer here in our documentation, feel free to ask for help from our support team, all you have to do is contact with us via email tivatheme@cloodo.com.

Our support scope

Our support covers configuration, building site as demo, trouble using any features, and bug fixes. We don't provide support for customizations or 3rd party extension.

Our support time

We try our best to monitor the email around the clock, however, this is not always possible due to different time zones. We will try to reply you as fast as we can.

Our working time is 8.00 AM - 5.30 PM, Monday to Friday (GMT+7). So if ask for help in the weekend, you may have to wait a little bit for support and please be patient.