Visualising Website Performance with Flame Graphs
Development Resource Project
Scrollable Tables with Floating Header using CSS
Book Review: How to Implement Design Patterns in PHP
Nice n' Easy JQuery Image Rotator
A Simple ISAPI Filter for Authentication on IIS

Customising Joomla

Monday, 20 November 06, 12:00 am
My first task is to investigate how we can create a single consistent look & feel for the admin GUI. I'll need to get a good understanding of how the admin GUI works and is organised.

When the admin first logs in, you have a grid of square buttons on the left, and some stats on the right. The page shows as index2.php in the address bar.

index2.php has the following structure:
  • includes
  • start session
  • get option and task request params
  • create mainframe object as new mosMainFrame
  • get act, section, no_html and id request params
  • use selected template's index.php
  • show SQL queries if in debug mode
  • if task param is 'save' or 'apply' redo session check
2 3 

compton

11:24 am, Monday, 20 November 06

The admin side needs to comply with our requirements. Specifically, it means the plethora of options available by default needs to be trimmed down.

The home page should be the VirtueMart options normally displayed by clicking Store > Summary. To achieve this, I need to set appropriate default values for querystring parameters:
  • pshop_mode=admin
  • page=store.index
  • option=com_virtuemart
As we know, the administrator/index2.php page is responsible for the content of the admin side. The index.php file which is chosen by the current template does the following actions:
  • Import JavaScript
  • div, id header, wrapper: contains header image
  • table, class menubar: uses mosLoadAdminModule(s) to create the menu and drop-downs in a td. A second td contains a logout link
  • table, class menubar: breadcrumb trail
  • mosLoadAdminModule mosmsg
  • div, class centermain: calls mosMainBody_Admin
  • div, class footer: footer

compton

12:48 pm, Monday, 20 November 06

The code which produces the main admin content is the following, within administrator/index2.php:

ob_start();
if ($path = $mainframe->getPath( 'admin' )) {
   require_once ( $path );
} else {
   ?>
   <img src="images/joomla_logo_black.jpg" border="0" alt="" />
   <br />
   <?php
}

$_MOS_OPTION['buffer'] = ob_get_contents();
ob_end_clean();


Output buffering is started, which is used to save the output in $_MOS_OPTION['buffer'], a global array. The output buffer is cleared (ie erased, without being sent to the browser) with ob_end_clean().

All the mosMainBody_Admin() function does is echo the contents of $_MOS_OPTION['buffer'].

For the main admin page, the $path variable is set to administrator/components/com_admin/admin.admin.php. For the virtuemart main page, it is set to /administrator/components/com_virtuemart/admin.virtuemart.php.

So, will it be possible to merge the above two files, to create a single admin interface?

compton

12:57 pm, Monday, 20 November 06

The first thing I am going to try is modifying the menu bar on the admin page.

This is accomplished with mosLoadAdminModule( 'fullmenu' ), in the index.php of the template file. This function, defined in administrator/includes/admin.php, checks for /administrator/modules/mod_XXX.php, where XXX is the parameter (here 'fullmenu') with any slashes removed. If the file exists, it is included.

The mod_fullmenu.php file defines the class mosFullAdminMenu. The class contains just two functions: show() and showDisabled(). The first is to display the full working menu, the second displays just the top menu items, but they cannot be clicked or expanded.

Both work by creating a JavaScript array, myMenu, in a similar format to that of FCK editor. They also create a div with id myMenuID - the second function sets this div with class disabled. Each also calls a JS function called cmDraw(), passing in the id of the div, the name of the JS array containing the menu items, and 3 other parameters. The last two of these appear to be style related, while the other (ie the middle parameter) is 'hbr', which might indicate the menu is a horizontal bar.

After defining the class, one of the two functions is called - depending on the value of the hidemainmenu parameter. Thus, adding hidemainmenu=1 to the end of the URL will display the menu as disabled.

Thus, to remove an option from the main menu, we simply need to remove the corresponding entry from the JS array (both the active and disabled arrays).

compton

2:59 pm, Monday, 20 November 06

The next thing to attempt is to add new options to the main menu which correspond to VirtueMart settings.

The admin interface for VirtueMart is created by the admin.virtuemart.php page, at administrator/components/com_virtuemart.

The page begins with some install code, which is redundant once installation has been completed, then includes the virtuemart_parser.php file, which has some config settings.

The header - which contains the menu bar which interests us - is defined by the header.php file at administrator/components/com_virtuemart. Not surprisingly, the menu bar uses the same format (and JS code) as the Joomla menu.

The $page variable defines what content to show. It is of the form (module-name).(pagename), and is split using the PHP explode() function. The appropriate content is then included. The default $page is store.index.php. There is a footer, which gives the version of VirtueMart installed, and a link to check for updates.

Some debug info is also included if in debug mode.

Moving options from the VirtueMart menu to the Joomla menu is a simple case of copying the required array elements from header.php to the mod_fullmenu.php file. VirtueMart generates all the menu options dynamically, using the entries in the vm_modules table. This allows it to check the current user has privileges, and that the option is published. A quick solution is to View Source of the VirtueMart menu bar, and simply copy the generated JS array elements to the mod_fullmenu.php source code. Extra checks can then be added to ensure the user has appropriate access rights, if necessary.
2 3 

Please enter your comment in the box below. Comments will be moderated before going live. Thanks for your feedback!

Cancel Post

/xkcd/ Tick Marks