Thank you for purchasing our product. 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!
Oficiona is a modern template for All kind of Job Service Website like Online Job Apply, Job Post, Make Portfolio etc.
Oficiona is a HTML5 Responsive Bootstrap Job Board Template. Oficiona Template has modern design and beautiful color variation. It meets all the need for making a website related to various type of job listing. It have all the necessary section and elements. It comes with four pre-made Home Page along with necessary section and job post, add resume, dashboard etc.
Oficiona is built with SCSS, Bootstrap Framework 4.4.1, HTML5 & CSS3. MailChimp Integrated for Subscription form. It is Responsive, Retina ready & Multi-Device supported. All code is beautifully wirtten & W3C Validated.
This Documentation provide you a clear guideline for how to use and customize this template. If you facing any problem, please don't forget to ask any question or contact with us for support. Thank you for purchasing our product.
Oficiona has lot of features and functionality:
All the HTML codes and section are well seprated by linespace and comments so that you can modify easily. As example here below is the sample codes for Main Banner section:
<!-- Banner -->
<div class="banner banner-1 banner-1-bg">
<div class="container">
<div class="row">
<div class="col-12">
<div class="banner-content">
<h1>58,246 Job Listed</h1>
<p>Create free account to find thousands Jobs, Employment & Career Opportunities around you!</p>
<a href="#" class="button">Upload Resume</a>
</div>
</div>
</div>
</div>
</div>
<!-- Banner End -->
You just need to copy one of them, which one you needed for your site to build.
Our external styles files are seperated on css folders on the assets folder having all the external CSS plugins
And our template have its custom CSS files name main.css which is on css filder of root directory. This is the generated output from the scss files on scss directory.
main.css files codelines are decorated on such level:
/* Table of content -------------------------------------------- 01.0 General Style 02.0 Banner Style 03.0 Search Style 04.0 Breadcrumb Style 05.0 Category Style 06.0 Job Style 07.0 Candidate Style 08.0 Company Style 09.0 App Style 10.0 Form Style 11.0 Header Style 12.0 Nav Style 13.0 Animated-number Style 14.0 Call-to-action Style 15.0 Testimonial Style 16.0 Advice Style 17.0 Pricing Style 18.0 Progress-bar Style 19.0 Pagination Style 20.0 Footer Style 21.0 Employer Style 22.0 About Style 23.0 Working Process Style 24.0 FAQ Style 25.0 Blog Style 26.0 Contact Style 27.0 Payment Style -------------------------------------------*/
Our css rules are seperated beautifully for each section. So it's easy to customize. Such as, If you want to change the style of Banner section and you are not familiar with sass than simply go to appropriate section on css file and change the styles as your want:
/*---------------------------------------------
02.0 Banner Style
---------------------------------------------*/
.banner-1-bg {
background: url(../images/bg/banner-1-bg.jpg) no-repeat bottom left;
background-size: cover;
}
.banner-1 .banner-content {
padding: 250px 0 270px;
color: $white;
h1 {
font-family: $headerFont;
font-size: 4.2rem;
font-weight: 600;
margin-bottom: 15px;
}
p {
color: #f5f8fe;
font-size: 1.6rem;
font-family: $bodyFont;
max-width: 500px;
position: relative;
&:before {
position: absolute;
content: url(../images/curv-arrow-2.png);
top: 100%;
left: 190px;
}
}
.button {
background: rgba($white, .15);
padding: 14px 30px;
margin-top: 20px;
font-family: $headerFont;
font-weight: 500;
text-transform: uppercase;
&:hover {
background: $white;
color: $primaryColor;
}
}
}
.banner-2-bg {
background: url(../images/bg/banner-2-bg.jpg) no-repeat bottom left;
background-size: cover;
}
.banner-2 .banner-content {
padding: 215px 0 170px;
color: $blackRussianLite;
h1 {
font-family: $headerFont;
font-size: 4.2rem;
font-weight: 600;
margin-bottom: 25px;
}
p {
color: $fontColor;
font-size: 1.6rem;
font-family: $bodyFont;
max-width: 500px;
}
.short-infos {
display: flex;
max-width: 350px;
margin-top: 40px;
.info {
flex-grow: 1;
h4 {
font-size: 2.8rem;
color: $blackRussianLite;
font-weight: 600;
}
span {
font-size: 1.6rem;
font-family: $bodyFont;
font-weight: 400;
color: $fontColor;
}
}
}
}
.banner-3-bg {
background: url(../images/bg/banner-3-bg.jpg) no-repeat bottom left;
background-size: cover;
}
.banner-3 .banner-content {
padding: 70px 0 190px;
h1 {
font-family: $headerFont;
font-size: 4.2rem;
font-weight: 600;
margin-bottom: 15px;
color: $blackRussianLite;
}
p {
color: $fontColor;
font-size: 1.6rem;
font-family: $bodyFont;
max-width: 500px;
position: relative;
&:before {
position: absolute;
content: url(../images/curv-arrow.png);
top: 100%;
left: 190px;
}
}
.button {
background: rgba($primaryColor, .15);
color: $primaryColor;
padding: 14px 30px;
margin-top: 20px;
font-family: $headerFont;
font-weight: 500;
text-transform: uppercase;
&:hover {
color: $white;
background: $primaryColor;
}
}
}
This template has following javascript plugins:
all these files are located on assets/js folder, And our custom js is on separated js folder on root directory.
Like CSS and HTML our JavaScript codes on our custom.js file are also well organized and well commented.
For example if you want to change the functionality of CountTo just find the following block of codes and change it according to your need:
/*-----------------------------------
CountTo
-----------------------------------*/
function animateCountTo(ct) {
if ($.fn.visible && $(ct).visible() && !$(ct).hasClass('animated')) {
$(ct).countTo({
speed: 1000,
refreshInterval: 1
});
$(ct).addClass('animated');
}
}
function initCountTo() {
var counter = $('.count');
counter.each(function () {
animateCountTo(this);
});
}
initCountTo();
Version 1.4 - 23.02.2020
========================
Update - Updated Bootstrap Version
Version 1.3 - 23.04.2019
========================
Update - Updated Map Color
Update - Updated Leaflet Map
Update - Updated Video Player
Update - Updated CSS Issue
Version 1.2 - 09.03.2019
========================
New - 3 New Page Added
New - Job Apply Popup Form Added
Update - Updated CSS Issue
Version 1.1 - 13.01.2019
========================
New - 2 New Dashboard Page Added
Update - Updated Color Issue
Update - Updated Spacing Issue
Version 1.0 - 24.12.2018
========================
- Initial Release
We are thankful to...
Once again, thank you so much for purchasing this product. As we said at the beginning, We'd be glad to help you if you have any questions relating to this product. No guarantees, but we'll do our best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
CodePassenger Team