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

Comments

shell said…
Exactly what I needed! Many thanks!
May 31, 2011 at 2:55 PM
Jonathan Mejia said…
Excellent! Very usefull! Thanks a lot!
November 4, 2011 at 9:18 PM
Anonymous said…
Thanks!

But how about invoking "Change view" in breadcrumb? (SP 2010).
December 7, 2011 at 5:21 PM
Baris Bikmaz said…
This comment has been removed by the author.
May 24, 2012 at 9:22 AM
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.
May 24, 2012 at 9:25 AM
nicofars said…
nice ! never thought of hacking script for that ;-)
and works similarly in Chrome BTW.
February 18, 2013 at 2:10 PM
Post a Comment

Popular posts from this blog

Open SharePoint 2010/2013 Display, Edit, New Forms in Modal Dialogs

Image
If you want to open a SP 2010 or in SP 2013 list item in a modal dialog you have two choices. Using the standard JavaScript functions or creating own functions. How to find which item URL is called If the dialog box appears you don't have an address bar to pick up the called URL. To see which URL is called when you edit or open a list item use the Internet Explorer Developer Tools. Open your source list in the Internet Explorer. Press F12 to open the developer tools. Click on the "Network" tab and then on "Start Capturing" Now click the link you want to track. You'll see the requests listed and you can also copy the urls for your need. SharePoint usually calls the /_layout/listform.aspx with the list parameter. The form then redirects to the appropriate list form. Method 1: Using core functions When using SharePoint 2010 core javascript functions to open elements in dialogs mostly you'll need to know : the ID of the l...
Read more

Using WebDav on IIS 7 to access UNC Paths

Image
In this post I want to show you step by step how to connect to a file share using webdav on IIS 7. For this post I assume: that you have already an IIS installed on the server  that you have installed WebDav or enabled the WebDav Feature on IIS. the server on which is IIS installed can reach the file share. 1: CREATE APPLICATION POOL The first step is to create a seperate application pool on the IIS. Open the program "Internet Information Services Manager". Click on "Application Pools" Click on "Add Application Pool" on the right menu Name it "WebDav". Let the rest as it. Right click on the new created Application Pool "WebDav" and select "Advanced Settings". Pay attention to the following attributes: .Net Framework Version : No Managed Code Identity : The identity of the Application Pool should be an account which has permissions to read the file share. Load User Profile : Should be set to "False...
Read more

Ways to redirect http requests in SharePoint

Image
The are multiple szenarios when you need a redirect in SharePoint: You've migrated SharePoint into a new URL (e.g http://sp2010 to http://sp2013) You moved a site collection You moved a sub site into a new site collection If you want to redirect in SharePoint without custom solutions you have the following options: Redirect with XML Viewer or Content Editor WebPart You can redirect with JavaScript by inserting a WebPart into the site and adding simple JavaScript. This is easy to configure but redirects only the site in which the WebPart sits (Probably the Mainsite). If users have saved links the their document libraries this method fails, unless you put the same WebPart into the document library. So go to the site you want to redirect and the XML Viewer WebPart. Open the WebPart settings and add the following line of code: <script type="text/javascript"> location.href = "<<the url you want to redirect>>"; </s...
Read more