Skip to main content

Getting Started

We assume that you have the latest version of Joomla site ready. Please follow the steps below.

Step 1: Install JoomBri Careers

Once your Joomla site is ready, install the JoomBri Careers package by following the installation guide.

Step 2: Install Template

We frequently see our members posting in our forum that after installing the package (step 1), the site doesn't look like your JoomBri Careers Demo site.

JoomBri Careers is just a component and it doesn't include any template. The template we have used in our demo site is JB Blossom based on yootheme.com Warp Framework.

After installing the template, set it as the default template in Extensions → Templates.

Step 3: Create Menus

To create menu items, follow Create Menu Link. The below table shows the list of menu items created in our demo site.

Menu Title Menu Item Type Parent Item Other Options
Home Articles → Featured Articles Menu Item Root  
For Jobseekers Text Separator Menu Item Root  
Search Jobs Jobs - List and Search For Jobseekers  
List all Employers User - List All Users For Jobseekers  User Group: Employer
For Employers Text Separator Menu Item Root  
List all Jobseekers User - List All Users For Employers  User Group: Jobseeker
Post Jobs Jobs - Post New Jobs For Employers  
Dashboard User - Dashboard Menu Item Root Access: Registered
Register Careers Home Menu Item Root  

Step 4: Position Modules

When you install the package, all the required modules will be installed but will not be published automatically. You need to publish and position them to your liking.
Title Type Position Menu Assignment Other Options
Latest Jobs Careers Jobs top-b Home  
Find Jobs by Careers Categories bottom-a Home  
Search Jobs Careers Search top-hero Home  

Note: The above module positions are specific to Yoo templates only. If you are using templates from other developers, the above module positions will not work.

Step 5: Placing Logo

To set logo,

  • Login to backend.
  • Go to Extensions → Modules.
  • Click on New icon on the toolbar.
  • Select Custom module type from the list.
  • Set the Position of the module to logo.
  • Under Custom output, add the HTML code given below and save it. 
<p style="display: inline;"><img style="width: 134px; height: 40px;" src="http://demo.joombri.in/images/documents/logo-change.png" alt="Demo" /></p>

In the above code, change the value of src attribute to the location where you have stored your logo.

Mobile Logo

For placing the logo on mobiles, repeat the above procedure and set it to position logo-small.

<p style="display: inline;"><img style="width: 134px; height: 40px;" src="http://demo.joombri.in/images/documents/logo-change.png" alt="Demo" /></p>

Step 6: Placing Login Module in Menu

  • Login to backend.
  • Go to Extensions → Modules.
  • Click on Login Form module.
  • Set the following,
    • Title: Login
    • Position: menu
    • Login Redirection Page: Dashboard
    • Logout Redirection Page: Home

Finally Save & Close to save the module.

Mobile Login

To show the menu on mobiles, repeat the above procedure and set it to the position offcanvas. 

Step 7: Placing Menu Module

  • Login to backend.
  • Go to Extensions → Modules.
  • Click on Main Menu module.
  • Set the following,
    • Title: Main Menu
    • Position: menu
    • Show Sub-menu Items: Yes

Finally Save & Close to save the module.

Mobile Menu

To show the menu on mobiles, repeat the above procedure and set it to the position offcanvas. 

Step 8: Placing Footer Module

  • Login to backend.
  • Go to Extensions → Modules.
  • Click on New icon on the toolbar.
  • Select Custom module type from the list.
  • Set the Position of the module to footer.
  • Under Custom output, add the HTML code given below and save it.
<div class="uk-container uk-container-center uk-text-left">
<div class="uk-grid">
<div class="uk-width-1-3">
<h3 class="uk-text-muted">Useful Links</h3>
<ul class="uk-list tm-list-icon">
<li><a class="uk-link-muted" href="#">About Us</a></li>
<li><a class="uk-link-muted" href="#">Terms &amp; Conditions</a></li>
<li><a class="uk-link-muted" href="#">Disclaimer</a></li>
</ul>
</div>
<div class="uk-width-1-3">
<h3 class="uk-text-muted">Support</h3>
<ul class="uk-list tm-list-icon">
<li><a class="uk-link-muted" href="#">FAQs</a></li>
<li><a class="uk-link-muted" href="#">How it works?</a></li>
<li><a class="uk-link-muted" href="#">Contact Us</a></li>
</ul>
</div>
<div class="uk-width-1-3">
<div class="">
<h3 class="uk-text-muted">Follow us on</h3>
<a class="uk-margin-right uk-icon-hover uk-icon-twitter" href="#"> </a> <a class="uk-margin-right uk-icon-hover uk-icon-facebook-square" href="#"> </a> <a class="uk-margin-right uk-icon-hover uk-icon-google-plus" href="#"> </a> <a class="uk-margin-right uk-icon-hover uk-icon-linkedin-square" href="#"> </a></div>
</div>
</div>
</div>