Search code examples
htmlsharepointtabscustomizationribbon

How to add HTML elements to the SharePoint 2010 ribbon area


I am trying to edit the SharePoint 2010 ribbon to add links along side the tabs. So I would want to just have elements exactly to the right of the 'Browse' and 'Page' tabs. It should look like they are other tabs, but they will function like links.

I have searched the web extensively to try and accommodate this, and I'm not sure if the answer is editing a custom master page or deploying something through Visual Studio. Either way, I am unable to get something to appear up in that area.

Below is a screen shot of what this might look like.

Also, any help with moving the user and their menu to the left would also be much appreciated.


Solution

  • SharePoint won't allow you to modify the ribbon in this way. You will have to use jQuery or similar to add a new list item (li) to the tabs unordered list (ul). You can find the list with firebug:

    <ul class="ms-cui-tts" unselectable="on" role="tablist">
        <li class="ms-cui-tt" id="Ribbon.Read-title" unselectable="on" role="tab">
        <li class="ms-cui-tt" id="Ribbon.WebPartPage-title" unselectable="on" role="tab">
    </ul>
    

    Please note that this kind of solutions are not recommendable (Hard to maintain, unsupported, and this probably won't work in the next version of SharePoint).

    To move the user and the menu to the left, just rearrange the controls in a copy of the v4 master page through SharePoint designer.