Obscure issue with moving around items in SharePoint 2013 ribbon

Ever have one of those days where SharePoint just makes you say, umm, WTF??? Yeah, me too. Tag another one on the long list.

I wanted to absolute position the ribbon’s tab row right DIV contents of SharePoint 2013 to a different location on the page. In non-SharePointy code speak, I just wanted to move the links on the right side of the page that consist of Share, Follow, Edit/Save, Focus on Content and Developer Dashboard to a different place on the web page.

Links and icons in tab row right of the SharePoint 2013 ribbon

Seems easy, right? SharePoint 2013 laughed in my face.

These links and icons are child elements of a DIV that is part of a trio of elements that makes up the SharePoint ribbon. Essentially the ribbon is an unordered list sandwiched between two DIVs that each provide a peripheral area where you can stick other stuff. The links and icons are in the right DIV, aptly named through the ID RibbonContainer-TabRowRight. It also has a few classes assigned to it, one of which is ms-cui-TabRowRight.

Based on the available code in the page, my CSS started as this:

.ms-cui-TabRowRight {
     position: absolute;

I don’t have to go any farther than that to create an issue:

Issues created after modifications

The ribbon tabs collapse. And the whole set of links/icons that I was targeting disappeared from the page. Upon further investigation two things emerged:

  1. The inline style for display was changed to display: none in the .ms-cui-TabRowRight DIV.
  2. A different CSS class is applied to the parent UL that wraps the ribbon tabs, .ms-cui-tts-scale-2. It was previously .ms-cui-tts. The presence of this little class then kicks in the following style statement, found in corev15.css:
    .ms-cui-tts-scale-2 .ms-cui-tt-a {
         overflow: hidden;
         width: 20px;

The 20 pixel width explains the tiny ribbon tab slivers you see in the screenshot above.

If you take away the absolute positioning or just do something as tame as changing it from absolute to relative, then the inline style goes back to display: block and the applied CSS class for the UL switches back to .ms-cui-tts.

OK so maybe it was the absolute positioning… when you move elements like that things can go wonky. So I switched it to a float (keep in mind this DIV is floated by SharePoint in the first place):

.ms-cui-TabRowRight {
     float: left;

Floating the links and icons in tab row right of the SharePoint 2013 ribbon

Well that doesn’t break anything in SharePoint. :) It also doesn’t do much for me either. So let’s add a negative left margin:

.ms-cui-TabRowRight {
     float: left;
     margin-left: -10px;

Annnnd we are back to breaking SharePoint.

Issues created after modifications

Note that if you leave the DIV as a right float (OOTB treatment) or just specify a negative left margin (which doesn’t change anything in the design) SharePoint remains happy. You can even set negative top or bottom margins. The inline style and CSS class gets changed when you try to move these items into what SharePoint perceives as the ribbon tabs space… or something like that? An absolute position OR the combination of a left float AND negative left margin creates the issue.

No big deal, I can fix troublesome CSS with new CSS (note I switched back to absolute positioning in order to better control placement):

/* Move Ribbon Tab Row Right (Share/Follow) to the left of Suite Bar Right */
.ms-cui-TabRowRight {
     position: absolute; /* Remove from content flow and create precise placement based on parent container */
     top: -35px; /* Shift above default placement */
     left: 10px; /* Add space to left between page edge and text */
     display: block !important; /* Override inline OOTB SharePoint style */

/* ms-cui-tts-scale-2 class is auto applied when .ms-cui-TabRowRight is absolute positioned -which results in small ribbon text space. Following declarations correct the issue. */
.ms-cui-tts-scale-2 .ms-cui-tt-a {
     width: auto; /* Reset small width to auto size based on length of text */
     padding: 0 9px; /* Pad out the ribbon text */

Some of this could have been avoided if I was dealing with a custom master page and just manually moved the links and icons out of the ribbon’s peripheral right area, but the idea was I needed to make a change with only CSS, so there you go. :)

SharePoint 2013 Ribbon styles preview box – fix for bad background

I came across an oddball issue today where the background area of the Styles preview boxes in the Ribbon turned black when using a custom master page in SharePoint 2013.  Here is a quick CSS fix that will correct this issue. Continue reading

Missing “Apps you can add” with custom master page in SharePoint 2013

Randy Drisgill posted this little gem awhile back for SharePoint 2013, “Design Manager Bug – SharePoint 2013 RTM“, which includes info about a bug that he discovered when using a Design Manager created master page. The “Apps you can add” portion of the addanapp.aspx screen can come up missing.  The screen just ends after the Noteworthy section.  I have also discovered that this isn’t limited to just master pages generated by Design Manager, it can happen with any custom master page that you created manually or imported, etc. Continue reading

How to use Icon Fonts with SharePoint

One of the current trends in the web world is to use icon fonts with and for various things in your web user interface. They are fast to load, easy to scale in size, quick to change color, and it’s simple to add effects. Icon fonts can be used in SharePoint with just a little CSS. This post contains demos for both SharePoint 2010 and 2013. Continue reading

SharePoint 2013 CSS classes that suck and save the day

If you are working on custom SharePoint 2013 master pages, designs and/or CSS, these little CSS classes and style statements may give you some grief, or save your tooshie…  This list will continue to be updated as I come across more! Continue reading

When to use a SharePoint 2013 Composed Look (a.k.a. Theme)

To be perfectly honest, I am not sure. From the demo perspective, Composed Looks have a lot of oohh ahhh sex appeal but when you drill down to the nitty gritty of development and deployment, the oohs and ahhs turn into, oh no and ah geez. :(

Continue reading

Mega Menu for SharePoint – Part 3 of 3

The final post of a three part series, Heather Solomon and Dustin Miller are exploring the ever-popular “Mega Menu”, and how to create a powerful, styled and functional mega menu for use on your SharePoint sites. The first post explored the HTML markup and CSS needed for navigation, organized into an unordered list. The follow-up post walked through the use of navigation taxonomy and the XSL for the menu. This final piece will first show how to implement the custom view in your master page, and then enhance it further with some shiny new CSS. Continue reading

Mega Menu for SharePoint – Part 2 of 3

This is the second part of a three part series where Heather Solomon and Dustin Miller are exploring the ever-popular “Mega Menu”, and how to create a powerful, styled and functional mega menu for use on your SharePoint sites. After creating the HTML markup and the CSS to meet the functional requirements, it is time to take a look at the importance of taxonomy in navigation and check out the XSLthat will be used for the mega menu. Continue reading

Mega Menu for SharePoint – Part 1 of 3

In this three part series, Heather Solomon and Dustin Miller will explore the ever-popular “Mega Menu”, and how to create a powerful, styled and functional mega menu for use on your SharePoint sites. In this first part, the focus is on the HTML markup and CSS styling to used to create this oft-requested UI element.
Continue reading

SharePoint CSSLink

Understanding SharePoint:CSSLink and how to add your custom CSS in SharePoint 2010

CSS is a wonderful tool for branding SharePoint; unfortunately SharePoint 2010 has done a decent job of making things pretty hairy and confusing with working with CSS in a SharePoint site. Something we get asked all the time in our classes is “where do I link to my custom CSS file?” Great question and the answer isn’t just “from your master page”. Continue reading