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. AJ says:

    Wow this is great man! I only have one complaint and that is the top bar (where site actions resides). Is there anyway to hide it but still retain the functionality? I think it would look a lot cleaner without it.

  2. How do you mean by hide the ribbon? completelty from view and then make it appear and hide?

  3. AJ says:

    Yes exactly! I’ve found some solutions on google, however I’m having some problems implementing them. What would your recommendation be?

  4. AJ says:

    Sorry to spam your comment section, but i found this and its exactly what i wanted/needed

    http://zsshowhideribbon.codeplex.com/

  5. Michael says:

    Hi christopher

    Thank you for this masterpage. It’s great.
    Do you have a minimal.master page on your roadmap?

    Regards Michael

  6. I normally start with the Starter Masterpages that Randy Disgril created. http://startermasterpages.codeplex.com/ Do you have any specific requirement for functionality?

    Chris

  7. Sri says:

    Chris,

    Thanks for the awesome solution.
    One thing I observed was that the top navigation bar does not show the drop down menu to display sub sites on a site created of a blog template even if it has sub sites. It works for sites based on other templates.
    Will it be possible to email/host the Visual Studio project files so that any one can make it even better?
    Once again, great work.

  8. Sri says:

    Also, the search page and results page gets broken on applying the template. I was able to fix it by using the Master page adapter available on codeplex–> http://sp2010searchadapters.codeplex.com/

  9. Great page, but (these Germans …) (and Frech people too) want Umlaute and accents also in headlines. Where can we get them from? I scanned LifeInSharePoint.master but couldn’t find a clue.

  10. The font was created using Cufon font replacement.

    http://cufon.shoqolate.com/generate/

    I will try to get an updated font file created and update the deployment file.

    Thanks

  11. Ai Wa says:

    Great master page design. Just a quick question, how can I add new color theme say example Grey?

  12. Lou vdBijl says:

    THANK YOU SO MUCH! I have been tasked with making a metro intranet on SharePoint and this saved me hours of work. Really appreciate it!

  13. SharePoint Kid says:

    hi Christopher,
    Great work ! keep it up

  14. Henri says:

    Hi Chris,

    Really sweet theme! Thanks a lot!

    There’s one bug that I couldn’t work around though. Using your theme kills the “intellisense” linking in the Wiki pages. Don’t know if someone else has noticed this yet…

  15. Thanks for pointing this out. I will definitely look into this :) Can you please let me know which version of the masterpage you are using?

    Thanks

  16. I have just done a local test and i cannot replicate this at my end. I have deployed the farm solution (not sandbox) and i can in a Team Site create a new page using [[new page]] and it will create and link no problems.

    Any information you can give me would be great.

  17. Henri says:

    Hi Chris,

    Sorry, I was a bit vague with the description. The page creation with the double brackets works fine with your theme, but when I have your theme deployed and activated, I can’t get the “intellisense” context menu with the site contents to show up after typing just the initial two brackets (or using ctrl + space). If I deactivate your theme, the context menu works as it should.

  18. Ok..Thanks for the clarification. I will look at this shortly.

  19. Hi Henri,

    I have managed to find the issue to the problem and i will be releasing an update to the solution shortly. Thank you for finding this bug :)

  20. Henri says:

    No problem Chris. Thanks a lot for taking the time to fix this…

  21. Mikhail says:

    Hi Chris.

    I have some problems in my sites.
    After deactivated LifeInSharePoint.Metro.Sandbox.wsp in my site collection, I discovered some problems:
    1. Design of my sites (MOSS 2007) were broken (I did not discovered similar CSS).
    2. Don’t work some standart webparts in SP. (URL in ListViewWebPart)

    Screenshots this errors in http://social.technet.microsoft.com/Forums/ru-RU/sharepointru/thread/2b110347-b788-49e8-b7ec-d1317f5b25a0 (descriptions in russian)

  22. The retraction of the solution will set the masterpage back to the default masterpage (which for 2010 solutions is v4.master). Your system may not have that masterpage installed and therefore the set masterpage will no longer be “valid” If you re-activate the feature does it work ok again?

    Chris

  23. Mikhail says:

    Hi Chris.

    Today I repeated all activity in new site sollection.
    I discovered that these errors appear after activation solutions.

    1. Site – problem CSS (not upgrate to SP 2010 design)
    2. Don’t work URL in ListViewWebPart. (if you cleated new event in calendar (repeated each week) and select the option to create site on the basic of Meeting Workspace template).

  24. Mikhail says:

    Hi Chris.

    I solved all my issues.
    Thank you.

    1. Site – problem CSS (not upgrate to SP 2010 design)
    a. Activated default.master
    b. Activated v4.master
    OK – will apply normal CSS

    2. . Don’t work URL in ListViewWebPart. (if you cleated new event in calendar (repeated each week) and select the option to create site on the basic of Meeting Workspace template).

    a. To fix this you will have to add this into your custom master page.
    At the top add this Tagprefix:

    b. Below the FORM-tag below the BODY-tag add:

  25. Joe Coetzee says:

    Hi Chris,

    Thanks for creating this awesome Metro Style Branding package.
    I do have one query, there are three themes in the themes list and I want to add one to the list.
    When adding it asks for Title, Image URL and CSS URL. I reference a modified version of a CSS file from “Site assets” there but the changes do not Reflect when I select my custom theme. The Image does reflect but the CSS file does not get pulled and it defaults to blue. Is there something Im doing wrong into adding my own Theme to the list?

  26. Chris

    Firstly, awesome work on this theme. We worked for a month on our previous design just to find this and kill it in a couple of minutes.

    I have an issue\problem with MySites. I applied the feature to the main site collection and most of the functionality seems to work, However the theme does not display our “Customization Links” which are based on audiences.
    Additionally when I browse to the Content section of any MySite the feature is not active and has to be activated. I realize this is because each MySite is a site collection. Is there a way to make this work via configuration\script?

    Thanks

  27. Sean Moran says:

    First off, great work. We are using this page, and we have an issue with IE7 not rendering properly. Has it been tested on IE7? Are you aware of how it renders, all split up? If not I can send you a screen shot. Has anyone else experienced this, or have me messed it up somehow?

    Thanks again for the great headstart!

  28. Thanks for the positive feedback and I am glad you like it. Please feel free to send me screenshots and I can see I I can fix any issues. Thanks. Chris

  29. The theme is not designed at the moment to work with MySites. I will be releasing a MySite specific version soon if demand is high enough. Thanks.

  30. jason404 says:

    This theme makes SharePoint Online sites look a lot better, but it makes the mobile site look rubbish, as it appears that there is no mobile support. Is there a way to add the default mobile css and resources to the .wsp file?

    Also, is there way to add a custom favicon?

    Another small problem I am having is that the custom company logos are not aligning with the Home navigation link and content wrapper.

    Otherwise, very nice.

  31. Thanks for the comments. As I’m sure you are aware the solution is not a ‘product level’ release as I do not have the time to check every platform etc. thanks for your input however as I will definitely look into the issues. Thanks.

  32. Sean Moran says:

    Sent you a message asking where to send the IE7 image. I, for one, would like a MySites version.

    Sean

  33. Stefhan Jonas says:

    Awesome work!! I’ve implemented this at my company. A nice “sideeffect” for us was that everything seems to be faster and more responsive, especially lists with lots of content. Perfect!

    We also use My Sites alot and are missing custom links, link to my profile etc.

    Also, on the main page I now have all my global navigation links located to the left, in addition to the top navbar. So I have alot of links to the left now. How can I remove the global links in the left pane? I only want the ones in the top bar. :-)

  34. AK says:

    Hi, I’m new in Sharepoint 2010. However I have attended some Sharepoint Designer 2007 trainings before. Is there a step by step guide I can do to deploy this masterpage in my Sharepoint 2010 Foundation site using Sharepoint Designer 2010?

    Thank you again.

  35. At the moment I do not think that I have a version that is compatible with SharePoint Foundation 2010. This is a “work in progress” and as soon as I do I will let you know.

    Thanks

    Chris

  36. Simon says:

    Great theme, but I’m also getting the problem with drop-down menu items not appearing when the theme is applied. Did you find a fix or is it something I’m doing?

    Thanks!

  37. Simon,

    Can you give me some more information about what you have applied the theme to and then i can look into issues with it :)

    Thanks

  38. Simon says:

    Hi, I just downloaded the latest solution file, built the WSP and added to my current SharePoint 2012 development site. I tried creating a new Team Site, but the same thing happened. I also get inconsistencies between the accordion menu. sometimes it works and sometimes its static and all fully expanded.

    Any help would be appreciated as its a fantastic theme
    Simon

  39. Keonwoo says:

    Thanks Christopher.
    Awesome. Great job!
    Now I can smile when I visit my site. :)

  40. Stefhan Jonas says:

    Been using it for a while now and not any major problems. Looking good, fast and smooth. But my users are starting to miss their custom links, the “Like” and “Comment” button on My Site.

    Also I expressed myself badly earlier. What I now experience is that I get links to all subsites in the left quickmeny, whether I want it or not. A bit messy, especially on the Home Page. Is there something I’m missing / doing wrong?

    Looking forward to updates. :-)

  41. Katelyn says:

    How do you add more theme colors to this solution? I love the metro design.

  42. Mark says:

    Does this work with Moss 2007?

  43. Im afriad not. It would be a significant piece of work to get this into SharePoint 2007. Sorry.

  44. Henri says:

    Hi Chris,

    I was wondering how you have implemented the fixed/floating ribbon in this solution? I started off using the “flyout” version of the ribbon but I came to the conclusion that site contents moving around can actually be more confusing to a user than having the ribbon float over some of the content in some contexts.

    Setting the ribbon to float from the Metro theme settings doesn’t work completely like the OOTB floating ribbon as the ribbon floats over dialogs and blocks their content. I managed to fix this by adding some custom css, where I override the position and the z-index of the ribbonwrapper div in ms-dialog class.

    During this debugging I noticed that the v4.master pages ribbon is more or less fully compatible with Google Chrome, whereas this master page’s ribbon does not really work at all with Chrome. Clicking the “edit page” icon doesn’t work and the ribbon won’t open when you click the tabs.

    Another browser related issue is that when comparing to v4.master, automatic dialog resizing works with both IE and Chrome, but not with Firefox.

    I’d really like to get to the bottom of these browser as I find this theme absolutely gorgeus but I can’t really force all users to use just IE.

    Best regards
    Henri

  45. Henri says:

    Hi again,

    I just located the problem that causes issues with the ribbon when using Chrome. Its actually having the SmallSearchInputBox control in a custom master page (MS have somehow worked around this in v4.master) that causes Chrome to act funny. So it’s all down to how Chrome works, nothing to do with your master pager. There’s thread on this matter with a solution here:
    http://social.msdn.microsoft.com/Forums/en-US/sharepoint2010general/thread/94b89c35-5136-4fc5-86d6-9f8524325e55

    I’m still having the problem with dialog autosizing in Firefox though. Any thoghts on that?

    Best regards
    Henri

  46. Brian says:

    I have been trying this out and have two issues. First, what needs to change on the masterpage in order to have more dynamic horizontal sizing to remove the scroll bars?

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

    Thanks for all the great work so far!

  47. Thank you for the info. When i get a moment i will see if i can create a fix. Thanks

  48. Paul says:

    Hi Chris,
    Great solution!
    I have experienced one issue. I have a calendar web part on my Intranet home page. When I hover over the date/time, the “+ Add” does not always appear. It seems to stop working after some time, then if I refresh the page, it will start appearing again.

    Again, great work, and thanks for the time you’ve put into this!
    Paul

  49. Paul says:

    Also, in the MetroUI version of the Quick Launch, which now appears on the right side, how would I control the order of the subsites? I didn’t see any way to do this using the OOB navigation options.
    Thanks!

Got something to say? Go for it!