J1.5 talk

Using the JToolBar class in the frontend

From Joomla! Documentation

Revision as of 07:44, 27 July 2009 by Shivakumar.gopalakrishnan (Talk | contribs)



This is a great article :) However I had a small problem due to my lack of experience... I propose a small change in the javascript part: Instead of <script type="text/javascript" src="includes/js/joomla.javascript.js"></script>, shouldn't it be: <script language="javascript" type="text/javascript" src="includes/js/joomla.javascript.js"></script> ?

Since I am quite new to web development (including html and php) it took me some time to understand that the reason behind my buttons inactivity was the language attribute... I do not know if this is a general feature or if it depends on the developer's configurations... either way, probably this should be mentioned on the article.

--Sbrandao 13:20, 2 March 2009 (UTC)

Complete the toolbar look and feel

Thanks to the original contributor; very nice piece explaining how we can add the menu to the front end. I would like to add the following to give a more complete picture.

Changes to CSS Copy the contents from the following CSS into the new CSS you are creating for your component.

From directory /joomla/administrator/templates/khepri/css

  1. rounded.css or norounded.css as needed (you can copy both if you could be using either of them)
  2. general.css
  3. you can ignore the additions for table.toolbar a and table.toolbar a:hover they are already in general.css. However, you need to have the code for icons

The code copied from general.css has the styles for div.header. By default the color is #0B55C4, change this to your color of choice

Changes to com_yourcomponent.php

echo "<div id=\"toolbar-box\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\"></div>\n";
echo "</div></div>\n";
echo "<div class=\"m\">\n";
echo yourcomponentHelperToolbar::getToolbar( );
echo "<div class=\"header\">menu header</div>\n";
echo "<div class=\"clr\"></div>\n";
echo "</div>\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\"></div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";

This will make sure that the look and feel is exactly like the backend.

Enjoy the toolbar!!!