Monthly Archives: March 2011

SharePoint 2010 Branding: Creating a Theme

When designing a branded SharePoint site, the first task for any web designer should be to create a general SharePoint Theme. A SharePoint theme can be designed through the web browser, and then, with a bit of work, can be saved locally or deployed to a SharePoint site as a feature. The advantage to creating this theme before you do any heavy lifting with the master page is that you’ll find that a lot of the work will be done for you right from the start. What a theme will do is set the colour scheme for a lot of the main parts of a SharePoint page. By creating the theme first, you will avoid doing a lot of searching for the proper styles to override within your master page. Unfortunately, once you design your theme through the browser, there is no easy way to get your theme saved locally so that it can be deployed to other sites. However, Microsoft PowerPoint actually supports the same theme file type (thmx) that SharePoint uses, so you can create a local copy of the theme using this program. In this blog post I will explain how to design your SharePoint theme through the browser, and then I will direct you to some resources that explain how you can create a local copy of the theme and in turn deploy this theme to your SharePoint site.

Designing a Theme

The easiest way to design your theme is to create the theme through your SharePoint site. The reason for this is that you can see the effects of your changes almost immediately with the click of a button. This is essential when you’re doing the fine tuning of your theme.

To access the theme editor through the browser simply go to Site Actions –> Site Settings and then under the Look and Feel section click on Site theme. This will bring you to the page shown in the image below:

On this page you’ll find your most useful tools are the “Select a Theme”, “Customize Theme”, and “Preview Theme” sections. In the “Select a Theme” section you can choose from a wide array of built-in themes that come out-of-the-box. If you’re lucky, there may be a theme there that is already close enough to your desired theme, so you can take it as your starting point. In the “Customize Theme” section you can edit the specific colours within the chosen theme. This section will be covered in detail in the next paragraph. Finally, in the “Preview Theme” section you can see your theme applied to your site without actually fully applying it. What the Preview button does is open a popup that shows an exact copy of your site so that you can see how your site would look like if you applied the theme as it is right now. Granted, it only allows you to see the homepage of your site, however this is usually enough to yay or nay your current design.

In the “Customize Theme” section you can pick and choose all of the colours that you wish to have in your theme. After some experimentation, I found that the most prominent colours are contained in the first 5 settings of this section. The biggest problem with using this designer is that the colour categories are completely vague. It is impossible to know what rules apply to what. A good way to get around this problem is to pick 5 completely different colours for the first 5 settings in this section. For example, pick red, blue, green, and yellow for the “Text/Background” sections, and pick pink for the “Accent 1” section. After applying this theme to your site you will get something that looks like this:

Although this is not too easy on the eyes, it gives you a clear division of which settings are applied to which components. Once you have this as your starting point you can simply change the colours one by one, and you can be sure about which components you are customizing with your colour choices.

Once you have defined what your theme colours are you will have a good platform to start your SharePoint design. In the next blog posts I will start to explain how to customize the individual parts of a SharePoint page.

Useful Links

Tips for supporting clients with BlackBerry phones

Have you ever been called by a client who tells you, “I can’t get emails on my phone. Help me!” You would love to help, but struggle with guiding them through the menus on their BlackBerry because you don’t have the same model available. There is a very easy solution to this…download the simulator!

Research In Motion provides phone emulators for nearly all possible configurations of their phones. You can find these simulators at:
RIM Developer Zone
If you find that your client has configuration options missing on their phone, it is probably because the carrier has locked down the phone. With a quick call to the carrier, you can usually get these configuration options unlocked. (Sometimes there is an additional fee to unlock these settings.)

SharePoint 2010 Branding: Understanding the Components

