Focus on Content was a feature that emerged with the release of SharePoint 2013 and is also in SharePoint Online. What this little button does is hide some structural parts of the rendered page to allow more room for the library, list or page content. 

When you stick with the default master pages or just use CSS to apply your styling (like Heather Solomon strongly recommends, and you can see an example from Microsoft), then you’re fine. This shouldn’t affect you in the slightest and you can stop reading now. However if you have custom master pages and have messed with the default classes for navigation and other structures (using bootstrap for example), you will have a problem. This undervalued little button will cease to work, or will give you very undesirable behavior. 

I’ll show you a quick and easy way to overcome this and get your users more screen real estate!

What Is That Button Anyway?

As I said, that button was introduced originally with SharePoint 2013, and still persists in SharePoint 2016 and SharePoint Online. It’s called Focus On Content. I don’t see it talked about much, and I believe it’s way underutilized. This little button’s goal in life is to give you more screen real estate. There’s nothing more frustrating when you’re working on bulk-editing a list with many columns and you have to keep scrolling left and right, up and down a lot. There’s a better way! You just hit that button, and most of all the structure AROUND your list content disappears, leaving your list all the room possible to take up.

So here’s a mostly standard site with a little customization to it, looking at a normal task list:

We can’t see all the columns, and would have to scroll right.  If we hit the button, look what happens:

No columns cutoff, and we don’t get distracted by the top header or Suitebar or navigation. We just have the ribbon and the task list, that’s it. You’re working on the content, and you don’t care about anything else right? 

Warning - Geek Talk Ahead

When you click it, it does a few different things. The on-click event calls a JavaScript function like this: SetFullScreenMode(true);PreventDefaultNavigation();return false;. After a little digging in the F12 browser tools, we can find this function in the core.js file. For those that care, here’s the whole function:

What we care about is that it’s doing a couple things:

• sets a browser cookie to remember the selection
• dynamically injects (or removes) the CSS class “ms-fullscreenmode”

In the default corev15.css file, we can see some elements with this class:

Notice you can see the top navigation and the left side navigation are being hidden. But not only that, you can do other things like change fonts, font size, colors, round corners, or really change things as much as you want conditionally.

What’s the Problem?

I mentioned that when you make custom branding and master pages, you might be altering the default CSS classes of the top navigation, left side navigation, etc. When these ID attributes are changed, the CSS we looked at above for applying .ms-fullscreenmode doesn’t work, so nothing gets hidden and the margin-left 40px can really mess up the content layout.

How Do I Make It Work With My Branding?

Before I go into the fix, I want to make a quick disclaimer. I’m assuming if you’re reading this, you are doing custom branding, and are familiar with HTML and CSS somewhat, and know how to implement those already. There are many different ways to implement that, so I’ll just give you what to do, but where you do it will vary depending on your branding customizations. 

You might already guess where I’m going with this. I said it would be an easy fix right? All we need to do is add a SINGLE LINE of CSS to take care of it. You should be using a separate .CSS file for your branding, so we need to apply the attribute that the default code applies .ms-fullscreenmode to whatever ID attributes or selectors you want to effect. 

Here’s an example. In the HTML, I have wrapping DIVs with an ID of topnavbar and another DIV with a class of quickLaunchNavbar. So to have the Focus on Content button hide these HTML elements, we add this line in our custom CSS file:

.ms-fullscreenmode #topnavbar, .ms-fullscreenmode .quickLaunchNavbar {display: none;}

Before clicking:

After clicking:

BLAM! Done! Told you it was easy. Now, we do other things too. If you’re hiding certain elements, that might change your styling. So when these elements are hidden, we want to round the bottom corner of a different custom element (ID of ribbonBackground). We can do that like this:

.ms-fullscreenmode #ribbonBackground {border-bottom-left-radius: 15px;}

Notice our radius applied:

This is SharePoint 2013 so we can use CSS3 without issue. Hope this gives you some insight into this functionality, and helps you leverage this functionality more in your environment! 

Please reach out to us if you need any assistance with your SharePoint environment, or planning your migration to SharePoint 2016!