Wednesday, March 2, 2011

How to style the SharePoint "Site Actions Menu" with Firebug

The site actions menu in SharePoint is generated automatically by JavaScript so you cannot look at the source code which classes are used to style the menu. I often use Firebug to check the classes and manipulate on the fly the css. But this is hard to do with the site actions menu because it disapears after a while.

A little trick helps here (works in SP2010 and SP2007)

Open the site in Firefox and open Firebug. Click the selection arrow and select the "Site Action" menu.

Firebug Objekt Picker


You will see a html code like show above. An <a> Tag surrounded by a <span> or <div>.


The trick is to copy the onclick code of the <span> or <div> tag. The javascript code can vary in each enviroment. The code can be easily copied from firebug or from the html code. In my case the code is:


  • In SP 2010
    CoreInvoke('MMU_Open',byid('zz8_FeatureMenuTemplate1'), MMU_GetMenuFromClientId('zz16_SiteActionsMenu'),event,false, null, 0); return false;
  • In SP 2007
    MMU_Open(byid('zz7_SiteActionsMenuMain'), MMU_GetMenuFromClientId('zz8_SiteActionsMenu'),event,false, null, 0);


Now change the "event" parameter to null:

CoreInvoke('MMU_Open',byid('zz8_FeatureMenuTemplate1'), MMU_GetMenuFromClientId('zz16_SiteActionsMenu'),null,false, null, 0); 

Open Firebug again, paste the code into the script textbox and press enter:

Open the site actions menu with JavaScript


The menu will now popup. Don't hover over the menu because you trigger the onmouseout event and the menu will disappear after a while.

In Firebug open the HTML tab and search after a text in the menu. (You have to click search a few times to jump to the right code area). The code will jump to the html of generated menu and you can use Firebug to change styles easily.

Searching the right code



And if the site action menu disappears while modifiying it, you can call the script to open it again !

Ugly menu example

6 comments:

shell said...

Exactly what I needed! Many thanks!

Jonathan Mejia said...

Excellent! Very usefull! Thanks a lot!

Anonymous said...

Thanks!

But how about invoking "Change view" in breadcrumb? (SP 2010).

Baris Bikmaz said...
This comment has been removed by the author.
Baris Bikmaz said...

I think the easiest way is to open the site with firefox, open Firebug and type the following in to the command window within the console tab: document.getElementById("GlobalBreadCrumbNavPopout-menu").style.display = "block";
Now the breadcrumb should be open.

Francois Souyri said...

nice ! never thought of hacking script for that ;-)
and works similarly in Chrome BTW.