“v5.master” is a simple HTML5 master page designed for SharePoint 2010. It makes good use of the amazing new features of both HTML5 and CSS3, including CSS3 media queries. The master page is extremely simplistic in nature, and is truly meant to serve as a framework for building your own SharePoint 2010 customizations.
SharePoint Gets Responsive
SharePoint has a knack for being rigid and difficult to customize. I’ve been working with responsive layouts for a while now, but the nature of SharePoint has thus far prevented me from making something that is as flexible as, say, this WordPress blog you’re reading right now. It’s easy-peasy to do this in WordPress, but SharePoint simply does too much. When you create a layout in SharePoint, you’re creating a layout that encompasses much more than just pages: you’ll have to contend with pages, web parts, lists, libraries, blogs, wikis, search, meeting workspaces, team sites, calendars, and the list goes on. With so much content to contend with, creating something that can contract to any width is a tall order to say the least.
To me, at least, the answer was simple: ignorance. I’m ignoring every part of SharePoint that I don’t care about. 90% of the sites that I create in SharePoint are publishing sites: public-facing with a focus on pages, navigation, and web parts. Now, that’s a list I can handle. The v5 master page uses a fluid layout that drops to a single column when the display size shrinks below 800 pixels in width. Check out the screens to see the flexibility in action:
Large/Desktop Displays:
Medium/Tablet Displays:
Small/Mobile Displays:
Features
- New HTML5 document type declaration
- Revised
<head>content to adhere to new HTML5 standards and best practices - New HTML5 semantic layout (
<header>,<footer>,<section>, etc.) - Uses html5shim for backwards-compatibility
- Responsive CSS3 media queries
Download v5.master
- v5-masterpage.zip (16kb)
The v5 master page is provided completely free, released under the Creative Commons Attribution license 3.0.
Update Oct 26, 2011: Dércia Silva has been kind enough to create a deployable solution package, as well as a Visual Studio template, if you’d rather automate the deployment of this master page and related files. See Dércia’s post here.
Installation
- Copy the v5.master file into the
/_catalogs/masterpage/folder of your SharePoint 2010 site collection. - Copy the entire v5 folder into the
/Style Library/document library, located at the root of your site collection. - Check in, publish, and approve all copied files.
- Change your site and system master page to use the new file you created.
- Optionally change the site logo setting to use the new logo image located at
/Style Library/v5/i/v5.png.
Requirements & Assumptions
- This master page was designed for SharePoint 2010, Enterprise and Standard versions.
- This master page was designed and tested for SharePoint publishing and wiki sites. No other site templates have been tested.
- Keep in mind that some SharePoint content simply doesn’t work well at smaller screen resolutions (lists with many columns, calendars, etc.). The focus is on external-facing sites with a lot of text- and image-based content.
- The SharePoint front-end server must have internet connectivity to access Google’s hosted version of html5shim. If you do not have internet connectivity in your environment, download and use a local copy of this file.
Known Issues (Updated Jan 19, 2012)
A few people have encountered some issues with the v5 master page. Although I think the master page still works great (especially as a publishing master page), you may want to consider making these changes, depending on your SharePoint environment and how you choose to utilize the interface.
- Error on “Save” in SharePoint dialogs (IE9) — this is caused by an error in Microsoft’s internal JavaScript files. This easily remedied by simply not using v5 master page as your “system” master page. If use a lot of system pages in your SharePoint site, you may also try adding the following line of code to the
<head>section of your master page:<meta http-equiv="x-ua-compatible" content="IE=8"/>
This forces newer versions of Internet Explorer to display in compatibility mode. Note that you’ll also lose CSS3 and HTML5 functionality when you add this to the master page (everything works, but the site will look a little more bland in IE).
- Ribbon not appearing at the top of the browser window — I’ve had some mixed reports of this happening in Internet Explorer, but I think it’s actually an indication that the paths to the attached CSS and JavaScript files are incorrect. If you are deploying v5 master to any site other than the ROOT site collection, make sure you update all references to these files where appropriate.
- Scrollbars appearing in SharePoint dialogs (Chrome, Firefox, Safari) — this is actually a side-effect of my ribbon/scrolling fix for SharePoint. SharePoint dialogs are still entirely functional, but the positioning and sizing of them just gets a little weird in any non-IE browser. Again, the idea is that the master page is optimized for publishing sites, which don’t make much use of these dialogs (if at all). If you have a lot of trouble with this, consider using a different system master page.
Thanks a lot for this master piece. Really handy to jump into html 5 integration with proper fallback handling.
Read you soon.
I’ve applied your master page (awesome by the way). But it seems main navigation submenus are not working on Firefox 6 or Safari on a mac. Any ideas? Just something I’m doing?
Ben, you can change the “MaximumDynamicDisplayLevels” to 1 if you want to use drop-down menus. I think that’s what you mean.
thanks, this morning it’s working…one of those embarassing “oh…now it’s working for some reason”. must have been something else not letting the drop-downs load. it’s all good now. thanks again.
Could have been a caching issue, if that makes you feel any better :)
Pingback: HTML5 Master Page in Sharepoint | bentedder.com
This looks really awesome. I love how simple it is.
How would you handle the tabs and such? Would this only be applied to custom pages so your site admin pages would still function correctly?
Hi, Brad. This should work as both a site and system master page (for admin pages).
I might try to use this as the master page for my User Group. Do you have any screenshots you can throw up of those examples I asked about?
Pingback: master page for html5 and css3 « Sharepoint. Sharing the knowledge
Great work! Looks awesome. Works everywhere except IE. IE9 has some problems with html5 and IE-mode 9. When you have a list (e.g. tasks) and listview on the page then you want to add an item, you won’t be able to “save” it, only cancel. And this only happens in IE9.
I have used IE-9 mode in one of projects, used CSS3 but then I changed back to IE mode 8 due to these small bugs.
Anatoly, I see the issue. It seems this is only happening on some lists for me — maybe it has to do with approval workflow, or rich text fields? Either way, definitely something Microsoft should remedy! Perhaps a workaround, for those who really need to use this functionality, is to create a separate “system” version of the master page that includes the IE8 compatibility meta tag in the header.
This is a problem I have been looking into for a while, as it actually makes HTML5 completely impractical on enterprise intranets – kind of a bore… I still haven’t come up with a definitive resolution, but I have figured out that it seems to be at least partially related to the old rich text field (not the new ribbon based one) attempting to communicate back to the main frame (the form is loaded in an iFrame). One potential remedy is to change all content types using the old rich text field to use the new one, but I’ve been hoping to find something simpler… The most interesting thing I’ve discovered so far is that ?isDlg=1 returns a page with x-ua-compatible ie=8, which I think is related to minimal.master.
Also forgot to mention – Attempting to add a new event from a calendar webpart is an excellent test case for this bug.
Hello Kyle and Ali,
I would like to confirm the above mentioned issue of creating new calendar item. The text body of the form is “greyed” out. Thank you.
-hn
HN this should be resolved by using this Gist: https://gist.github.com/1640421
[b]Update: Corrected Link[/b]
OK, here is a responsive solution which works in IE8 compatibility mode that can be applied to Kyle’s solution.
https://gist.github.com/1640421
Great work!!
Make a wsp and publish the project on codeplex ;)
Pingback: SharePoint 2010 und HTML5 | SharePoint Corner
this is great! Allthough you end up with css classes (in corev4.css for example) you don’t use anymore. Question is, would you recommend using the csslink. With a minimal master you focus a lot on (minimal) output but this way you don’t focus on css. tnx, Joost
Joost, I usually use a customized version of corev4.css, but I use a SharePoint feature to swap in the customized file (this also allows me to customize files like controls.css).
This is insanely great!
Nice work! Looking forward to working more in HTML5 – this is a great tutorial. Do you have any plans to release a SharePoint Foundation version of this v5.master ?
Hi,
Great work! And thanks for sharing.
I’ve tested the v5 masterpage and created a solution to automate the deployment of all the files. It’s available on my site, if anyone wants to try it out: http://www.broculos.net/en/article/sharepoint-2010-branding-responsive-html5-masterpage-sharepoint-2010
Thanks again!
Thanks, Dércia. This is great! I’ve updated my blog post to include a link to your blog post.
if you add
<meta http-equiv="X-UA-Compatible" content="IE=9"/>in the head of the master page, solutions like the HTML5 Video Player Webpart http://html5videowebpart.codeplex.com/ will also work on IE9.Fantastic work Kyle!
Hi,
I am using the V5 Master for our new share point site does anyone know how to hide the left hand menu on just one page for this master page have tried
/*–Hide Quick Launch –*/
#s4-leftpanel{
display:none
}
.s4-ca{
margin-left:0px
}
does not seem to work
Russ, use a DOM inspector (like Developer Tools in IE or Firebug in Firefox) to figure out which div you should select in your CSS.
Orig css
#v5-page-column-sidebar {
width: 200px;
padding: 0 0 0 40px;
margin: 0 0 40px 0;
float: left;
}
change css to:
#v5-page-column-sidebar {
display:none
}
Kyle,
The ribbon is not set against the very top of the page. It looks like it’s ‘top’ or ‘margin’ is set to 40-50px or so. Any ideas?
Thanks!
Hi, Brad. What browser/version are you using? I’ve tested the master on everything I have, and haven’t seen this issue.
Hi Kyle,
first of all – thank you very much for your work. I am still amazed.
Unfortunately I have the same problem like Brad. The ribbon is not set against the very top of the page and the black area with the ‘Websiteactions’ and the ‘Login name’ lay over the site logo and the search box.
I would like to use the master page in my “Office 365 – SharePoint Online” and I use the IE 9 (9.0.8112)
Do you have any ideas why the ribbon area is not set against the very top of the page?
Thanks again,
Karsten
Hello Kyle,
Thank you very much for your hard work. I do experience issue with ribbon not staying on the top of the page as well. Please advise. Thanks.
Pingback: Freebies Sharepoint Master Page - Microsoft and You
Hey Kyle, just tested it on IE8, degrades gracefully, except for some of the overlays that load the master page inside like for example “new page”, which come up with both, horizontal and vertical scrollbars, and the content is out of place, cut in half
I’ve fixed it by commenting out the min-width statement on the rule #v5-wrapper in line #77 of v5.css, and adding a margin:0 statement on the rule html.ms-dialog #v5-wrapper in line #357, also of v5.css
Great work, thanks
This is such a great learning resource, thank you so much.
Hi i have applied the fix commenting out the min-width statement on the rule #v5-wrapper in line #77 of v5.css, and adding a margin:0 statement on the rule html.ms-dialog #v5-wrapper in line #357, also of v5.css
But still getting the problem in IE9 with the ribbon not staying at the top of the page.
Just to update it works fine for me when i am logged in as a top level admin however if you login the same machine with less permissions the top bar no longer stays at the top of the screen and appears across the header.
When I publish the site, it works fine when logged in. But for anonymous users, I get the meaningless SharePoint error screen. Everything on the site is set for anonymous access. I have even tried Dércia’s Visual Studio method (was looking for something like that). Any ideas?
Hi, when i got to site actions – new page in the background the mobile block appears i am using a normal desktop pc and would like to fix this has anyone had this problem or any ideas what is causing it?
Many Thanks
Russ
For those of you having issues with the ribbon not staying at the top of the page, I did some additional testing today, and I have to say that I’m somewhat stumped. I’ve tested the master page in Firefox 3, Firefox 7, Firefox 8, Chrome 13, Chrome 14, Chrome 15, Safari 5.1, IE9, IE8, IE7, and even IE6 (which doesn’t look good, but the ribbon still stays at the top of the page in IE6). I have looked at the site in all of the supported site templates and page layouts, and I’m simply not seeing this issue at all.
If you’re still seeing this issue, please let me know the (1) operating system and browser version you are using, (2) the SharePoint version you are using and any installed customizations (products, web parts, etc.), and (3) if you have made any customizations to the master page that I have posted here.
Hi, really nice job!
For more information about SharePoint 2010 masterpage branding, I would suggest looking at special msdn post about branding masterpage (it’s a complete post). Maybe someone find it useful.
http://msdn.microsoft.com/en-us/library/gg430141.aspx
And one more moment talking about IE6 – SharePoint 2010 by default is not supported with this version, and if your site looks good for IE6, there is no guarantee, that all the functionality will work too, so consider about this.
Excellent work Kyle and kudos to Dércia as well for packaging this up nicely. I was just about to work on something similar, so it’s nice to see I didn’t have to reinvent the wheel. There are two things I noticed that I thought I should share.
1.) The CSS and JavaScript references will break if you are not at the root site level. For example, http://portal/sites/xyz. The following updates will ensure they work at any level:
Before:
After:
Before:
After:
<SharePoint:CssRegistration name="” After=”corev4.css” runat=”server”/>
2.) I too am seeing the issue with issue with the ribbon not staying at the top. However, for some bizarre reason, I only this when the site collection is not at the root level. My workaround was to make the following updates in the v5.css file.
body #s4-ribbonrow {
/*position: fixed; - REMOVE ME - This ensures the ribbon is at the top*/
z-index: 1000;
min-height: 0 !important;
height: auto !important;
}
body #s4-workspace {
overflow: visible !important;
padding-bottom:50px; /*ADD BOTTOM PADDING - The padding is removed with the above change.*/
}
Pingback: The Big Dummies Guide to Building a SharePoint Internet Site | Code to Preload
Nice work!
Sometimes the large display will stuck in the tablet display. A refresh of the page will solve this problem.
And if i wanna have a background image it didn’t work, but i wil try to figure that out.
Greetings
Great blog post on HTML 5 and thanks for sharing – http://www.danhaywoodblog.com
Great work Kyle! The design looks awesome and i had the same problem as some users that the ribbon didnt stay on top
body #s4-ribbonrow {
/*position: fixed; – REMOVE ME – This ensures the ribbon is at the top*/
z-index: 1000;
min-height: 0 !important;
height: auto !important;
}
body #s4-workspace {
overflow: visible !important;
padding-bottom:50px; /*ADD BOTTOM PADDING – The padding is removed with the above change.*/
}
This did the job. Thanks John Livingston. Only there are a few problems left, the dropdown menu (submenus) isn’t showing, when i change MaximumDynamicDisplayLevels” to 1 he is showing the subsites but also the library’s at the topsite under the dropdownmenu.
When i want to invite a user to the site, im getting a error Correlatie-id: e2337e32-f974-4b74-bdcc-540fbb0dc86e. Its working when i dont using the v5 as ‘masterpage from the system’ but then i dont have a fancy layout ;).
And the last issue at this moment is that the mainsite isn’t shown at the menu. If i click on ‘The “v5” Master Page’ I get directed to the mainsite.
when i’m in ‘siteactions’ everything except user invitation works fine; the dropdown menu (submenus) is shown correctly, and he is showing the first mainsite as a button.
If I find the solution i will let you know,
btw: im working with SharePoint Online (O365) and IE9 :).
2 Issues solved.
1. showing library’s in the dropdown menu (submenu’s) is solved, now i only see the subsites in the dropdown box, :).
2. The ribbon is on top and the mainsite is shown as a button (link) at the menu.
few issues to go;
1. cant add tasks and calendar items, save button isn’t working. Someone allready a solution for this?
2. getting a error ‘Correlatie-id: 70bd9c74-5812-47a1-8dd0-ac72b02b1e57′ when inviting a member to the site.
On both issues the layout is crashing on the background.
‘Error on “Save” in SharePoint dialogs (IE9) — this is caused by an error in Microsoft’s internal JavaScript files. This easily remedied by simply not using v5 master page as your “system” master page. If use a lot of system pages in your SharePoint site, you may also try adding the following line of code to the section of your master page:
This forces newer versions of Internet Explorer to display in compatibility mode. Note that you’ll also lose CSS3 and HTML5 functionality when you add this to the master page (everything works, but the site will look a little more bland in IE).’
Not using the v5 Master page as ‘system’ masterpage, will destroy the design of the template ;). strange thing is that some webparts witht he save/upload button is working.
‘Error on “Save” in SharePoint dialogs (IE9) — this is caused by an error in Microsoft’s internal JavaScript files. This easily remedied by simply not using v5 master page as your “system” master page.
Adding in the head is working, but the design is totally different then the pic’s
Not using the v5 Master page as ‘system’ masterpage, will destroy the design of the template ;). strange thing is that some webparts witht he save/upload button is working.
Will be updated
Has anyone had any trouble with adding webparts using IE7 or IE8? I am getting a js error.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; .NET4.0E)
Timestamp: Thu, 26 Jan 2012 18:40:19 UTC
Message: Invalid argument.
Line: 2
Char: 1735
Code: 0
URI: …/_layouts/wpadder.js?rev=hnGJJEMcU5XH%2BCq7PlSxJw%3D%3D
Jeremiah, did you ever resolve the wpadder.js issue? I am struggling with it and was wondering if there was a solution out there.
I have also been facing the “WPAdder” issue in adding web parts to web part zones, and have tracked down the code causing the behaviour. If you look in WPAdder.debug.js at line 81, the code is adding the web part zones as options in the “Add web part to” select element.
It seems that IE8 in IE7 Standards or IE8 Standards document mode is not happy with adding options that are created using the
document.createElement("OPTION")method. If this is replaced by
var newOption=new Option(curZone.displayTitle, i);then the page works fine, and web parts can be added to zones.
Editing this SharePoint core JS file is not a good idea for production farms, though. Neither IE9 nor Firefox exhibit this same issue – so the pragmatic solution is to use IE9 (or Firefox) to edit the pages!
Great Master Page it works like charm ;D
I found one small semantic bug:
[code][/code] cannot contain any other elements than
...accoding to: http://dev.w3.org/html5/markup/hgroup.html
Greetings and keep posting ;D
I found one small semantic bug:
hgroupcannot contain any other elements than
h1 ... h6accoding to: http://dev.w3.org/html5/markup/hgroup.html
Greetings and keep posting ;D
Pingback: Checklist for a successfull SharePoint 2010 public site – part 1 | Yaroslav Pentsarskyy on SharePoint Development
Pingback: Checklist for a successfull SharePoint 2010 public site – part 1 | Yaroslav Pentsarskyy on SharePoint Development
Great job. I have removed the left nav, following your instructions. There must be a simple way, but grateful if someone can explain. I want to get rid of this leftnav on all pages, no matter what page layout I will be using. I suppose that all pages would need to use the same (modified) css. For some reason, I don’t know how to achieve that: no left nav on all the site. Anyone? Thx !!
Hi, I get this weird problem on IE:
Whenever open a dialog for some reason, the layout goes mobile. Weird but hapening everytime.
Other bug is dialogs in firefox, very small in width , requiring big scroll to see full content.
Any tips?
Hi Karl
Great master page.
It’s working perfectly apart from on my Search Centre. Do you know how to convert it?
I’ve been working along the lines of Randy Drisgill’s post on this subject, but to no avail:
http://blog.drisgill.com/2010/09/converting-custom-sharepoint-2010.html
Any suggestions?
Pingback: Enable Save in IE9 mode « Share… What?