~~NOTOC~~ ====== mosMenuBar / JToolBarHelper / RSGallery2 ====== [[http://rsgallery2.net/content/view/112/92/|RSGallery2]] is a freely distributed add-on for [[http://www.joomla.org/|Joomla!]], which is itself a freely distributed Content Management System. ===== Problem ===== In the administration screens (accessed through the backend of Joomla!), there were six or eight missing icons in the various control panels for RSG2. The alternate text was present, so it was possible to click on the blank spot above the text and get the right function. But it didn't look good. I've installed RSG2 on the [[http://nsrca.us|RC aerobatic site]] that I've been developing. I would like other administrators on the system to feel comfortable with RSG2, and the missing icons made the component look bad--although it functioned fine. I did a little poking around in the PHP script that runs the administration control panels (administrator\components\com_rsgallery2\toolbar.rsgallery2.html.php). I found out that the first problem is that **mosMenuBar** is not fully supported in legacy mode in Joomla! 1.5. ===== Solutions ===== Some pages suggested that **JToolBarHelper** could be substituted for **mosMenuBar** in the code. So I did a global replacement. It was a start. The icons that worked before still worked. But //none// of the missing icons appeared. :-( I took out some old **mosMenuBar** functions that are not supported by **JToolBarHelper**--startTable, endTable, spacer. There is a new **JToolBarHelper** function called "title." It lets you put an icon and title on the toolbar. So I added that to all the menus. But the icon I wanted didn't show up on the toolbars. The titles did. A [[http://perassi.org/2007/08/22/where-jtoolbarhelper-finds-icons/|post by Carlo Perassi]] got me on the right track to start getting icons to appear. He noted that the icons are kept in administrator/templates/khepri/images/toolbar/. I copied an icon there and tried to fill in some of the blanks in the control panels. No joy. I tried adding a 48x48 logo cut out of the RSG2 logo to the default header folder, too (administrator/templates/khepri/images/header/). It didn't come up, either. But I found that I could substitute it for an existing icon, and then it would show. It wasn't the graphics mode that was causing the problem. The display of the icons is controlled by \administrator\templates\khepri\css\icon.css. Icon classes are defined there; when you want the icon, you just apply its class to the thing you're constructing. So I added eight lines to the icon.css file. I probably could have done it in some .css for RSG2, but I figured I would keep it simple (for me). All I had to do was copy the pattern set in the css file and adjust it to the location of the extra RSG2 icons (or read the css file and pick some existing Khepri icons from it to plug into the PHP file--I did both). I had a few bad hours when the control panels started to look nicer--but one of the functions didn't work. Bummer! I read [[http://www.reference.joomlademo.de/nav.html?administrator/includes/toolbar.php.html#jtoolbarhelper|some more about the parameters]] for **JToolBarHelper**. I took a wild guess and added two parameters to a function call that had been void. BINGO! The dead function came to life! ^_^ ===== End Result ===== I don't have "before" pictures, and I'm too lazy to put things back the way they were. These are all "after" the day's experiments. * Added 48x48 logo & title to main menu bar. {{blog:rsg2_01.jpg|}} * Put the Configuration icon and title on that panel. {{blog:rsg2_02.jpg|}} * Put the upload icon and title on that panel, and got an "Upload" button out of the khepri collection. {{blog:rsg2_03.jpg|}} * Put the zip upload icon and title on the Batch Upload panel along with a "Next" icon from khepri. {{blog:rsg2_04.jpg|}} * Icon and title for Manage galleries. {{blog:rsg2_05.jpg|}} * Icon, title, and "Install" icon from RSG2 for the Template Manager. I was really pleased when I figured out the right URL to get RRSG2's own icons to show up. {{blog:rsg2_06.jpg|}} * Icon, title, and three icons for Manage Items: "Move to", "Upload", and "Reset hits". {{blog:rsg2_07.jpg|}} ===== The icon ===== * The code below will be looking for this icon in administrator\components\com_rsgallery2\images\rsg2-logo_x_48.png. {{blog:rsg2-logo_x_48.png|}} ===== The code ===== Here is the hacked and commented version of administrator\components\com_rsgallery2\toolbar.rsgallery2.html.php. The ends of the lines don't display on this wiki, but if you copy this section and paste it in a text editor, they should all be there. . // Pasta faggiole! // OK. This is what I've added to icon.css: /** rsg2 icons -- mxm **/ // .icon-32-rsg2-install { background-image: url(../../../components/com_rsgallery2/images/rsg2-install.png); } // .icon-32-refresh { background-image: url(../images/toolbar/icon-32-refresh.png); } // .icon-48-rsg2_x_48 { background-image: url(../../../components/com_rsgallery2/images/rsg2-logo_x_48.png); } // .icon-48-config { background-image: url(../../../components/com_rsgallery2/images/config.png); } // .icon-48-upload { background-image: url(../../../components/com_rsgallery2/images/upload.png); } // .icon-48-upload_zip { background-image: url(../../../components/com_rsgallery2/images/upload_zip.png); } // .icon-48-mediamanager { background-image: url(../../../components/com_rsgallery2/images/mediamanager.png); } // .icon-48-categories { background-image: url(../../../components/com_rsgallery2/images/categories.png); } // .icon-48-template { background-image: url(../../../components/com_rsgallery2/images/template.png); } // Then I edited the JToolBarHelper function calls to match the icons in the css file. // Many of the needed icons are already in the .css file, so I just had to change // the mosMenuBar filenames to the existing template icon filenames. // Last piece of the puzzle: I cut a 48x48 piece out of the rsg2 logo and am using it // as a generic icon for those toolbars that don't have their own special icon. // I hooked up the icons from the Adminstration page to the pages that they call // and gave the pages matching titles as well. // I'm pleased with this day's results. // I hope it goes without saying that this is offered for your thoughtful // consideration. I plan to install it on my site. Let the buyer beware! // ------------------------- end notes --------------------------------- // ensure this file is being included by a parent file // added from if(defined('J15B_EXEC')){ require_once( JApplicationHelper::getPath( 'toolbar_html' ) ); // neither helps nor hurts, I guess. mxm } else { // Check to ensure this file is within the rest of the framework defined('_JEXEC') or die('Direct Access to this location is not allowed.'); } // end added from a template manager file class menu_rsg2_maintenance{ function regenerateThumbs() { JToolBarHelper::title('Regenerate thumbnails','rsg2_x_48'); JToolBarHelper::custom('executeRegenerateImages','forward','forward',_RSGALLERY_MAINT_REGEN_BUTTON, false); JToolBarHelper::help('screen.rsgallery2', true); } } class menu_rsg2_templates{ function templates() { JToolBarHelper::title('Templates','rsg2_x_48'); JToolBarHelper::makeDefault(); //JToolBarHelper::assign(); // deleting isn't working at the moment. removing button for release. JToolBarHelper::deleteList(); /* JToolBarHelper::editHtmlX( 'edit_main', 'Main' ); JToolBarHelper::editHtmlX( 'edit_display', 'Display' ); JToolBarHelper::editCssX( 'edit_css', 'CSS' );*/ //JToolBarHelper::addNew(); // JToolBarHelper::help( 'screen.rsgallery2', true ); /* JToolBarHelper::custom('save', 'publish_f2.png', 'publish_f2.png', 'Default', false); JToolBarHelper::help('screen.rsgallery2', true); */ } } class menu_rsg2_templateManager { function _DEFAULT() { JToolBarHelper::title('Template Manager','template'); JToolBarHelper::custom('showInstall', 'rsg2-install', 'rsg2-install','Install', false, false); JToolBarHelper::deleteList( '', 'remove', 'Uninstall' ); JToolBarHelper::makeDefault(); JToolBarHelper::editListX( 'edit', 'Edit' ); JToolBarHelper::cancel( 'closeManager', 'Close' ); } function _VIEW(){ JToolBarHelper::title('View','rsg2_x_48'); JToolBarHelper::back(); } function _EDIT_SOURCE(){ JToolBarHelper::title('Edit source','rsg2_x_48'); JToolBarHelper::save( 'save_file' ); JToolBarHelper::apply( 'apply_file' ); JToolBarHelper::cancel('edit'); } function _EDIT(){ JToolBarHelper::title('Edit','rsg2_x_48'); JToolBarHelper::custom('preview', 'preview', 'preview', 'Preview', false, false); JToolBarHelper::custom( 'edit_source', 'html', 'html', 'Edit HTML', false, false ); JToolBarHelper::custom( 'edit_display', 'html', 'html', 'Edit Display', false, false ); JToolBarHelper::custom( 'choose_override', 'html', 'html', 'Edit Override', false, false ); JToolBarHelper::custom( 'choose_css', 'css', 'css', 'Edit CSS', false, false ); JToolBarHelper::save( 'save' ); JToolBarHelper::apply(); JToolBarHelper::cancel( 'cancel', 'Close' ); } function _CHOOSE_CSS(){ JToolBarHelper::title('Choose css','rsg2_x_48'); JToolBarHelper::custom( 'edit_css', 'edit', 'edit', 'Edit', true ); JToolBarHelper::cancel('edit'); } function _EDIT_CSS(){ JToolBarHelper::title('Edit css','rsg2_x_48'); JToolBarHelper::save( 'save_file' ); JToolBarHelper::apply( 'apply_file'); JToolBarHelper::cancel('choose_css'); } function _CHOOSE_OVERRIDE(){ JToolBarHelper::title('Choose override','rsg2_x_48'); JToolBarHelper::custom( 'edit_override', 'edit', 'edit', 'Edit', true ); JToolBarHelper::cancel('edit'); } function _EDIT_OVERRIDE(){ JToolBarHelper::title('Edit override','rsg2_x_48'); JToolBarHelper::save( 'save_file' ); JToolBarHelper::apply( 'apply_file'); JToolBarHelper::cancel('choose_override'); } function _INSTALL(){ JToolBarHelper::title('Install','rsg2_x_48'); JToolBarHelper::cancel( 'cancel', 'Close' ); } } class menu_rsg2_images{ function upload() { JToolBarHelper::title('Upload images','upload'); JToolBarHelper::custom('save_upload','upload','upload',_RSGALLERY_TOOL_UP, false); JToolBarHelper::cancel(); JToolBarHelper::help( 'screen.rsgallery2' ); } function show(){ JToolBarHelper::title('Manage items','mediamanager'); JToolBarHelper::custom('move_images','move','move',_RSGALLERY_MOVETO, true); JToolBarHelper::custom('copy_images','copy','copy',_RSGALLERY_COPYIMAGE, true); JToolBarHelper::publishList(); JToolBarHelper::unpublishList(); JToolBarHelper::custom('upload','upload','upload',_RSGALLERY_TOOL_UP, false); JToolBarHelper::editListX(); JToolBarHelper::deleteList(); JToolBarHelper::custom('reset_hits','refresh','refresh',_RSGALLERY_TOOL_RES_HITS, true); JToolBarHelper::help( 'screen.rsgallery2' ); menuRSGallery::adminTasksMenu(); } function edit() { global $id; JToolBarHelper::title('Edit','rsg2_x_48'); JToolBarHelper::save(); if ( $id ) { // for existing content items the button is renamed `close` JToolBarHelper::cancel( 'cancel', _RSGALLERY_TOOL_CLOSE ); } else { JToolBarHelper::cancel(); } JToolBarHelper::help( 'screen.rsgallery2.edit' ); } function remove() { global $id; JToolBarHelper::title('Remove','rsg2_x_48'); JToolBarHelper::cancel(); JToolBarHelper::custom('removeReal','delete','',_RSGALLERY_TOOL_CONFIRM_DEL, false); JToolBarHelper::help( 'screen.rsgallery2.edit' ); } } // Manage Galleries class menu_rsg2_galleries{ function show(){ JToolBarHelper::title('Manage galleries','categories'); JToolBarHelper::publishList(); JToolBarHelper::unpublishList(); JToolBarHelper::editListX(); JToolBarHelper::deleteList(); JToolBarHelper::addNewX('edit','New'); //had to add parameters -- mxm JToolBarHelper::help( 'screen.rsgallery2' ); menuRSGallery::adminTasksMenu(); } function edit() { global $id; JToolBarHelper::title('Edit','rsg2_x_48'); JToolBarHelper::save(); if ( $id ) { // for existing content items the button is renamed `close` JToolBarHelper::cancel( 'cancel', _RSGALLERY_TOOL_CLOSE ); } else { JToolBarHelper::cancel(); } JToolBarHelper::help( 'screen.rsgallery2.edit' ); } function remove() { global $id; JToolBarHelper::title('Remove','rsg2_x_48'); JToolBarHelper::cancel(); JToolBarHelper::custom('removeReal','delete_f2.png','',_RSGALLERY_TOOL_CONFIRM_DEL, false); JToolBarHelper::help( 'screen.rsgallery2.edit' ); } } class menuRSGallery { function adminTasksMenu(){ // do we want an admin tasks menu for navigation? /* JToolBarHelper::divider(); JToolBarHelper::custom('controlPanel', '../components/com_rsgallery2/images/rsg2-cpanel.png', '../components/com_rsgallery2/images/rsg2-cpanel.png', _RSGALLERY_TOOL_PANEL, false); JToolBarHelper::custom('view_categories', '../components/com_rsgallery2/images/rsg2-categories.png', '../components/com_rsgallery2/images/rsg2-categories.png', _RSGALLERY_TOOL_GAL, false); JToolBarHelper::custom('view_images', '../components/com_rsgallery2/images/rsg2-mediamanager.png', '../components/com_rsgallery2/images/rsg2-mediamanager.png', _RSGALLERY_TOOL_IMG, false); JToolBarHelper::custom('upload', 'upload_f2.png', 'upload_f2.png', _RSGALLERY_TOOL_UP, false); */ } function image_new() { JToolBarHelper::title('New image','rsg2_x_48'); JToolBarHelper::save(); JToolBarHelper::cancel(); } function image_edit() { JToolBarHelper::title('Edit image','rsg2_x_48'); JToolBarHelper::save('save_image'); JToolBarHelper::cancel('view_images'); } // Batch Upload function image_batchUpload() { JToolBarHelper::title('Batch Upload','upload_zip'); // JToolBarHelper if( rsgInstance::getVar('uploaded' , null) ) JToolBarHelper::custom('save_batchupload','forward.png','forward.png',_RSGALLERY_TOOL_NEXT, false); else JToolBarHelper::custom('batchupload','forward.png','forward.png',_RSGALLERY_TOOL_NEXT, false); JToolBarHelper::help('screen.rsgallery2', true); } function image_upload() { JToolBarHelper::title('Upload image','rsg2_x_48'); JToolBarHelper::custom('upload','upload.png','upload.png',_RSGALLERY_TOOL_UP, false); //JToolBarHelper::save('upload'); JToolBarHelper::custom('upload','forward.png','forward.png',_RSGALLERY_TOOL_NEXT, false); } function images_show() { JToolBarHelper::title('Show images','rsg2_x_48'); JToolBarHelper::addNew('upload'); JToolBarHelper::editList('edit_image'); JToolBarHelper::deleteList( '', 'delete_image', _RSGALLERY_TOOL_DELETE ); menuRSGallery::adminTasksMenu(); } function config_rawEdit(){ JToolBarHelper::title('Edit raw','rsg2_x_48'); JToolBarHelper::apply('config_rawEdit_apply'); JToolBarHelper::save('config_rawEdit_save'); JToolBarHelper::cancel(); } function config_show() { JToolBarHelper::title('Configuration','config'); JToolBarHelper::apply('applyConfig'); JToolBarHelper::save('saveConfig'); JToolBarHelper::cancel(); JToolBarHelper::help('screen.rsgallery2', true); menuRSGallery::adminTasksMenu(); } function edit_main(){ JToolBarHelper::title('Main edit','rsg2_x_48'); JToolBarHelper::save( 'save_main' ); JToolBarHelper::cancel('templates'); } function edit_thumbs(){ JToolBarHelper::title('Edit thumbnails','rsg2_x_48'); JToolBarHelper::save( 'save_thumbs' ); JToolBarHelper::cancel('templates'); } function edit_display(){ JToolBarHelper::title('Edit display','rsg2_x_48'); JToolBarHelper::save( 'save_display' ); JToolBarHelper::cancel('templates'); } function simple(){ JToolBarHelper::title('RSGallery2','rsg2_x_48'); JToolBarHelper::help('screen.rsgallery2', true); menuRSGallery::adminTasksMenu(); } } ?>