Monday 7 November 2011

Change the "Welcome" link font color in SharePoint



As part of configuring enterprise search for a company's portal, one of the requirements was changing the look and feel of the SearchCenter. In short, they wanted a very Google like UI - I.e. nothing too flashy or heavy.

So, I started off creating a minimal master page and adjusting the layouts - nothing major just positioning the controls etc.. Now, to change the appearance of the webparts required modifications to the default styles located in the core.css file and thanks to Heather Solomons CSS Reference Chart this was pretty much easy. But when it came to changing the font color of the "Welcome" link, changes to the styles mentioned by her weren't working....

Took me a while, but managed to find the solution by examining the source of the generated web page. Seems that the style in use for the font color of the "Welcome" link is: .ms-SPLink A:link,.ms-SPLink A:visited

To change the font color, modify the existing class like:

.ms-SPLink A:link,.ms-SPLink A:visited
{
color: #FFFFFF; /*#2A4666; this is the font color for the "Welcome" Link*/
text-decoration:none;
}

and if you want to change the font color on mouse over then add a new class:
.ms-SPLink A:hover
{

color: #66FFFF; /*this is the font color for the "Welcome" Link - mouse over*/
text-decoration:none;
}


Do remember that changes to the core.css file will result in changes that will be reflected all over the portal. So, if you only want the change to appear in on site don't go change the cosre.css file....

Friday 17 June 2011

How To Change The maximum file size Upload in SharePoint 2010



This morning I tried to upload a video file to our SharePoint 2010 install in preparation for a presentation tonight and then realised that the default 50mb file size limit was still set so while I was changing the settings to allow larger files I thought I would do a quick post on how/where the setting is and what to change.

First of all login to Central Admin and navigate to

Central Administration -> Application Management -> Manage Web Applications

Once there highlight the web application that you want to change and then click on general settings


Once in general settings scroll to the bottom of the list and you will see the maximum upload size the default setting is 50mb this can be can set to a maximum size of 2047mb. If you try to go beyond this it does flag up and tell you that you have exceeded the Maximum size.

Saturday 21 May 2011

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

Friday 20 May 2011

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