Adding Toolbar for NonCoders
This tutorial is meant for regular users who are not well versed with PHP and unable to follow our developer-oriented Toolbar API.
The tutorial will cover on basic aspects of adding a new Toolbar Group item and will not elaborate on modifying existing toolbar items.
Contents |
Default Toolbar
Modified New Toolbar
Starting the modification
Before starting our modification, we always try as much as possible not to alter core JomSocial files. Luckily in JomSocial, we implement Joomla! MVC (Multiple View Controller) close to our heart. Basically, you will need to enable JomSocial template override mechanism by:
a. copying this file: /components/com_community/templates/default/toolbar.index.php
b. head to: /templates/{yourcurrentjoomlatemplate}/html/
c. create a new directory inside /html named: com_community
d. paste toolbar.index.php inside the new com_community
JomSocial will detect this modification and use the overridden toolbar file.
Modifying the Toolbar file
Locate this code (roughly line 128, JomSocial 1.6.250)
<li id="toolbar-item-inbox" class="<?php echo $toolbarClass[TOOLBAR_INBOX];?>"> <a href="<?php echo $inboxItem->link; ?>" onmouseover="joms.toolbar.open('m4')" onmouseout="joms.toolbar.closetime()"> <?php echo $inboxItem->caption; ?></a> <div id="m4" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden;"> <?php echo $customToolbar->getMenuItems(TOOLBAR_INBOX, 'prepend'); ?> <?php echo $customToolbar->getMenuItems(TOOLBAR_INBOX, 'append'); ?> </div> </li> <?php } } } ?>
Paste this code after it
<li class="" id="toolbar-item-apps"> <a onmouseout="joms.toolbar.closetime()" onmouseover="joms.toolbar.open('m5')" href="/index.php?option=com_community&view=apps&Itemid=2">New Group Toolbar</a> <div style="overflow: hidden; visibility: hidden;" onmouseout="joms.toolbar.closetime()" onmouseover="joms.toolbar.cancelclosetime()" id="m5"> <a href="/index.php?option=com_community&view=apps&Itemid=2">My Forum Posts</a> <a class="has-separator" href="/index.php?option=com_community&view=apps&task=browse&Itemid=2">View Forum Replies</a> <a href="/index.php?option=com_community&view=groups&task=mygroups&userid=62&Itemid=2">Item A</a> <a href="/index.php?option=com_community&view=photos&task=myphotos&userid=62&Itemid=2">Item B</a> <a href="/index.php?option=com_community&view=videos&task=myvideos&userid=62&Itemid=2">Item C</a> </div> </li>
Save, and you are now done. You now have a new Toolbar Group Item (m5). To add or remove child items, simply add or delete any of the lines below:
<a href="/index.php?option=com_community&view=apps&Itemid=2">My Forum Posts</a> <a class="has-separator" href="/index.php?option=com_community&view=apps&task=browse&Itemid=2">View Forum Replies</a> <a href="/index.php?option=com_community&view=groups&task=mygroups&userid=62&Itemid=2">Item A</a> <a href="/index.php?option=com_community&view=photos&task=myphotos&userid=62&Itemid=2">Item B</a> <a href="/index.php?option=com_community&view=videos&task=myvideos&userid=62&Itemid=2">Item C</a>
What is class="has-separator"?
It adds a separator in between child items as shown in the image below:
Adding a Second or More Toolbar Group Items
To add another Group item, simply copy the complete code shown above, and paste it after the first modified Group Item.
However, do not save the file yet. Locate two instances of m5 and change it to m6. This counter is used for javascript and div id.
Docs Navigation
