Useless Page Title

Better page titles in SharePoint

When working with multiple browser windows open its hard to tell one from the other because most SharePoint pages don’t offer a useful title. So in most cases you will see something like this (I am using the dreaded IE 6 unfortunately). As you can see most SharePoint pages only show the title of the page. On the home page of some sites the site name is shown as well.

Useless Page Title

Useless Page Titles

Ideally the page title should not only tell you the title of the page you are looking at but also what site you are on. Chris Coyier of CSS-Tricks talks more about different options in this post. After some experimenting I was able to get this working in SharePoint.

A Faster jQuery Preview Pane

A while back there was a post on by Paul Grenier that described how to use jQuery and the CEWP to make a preview pane.  I thought it was a very nice solution and worked better than the out of the box preview pane SharePoint uses.  

Too Much Code

The only issue is the preview pane solution is that in environments with slow internet connections the preview pane will be almost as slow as if the user actually broswed to the display form for the item.

Although its done through AJAX jQuery is still having to load the whole DispForm.aspx and then only displaying the contents of  a specific element.  DispForm.aspx when rendered through the borwser (like most pages in SharePoint) is very code heavy with over 700 lines of code ( An Announcement List item). Reducing the amount of code jQuery has to load from the diplay form will decrease load times and make everyone happy.


Gabe Hilado and I decided to try to make it faster. The simple solution is to make your own diplay form in SharePoint Designer. First we tried creating a blank .aspx page and putting the list view webpart on it.  The reduced the amount of code on the page but I wanted it to be even faster.

Styling the MOSS horizontal navigation menu

When you want to create a custom theme for a SharePoint site the top navigation menu is an important part of the design. Using the out of the box themes you can change the colors but if you really want it to look like a non-SharePoint menu it will take some work. In the standard sharepoint masterpage you will see the following code that defines the horizontal navigation. If you are not familiar with styling ASP server controls it can be somewhat confusing.


Dynamic Drive’s Featured Content Slider in Sharepoint

There is an updated version of this solution for SharePoint 2010 found here

I have used Dynamic Drive’s Featured Content Slider on a couple of recent projects and wanted to see if I could get it working in SharePoint. There were several key requirements:

  1. User can easily add items
  2. Users  can choose a style for each item
  3. Expired Items must not show
  4. Each item will have a Title, Body and a customizable “read more” link.

Here’s how I did it.

Dynamic Drive's Featured Content Slider in Sharepoint

Featued content slider


The list

First I created a custom list to store the slider items.  These are the columns I used:

  • Title – Single Line of text
  • Body – Multiple Lines of text
  • Link URL – HyperLink
  • Expiration – Date and Time (expired items will not be shown)
  • Image – Picture
  • Style – Choice  (we will use this column to allow users to choose the style of each item)

On the page I used a DataView WebPart to display the Title, Body, Image and Link URL columns.   Using Sharepoint Designer I setup filtering on the expiration date.  To do this in design view right click on the data view webpart and bring up the “Common Data View Tasks ” box and choose Filter.  In the window I set the conditional statement so that items would only be shown if the expiration date was greater than today.

Search Suggestions

Adding Suggestions to the Sharepoint search box

Search Suggestions

I got the idea for this from here: The idea is that by giving users suggestions of what they should be searching for they can be guided to the most important information. When I am searching for something many times I am unsure what what search terms will give me the best results.

To get started we will need a search box to work with.  The out of the box search box could work but I prefer to use the one mentioned here by Kyle Schaeffer because it gives me a lot more flexibility with the design.   

Adding references to the page head: the easy way

To add custom styles or functionality to a SharePoint page often requires including JavaScript or CSS files that need to be referenced within the <head> tag. Instead of adding these items to the masterpage and thus every page on the whole site it is better to just add them on only the pages that need them.

Many people use a hidden content editor webpart for this purpose but there is a second option. On each page layout there is a Content placeholder called “AdditionalPageHead”.

<asp:ContentPlaceHolder id="AdditionalPageHead" runat="server">


Anything placed inside this placehodler will be added to the head of the rendered page.

You can also create your own custom placeholders in the masterpage and page layout to allow you to add items to any part of the masterpage. For instance I have created a custom placeholder to insert webparts in the footer area of the masterpage.


Designing for IE6 means you must consider its lack of support for PNG transparency. There are many PNG hacks out there, I prefer this one from Unit Interactive Labs .  The problem with this one is that it has to read through the whole page searching for PNGs to fix which cna make load times noticable slower.  I was trying top find a faster solution when I remembered that SharePoint uses PNGs on some of its pages.

On the all items view of most lists Sharepoint uses a png image.  Built into the core code is a png fix that allows this image to work in IE6.  You can take advantage of  the built in png fix by using the  following tag:

<asp:Content ContentPlaceHolderId="YourPlaceHolderName"
<SharePoint:ViewIcon Width="widthInPx" Height="heightInPx" runat="server"></asp:Content>

The tag will need to be inside of a content placeholder tag.  You can name the placeholder whatever you want that makes sense.  The placeholder canb be wrapped in a DIV tag for positioning purposes.

The ViewIcon tag will require a width and height to render properly and will not work for background images.