SharePoint 2010 includes a helpful dialog box that warns users who are using outdated versions of Internet Explorer:
As you can see, however, it’s neither particularly attractive nor very helpful. It suggests that you update your browser, but provides no assistance in doing so.
The last is important, because people using outdated browsers are less likely to know how to upgrade — which is why they’re using outdated browsers.
This post will show you how to replace the default SharePoint warning with something more attractive, useful and customizable, like this:
Users with outdated versions of IE are shown a modal box that explains their browser is out of date and provides several upgrade options. if they don’t want to upgrade they can click the “close” button in the upper right-hand corner and continue on to the site.
Step by step
- We’re going to be using a third-party solution from the Google Code repository. It’s called IE6 upgrade Warning, but you can use it to warn about any browser you want.
- Don’t use the version listed under downloads. Instead, download the version that’s linked from the last post in this discussion: http://code.google.com/p/ie6-upgrade-warning/issues/detail?id=27 .
- Create a folder named “iewarning” in your Style Library.
- Copy “warning.js” and all the image files into that folder.
- Delete the “WarnOnUnsupportedBrowser” control at the bottom of the master page.
- Add the following line just after the opening <body> tag in your master page:
<!--[if lte IE 6]><script src="/Style Library/REST OF PATH/iewarning/warning.js"></script><script>window.onload=function(){e("/Style Library/REST OF PATH/iewarning/")}</script><![endif]-->
Even though the script is called “IE6 Warning”, it’s not IE6-specific. If you want to warn users of IE7 or older, simply change the opening tag above to say “if lte IE 7″.
Setting options
The popup works pretty well out of the box. A good message, a close button and a session cookie so that users only see the warning once per visit. But you can customize several things in warning.js, if you want:
- showCloseButton: “true” shows the button; “false” hides it.
- longHideCookie: “true” replaces the session cookie with one that lasts a year.
- Message text: You can customize the text by editing the text variables at the top of the file. This includes the browser version titles (variables “br1″ through “br5″) and the upgrade links (variables “url1″ through “url5″).
- Visuals: The warning box is HTML, so you can customize the look. The bad news: the box is generated with some truly ugly Javascript. If you want to change the HTML structure, you’ll have to edit the Javascript. But if all you want to do is apply your own CSS or swap out images, that’s pretty easy.
