Replace Elgg topbar logo

Posted on Dec 19, 2011 in News, Tips & Tricks, Tutorials | 0 comments

This is the first tutorial of a series on how to modify elgg through your own plugin. We will deal with simple elgg changes, so if you already have experience with elgg modification, you probably don’t need to read this.

Okay, if you want to remove the Elgg logo from the top bar or replace it with your own logo, this is how to do it, and actually it’s really simple to do, because the logo is registered as a menu item.

One of the major changes in Elgg 1.8 is the new menu system. If you want to have a closer look at the functions and parameters that are available when handling menus, open engine/lib/navigation.php, it’s well commented.

But please do not edit anything in this file, you should never edit the Elgg core files, all changes must be made through your own plugin. So if you haven’t created your own plugin already lets start by creating the simplest elgg plugin possible.

Elgg plugins are required to have a manifest.xml and a start.php in the root folder. Create your plugin folder, name it myplugin and in that folder create the two files mentioned. If you don’t know how to create a manifest.xml you can check Elgg wiki,

Back to the topbar menu item and navigation.php. As you can see the function to remove menu items takes two parameters,

elgg_unregister_menu_item($menu_name, $item_name);

the name of the menu, in this case topbar and the unique identifier for this menu item, elgg_logo. Now you can call the function with the proper parameters in your start.php init function:


function myplugin_init() {
    elgg_unregister_menu_item('topbar', 'elgg_logo');

Elgg logo is now gone and you can register your own topbar replacement if you want. Create a new folder in your plugin, name it graphics and add the file topbar_logo.png. Add this to your init function:

	$logo_url = elgg_get_site_url() . "mod/myplugin/graphics/topbar_logo.png";
	elgg_register_menu_item('topbar', array(
		'name' => 'my_logo',
		'href' => '',
		'text' => "<img src=\"$logo_url\" alt=\"My logo\" width=\"38\" height=\"20\" />",
		'priority' => 1,
		'link_class' => 'elgg-topbar-logo',

That’s it for this tutorial. You have now replaced Elgg logo with your own and have a plugin where you can add future changes. If you have any questions or comments, leave your responses in the comments below.

Leave a Comment

Your email address will not be published. Required fields are marked *

Anti-Spam Quiz: