J1.5 talk

Difference between revisions of "Using the JToolBar class in the frontend"

From Joomla! Documentation

(javascript)
 
Line 13: Line 13:
  
 
--[[User:Sbrandao|Sbrandao]] 13:20, 2 March 2009 (UTC)
 
--[[User:Sbrandao|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
 +
#  rounded.css or norounded.css as needed (you can copy both if you could be using either of them)
 +
#  general.css
 +
#  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'''
 +
 +
<source lang="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";
 +
</source>
 +
 +
This will make sure that the look and feel is exactly like the backend.
 +
 +
Enjoy the toolbar!!!

Revision as of 07:44, 27 July 2009

javascript[edit]

Hi,

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[edit]

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

Retrieved from "https://docs.joomla.org/index.php?title=J1.5_talk:Using_the_JToolBar_class_in_the_frontend&oldid=15004"