SharePoint: Tips

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.

SharePoint 2007 Design Tip: Import your CSS for SharePoint Themes

Heather Solomon — Wed, 30 Jan 2008 22:33:13 GMT

One of the major drawbacks of SharePoint themes is you have to reapply the theme to any site that uses your custom theme in order to see any new changes that you have made. This happens because when you apply a theme to a SharePoint site, a copy of the theme is added for the site in the content database.

Try it out, open a test site in SharePoint Designer and look at the folder structure in the Folder List task pane. If you have already applied a theme to this site, you will see a _theme folder. If you have not applied a theme to this site, then this folder will not appear. Expand the folder and you will see a single sub folder named the same as your theme. Now go and change the theme the site uses through a browser. Return to SharePoint Designer and hit F5 to refresh the Folder List. The _theme folder will appear if you didn't have a theme applied the first time, and the sub folder under this directory will change to reflect the theme you just applied.

When you make a change to the theme files on the web server, it does not update any copies of the theme that live in the content database. When you apply a new theme in the browser, it replaces the copy in the content database with a new theme. That is why you have to physically reapply a theme when you make changes, you have to replace the theme copy in the content database.

From a development perspective, the theme copy in the content database is rather handy. If you update any of the files in the content database (by changing the CSS files in SharePoint Designer and importing in new images), the changes automatically appear in the browser. Woo-hoo! This just made life easier when it comes to developing themes.

But after you finish up development, you are stuck back with the problem of how to update your theme in the future, especially if it is applied to several sites. This is where this trick comes in.

Import CSS to Create Editable Themes

Create a copy of the final theme.css file and store it in another location on the web server, such as:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\YOURCUSTOMFOLDERHERE
You can even rename the file, it no longer needs to be named theme.css.

Open the original theme.css file in the custom theme folder, delete out all of the contents, and add an import rule for your new CSS file:
@import "/_layouts/1033/styles/YOURCUSTOMFOLDERHERE/theme.css";

Save the file and deploy your theme (add text to SPTHEMES.xml and reset IIS). Apply your new theme to the site. Now go to the new CSS file in the Styles folder and make a change. Refresh your browser. Your change will appear. That is cool.

By moving around your files and using the import rule you can create a theme that you can update without reapplying the theme to every site that uses it. Be sure to update your image paths in your CSS styles to a location where you can edit the images as well, such as:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\YOURCUSTOMFOLDERHERE

Below are a couple of screen shots for the end result of this method.

View of the file structure on the web server

View of the theme folder and the theme.css file that is still in the theme folder

SharePoint 2007 Design Tip: Edit Consoles Throw Off Your Design

Heather Solomon — Thu, 25 Oct 2007 16:10:06 GMT

If you are working with a SharePoint master page and trying to get away from using the multiple tables that the default master page uses, the edit consoles (WSSDesignConsole and PublishingConsole) may create problems for you.

The issue: The WSSDesignConsole and the PublishingConsole are user controls, which means that the interface code for the consoles is stored outside of the master page and is locked down. The interface code for these consoles starts off with a table row tag (<tr>) and not a table tag (<table>), so the potential end result is your master page rendering differently than what you have specified in the master page code. The consoles may cause your table cells or rows to end prematurely, thus throwing off your design.

The fix: Inside of the content placeholder, add wrapping table tags (<table>) around the user control. Here is an example:

<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
    <table><wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/></table>
   </asp:ContentPlaceHolder>
   
   <asp:ContentPlaceHolder ID="SPNavigation" runat="server">
    <table><SharePoint:DelegateControl runat="server" ControlId="PublishingConsole"
       PrefixHtml="<tr><td colspan="4" id="mpdmconsole" class="ms-consolemptablerow">"
       SuffixHtml="</td></tr>">
    </SharePoint:DelegateControl></table>
   </asp:ContentPlaceHolder>