Thank you for purchasing Jobster template.
If you have any questions that are beyond the scope of this documentation, please feel free to contact us here.
If you have any questions that are beyond the scope of this documentation, please feel free to contact us here.
Getting started
Installation and Setup
Jobster template is pure HTML and it doesn't require any special installation process. You can just upload it on a server or open it locally and it works.
Customize
Colors
All the custom colors are set as CSS variables in style.css file, as follows:
.pxp-root {
--pxpTextColor: #17171D;
--pxpMainColor: #0969C3;
--pxpMainColorTransparent: rgba(9,105,195,0.05);
--pxpMainColorDark: #002745;
--pxpMainColorLight: #e6f0f9;
--pxpSecondaryColor: #fff0d9;
--pxpSecondaryColorLight: #FFF8EC;
--pxpLightGrayColor: #dedede;
--pxpDarkGrayColor: #999;
}
Images
Some of the images are set as background images and some included directly using the img HTML tag. In order to have your own images, you just need to add them to the images folder of the template and include them where you need as follows:
<a href="..." class="..." style="background-image: url(images/company-logo-1.png);"></a>
<img class="..." src="images/single-blog-post.jpg" alt="...">
Font
Jobster template is using Poppins font from Google Fonts. In order to change the font to another, follow these simple steps:
Open the html template page where you want to include the font.
Change the path with the one provided by Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
Open the style.css file and replace the font name here:
body { font-family: 'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; ... }
CSS
The template is based on Bootstrap v5.1.3. For Bootstrap css and components, please check here.
All custom css styles are found in /css/style.css file.
Table of Contents
Homepage Version 1 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-hero
+ Categories Section
- Categories Cards | .pxp-categories-card-1
+ Jobs Section
- Jobs Cards | .pxp-jobs-card-1
+ Companies Section
- Companies Cards | .pxp-companies-card-1
+ Cities Section
- Cities Cards | .pxp-cities-card-2
+ Newsletter Section | .pxp-subscribe-1-container
+ Footer | .pxp-main-footer
Homepage Version 2 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-hero
+ Services Section
- Services Item | .pxp-services-1-item
+ Jobs Section
- Jobs Cards | .pxp-jobs-card-2
+ Categories Section
- Categories Cards | .pxp-categories-card-3
+ Testimonials Section | .pxp-testimonials-1
+ Footer | .pxp-main-footer
Homepage Version 3 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-hero
+ Categories Carousel Section | .pxp-categories-carousel
- Categories Cards | .pxp-categories-card-2
+ Promo Image Section | .pxp-promo-img
+ Cities Section
- Cities Card | .pxp-cities-card-1
+ Lists Section
- List | .pxp-list
+ Footer | .pxp-main-footer
Homepage Version 4 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-hero
+ Jobs Section
- Jobs Card | .pxp-jobs-card-1
+ Candidates Section
- Candidates Card | .pxp-candiadates-card-1
+ Companies Section
- Companies Cards | .pxp-companies-card-1
+ Blog Posts Section
- Blog Posts Card | .pxp-posts-card-1
+ Footer | .pxp-main-footer
Homepage Version 5 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-hero
+ Categories Section
- Categories Cards | .pxp-categories-card-2
+ Jobs Section
- Jobs Card | .pxp-jobs-card-3
+ Info Section
- Figure | .pxp-info-fig
- Caption | .pxp-info-caption
+ Promo Image Section | .pxp-promo-img
+ Footer | .pxp-main-footer
Homepage Version 6 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-hero
+ Categories Section
- Categories Cards | .pxp-categories-card-3
+ Jobs Section
- Jobs Card | .pxp-jobs-card-3
+ Price Plans Section
- Price Plan Card | .pxp-plans-card-1
+ Testimonials Section | .pxp-testimonials-1
+ Footer | .pxp-main-footer
Homepage Version 7 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-hero
+ Jobs Section
- Jobs Card | .pxp-jobs-card-2
+ Cities Section
- Cities Cards | .pxp-cities-card-2
+ Companies Section
- Companies Card | .pxp-companies-card-1
+ Blog Posts Section
- Blog Posts Card | .pxp-posts-card-1
+ Footer | .pxp-main-footer
Jobs List Version 1 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Jobs Search Form | .pxp-hero-form
+ Jobs Filter Form | .pxp-jobs-list-side-filter
+ Jobs List
- Jobs List Card | .pxp-jobs-card-1
+ Footer | .pxp-main-footer
Jobs List Version 2 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Jobs Search Form | .pxp-hero-form
+ Jobs Filter Form | .pxp-jobs-list-side-filter
+ Jobs List
- Jobs List Card | .pxp-jobs-card-2
+ Footer | .pxp-main-footer
Jobs List Version 3 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Jobs Search Form | .pxp-hero-form
+ Jobs Filter Form | .pxp-jobs-list-side-filter
+ Jobs List
- Jobs List Card | .pxp-jobs-card-3
+ Footer | .pxp-main-footer
Jobs List Version 4 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
+ Jobs Filter Form | .pxp-jobs-list-side-filter
+ Jobs List
- Jobs List Card | .pxp-jobs-card-1
+ Footer | .pxp-main-footer
Jobs List Version 5 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
+ Jobs Filter Form | .pxp-jobs-list-side-filter
+ Jobs List
- Jobs List Card | .pxp-jobs-card-2
+ Footer | .pxp-main-footer
Jobs List Version 6 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
+ Jobs Filter Form | .pxp-jobs-list-side-filter
+ Jobs List
- Jobs List Card | .pxp-jobs-card-3
+ Footer | .pxp-main-footer
Jobs List Version 7 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Jobs Search Form | .pxp-hero-form
- Jobs Filter Form | .pxp-hero-form-filter
+ Jobs List
- Jobs List Card | .pxp-jobs-card-1
+ Footer | .pxp-main-footer
Jobs List Version 8 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Jobs Search Form | .pxp-hero-form
- Jobs Filter Form | .pxp-hero-form-filter
+ Jobs List
- Jobs List Card | .pxp-jobs-card-2
+ Footer | .pxp-main-footer
Jobs List Version 9 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Jobs Search Form | .pxp-hero-form
+ Jobs Filter Form | .pxp-hero-form-filter
+ Jobs List | .pxp-jobs-list-single-column
- Jobs List Card | .pxp-jobs-card-4
+ Single Job Details | .pxp-jobs-tab-content
+ Footer | .pxp-main-footer
Single Job Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Cover Image | .single-job-cover
+ Content | .pxp-single-job-content
- Details | .pxp-single-job-content-details
- Side Panels Info | .pxp-single-job-side-panel
+ Related Jobs
- Related Jobs Card | .pxp-jobs-card-2
+ Footer | .pxp-main-footer
Companies List Version 1 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Companies Search Form | .pxp-hero-form
+ Companies List
- Companies List Card | .pxp-companies-card-1
+ Footer | .pxp-main-footer
Companies List Version 2 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
+ Companies Filter Form | .pxp-companies-list-side-filter
+ Companies List
- Companies List Card | .pxp-companies-card-1
+ Footer | .pxp-main-footer
Companies List Version 3 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Companies Search Form | .pxp-hero-form
+ Companies List
- Companies List Card | .pxp-companies-card-1
+ Footer | .pxp-main-footer
Single Company Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Cover Image | .pxp-single-company-hero
+ Content | .pxp-single-company-content
- Details | .pxp-single-job-content-details
- Side Panels Info | .pxp-single-company-side-panel
+ Available Jobs
- Available Jobs Card | .pxp-jobs-card-2
+ Footer | .pxp-main-footer
Company Dashboard Layout
* Body
+ Side Panel | .pxp-dashboard-side-panel
- Logo | .pxp-logo
- Navigation | nav
- User Navigation | .pxp-dashboard-side-user-nav
+ Content | .pxp-dashboard-content
- Content Header | .pxp-content-dashboard-header
- Content Details | .pxp-dashboard-content-details
Candidates List Version 1 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Candidates Search Form | .pxp-hero-form
+ Candidates List
- Candidates List Card | .pxp-candiadates-card-1
+ Footer | .pxp-main-footer
Candidates List Version 2 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
+ Candidates Filter Form | .pxp-candidates-list-side-filter
+ Candidates List
- Candidates List Card | .pxp-candiadates-card-1
+ Footer | .pxp-main-footer
Candidates List Version 3 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-page-header-simple
- Candidates Search Form | .pxp-hero-form
+ Candidates List
- Candidates List Card | .pxp-candiadates-card-1
+ Footer | .pxp-main-footer
Candidate Dashboard Layout
* Body
+ Side Panel | .pxp-dashboard-side-panel
- Logo | .pxp-logo
- Navigation | nav
- User Navigation | .pxp-dashboard-side-user-nav
+ Content | .pxp-dashboard-content
- Content Header | .pxp-content-dashboard-header
- Content Details | .pxp-dashboard-content-details
Blog Posts Version 1 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-blog-hero
+ Featured Posts Carousel | .pxp-blog-featured-posts-carousel
+ Posts List
- Posts List Card | .pxp-posts-card-1
+ Side Panel | .pxp-blogs-list-side-panel
+ Footer | .pxp-main-footer
Blog Posts Version 2 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-blog-hero
+ Featured Posts Carousel | .pxp-blog-featured-posts-carousel
+ Posts List
- Posts List Card | .pxp-posts-card-2
+ Side Panel | .pxp-blogs-list-side-panel
+ Footer | .pxp-main-footer
Blog Posts Version 3 Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-blog-hero
+ Featured Posts Carousel | .pxp-blog-featured-posts-carousel
+ Posts List
- Posts List Card | .pxp-posts-card-1
+ Footer | .pxp-main-footer
Single Blog Post Layout
* Body
+ Header | .pxp-header
- Logo | .pxp-logo
- Navigation | .pxp-nav
- User Navigation | .pxp-user-nav
+ Hero Section | .pxp-blog-hero
+ Featured Image | .pxp-single-blog-featured-img
+ Content | .pxp-single-blog-content
+ Related Posts
- Related Posts Card | .pxp-posts-card-1
+ Footer | .pxp-main-footer
Icons
The template makes use of Font Awesome 4.7.0 web font as its icons set.
Javascript
Files
The template client-side functionality is based on jQuery javascript library and Bootstrap 5 .
Javascript custom files included:
- main.js — Main interactions functionality
- nav.js — Navigation functionality for nested dropdowns
Libraries
External javascript libraries included: