This post applies to SharePoint 2010 Server, Standard or Enterprise edition.

SharePoint can be used for all sorts of content. For collaborative and productivity scenarios, the focus is often on document libraries and lists for managing content. Sometimes content is better suited in web pages, such as wiki sites and newsletter. But the default page layouts are quite basic.

The image above (click on images here to view full size) shows the default page layouts for publishing content in web pages. There are three types of article page, two wiki pages and a web part page. We’re going to create our own article page layout.

Creating a new article page layout

The three article pages are very similar. The only difference is whether or not you include an image page control on the page and, if you do, whether it is on the left or right side of the page. All three include page controls for a title, article date, byline and page content.

The image above shows the article page layout Image on Right with some content in the Title, Article Date, Byline, Page Image and Page Content.  It looks fine when viewing the page, but it’s just one clump of content – the Page Content control.  The only slices we can display elsewhere are the Title and Byline.

The image above shows a Content Query web part (CQWP) displaying the ‘Latest Newsletter’.  (CQWPs can be displayed on any site in a site collection, in this case, showing part of the news letter on another site.) The active link is the Title and the text next to the image is the Byline, displayed as a description.  Instead of a Byline, I want to publish a summary without having to duplicate content in the actual article page.  To do that, I need to create my own article page layout.

Create the required columns

Every control on a page layout is linked to a column.  If we want to create our own page controls, we first need to create the columns. This is slightly different to creating columns in a document library or list.  Page controls must be associated with site columns, not library columns.  Site Columns includes four additional column types specifically to use in web publishing. These are not available when creating columns within lists and libraries.

1. On your site (or site collection root if you want to re-use the columns across other sites), go to Site Actions – Site Settings
2. In Site Settings, click on Site Columns
3. In Site Columns, click Create.  For our example, we are going to split our article page into three: News Summary, Message from the Boss, and the rest of the newsletter. We need two additional columns for the Summary and Message from the Boss. The image below shows the settings for our News Summary column.  Note the column type (Full HTML content…)

Add the columns to the Article Page content type

To make it easy to add our new columns to a page layout, we’re going to add them to the corresponding content type.

1. In the same site where you just created your columns, go to Site Actions – Site Settings
2. In Site Settings, click on Site Content Types
3. Scroll down to the group Page Layout Content Types and click on Article Page
4. In the Article Page Content Type template, click Add from existing site columns and add your two new columns to the content type.

Create the article page layout

1. Edit the site in SharePoint Designer
2. In the Navigation (on the left), click on Page Layouts
3. In the ribbon menu (at the top), click New Page Layout
4. In the New dialogue box, select the Page Layout Content Types group and the Article Page Content Type. Enter a URL name (all one word) and a title for your new page layout.

Add controls to your article page layout

First up, we currently have a completely blank page layout. To cheat and get us started, we are going to copy the design of one of the existing article page layouts.

1. In the Page Layouts folder, click on the page layout ArticleRight.aspx
2. In the page layout settings, click Edit file (under Customization)
3. When prompted, do NOT check it out.  Then, when prompted, click Yes to open in advanced mode. Copy the entire contents of the code screen and paste it into the code screen of your new page layout. When finished, close the ArticleRight.aspx page layout.

Side note: I personally prefer split mode in SPD to display both the code and the design of a page layout. If you can’t see any code, click on Split or Code just beneath the page layout.

Your new page layout should now look just like the page layout for articles with an image on the right. We are now ready to add our two additional page controls: News Summary and Message from the Boss.  We want to add these controls above the Page Content control’

1. In the Toolbox on the right side of the screen, scroll sown to the Content Fields group. You should see your two columns. In this example, Message from the Boss and News Summary.
2. Drag the two columns onto the page layout. I have added the News Summary and Message from the Boss within the DIV for the article content.
3. Look at the settings for the Page Content control (FieldName=”PublishingPageContent”) in code, it has two properties set:
   • HasInitialFocus=True
   • MinimumEditHeight=400px

   These two settings control the height of the box on the page layout and where the cursor is placed. For mine, I am going to use HasInitialFocus=True on my News Summary control. I am also going to make both of my columns have a minimum editing height of 200px.  When you are making these changes, make sure you add the properties before runat=”server” to make sure you get them in the right place (if you’re not experienced with doing this stuff).

4. Finally, I’m going to add a title for my newsletter in the DIV for the article header, to save writing them within the page each month. Note: normally I’d format these better or replace with a banner image (I was going to go all Matrix’y), but to keep it simple…

In the image above, you can see my two columns with field names displaying their GUIDs instead of the friendlier names of the built-in PublishingPageContent within DIV class=”article-content”. And I added a plain DIV to drop the magazine title ‘The Oracle’ at the top of the DIV class=”article-header” with a basic style applied.  The toolbox over on the right of the page shows my two columns listed under Content Fields.

When you’re ready, save the page layout, check it in and publish/approve ready for use in the site.

Add the page layout to the site

Once published, we can add our new page layout to the list of page layouts used in the site.

1. Back at the site, go to Site Actions – Site Settings
2. Within Site Settings, click on Page layouts and site templates (under the Look and Feel group)
3. Under Page Layouts, select ‘Pages in this site can only use the following layouts) and add your page layout. Click OK.

Note: If you want the new page layout to be the default when new pages are created, go back into Page Layouts and set it to be the default.

Use the new page layout

If I go to edit my current newsletter, I can now change the page layout and select my new format.

In the image above, I have moved my summary and message from the boss into the new boxes on the page. Compare to the original image earlier in this post. (In hindsight, should have made the two boxes 100px they don’t need to be that large.) As a tip, set the default size of the box to roughly how much content you would want people to put in it.

When you publish the page, it looks just the same. But now that we have content segmented, we can start to display those segments elsewhere.

Modifying the content query web part (CQWP)

The final step in this post is going to be to display the news summary from our newsletter on the Intranet home page. We need to change the columns that are displayed in the CQWP under Title and Description.

In the image above, ‘Original Latest News’ is the CQWP with its default settings, displaying the Title and Byline of the newsletter.  Beneath it, ‘Latest News’ shows our new CQWP displaying the Byline (instead of Title) and Newsletter Summary (instead of ByLine).

I’m planning to go into the CQWP in a bit more detail in another post, including adding a ‘Read more…’ link.

SharePoint 2010 has changed a few things regarding search. One of which is the use of a different master page to control the navigation, providing a minimal global navigation (aka top link bar) and removing the left sidebar (aka current navigation or the quick launch bar). The left sidebar needs to be removed to make way for the new search refiners but the global navigation loses an important feature – the breadcrumb to navigate back where you started (i.e. somewhere else in the site collection).

Comparing default master pages

The top image above shows the header for a normal internal SharePoint site with it’s little breadcrumb icon expanded (the folder icon next to Site Actions). I’m on the Facilities site which is a sub-site under Resources which is a sub-site under Intranet. Intranet is the root site in the site collection.

The second image above shows the header for a SharePoint search site (Basic or Enterprise template). There is no icon.  It is a sub-site under Intranet but you can only tell if you look in the address bar of the browser. There is no link to click to get you back to the Intranet root. This can be annoying for users if they are not interested in any of the search results provided.

I do the following little hack to add the Intranet root URL before the site title.

1. Create a new master page

• In SharePoint designer,open the root site in the site collection. Click on Master Pages in the navigation
• Open the minimal.master page and copy its contents (do not check it out, do not save any changes)
• Create a new blank master page, give it a name (e.g. search.master) and replace its content with the content from the minimal.master page

2. Set up a style for the link to be added

• At the end of the HEAD section of the master page, add the following style settings

