Tag: Navigation

Suite Bar logo is not displayed after applying theme

In SharePoint Online I have detected a bug that prevents the suite bar logo (configured in the o365 tenant admin center) from being rendered after applying a theme with a non-default colour scheme. The logo is not just hidden or not visible; the HTML is no longer rendered to the page at all.

NOTE: This issue has been raised with Microsoft and they have acknowledged it as a bug. They have told is that a fix is planned for June 2015 and should take a couple of weeks to reach all tenants.

Update 06/08/2015

I was advised last week that a fix this issue had officially started rolling out. Today I can confirm that one of our test tenants no longer exhibits this behavior! At the time of writing some of our tenants have not yet received the fix, but it is definitely rolling out and should be with you soon if not already.

When exactly is this occurring?

There is a colour scheme file that nominated as the default for each master page. Only when using this colour scheme in conjunction with the given master page will the logo be present. Specifically, only a colour scheme which is nominated as the default colour scheme will show the suite navigation logo.

This is unrelated to any customisation work and can be observed on any OOTB SharePoint Online publishing site.

The default colour scheme for a given master page is nominated within that master page’s preview file. The preview file is the one which sits alongside the master page in the master page gallery and has the same name name as the master page but with an extension of ‘.preview’ instead of ‘.master’ (e.g., seattle.preview). The first line of the contents of this file identifies the default colour scheme for the master page. When this colour scheme is applied, the theming engine assumes that the CSS is already themed appropriately and does *not* act.

Identifying the default colour scheme for a master page
Identifying the default colour scheme for a master page

I still want the logo on every page, what can we do?

  1. As I have said, a fix is on the way – just wait a few months!
  2. We can inject the logo using JavaScript (or CSS, but we were unable to achieve a CSS only solution which meets our responsive design requirements)
    • It is against best practice
    • This approach is brittle as the suite bar is a living, changing thing – Microsoft is updating it all the time and any changes they make will likely break this functionality.
    • The logo will no longer be configurable via tenant admin settings.
  3. We can create and use multiple master pages – one for every theme colour
    • Partially defeats the purpose of master pages which is to maintain all common pages elements in a single place.
    • Master pages may fall out of synch
    • Adds complexity for support

I want to reproduce this myself, how do I do it?

  1. Create an new site collection in a tenant that has a suite navigation logo configured, using the Publishing Site template
  2. Note that the logo is present
  3. Via Site Settings, “Change the look”
  4. Choose the “Office” composed look
    [Specifically, we want the seattle master page and colour pallette 001]
  5. Change the colour scheme to anything except the default
  6. Apply the look
  7. Note that the logo is no longer present
  8. Re-apply the theme with the default colour scheme and logo will reappear

 

Paul.

CSS fix: SharePoint global navigation hidden by iFrame (web part)

If you have a global navigation with more than a few second level items then the fly-out nature of the menu may cause some page content to be hidden while the menu is being interacted with by users. This is expected and acceptable behaviour.

I have found that sometimes (in IE only) the navigation fly-out falls behind page elements and cannot be used correctly. This is the case when iFrames are present in the content area. This issue came to my attention when using the Yammer Embed API to provide users with Yammer feeds from SharePoint.

The global navigation fly-out is being hidden by a Yammer Embedded feed (rendered as an iFrame)
The global navigation fly-out is being hidden by a Yammer Embedded feed (rendered as an iFrame)

The simplest way to resolve this is with CSS. The following CSS snippet should resolve this issue for you. We all know about z-index but the position:relative is also required for it to be applied correctly in IE.

N.B. The below snippet is specifically for Yammer Embed iFrames, if you would like to target all iFrames then the id selector should be removed (i.e. iframe#embed-feed becomes iframe).

Paul.

Breadcrumb (SiteMapPath) is wrong after moving a site

I have been finding that when moving a site (SPWeb) to a different location in the site hierarchy of a site collection that the breadcrumb would often (not always) be incorrect once the site had been moved.

If you didn’t know, SiteMapProviders are cached in the SharePoint object cache. I’ll put the sporadic nature of the issue down to the natural refresh cycle of the object cache but honestly I’m not completely sure why it doesn’t go wrong all the time. The important bit is that there is way to ensure that the breadcrumb is refreshed correctly every time. For the sake of completeness, here is the SiteMapPath control with its SiteMapProvider property set to CurrentNavSiteMapProviderNoEncode from the custom master page (if you want to read more about this you could start here):

SiteMapPath

If you are suffering this issue I suspect that mentioning the object cache was enough to put you on the right path but I’ll spell it out just in case.

If you run a few lines of code in a WebMoved event receiver (I blogged briefly about attaching these here) you force the object cache to be refreshed whenever a site is relocated. Be warned that if you have a site that leverages the object cache (e.g. use of the cross-list query object, or the content query web part which utilises it) that these operations will need to re-cache and may have some performance impact.

SiteCacheSettingsWriter writer=new SiteCacheSettingsWriter(site);
writer.SetFarmCacheFlushFlag();
writer.Update();

You may need to fetch the SPSite object that is passed into the constructor from within an elevated privileges block to ensure the current user is allowed to perform this action. Obviously that depends on expected audience for this action.