How to add HTML elements to the SharePoint 2010 ribbon area

I am开发者_JAVA百科 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.

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.

@alfonso is right. Just to add more for others who might want to add the tabs using jQuery

$('<li class="ms-cui-tt ms-browseTab" style="line-height" unselectable="on" role="tab"><a class="ms-cui-tt-a"><span class="ms-cui-tt-span">You custom link here</span></a></li>').appendTo('ul[role="tablist"]');

That will add an item to the right of the "page" tab