SharePoint gives you a lot of control over what your site looks like. On top of applying a site theme, you can also create your own CSS rules, and customize the master page that will be applied to the entire site. However, if you’re coming from a web designing background where you’re used to having complete control over the source of the web site, there are a few things that need to be considered before diving in to SharePoint design. The most important of which being: with SharePoint, you do not have complete control over the source of the site. Since SharePoint is a dynamic Content Management System, almost all of the components are generated dynamically based on user content. As such, when modifying the master page, you will not always be able to see the actual HTML source of a component… what you’ll see instead is a Content Placeholder or a SharePoint element that defines the high-level properties of the component. When this is the case, there are usually only two things you can do with that component: (1) move it, and (2) style the component using CSS. With that being said, SharePoint sites are still based on .Net, so technically you can rip everything out and create your own master page from the ground up. However, doing this will throw a wrench in to the dynamic nature of SharePoint and stop your users from having a fully-featured SharePoint site. So it is not recommended to do this if you want to keep SharePoint as a CMS solution.

On that note, this blog (and the next few blogs) will be targeted around re-designing SharePoint while maintaining all of the functionality that comes with it. The first step to accomplishing this is to know what you’re dealing with. In the image below I’ve blocked out the various components that are standard for almost every page that you’ll see in SharePoint. Each block represents a component that can be moved around and styled, but cannot be torn to pieces. Below the image I will go in to a little more detail about what can be done to style and customize the component. This should be enough to give you ideas about what is possible with SharePoint design.

1 – Main Content
This is where all of the content is rendered. This block can contain lists, libraries, calendars, custom web parts, tasks… anything you create. As such, styling this area needs to be considered on a per-content-type basis rather than simply on a master page basis. For example, if you start changing the styles for the root container, you then need to go through and test how different SharePoint content renders within the newly styled container. Different content will behave differently in this container so it is not exactly trivial to style this section. In the blogs to come I will give you some tips and tricks to styling this area, and describe how the standard content (document libraries, lists, web part pages, etc.) will behave in this container.

2 – Quick Links Sidebar
This is where all of your Quick Links will appear. SharePoint allows users to completely customize what goes in to this block, so you don’t have much control over the layout of the content from a master page perspective. What you can define are the CSS rules for how you want the headers to look, how you want the items to look, as well as how you want the selected item to look. Again, customizing this component is worthy of its own blog post, so I will certainly cover this in a future blog.

3 – Top Link Navigation
This is the block that contains the global navigation links for your SharePoint site. Similarly to the Quick Links Sidebar, SharePoint allows the user to define what these links are, so again you are limited to CSS rules when customizing this component. The two main things that you have control over is the style of the selected link, and the style of the unselected links.

4 – Page Breadcrumb
This is the block that will contain the title of the current site, as well as a dynamic breadcrumb that provides links that lead you from the current page to the site root. This is actually one component that can be ripped apart in to two parts: The root site title, and the current page title. Both these parts can be moved around and themed separately, so you can make this part look however you want. You can even style the separating arrow in between the different titles.

5 – Page Description
This is the block that contains the description of the current page. The content of this block will always be text, so it is completely customizable with CSS.

6 – Site Icon
This is the icon that is used across the site. It is customized by the user through SharePoint, and does not have any size restrictions. However, since the whole point of “branding” a SharePoint site is to make it have the look and feel of your company, this logo will most likely always stay relatively static. So you can keep this in mind when you decide where it should go.

7 – Search Area
This block contains the search box that allows your users to search all of the content of the site. The search box and button are pretty static (as they are contained in a delegate control), but the container can be styled with CSS. It is also not an inconceivable task to create a custom search box and deploy it as a feature. However, this task will be out of the scope of any future SharePoint branding blog entries.

8 – Social Tags (Delegate Control)
In the master page this block is actually just a Delegate Control. As such, it could technically contain anything, so in general your styling of this area is limited to CSS. By default it is populated with a few buttons that allow the user to tag a page, or add notes that everyone can see.

