SharePoint: Tips

SharePoint 2010 Blog is now live!

Heather Solomon — Wed, 21 Sep 2011 19:32:05 GMT

I am blogging about SharPoint 2010 in a new site: blog.sharepointexperience.com. Come check it out!

SharePoint 2010 CSS Chart is now live

Heather Solomon — Wed, 03 Aug 2011 20:13:36 GMT

I have posted a new CSS chart for SharePoint 2010. It has all of the same features as the 2007 chart, and then some. :) Check it out at http://spexp.me/csschart

Thanks everyone for your support!

Brand it baby! Buy tickets by Wednesday for my next branding class...

Heather Solomon — Mon, 20 Apr 2009 17:27:58 GMT

Themes? Master pages? CSS? Page layouts? Content customization? All covered next week in my SharePoint Branding Bootcamp in Anaheim, CA. You will get a lot of one on one time with me to work on your plans, designs and issues with your SharePoint sites. Check out more info in this post, or online at: http://www.sharepointbootcamp.com/sharepoint_branding_bootcamp.htm

Thanks!

Modifying the second level navigation arrow image

Heather Solomon — Mon, 09 Feb 2009 17:25:38 GMT

If you are working with the default navigation menus in SharePoint, you may come across the need to modify the sub menu arrow that appears to the right of the navigation text, see a screen shot: View image.

Usually the first thing you will do is a right-click -> Save Picture As... to grab the image name. But with this one you will get "WebResource.gif". Upon further inspection, you will find an image name in the page source and a JavaScript reference to WebResource.axd.

WebResource.axd is a .NET 2.0 function that allows you to embed resources such as images into your .NET project. Great. Not much help here then.

In order to alter this image, you just need to utilize an existing property in AspMenu (the navigation code that runs the SharePoint menu). This will require an edit to your master page, so if you are just using a theme, this approach will not work.

Open your master page. Preferrably a custom master page. :-)
Switch to Code View.
Search for "TopNavigationMenu". This should take you to the global navigation (top nav) instance of AspMenu.
Using Intellisense in the code view, or using the Properties pane, add the following property to the AspMenu tag:

DynamicPopOutImageUrl="insert image URL/path here"

So your code should look like:
<SharePoint:AspMenu
    ID="TopNavigationMenu"
    Runat="server"
    DataSourceID="topSiteMap"
    blah blah.....
      DynamicPopOutImageUrl="/images/myimage.gif"
    >

Here is a sample screenshot showing the address book icon in place of the arrow: View Image.

Thanks to Amit for posting this question to me!

Random Design Bits for SharePoint OTW....

Heather Solomon — Mon, 09 Feb 2009 17:01:55 GMT

I often sit and stare at the computer screen wondering what on earth I should blog about. I guess I work with SharePoint branding too much on a daily basis to have particular items stand out to me that say "Hey, blog me!". In an effort to get out helpful bits, I am turning to my blog comments. I unfortunately don't have time to address all the great comments people send me, but I have saved them all. I am going to start picking questions at random to answer here on my blog in hopes of helping out a few people here and there.

Thanks for all of your ongoing support. I can't express my gratitude for all the wonderful things people send me and say to me. You guys are the best... Heather

SharePoint 2007 Design Tip: Hide search on all application screens

Heather Solomon — Thu, 04 Dec 2008 16:14:03 GMT

Application screens (a.k.a. "_layouts" screens) usually don't display the search in the header. There does appear to be a few screens out there that do, and depending on your design for application screens, this may throw a wrench in how your page looks. To stop the search from showing in any application screen, add the following CSS style to your theme or alternate CSS file:

.ms-searchform {
display: none
}

SharePoint 2007 Design Tip: Gantt View with custom master pages

Heather Solomon — Mon, 10 Nov 2008 18:45:12 GMT

I recently discovered that your custom master page may affect the Gantt view of a SharePoint list. I have seen the colored task bars extend past the framed container of the chart when a custom master page and CSS is applied to the site. If this happens to you, you can try the following:

Systematically strip out the CSS and HTML to identify what code is causing the problem. Be sure to make backups of your files first.
Adjust the DOCTYPE tag that you are using. When this happened to me, I had to go way back and use the following DOCTYPE to get the Gantt view to show correctly: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

And finally, add this on to your list of items to test while developing custom master pages for SharePoint!