<style type="text/css">
   .MyLinkStyle a, a.hover{  
       color: #FFFFFF;  
       text-decoration: none; }
</style>

• Note: you can call .MyLinkStyle what ever you want, e.g. .YourLink. Just make sure it starts with a full stop (.)
• These style settings are based on the default site theme. If you are using a different theme, change the formatting to suit. If you are doing everything properly through style sheets, make the changes in the appropriate files.

The HEAD section of the file should now include your style settings as shown below (additions highlighted):

Adding <style> code to master page

3. Add the link before the site title

• Whilst still editing your new master page…
• Locate the line that contains the Heading 1 tag. It should look something like this:

<h1 class="s4-mini-header">

• Enter the following code directly beneath this tag:

    <span class="MyLinkStyle">
    <a href="http://intranet">Intranet</a> -
    </span>

• Note: Replace “http://intranet” with your own URL.
• The edited section should look something like the image below (additions highlighted, my URL is http://demo/sites/intranet/):

Adding the link to the master page

I’ve included the split screen mode so that you can see how the link appears visually. Don’t be confused by ‘Intranet – Intranet’. We are creating this master page at the root site in the site collection – called Intranet on this demo. The master page is only going to be applied to the Search sub-site.

4. Finish your new master page

• Save, check-in and publish your new master page.
• Don’t forget to approve it – you’ll be prompted if you’re working with a default settings.

5. Apply the new master page to your search site

• Navigate to your Search site. Go to Site Actions – Site Settings
• Under Look and Feel, click on Master Page
• For the Site Master Page, change the selected master page from minimal.master to search.master (or whatever you called your new master page)

Selecting the new master page

Click OK. And your search site should now look something like the following:

Link added to the Site Title

And there you have it, a basic little hack to add navigation to your site title in search sites.

Related blog posts

• SharePoint 2010 Search Set-up
• Adding Staff Directory Search
• SharePoint vs FAST for search
• Configuring Adobe PDF indexing

This post is filed in the SharePoint 2010 handbook under Enterprise Search

This is part 2 in a series of posts about how to create your own SharePoint theme. Click Here to read part 1 (how to set-up your own theme)

This post is about the CSS properties to be modified.

When customising an existing theme, the main file to edit is ‘THEME.CSS’ located in the folder containing your theme (created during part 1 of this series). Any changes made to the THEME.CSS file will only affect that theme. The other file you may need to edit is ‘CORE.CSS’ located in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\Template\Layouts\1033 . However any changes made to CORE.CSS will affect all themes so use with caution. In most cases, the easiest solution is to create the same properties in the THEME.CSS.

The presentation embedded below contains descriptions of the main properties you will likely want to modify on a standard SharePoint 2007 site. Most properties apply equally to Microsoft Office SharePoint Server (MOSS) 2007 and Windows SharePoint Services (WSS) 3.0.

Click to view in Full Screen mode if details look blurred.

Please note that this presentation is based on existing materials created by Heather Solomon and Microsoft. References are in the presentation and also included at the end of this post. If you are modifying the theme for a web publishing site, Heather’s site will provide far more information than is included here. This presentation is related to a table detailing all properties within a standard THEME.CSS file (the Classic theme) that we use when modifying themes for customers – see Related Links below.

Related Links:

• Create your own SharePoint theme (blog post, August 2008)
• Sample THEME.CSS file with details (table on web site)
• SharePoint CSS Properties Presentation (PDF of the presentation embedded above)

References:

• Heather Solomon’s CSS Reference Chart
• Customising the Look and Feel of SharePoint Sites by Mike Ammerlan (European SharePoint Conference, 2007)

This is part 1 in a series of posts about how to create your own SharePoint theme.

When you install SharePoint, it comes with a range of themes to pick from. Each theme determines the style and formatting of pages within a site. Themes are applied per site. Navigate to a site, click on Site Actions – Site Settings (Modify all settings). Under the second column ‘Look and Feel’, click on Site Theme

You can click on each of theme and see a preview of what it will look like. Select one, click Apply and your site will adopt the new theme.

The chances are, one of themes may look vaguely similar but will not be a match for your own colour scheme. There are various solutions to create your own style and formatting for SharePoint. We will start with the easiest option – create a new theme by modifying an existing one.

Note: This method works with both MOSS 2007 (SharePoint Server, the licensed product) and WSS 3.0 (SharePoint Services, the bit that is free with Windows Server)

Step 1: Identify the theme that is closest to the one you intend to create

1. Go to a SharePoint site and open Site Settings, click on Site Theme
2. Scroll through the list of themes and identify which one is closest to what you intend to create
3. Note: this does not necessarily mean the main colours such as links and text. The hardest elements to adjust are the backgrounds because they use a lot of images. Look closely at the colours used for the shaded area just beneath the tabs on the page and the background behind the Quick Launch navigation, and how Site Admin appears (we won’t be changing much here)
4. If in doubt, I tend to start with ‘Classic’ which uses few images and has a plain background that is quite easy to adjust. It also has a simple colour scheme for admin that doesn’t need changing. ‘Simple’ is another one but I tend not to use it as it throws up a dialogue box (‘display unsecured items…’) on certain browsers. Both require extra effort on the Quick Launch navigation (quite easy to sort, that’s coming in part 2)

Step 2: Copy an existing theme into a new folder

1. Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\THEMES
2. Create a new folder for your theme. I recommend calling it a short word, e.g. MyTheme, this will become the name of your new theme (referred to here as newtheme)
3. Open the folder for the theme you are planning to copy (chosen in step 1, e.g. Classic) and copy its entire contents into your new folder
4. Within your new folder, open the file ‘oldtheme.inf’ in notepad (where ‘oldtheme’ is the name of the theme you just copied)
5. Under the [info] tag, change the title to match the name of your new theme
6. Under the [titles] tag, change the title to match the name of your new theme for each of the locales listed (the numbers represent the different languages supported by SharePoint)
7. Save and close the file
8. Rename the file from ‘oldtheme.inf’ to ‘newtheme.inf’ (where ‘oldtheme’ is the original theme you copied and ‘newtheme’ is the name of your new theme)

Step 3: Add the new theme to the list of themes displayed under Site Settings – Site Theme

1. Navigate from the \THEMES folder to the \LAYOUTS folder (both are listed under C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE)
2. Within \LAYOUTS, navigate to \1033 (note: this is the default language for SharePoint – US English)
3. Within \1033, open the file ‘SPTHEMES.XML’ in NotePad. This file determines the list of themes displayed under Site Settings – Site Theme
4. Within SPTHEMES.XML, you need to add a ‘templates’ reference for your new theme. Copy the entire contents of an existing template (starts and ends with the ‘templates’ tags into a new row within the file, and amend the properties to reflect your new theme
5. The tag ‘templateid’ must match the name of your theme
6. The tag’displayname’ is what will appear in the Themes list (can be more than one word)
7. Rename ‘thumbnail’ and ‘preview’ to ‘images/’newtheme’.gif’. Where ‘newtheme’ is the name of your new theme Note: You haven’t created this file yet, that’s coming in Part 2.
8. Save and close the file
9. Open a command line and run ‘iisreset’ to restart IIS and SharePoint
10. Open a browser and navigate to a site within your SharePoint deployment. Go to Site Settings Site Theme and your new theme should now be listed (with a missing image for preview and thumbnail)

That’s it. The first stage is complete. You have a fresh theme waiting to be modified to include your own style and formatting. The next stages are to modify the .css files, specifically theme.css (within your new theme folder) and core.css (affects all themes within your SharePoint deployment)

References:

• Custom site theme for MOSS 2007 and WSS 3.0 (site down at time of writing)
• Creating a custom theme for SharePoint 2007 (includes publishing version specific to MOSS 2007)

Good article written by Jakob Neilsen over on www.useit.com, discussing the history of the graphical user interface (GUI), and the reality that the current method of WYSIWYG (whizz-ee-wig: What You See Is What You Get) menus is going past its sell-by date. Jakob then discusses the work Microsoft is doing with the new Office 12 UI, and coins the term WYGIWYS (wig-ee-whizz: what you get is what you see). One of the main reasons Microsoft has decided to redesign the UI is that a ridiculous percentage of feature requests are for features already in the product, suggesting that people can’t find the tools they are looking for…

I fell into IT back in 1991, when Word Perfect led the word processing world (on DOS) and Lotus 1-2-3 was the spreadsheet to use (on Windows 3.x). In those days, a WYSIWYG menu was easier to access from the keyboard than the mouse. As a bit of a spreadsheet queen, I could update a formula, format the results and send the file to the printer in less time than it would take to move your hand over to the mouse. When I discovered macros, it just got easier You entered the commands once inside curly {} brackets, assigned a short-cut key and hey presto! Those were the days…

As desktop applications developed, it became more difficult to stick with the keyboard – so many extra key strokes were required, it was easier to just use the mouse. But the mouse was still not as efficient as those early days with the keyboard.

Radically changing the UI of such a well known application is a brave move. I’m still a bit of a spreadsheet nut, and when I first saw the O12 UI demonstrated… well… I hated it. Sure, the actual demos using data then looked very cool, but my initial reaction, when Excel was first opened, was Yuk! I was pretty disappointed with myself – I’m normally the one advocating change and here I was, hating the thought of it… So, with an Excel 12 phobia rapidly developing, I installed the code last week (note: the code is not publicly available, I work for Microosft). With trepidation, I launched Excel…. yup, same reaction. I absolutely hated looking at it. Bring back my menus I thought, I want my customised toolbar. I started to enter some data, started experimenting with formulas to play with the new visualisation capabilities (very slick), but still there was some serious animosity towards the new ribbon that has replaced my beloved menus… and then I closed Excel. I just didn’t want to play with it any more. This is the worst reaction I have ever had to a new software feature.

Why am I writing about all this? For one simple reason. I will learn to love the new UI, and when I do, I’ll find it easier to work with Excel than before, and I’ll wonder why I had such a problem with it in the beginning. But I need to remember and record this initial reaction, because I know I’m going to see it again, in the not-to-distant future. I’ll be analysing my own learning curve hopefully to make it easier amd smoother when others react like I did. Conveniently, my mom’s a bit of spreadsheet queen too, so I’ll have a volunteer to test the process on.

Back to those early days… In 1993, the company I was working for decided to switch to none other than Microsoft Word, and I was tasked with migrating the secretaries from Word Perfect (v5, still running on DOS – that’s the old blue screen version, for those who remember it). Well… Hell hath no fury like a secretary losing a customised Word Perfect menu system. You would have thought I was forcing them to switch to stone tablets. They absolutely hated Word, with a passion. I remember spending an entire weekend migrating their blessed menus, macros and short cuts to the nearest equivalents I could muster in Word. And my name was still mud for at least 6 months! I couldn’t go near one of them without receiving a lecture about why I was ruining their ability to work, how much longer it was taking them to do anything, how awful this weird GUI thingy was, yade, yade, yade. The list went on and on… But they did finally get used to it, and then they started to do stuff they couldn’t do before. When, 2 years later, it was everyone else’s turn (email had arrived and the need to swap files led to standardising on Microsoft Office – let’s not start that argument), they were the advocates who helped train everyone. Oh how they would laugh if they could see my reaction today. I seem to recall I wasn’t too sympathetic to their cause at the time…

Moral of the story: When we don’t think or realise a system is broken, we will be incredibly reluctant to change it for something unfamiliar, no matter how reasonable the argument for change is. Understanding that feeling makes working through it a whole lot easier…