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

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.

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

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

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.

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,

• 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.

• 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.

• 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.