I know there are a lot of posts out there about how awesome SharePoint looks on the iPhone, and the only thing I can think is maybe we have different definitions of awesome. So I’m writing a quick tut on make a SharePoint site look better on an iPhone. Now this is not necessarily about styling per say, if your clients are using SharePoint they probably don’t want sexy or cutting edge. And yes they are using IE that is at least two version old. So I am just going to make a typical SharePoint site at least readable on an iPhone.
First big shout out to two guys who have given me inspiration, Andy Clarke and Luke W. Luke W made me really start thinking about sites and how I want them to look on a mobile first, not as an after thought. And second Andy Clarke for making me stop trying to make a site look the same on every browsers. I know simple thoughts but it extremely liberating.
All right down to business with tut. We all know what a typical SharePoint site looks like, what you may not know is how that same site looks like on an iPhone or any other smart phone. It basically takes the whole site down to the screen size of the phone. I know, no kidding. But trying to pinch and pan around on that is crazy, so we are going to try and fix that.
areas to remove
First we need to remove some areas from the page. Now some areas like the top navigation, bread crumb trail, and search box will only be remove from the mobile version. While the quicklaunch bar will be hidden with javascript. Let’s look at the css first:
/* iphone.css */
body{
margin:0px;
padding:0px;
font-family:Helvetica, san-serif;
font:100%;
}
/* sharepoint override */
#zz1_TopNavigationMenu{
display:none !important;
}
.globalbreadcrumb{
display:none;
}
.ms-sbcell{
display:none;
}
.breadcrumb, .breadcrumb a, .breadcrumb:active, .breadcrumb a:active {
display:none;
}
.ms-globalbreadcrumb{
display:none;
}
TD.ms-titleareaframe,Div.ms-titleareaframe,.ms-pagetitleareaframe,.ms-mwspagetitleareaframe,.ms-consoletitleareaframe{
display:none;
}
table.ms-navheader td a {
width: 100%;
line-height: 16px;
}
.ms-sitetitle h1 A{
font-size:32px;
color:#000000;
}
.ms-bannerframe .ms-banner{
padding-left:10px;
}
DIV.ms-titleareaframe{
display:none;
}
Most of this is self explanatory if you’ve messed around with css in Sharepoint before. For those who have not show you the highlights:
#zz1_TopNavigationMenu
.ms-globalbreadcrumb and .breadcrumb
.ms-sbcell
Some of the other areas will just allow the page to adjust better on the phone. SharePoint is all table based and sometimes you can remove one thing like the leftareacell and you hide the quicklaunch but a big blue hole remains. There are so many little hidden areas in SharePoint its not even funny. But by removing the listed above items it gives you a good blank slate on starting pages and interior pages. If your like me and the IT department holds the reigns pretty tight,So save this css into a library and we will point to it with a link. Add a Content Editor WebPart and use layouts to hide it. In the CEWP we just added let’s drop two lines of utter magic:
Hidding a CEWP
<meta name=”viewport” content=”width=device-witdh, initial-scale=1.0″/>
<link media=”all and(max-device-width: 480px)” href=”/css/iPhoneWql.css” rel=”stylesheet” type=”text/css”/>
The viewport content line really makes all the difference as for as scaling your text. SharePoint has a ton of css to try to find every text rendering and apply new sizes will drive you crazy. With this line you don’t have to. It does a great job of make all text very readable.
Now the link media will allow that css sheet code I gave you earlier to only be pulled if the screen size is 480px like it is on the iPhone. That way the top nav and search box, etc will still be displayed on your computer but not on the phone version.
I know your thinking but I have not removed the quicklauch bar and I love/hate that thing. We are going to hide it with javascript so we can see it when we need it. The above css gets rid of the tabs so we are going to need some means of navigation. And while we can write custom navigation we don’t have to.
Now with two more web parts and about 20 lines of code we will make the QuickLaunch disappear and appear at will. Add to more CEWPs one hidden for the code and on visible for the menu button.
first the button:
<input id=”btn” type=”button” value=”Menu” onclick=”applyStyle(this)” />
This is just a generic input button and I want the word Menu to appear on it, thus the value. On click I want a style to be applied which we will get into in the next bit of code.
In the hidden CEWP place this code near the bottom of the screen because we are using an on body load, just trust me and avoid the headache.
<script type=”text/javascript”>
window.onload = hide;
function hide(){
qlMenuBar=document.getElementById(‘LeftNavigationAreaCell’).style
qlMenuBar.display=’none’;
}
function applyStyle(qlOn)
{
if (qlOn.className ==”on”)
{
qlOn.className =”off”;
document.getElementById(
“LeftNavigationAreaCell”).style.
display=”none”;
}
else
{
qlOn.className =”on”;
document.getElementById(
“LeftNavigationAreaCell”).style.display=”block”;
}
}
</script>
K the first part is going to hide the whole cell containing the QuickLaunch when the page loads.
window.onload = hide;
function hide(){
qlMenuBar=document.getElementById(‘LeftNavigationAreaCell’).style
qlMenuBar.display=’none’;
}
The QuickLauch is in the LeftNavigationAreaCell and I want it to be hidden by default.
The next part is a function called applyStyle, which you may remember is on the button as well.
function applyStyle(qlOn)
The class of the button is by default “off” but I want when the button is clicked for it to change the class to “on”
function applyStyle(qlOn)
{
if (qlOn.className ==”on”)
{
qlOn.className =”off”;
document.getElementById(
“LeftNavigationAreaCell”).style.
display=”none”;
The == is going to check if the class is “on” or “off”
“off” removes the LeftNavigationAreaCell
“on” tells it to display the LeftNavigationAreaCell
else
{
qlOn.className =”on”;
document.getElementById(
“LeftNavigationAreaCell”).style.display=”block”;
}
All right that’s it have any questions drop me a line. By the way here is my sandbox version of a page with these changes made.
sandbox page
Tyus