9 – The Ribbon
This block contains the heart and soul of SharePoint 2010: The Ribbon. This block is shipped in one single piece that cannot be ripped apart. On top of this, it is by far the most dynamic component of SharePoint (besides maybe the content itself). The content of the ribbon changes depending on what type of component the user is currently focusing on. As such, it is any designer’s nightmare to style it. On top of this, the ribbon is not affected at all by Site Themes… so it is completely up to you to get it to fit with the theme of the site. Styling this part will most definitely be the topic of a future blog post.

The first step to re-designing any site is to understand what you have to work with… and SharePoint is no exception. I hope the above diagram will give you a good high level view of the different parts that go in to a SharePoint page, so that you can make informed design decisions during the initial phases of your re-branding journey.

Integrated Authentication – Prompted for Credentials Anyway?

Many people have difficulty setting up the connection to SharePoint 2010 such that users are not prompted to enter their username and password. SharePoint does support integrated authentication, but there are a few settings that can interfere.

On the SharePoint side:
Try different configuration options in SharePoint. This is done through the SharePoint Central Administration website:

  • Central Administration > Application Management > Manage Web Applications
  • Choose a Web Application and click the Authentication Providers button.
  • Try switching the IIS Authentication setting from Kerberos to NTLM – both are capable of working, but Kerberos may require additional IIS configuration.

On the client side:

  1. Make SharePoint a Trusted Site
  2. Modify Windows Vista and Windows 7 registry settings
  3. Set Local Security Policy to allow NTLM response

Make SharePoint a Trusted Site

Internet security settings may prevent Windows from passing credentials to the SharePoint site. To properly configure this setting:

Edit: If you haven’t already tried adding the SharePoint site to the Intranet Zone, try that first it is the proper place for a local SharePoint install to appear and already has the correct permissions. If you cannot do so, try the Trusted Sites alternative below.
  • Go to Internet Options
  • Go to the Security tab and select the Trusted Sites zone, then click the Sites button
  • Add the URL for SharePoint to this list and click OK to get back to the Security tab
  • Click the Custom Level button
  • Scroll to the bottom of the list of settings and make sure that User Authentication->Logon is set to Automatic Logon with Current Username and Password
  • Click OK

Modify Windows Vista and Windows 7 registry settings

Windows Vista and Windows 7 have trouble authenticating with WebDAV, which effects SharePoint’s document library explorer view and also effects opening Sharepoint files dirrectly into MS Office applications.
Windows Vista may require a hotfix to be installed as well as following the steps below to edit the registry. See the link at the bottom of the article for the hotfix.

  • Locate and then click the following registry subkey: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters
  • If there is no parameter called AuthForwardServerList, you will have to create it, otherwise you can just add SharePoint to the list of URLs already there.
  • On the Edit menu, point to New, and then click Multi-String Value.
  • Type AuthForwardServerList, and then press ENTER.
  • On the Edit menu, click Modify.
  • In the Value data box, type all of the URLS used by the SharePoint server, and then click OK.
  • Exit Registry Editor.

Set Local Security Policy to allow NTLM response

A default local security policy in Windows 7 prevents LM and NTLM responses. This may cause credentials to fail and retry because Windows is unable to see the response. To check this setting:

  • Go to Local Security Policy > Security Settings > Local Policies > Security Options
  • Select Network security: LAN Manager Authentication level
  • Change security setting to Send LM & NTLM responses

Links

SharePoint 2010 Branding

A recent project that we have taken on is to completely re-brand our internal SharePoint site. What we wanted to achieve was to have our internal site match some recent branding changes, while still maintaining all of the functionality and flexibility of SharePoint. This is still a work in progress, but I thought I would share what we’ve achieved so far.

BEFORE

TTGOringinalAFTER

TTGRedesign
The biggest changes to look for are the look and feel of the Quick Links, the overall centered content, and the top navigation bar. Getting this overall look and feel took some trial and error, and some hard lessons. As such, over the next while, I will be posting some blogs that are focused around SharePoint branding in general, and some tips and tricks that we found throughout our re-branding journey.