SharePoint 2010 CSS references in Master Pages

Here are some of the most common ways to reference your custom CSS for SharePoint 2010. One key change over 2007 is the ability to specify After=”corev4.css” in the CssRegistration to make sure your custom CSS is referenced after the OOTB corev4.css file.
<SharePoint:CssLink runat="server" Version="4"/> Note: Default OOTB
Output Order:

1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>

<SharePoint:Theme runat="server"/> Note: If a theme is enabled
Output Order:

1. <link rel=”stylesheet” type=”text/css” href=”/_themes/[UniqueCounter#]/corev4-[u=UniqueHex#].css?ctag=[UniqueCounter#]”/>

<SharePoint:CssRegistration name=”customfolder/samplecustom.css” runat=”server”/> Note: Alternate CSS on Server but comes before corev4.css
Output Order:

1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/>
2. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>

<SharePoint:CssRegistration name=”customfolder/samplecustom.css” After=”corev4.css” runat=”server”/> Note: Alternate CSS on Server and comes after corev4.css.
Output Order:

1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
2. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/>

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/samplecustom.css %>" After="corev4.css" runat="server"/> Note: Alternate CSS In SharePoint Database for sites withoutpublishing enabled
Output Order:

1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
2. <link rel="stylesheet" type="text/css" href="/Style%20Library/emc_2010_custom.css"/>

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/samplecustom.css %>" After="corev4.css" runat="server"/>Note: Alternate CSS In SharePoint Database for sites with publishing enabled
Output Order:

1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
2. <link rel="stylesheet" type="text/css" href="/[sitename]/Style%20Library/en-US/Themable/Core%20Styles/emc_2010_custom.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/> Note: Alternate CSS on Server by using the standard link rel. Does not need the After attribute…
Output Order:

1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
2. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css" />

Mobile Browsers for SharePoint 2010 site

One interesting feature of SharePoint 2010 is that it automatically shows a nice mobile experience when mobile devices browse the site. There is no need to type in the mobile URL (by appending /m to the URL) as you had to in SharePoint 2007. Here is a screenshot of what the SharePoint site looks like on my iPhone, I simply navigated to the usual site URL:



While this is terrific for intranet sites, its less than ideal for public internet sites, especially ones that have a lot of custom branding. In those cases, typically you would want smart phones like the iPhone to see a standard rendering of your site. So, how do we turn off the automagic mobile experience? There doesn’t appear to be a setting for this in the Site Settings or in Central Administration. I had to ask around on this one, and the SharePoint product team was kind enough to point me in the right direction. Turns out you need to edit the “compat.browser” file for your SharePoint site. To find this file, look in your IIS directory for your SharePoint site and look for the App_Browsers folder. Mine file was located at:


C:\inetpub\wwwroot\wss\VirtualDirectories\portal.contoso.com80\App_Browsers\compat.browse

This file has settings for MANY popular browsers, including most mobile browsers. In my example I want to change the mobile setting for the iPhone browser so I found this section:


<!-- iPhone Safari Browser -->
<!-- sample UA "Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A345 Safari/525.20" -->
<browser id="iPhoneSafari" parentID="AppleSafari">
<identification>
<userAgent match="iPhone" />
<userAgent match="Mobile" />
</identification>
<capabilities>
<capability name="isMobileDevice" value="true" />
<capability name="canInitiateVoiceCall" value="true" />
<capability name="optimumPageWeight" value="1500" />
<capability name="requiresViewportMetaTag" value="true" />
<capability name="supportsTouchScreen" value="true" />
<capability name="telephoneNumberDetectionDisabled" value="true" />
</capabilities>
</browser>

To turn OFF the automatic mobile version of the site for this phone, we just need to change isMobileDevice from True to False and save the file. With the isMobileDevice set to false, now when I browse my SharePoint site I see the standard branding:

by- Randy Drisgill

Hiding the Quick Launch of SharePoint at the Page Level

how do I hide the Quick Launch for just one page in SharePoint 2010. The answer is simple my friends: Content Editor Web Part with some specialized CSS. Note, this code is written specifically to work with v4.master, any other master page may need different CSS code to hide the Quick Launch.
Edit a page, Site Actions > Edit Page
Click in a wiki text or rich text area and from the ribbon click Insert > Web Part (or add a Web Part to a Web Part zone)
Under Media and Content select Content Editor and click Add


 

With the new Web Part selected, from the ribbon click Format Text > HTML > Edit HTML Source


 

Enter the following HTML / CSS and click OK

<style type="text/css"> body #s4-leftpanel { display: none; } .s4-ca { margin-left: 0px; } </style>

Hide the Web Part chrome by selecting the Web Part and on the ribbon click Web Part Tools Options > Web Part Properties and on the right click Appearance > Chrome Type > None and then click Ok.
Save and close your page and you are done… no Quick Launch!

Removing the Name ActiveX Control Warning in SharePoint 2010

When I initially looked at SharePoint 2010 I was disheartened to see that my old nemesis the Name.dll ActiveX control warning was still popping up on my sites. If you haven’t seen it yet, here is a screenshot:



The warning has to do with SharePoint wanting to show presence info (the little green icon next to people in your organization that are currently online). It often ends up showing on public SharePoint sites because it is elusive in development environment, it will only show in these circumstances:
IE7 or IE8
Site must not be in the Intranet zone, which typically automatically includes any site that you are local to or share a domain with
Must have Office, or Messenger or any other similar program installed
Must have NOT already said yes to IE installing the ActiveX control

If any one of those criteria isn’t met, the warning doesn’t show for you, but it most likely WILL show for anonymous internet users. In the past we had to use some JavaScript in the master page to hide this warning, but thanks to Kirk Evans’ blog post (http://blogs.msdn.com/kaevans/archive/2010/01/28/presence-in-sharepoint-2010.aspx), I have just learned that the message can also be turned off via Central Administration in SharePoint 2010, here’s how:

Open Central Administration and click Manage Web Applications. From there select your web application from the list and then from the ribbon click General Settings > General Settings:



After that, simply change the “Enable Person Name smart tag and Online Status for members” toNo, and click OK:





That’s all you have to do to get rid of the warning, so no one has any excuse now if you are working on a public SharePoint site it should be turned off. Also, its worth noting that you can still get rid of the message via JavaScript in the master page if you prefer:


<script type="text/javascript">
function ProcessImn(){}
function ProcessImnMarkers(){}
</script>

If you have access to Central Administration that is probably the preferred method, but if you don’t or you want to ensure that it never is turned on by mistake, the master page method is a sure fire way to hide it always.

by- Randy Drisgill

Un-Floating, Fixed Position Ribbon in custom Master Pages

In the 2010 out of the box master pages, Microsoft has included code that causes the ribbon to float above the rest of the page content (you might say it sticks to the top of the page). You can see the effect here:



See how the right scroll bar stops at the ribbon? That’s the new functionality at work. It makes editing the page a nicer because you don’t have to scroll to the top of the page constantly.

But what if you are doing a VERY stylized branded SharePoint site? Sometimes this functionality can get confused, especially if you are using CSS to position the body “fixed”. I saw this happen recently when Paul Keijzers (@KbWorks on Twitter) was having problems using my Starter Master Pages (http://startermasterpages.codeplex.com). His problem would have been the same if he used Microsoft’s v4.master.

So, how do we make the page scroll in a more traditional fashion? Pretty easy, just follow these steps in your custom master page (or css):

1. Remove or override the CSS that hides the body overflow - body { overflow:hidden; }. You can override with body { overflow:auto; } Note: if you are using v4.master, you need to override this with body.v4master { overflow:auto; }
2. Remove scroll="no" from the <body> tag
3. Remove ID="s4-workspace” from the <div> tag that surrounds the page content (below the ribbon). You can remove the entire <div> tag and its corresponding </div> if you would prefer.

Save and check-in / approve and you should have a page that scrolls normally. The ribbon will stay at the top and scroll off the page if you have a lot of page content. Note, there may be an easier way to do this by using something like the class="s4-nosetwidth" code that takes away the width setting, but I haven’t been able to find anything that would change the scrolling behavior. 

by- Randy Drisgill

SharePoint 2010 Document Library !New icon details

Taking a look at the onet.xml (located in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML) I did a search for the new.gif and found it surrounded by an element. A search on MSDN leads to this document which states:

"Returns TRUE if the item is considered new. Usually, this means that the item was created after midnight the day before. This element renders its contents if the item was created today, that is, after only one day has passed, the number of days being a registry setting for which the default value is 1."

I had to read that a few times, but it boils down to two days.

To check that, run:

stsadm -o getproperty -propertyname days-to-show-new-icon -url ""

It returns 2.
If you want to change it, run:
stsadm -o setproperty -pn days-to-show-new-icon -pv -url ""

Example :

Click Start, point to All Programs, point to Accessories, and then click Command Prompt. or goto MS Power shell
Type the following commands, and then press ENTER after each command:

1. getproperty

PS C:\Users\Administrator> stsadm -o getproperty -propertyname days-to-show-new-
icon -url "http://192.168.1.40:6855"

PS C:\Users\Administrator> stsadm -o setproper
ty -pn days-to-show-new-icon -pv 2 -url "http://inddev16:7576"

Operation completed successfully.

2. setproperty

PS C:\Users\Administrator> stsadm -o setproperty -pn days-to-show-new-icon -pv 0
-url "http://192.168.1.40:6855"

Operation completed successfully.