Documentation

Cariera - Job Board HTML Template

Version 1.0 - Upload by Supportip

Thank you for purchasing my HTML 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 on ThemeForest. Thank you very much!

Description

Cariera is a Clean and Professional Job Board HTML Template which will fit the needs to all Job Seekers and Employers. It contains lots of components, functional contact form, integrated mailchimp subscription forms and it is super easy to customize.


Enjoy!

Change Logo

Its very easy to change your logo.
All you have to do is open your desired html file on a code editor and change the source/name of the logo to your logo.

Any-file.html
                                            
<!-- Logo -->
<div class="col-md-2 col-sm-3 col-xs-3">
    <a class="navbar-brand" href="index.html"><img src="images/logo.svg" alt="logo"></a><!-- INSERT YOUR LOGO HERE -->
</div>
                                        

Backgrounds

Image Background

To change the background image for the "index.html" or "index-03.html" page you have to change the background image link to the image that you desire to place as a background on file style.css

css/style.css
                                            
/****************** INDEX 1 ***********************/
section.main {
    background: url('../images/img/image1.jpg') no-repeat; //<===== Change this link to your desired Image
    background-size: cover;
    background-position: center center;
    height: 500px;
}

/****************** INDEX 3 ***********************/
section.main3 {
    background: url('../images/img/image3.jpg') no-repeat; //<===== Change this link to your desired Image
    background-size: cover;
    background-position: center center;
}
                                        

Slider Background

To change the Background Image on Index-02.hmtl all you have to do is change the url link to the image that you want to insert as a background.

Follow the examples below.

index-02.html
                                            
<!-- Start of Slide 1 -->
<div class="swiper-slide overlay-black" style="background: url('images/img/slider-img-1.jpg'); background-size: cover; background-position: 50% 50%;">
<!-- ======== Change the background link on the upper tag ======== -->

    <!-- Start of Slider Content -->
    <div class="slider-content container">
        <div class="col-md-6 col-md-offset-6 col-xs-12 text-center">

            <div class="section-title">
                <h2 class="text-white">your career start now!</h2>
            </div>
            <p class="text-white">Lorem Ipsum is simply.......</p>

        </div>
    </div>
    <!-- End of Slider Content -->
</div>
<!-- End of Slide 1 -->
                                        

Boxed Layout

To change the layout of the Template from wide to boxed all you have to do is insert the class "boxed" on the body of the HTML page that you want to change the layout, like the example below:

index-02.html
                                            
<!-- BEFORE - Wide Layout -->
<body>
.....


<!-- AFTER - Boxed Layout -->
<body class="boxed">
.....
                                            
                                            

Change Header

To change the header, you have to replace the current header with the header that you want. For example:

file-with-current-header.html
                                            
<!-- =============== Start of Header 1 Navigation =============== -->
<header class="header1">
....
....
</header>
<!-- =============== End of Header 1 Navigation =============== -->
                                            
                                            

Lets say you want to replace the current header with the header 2 that has the logo on top. Open file 'header2.html' and find the following code:

header2.html
                                            
<!-- =============== Start of Header 2 Navigation =============== -->
<header class="header2">
....
....
</header>
<!-- =============== End of Header 2 Navigation =============== -->
                                            
                                            

Copy everything from the 'Start of Header 2' till the 'End of Header 2' with everything that is in it and replace with the whole code of your current header (as shown on the previous example).

Make your header sticky

To make your header sticky you have to insert the class "sticky" on the header that you want.

header2.html
                                            
<!-- =============== Start of Header 2 Navigation =============== -->
<header class="header2 sticky"> <!-- ==== Sticky class on the header -->
....
....
</header>
<!-- =============== End of Header 2 Navigation =============== -->
                                            
                                            

Contact Form

Contact form will use php to send emails. So open email.php file that can be found on the php folder. Change the current email "your-email@cariera.com" to your email address and you are ready to go.


NOTE: Contact form require web server to send emails. Emails can go to your spam/junk folder.

php/email.php
                                            
########################################################################
########################################################################

$site_title     = "Cariera"; //Site Title
$to_email       = "your-email@cariera.com"; // <====== Replace with your email address
$subject        = "Cariera - Email "; //Replace with your email default subject
                                        

Contact Form

To change the location that is shown on the maps you have to replace the langtitude and longtitude.


First you have to find the langtitude and longtitude of the location that you want to be shown on the google maps. For that you have to go to Google Maps and pin out your location. Below the address of your location the langtitude and longtitude will be shown as on the image below:


After copying the langtitude and longtitude you will open custom.js file that can be found on the JS folder.

js/custom.js
                                            
/*----------------------------------------------------
  GOOGLE MAP
----------------------------------------------------*/
window.initialize = function () {
    var map;
    var bounds = new google.maps.LatLngBounds();
    
    ....
    ....
    ....
    
// Enter your Company's Latitude & Longtitude to be shown on the map
    var markers = [
        ['Cariera', 40.710439, -74.005072], // <== Replace the copied lang & long with this
    ];
                                        

Tracking with Google Analytics

Tracking your site with Google Analytics is super easy.


First you have to create a new property on your analytics account for website that you want to track. You will see a form as on the image below:


After filling the form, click on "Get Tracking ID"


Copy the code that is inside the script tags (without the script tags) and paste it on google-analytics.js that can be found on the "JS" Folder

js/google-analytics.js
                                            
// Paste Google Analytics code here
                                        

Subscription

To connect your mail chimp list, open custom.js that can be found in the JS folder. Find the following script and place your mailchimp list url into the "url" as shown on the example below below.

js/custom.js
                                            
/*----------------------------------------------------
  MAILCHIMP
----------------------------------------------------*/
$('.mailchimp').ajaxChimp({
    callback: mailchimpFunct,
    url: "your-mailchimp-url-here" // <===== Replace this with your own mailchimp post URL. Paste the url inside "".  
});
                                        

Icons

I used fontawesome icons on this Template.
It's very easy to use the icons. Just use the icon's class name

Example:

example.html
                                            
<!-- change the classes to change the icon -->
<i class="fa fa-user"></i>
                                        

All icons classes can be found here

Sources & Credits

Fonts
  • Varela Round
  • Raleway

Icons

Free Font Based Icons by Font Awesome


Image, Vectors & Mockups

Plugins

Please Note: All images are just used for Preview Purpose Only. They are not part of the theme and NOT included in the final purchase files.

Support

If you have any questions about customization of this template which are not covered in the documentation feel free to ask me a question in the comment section or contact me directly via e-mail form on my profile page.


Hope you enjoy my Theme and please don't forget to Rate. Thank you very much!