SharePoint 2007 Design Tip: Top toolbar display in Firefox

Heather Solomon — Mon, 10 Nov 2008 17:36:13 GMT

If you are working with SharePoint in Firefox, the top toolbar (Welcome menu, My Site, My Links) may not display correctly. Click here for a screenshot.

Add this to your CSS to correct this problem:

.ms-globallinks {
white-space:nowrap
}

This works in Firefox and won't wreck IE.

SharePoint 2007 Design Tip: Create a custom search input interface

Heather Solomon — Thu, 21 Aug 2008 17:03:08 GMT

A common request is to alter the default look of the search input and button area to something that better matches a design or fits better in space that is available. When working with the default search, you are limited to the CSS classes provided to you and the layout that ships with SharePoint. It is possible to create your own search display by deploying a Feature. Note I am not referring to search results, just the search box area available on most SharePoint pages, generally located in the header section.

MSDN documents this process and the code they provide will nearly work as is. There are two changes that need to be done to their code in order for the Feature to function on your web site. Below are the changes and a few other tips and resources to help you.

*** NOTE: This is to modify the basic search for WSS. MOSS uses another Feature for search (OsearchEnhancedFeature) and if you do the following actions, your custom scopes will not appear in the drop down box. If you are not using custom scopes, or if you don't want or use "All Sites" and "People" search scopes, you can use this method to adjust your MOSS search display. ***

Open up the MSDN article.
Complete step 1 and 2.
1. Note the HIDDEN property and value in the Feature tag. Make sure you change the HIDDEN value to FALSE. We need to show the Feature. :-) Thanks to AC for this tip. This is not required, but you will more than likely want to show this Feature in your site Features list.
2. Note the SCOPE property and value. This article has you set the Feature's scope to WEB, which is fine. But you will have to activate this Feature for every site (and sub site) that needs to use the new search area. Depending on your setup, this may not be ideal. Other options for this value are Farm, WebApplication, and Site. The first two are self explanatory, and Site means site collection. Web means a single web site.
Complete step 3.
1. Note the sequence value. For WSS, 99 will work. For MOSS, you need to lower the value to 20. Thanks to AC's book, Professional SharePoint 2007 Web Content Management Development: Building Publishing Sites with Office SharePoint Server 2007 (Wrox Programmer to Programmer) for this tip.
2. Note the two properties the article has you add in. For a full list of possible properties you can use here, check out the SearchBoxEx Members and look under Public Properties.
Complete step 4. Note that you can name the new file whatever you like, and store it in a sub folder. If you place the file in sub folder, you can easily identify your custom ASCX files and they won't get lost in the jumble of the default SharePoint files.
Step 5 is up to you. If you want to do the changes just like the article, follow this step. Otherwise, in your custom ASCX file, make any adjustments you like including dropping the table, using DIVs, adding custom text and images, etc. You can also specify custom CSS classes. Store your CSS properties in your site style sheet.
Complete steps 6 and 7. Note, if you set the scope to Farm, you don't have to activate the Feature. That happens automatically when you install the Feature.

That's it! In a relatively short period of time you can create a custom search display for your site.

Alternatively, John Ross has blogged about another method using JavaScript. Check out his post here.

I have found a few more resources online, here they are in case you want to learn/do more:
Project to customize the small search control in SharePoint 2007
Redirect Contextual Search Results to Search Centre Results Page
Search Results Page may be different per Search Scope

SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color

Heather Solomon — Fri, 25 Jul 2008 20:04:35 GMT

This is small, but gets me all of the time. When you are working with the Global Navigation (a.k.a. Top Nav Bar) in SharePoint and you are using 2 levels of flyout menus, the arrow that appears for the second level of items may show the wrong background color when you hover over the item or arrow.

As you start to alter the various colors and styles in the menu code, the background color behind the arrow does not reflect your changes or seem to pick up any styles from parent elements. Here is an example of this happening.

By default, the SharePoint menu code in the master page manually specifies a color for this hover effect:

<SharePoint:AspMenu ..... lots of properties.... DynamicHoverStyle-BackColor="#CBE3F0" >

You don't have to replace the color or specify a style, just delete the property and your colors will shine through.

<SharePoint:AspMenu ..... lots of properties..... >

This does require edits to the master page, there is no CSS class specified, so you can't change this with CSS only.