Tag Archives: masterpage

There’s more than meets the eye: Differences between SharePoint’s Oslo and Seattle master pages

If you’ve been looking at the neat new masterpages with SharePoint 2013, and playing around with changing them, you can quite easily see a difference between the two options: Oslo and Seattle. Seattle is what we’re used to with SharePoint 2010: left nav and a top nav. Oslo moves the left nav to the top, and removes the top nav all together. Oslo also provides more room for your content by widening the area by moving the left nav.

SharePoint's Oslo Masterpage

Oslo Masterpage Layout

SharePoint's Seattle Masterpage

Seattle Masterpage Layout

But what is really different, technically speaking? I compared the two pages and found a little more:

Comparing Oslo to Seattle Master Pages

  • Oslo uses a different CSS, obviously, oslo.css instead of corev15.css. Also, the CSS link has EnableCssTheming set to true, whereas Seattle doens’t state anything.
  • Oslo has several accessibility and animation links wrapped with a SPSecurityTrimmedControl, configured to hide the contents from the search crawler. Seattle just has the links listed, no security trimming.
  • Oslo has a AuthenticatedUserDiv tag wrapping almost all of the content on the page. This control “Renders a DIV element which has different styles based on whether the current user is authenticated or anonymous” (from MSDN article). This control is configured with an authenticated style set to a CSS class. So when an authenticated user accesses the site, it uses a CSS class, when it’s anonymous, no class is specified at all.
  • Oslo has several other areas and controls wrapped with SPSecurityTrimmedControl configured to restrict to authenticated users only.
  • Oslo has a couple of small areas where CSS class names differ.
  • There’s the obvious changes with the navigation and header, and previously noted.
  • The PlaceHolderTopNavBar content place holder is thrown at the bottom of the page, and is set to be hidden. So that’s where that went.

Seeing there are a lot of security trimming around authenticated vs anonymous, I decided to test that out to see what it looks like.

First, let’s see what Seattle looks like anonymously:

SharePoint Seattle Masterpage in Anonymous

Seattle Master Page as Anonymous

Interesting, the web parts are intelligent enough to know anonymous users can’t “get started” and the newsfeed is gone. Also, some of the ribbon items change. Nothing else too significant.

Next up, Oslo:

SharePoint Seattle Masterpage in Anonymous

Oslo Master Page as Anonymous

Whoa, that’s a lot more now isn’t it? We lost the ribbon completely, including the SharePoint blue bar at the top. It feels naked.

I compared the HTML output of the two sets of pages as well.

  • Seattle didn’t differ much, minor items, but nothing too specific to anonymous vs authenticated.
  • Oslo, huge differences, entire sections are missing. Those security trimmed sections I mentioned before, poof, gone.

It almost feels like Oslo was designed with anonymous access in mind, as in Microsoft wanted us to use Oslo for public facing sites, as it took care of so much for you already. ;)

Thanks to Sane Amit for asking this question on SharePoint.StackExchange.com, always looking for new post ideas ;)

Advertisements

SharePoint: Defaulting external links to open in a new window

Within SharePoint, you can have links to other resources outside of SharePoint. These could go to other internal systems, or external websites. Also, if you’re using Enterprise Search and index websites which are not within SharePoint the search results will include links to outside of SharePoint. The issue with linking to external sites and resources outside of SharePoint is that the link takes over the window so the user leaves SharePoint. Instead, I want the user to go to the link within a new window, thereby keeping the user in SharePoint when they’re done with other resource.

Pretty simple concept, but updating links manually throughout SharePoint might be a pain. Below is a simple little JQuery script that checks all hyperlinks on the page and if it references an external URL, it will set the target to blank! Throw this in your masterpage or in a content editor web part if you only want it on a couple of pages.

NOTE: you’ll need to include a reference to the JQuery files, below I’m using Google’s API, but I recommend uploading the JQuery file into your farm and referencing that instead.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var url = '://' + window.location.hostname;

 // get the current website name, and i add :// to make sure we're looking at the right name
 // in the URL, rules out http://www.google.com/site:wss.domain.com
 url = url.toLowerCase(); // lowercase everything to compare apples to apples
 $("a").each(function() {
 var link = this; // assign the link object to another variable for easier managability
 var linkHref = link.href.toLowerCase(); // lower case it
 if(linkHref.indexOf(url) < 0 && linkHref.indexOf('javascript:') < 0){
 // check to see if this A object has this domain in it and make sure it's not a javascript call
 link.target = '_blank'; // change the target to be in the new window
 }

 if(linkHref.indexOf('.pdf') > 0){ // check to see if this is a PDF
 link.target = '_blank'; // change the target to be in the new window
 $(link).removeAttr("onclick"); //remove the SP click event
 }

 if(linkHref.indexOf('/forms/') > 0 && linkHref.indexOf(').aspx') > 0){
 //check for links in the forms library
 link.target = '_blank'; // change the target to be in the new window
 $(link).removeAttr("onclick"); //remove the SP click event
 }
 });
});
</script>