Getting Started

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

Step 1: Install JoomBri Freelance

Once your Joomla site is ready, install the JoomBri Freelance 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 Demo site. JoomBri Freelance is just a component and it doesn't include any template. The template we have used in our demo site is JoomBri Charm based on YooTheme.com Warp Framework.

After installing the template, set it as default template.

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  
Hire Text Separator Menu Item Root  
Post Project Project - Post New Project Hire  
Browse Services Service - List of Services Hire  
Find Freelancers User - User - List of Users Hire User Group: Freelancer
Show Search: Yes
Work Text Separator Menu Item Root  
Browse Projects Project - Search Projects Work  
Post Service Service - Post New Service Work  
Dashboard User - Dashboard Menu Item Root Access: Registered
Register JoomBri Freelance 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 Projects JoomBri Latest Projects bottom-b Home View Type: Thumbnail
Set Itemid: Browse Projects
Latest Services JoomBri Latest Services bottom-b Home Set Itemid: Browse Services
Browse By Categories JoomBri Categories bottom-b Browse Projects Set Itemid: Browse Projects
Categories JoomBri Categories bottom-b Home View Type: Thumbnail
Set Itemid: Browse Projects
Search Projects JoomBri Search search-hidden Home Show Title: Hide
Status: Hide
Category: Hide
Budget: Hide
Set Itemid: Browse Projects
Statistics JoomBri Statistics block-footer Home Show Title: Hide
Display Type: Horizontal
New Freelancers JoomBri Users bottom-a Home User Group: Freelancer
Set Itemid: Find Freelancers
Tags JoomBri Tags bottom-a Home Set Itemid: Browse Projects
New Buyers JoomBri Users bottom-a Home User Group: Buyer
Set Itemid: Find Freelancers
User Balance JoomBri Balance toolbar-r All Pages Access: Registered
Note: The above module positions are specific to Yoo templates only. If you are using some other templates, the above module positions will not work.

Step 5: Direct Registration

You might want direct link to the registration page and it's possible with JoomBri Custom PHP Module.

To create the module (after installation),

  • Login to backend..
  • Go to Extensions → Modules.
  • Edit JoomBri Custom PHP.
  • Under Code, add the script given below.
  • Set the position to top-hero (only for JoomBri Charm).
<div class="uk-section uk-light uk-section-image uk-flex uk-flex-middle uk-background-norepeat uk-background-cover uk-overlay-background" style="min-height: calc(100vh - 80px);">
<div class="uk-width-1-1">
<div class="uk-container1">
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-1-1 uk-first-column">
<h1 class="uk-margin-remove-top uk-text-center uk-heading-primary uk-scrollspy-inview uk-animation-fade">
Work done easy
</h1>
<div class="uk-margin uk-width-xlarge uk-margin-auto uk-text-center uk-scrollspy-inview uk-animation-fade uk-text-large">
Tell us what you need done and discover talented freelancers <br class="uk-hidden-small" />within minutes for just a fraction of the cost!
</div>
<div class="uk-text-center">
<form class="form-validate" action="index.php/register" method="post" name="userGroup" style="display: inline;
">
<div class="input-prepend"><button class="btn btn-large btn-warning" type="submit">Work</button></div>
<input type="hidden" name="check" value="post" /> 
<input type="hidden" name="ugid" value="1" /> 
<input type="hidden" name="option" value="com_jblance" /> 
<input type="hidden" name="task" value="guest.grabusergroupinfo" />
<?php echo JHTML::_('form.token'); ?>
</form>
<form class="form-validate" action="index.php/register" method="post" name="userGroup" style="display: inline;
">
<div class="input-prepend"><button class="btn btn-large btn-success" type="submit">Hire</button></div>
<input type="hidden" name="check" value="post" /> 
<input type="hidden" name="ugid" value="2" /> 
<input type="hidden" name="option" value="com_jblance" /> 
<input type="hidden" name="task" value="guest.grabusergroupinfo" />
<?php echo JHTML::_('form.token'); ?>
</form>
</div>
</div>
<div class="uk-width-large-1-1" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:200}">
{loadposition&nbsp;search-hidden}
</div>
</div>
</div>
</div>
</div>

In the above codes, you should replace ugid values with the user group ID. By default, it is 1 & 2 which is already set in the above code.

Step 6: 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.

For placing small logo on mobiles,

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

Step 7: 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.

Step 8: 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.

Step 9: 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.