Metro UI – SharePoint 2010 Masterpage & Solution : UPDATED

metroheader

So today i have released onto Codeplex a SharePoint 2010 Masterpage design which is inspired from the Metro UI of Windows 8.  The design has the following features:

  • Liquid Layout
  • Cufon Integration
  • Jquery Accordion Quicklaunch with Sub Item Count
  • Full Solution with single Site Feature to activate branding (Thanks CKS:Dev Team)
  • Custom Site Settings Action to choose one of three colour schemes (Green, Blue & Red)

If you would please leave me comments be it positive or negative they are all welcome.  I hope you enjoy and if you come across any bugs please let me know and i can fix them.

Download

To download the wsp please click here and get it from our CodePlex Site.  Enjoy :)

 

I am the SharePoint Development Lead at ICS Solutions Ltd. As well as broad knowledge in SharePoint 2007, 2010 & 2013 my specialities lie with SharePoint Branding, WebPart Development and JQuery integration.

86 Comments on "Metro UI – SharePoint 2010 Masterpage & Solution : UPDATED"

  1. Troy says:

    Hey Chris, great template, I love it! I’ve been trying to integrate a mega menu into this design and can’t seem to get it working correctly. Any plan on adding that feature or have any suggestions for me?

    Thanks!

  2. Sri says:

    Hey Chris,
    Thank you for the great work you have done and for providing this theme for free! It looks amazing!
    I applied it and everything works great, except that it picks up pages and subsites, even though I have unchecked these options under Navigation in Site Settings.
    Any way I can fix this?
    Thanks!
    Sri

  3. Ann says:

    Hi Chris, Thanks for this great template. It’s fantastic. I have the same question that a couple of people asked earlier. I want to remove pages and subsites that are showing at the bottom of the blue nav bar even though I have unchecked these options under Site Settings/Navigation? Thanks, Ann

  4. Hi,

    I am in the process of finishing some updates to the masterpage which will be released soon.. Keep your eyes on the blog or follow me on twitter. :)

  5. Nestor says:

    I find a bug, when the calendar list. Please check the posisiton button add on days event. Thanz on advance. Regards

  6. Troy says:

    Great masterpage! One thing I am trying to do is hard code a new section above the quick links. When I do I see the content in SharePoint designer but when I load the page in the browser it is not shown. Any suggestions for me?

  7. Leo says:

    great work, i have tried applying the metro ui, but my normal users feedback on they are not getting the same metro page i have (as admin), the pages are breaking apart, did i missed out anything after applying it .. thanks..

  8. Pol says:

    Hi Christopher,
    First of all, great solution!
    I have imported your solution as a farm solution and it works very well.
    I am, however stuck on another issue. I have a parent site and a subsite, their are some users which have only the permission to have access to the subsite. When I set up this security, he has also no rights to the masterpage and the lay-out is gone.

    All subsites are created via a site template, is it possible to store the custom masterpages in the site template?

    Many thanks!

  9. I would always ensure that you provide permissions on the masterpage gallery and the style library. If you dont do this then you could have other permission problems using sharepoint down the line.

  10. If you can provide me with some screenshots that would be useful. Thanx

  11. Giuli says:

    Hi Chris! first of all thanks for yout nice solution.
    im write to advice you about a “problem” with that :P

    When activate your solution my lync integration flaw away…no more presence dot on people and no more lync widget are show. If i disable the solution all thing come back with no problem.

    any solution? Thanks anyway!

  12. Jason says:

    Hi Christopher, great work! This style block my Lync IE Plugin so I can’t see the status of my users. Do you yave any idea about that? Thank you.

  13. Thank you for this. I will look into a fix very soon. Could you confirm for me which version you are using? Sandbox or Standard version? Thanks.

  14. Thank you for the feedback. I have just had a similar issue reported so will look into this asap. Are you able to let me know which version you are using? Standard or Sandbox? Thanks

  15. Jason says:

    Standard.. but I found the problem. There is a javascript that block lync activex. Line 55-58. Thanks.

  16. Pol says:

    Hi Christopher,
    It was indeed a security problem, the user had not enough permissions.
    Thanks for the help!

  17. Troy says:

    Hi Christopher,

    Could you explain to me how I can hide the quick launch from all pages? We are using your great template for a new dashboard project and need that extra space. Everything I’ve tried has not been successful. Any help would be appreciated.

    -Troy

  18. Daniel says:

    Hi,

    is there any solution to the “there are subsites listed in the leftbar Navigation even if i unchecked them” – Problem? with left nav bar i mean the navigation list on the right :)

    Greetz

  19. There is an update coming soon which will correct this issue..sorry for the problem and i will let you know via here when updated :)

  20. Stephen Davidson says:

    Will this work in the SharePoint 2010 environment? Looks great but cant get either versions to run online…

  21. It is designed as a SharePoint 2010 Masterpage. Where are you trying to install it, what version of SharePoint (Foundation or Server) and what steps have you tried.

  22. Frido Hollaar says:

    I hav problems with the navigation of an enterprise wiki page. It is not updated with new wiki when i use the new masterpage.

  23. AA says:

    I love it! Can you guys add “Gray” as an option ?

    Thanks!

  24. AA says:

    This works in PS but when.
    I tried editing it then when I deploy using VS 2010 I get this :(

    Test01: Failed to load receiver assembly “LifeInSharePoint.Metro, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4795ea3fbf930999″ for feature “LifeInSharePoint.Metro_Feature1″ (ID: 4b9006cc-b461-41ab-aedf-812f78be456f).: System.IO.FileNotFoundException: Could not load file or assembly ‘LifeInSharePoint.Metro, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4795ea3fbf930999′ or one of its dependencies. The system cannot find the file specified.
    File name: ‘LifeInSharePoint.Metro, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4795ea3fbf930999′
    at System.Reflection.Assembly._nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, Assembly locationHint, StackCrawlMark& stackMark, Boolean throwOnFileNotFound, Boolean forIntrospection)
    at System.Reflection.Assembly.InternalLoad(AssemblyName assemblyRef, Evidence assemblySecurity, StackCrawlMark& stackMark, Boolean forIntrospection)
    at System.Reflection.Assembly.InternalLoad(String assemblyString, Evidence assemblySecurity, StackCrawlMark& stackMark, Boolean forIntrospection)
    at System.Reflection.Assembly.Load(String assemblyString)
    at Microsoft.SharePoint.Administration.SPFeatureDefinition.get_ReceiverObject()

    WRN: Assembly binding logging is turned OFF.
    To enable assembly bind failure logging, set the registry value [HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD) to 1.
    Note: There is some performance penalty associated with assembly bind failure logging.
    To turn this feature off, remove the registry value [HKLM\Software\Microsoft\Fusion!EnableLog].

  25. JohnC says:

    Hiding the sites…

    I added this:
    .leftpanelborder ul.root>li:nth-of-type(n+4){
    display: none;
    }
    to the styles.css and now it only shows the first 3 items down the left-hand side plus the recycle bin and All Site Content.

    This works in every browser I tested – except for IE. If we switch IE to “IE 9 Standards” then this works but the calendar controls in other areas of Sharepoint break.

    head->desk->ouch.

  26. ahmed elbehairy says:

    Thanxxxxxx Christopher Great work

    after deploy solution i found error in left navigation audience not work after adding groub

    thanks

  27. Sam says:

    Hi,
    Love this master page and it would be nice if the side navigation could be minimize like the MS Outlook.

    I know there’s another master page that can totally hide the side navigation but I simply like this one thou.

  28. Long Le says:

    Just installed, looks great, is there any support for Metro UI Tiles?

  29. Long Le says:

    Hi Chris,

    How do I change the color to the supported Green color, I don’t see the customer action under “Site Settings”.

  30. Sam says:

    Hi,
    How to make the side navigation collaspsible like the one in Sharepoint 2013?

  31. Shanny says:

    I am a novice in sharepoint. I am using Sharepoint 2010 Foundation.

    I’ve added this to webpart/solution gallery, then my entire sharepoint portal crashed with below issue.
    Can you give directions on how i can solve this problem and what could be the root cause.
    I’m unable to find the file on file system as well
    /_catalogs/masterpage/LifeInSharePoint2013.master :

    Server Error in ‘/’ Application.
    ——————————————————————————–

    Parser Error
    Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

    Parser Error Message: The expression prefix ‘SPUrl’ was not recognized. Please correct the prefix or register the prefix in the section of configuration.

    Source Error:

    Line 40:
    Line 41:
    Line 42: <SharePoint:CssRegistration ID="CssRegistration1" name="” After=”” runat=”server”/>
    Line 43:
    Line 44:

    Source File: /_catalogs/masterpage/LifeInSharePoint2013.master Line: 42

  32. Christian says:

    I noticed this can only be deployed to a site collection. anyway I can do this just for certain sites. I wanted to edit your source code to activate the site features instead of deploying it to a site collection level. would that be hard? I have 6 years SP experience. im looking at the receiver now but I just don’t have much wsp development experience but I do have a lot of asp.net experience. I only want this feature on certain sites and unfortunately those sites are under a site collection that I do not want branded. I also know how to edit your css files. on big deal there. thanks for the nice solution

  33. Ramon says:

    Hi,

    Great job, I love this masterpage.

    How can I change the color from blue to orange?

    Thanks in advanced.

  34. You can modify the css of the masterpage (stored in the style library) to change the colours to the orange you require. If you use IE colour picker to find out the “blue” used you will be able to do a simple find / replace to get the desired result.

  35. Bob Harford says:

    Brian stated: Second, the Audience Targetting in the Navigation doesn’t seem to apply. Any fixes for this?

    As an FYI, that is my experience as well. Thanks for the effort in making MetroUI, and then freely distributing it.

  36. Jason Roberts says:

    Hi Chris,

    Thanks for the Master Page, it’s great :)

    I’ve hit the issue that scrolling on a calendar page throws out the +Add link. I’ve googled and found several versions of the same fix, but none of them work.

    I’m running the latest version from Codeplex.

Got something to say? Go for it!