SharePoint: Tips

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>

SharePoint 2007 Design Tip: Using Background Images in your Site Design

Heather Solomon — Thu, 27 Sep 2007 17:24:22 GMT

A common trick in CSS design is to set a background image in the body tag for a site that contains a lot of the graphic elements of a site. This is often used to create colored columns and bars in CSS only design. See a screenshot. For example:

body {
background: url("myimage.gif");
}

When you do this in SharePoint, the background image will also appear in the Rich Text Editor used in the Content Editor Web Part. See a screenshot.

You can fix this issue pretty easily. Add a DIV tag around your page contents, and set the background for the DIV to the image that you need to use. Then, in your CSS code, specify both BODY and the class/ID for the DIV:

body .MyDiv {
background: url("myimage.gif");
}

Notice the space between body and .MyDiv! This is a contextual selector, only the tag with the class name of MyDiv in the Body tag will be affected.

Now the image will appear in your page, but not in the Rich Text Editor. See a screenshot.

Some notes... if you add a class or ID name to the BODY tag and reflect that in your CSS, it will not fix the issue. If you just move the image to a DIV wrapper and specify the image, it will not fix the issue. It is the combination of the image being in a wrapper, and body + the wrapper being specified in the CSS file that fixes the problem.

SharePoint 2007 Design Tip: Welcome Menu Arrow Display

Heather Solomon — Mon, 17 Sep 2007 21:25:16 GMT

While working with the Welcome menu in your SharePoint site (the drop down menu with the options to sign in as a different user, log out, etc) if you strip the menu out of the table that the SharePoint default.master page uses, the arrow that appears to the right of the Welcome menu may drop down to be level with the baseline of the welcome text.

SharePoint default.master code:

You can correct this by adding a font-size attribute to the wrapping container you use to place the menu in your custom master page:

(CSS Code)
.Custom-WelcomeMenu {
font-size: 8pt
}

(Master page code)
<div class="Custom-WelcomeMenu">
   
   <wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
   </wssuc:Welcome>
</div>

Look at a sample screenshot.

CQWP: It is a MOSS feature!

Heather Solomon — Tue, 15 May 2007 15:39:20 GMT

For those of you that I have confused in the past, my deepest apologies. I posted something some time ago about the Content Query Web Part (CQWP) and I need to clarify that the web part is a MOSS feature and is not available in WSS sites that are hosted on a server that only has WSS v3 installed.

Now if you have a WSS site hosted on a server with MOSS installed, the CQWP will be available to you. It is a rather handy web part and I highly recommend you check it out. Here is some info about it.

SharePoint Tip: How to Activate the Drop Down Menu in MOSS Sites

Heather Solomon — Tue, 15 May 2007 15:31:47 GMT

MOSS 2007 sites can display drop down menus in the tabbed navigation across the top. Unfortunately there is not an easy check box to activate this functionality, instead things just have to be set up the right way. If you want your MOSS site to show drop down menus, make sure the following is true or walk through the following steps:

From the root of the parent site (Home) choose to create a new site (Site 1). Once that site is created, you will be in that new site. From here choose to create a new page.
Once that is created, choose to create another new site (Sub Site 1). Then create a new page in Sub Site 1.
Your site structure should resemble this, see structure.
For each site in the Navigation settings, both Show Subsites and Show Pages should be checked.
- Select Site Actions - Site Settings - Modify Navigation.
- Check Show subsites and Show pages in the first row. See sample.
The end result would be a tab in the horizontal bar for Site 1, with a vertical drop showing Sub Site 1. See sample.

The navigation shows sub sites under the parent and published pages at the parent. Pages for one site are stored flat in a single library. If you want the navigation to show 2nd level sub site pages or 3rd level sub sites under the 2nd level, you need to make a very minor tweak to the master page that the site is using.

Using SharePoint Designer (SPD), open the master page being used by the site. Warning! Making edits to this file will customize the file, a.k.a. unghost it. Don't worry you can always undo this action.
- In SPD, navigate to _catalogs/masterpage/*.master
- How do you know which master the site is using? In the site, go to Site Actions - Site Settings - Modify All Settings, then choose Master page under the Look and Feel column. Check which master page is selected in each drop down.
In the master page file, search for SharePoint:AspMenu.
- You will more than likely have more than one instance of a menu control. Look at the IDs to find the right navigation control for what you want to edit. They are intelligently named, you will be able to sort out which one you need. For default.master, look for ID="TopNavigationMenu".
In the properties for the tag, find MaximumDynamicDisplayLevels="1". Change the number from 1 to 2.
Save the file and publish the master page (do this from SPD, Manage Content and Structure, or the Master Page Gallery).
Refresh your browser. Now when you mouse over Site 1 - Sub Site 1, you should see another level of navigation pop up. See sample.

Cool, ehh? Please don't abuse this dynamic display level. As tempting as it is to provide instant access to something 5 levels deep in your site, drop down menus notoriously aggravate end users. I highly recommend using no more than 2 levels (what we set in this walk through).

SharePoint Tip: How to specify a Theme

Heather Solomon — Fri, 11 May 2007 21:52:13 GMT

WSS v2 made use of Themes, a package of CSS and images that changed the look, or skin, of a WSS site. New with MOSS 2007, Themes can also be used for MOSS sites as well as WSS v3. Below are the steps to set a Theme for your MOSS 2007 or WSS v3 site:

In your site, select Site Actions, then Site Settings.
- MOSS sites, select Modify all Site Settings.
Under the Look and Feel category, select Site Theme.
Select a Theme, and select Apply.

SharePoint Tip: How to tell if your WSS site is on a WSS only install of SharePoint

Heather Solomon — Fri, 11 May 2007 21:41:13 GMT

I often come across confusion around branding options and navigation customizations for WSS v3 sites. One of the first questions I ask is if the WSS v3 site is on a server with only WSS v3 installed, or is it on a server where MOSS 2007 has also been installed. This often adds to the confusion.

In addition to the differences between MOSS 2007 and WSS v3, there are differences in WSS sites depending on if the host server also has MOSS 2007 installed. In regards to branding and navigation, WSS sites NOT on a server with MOSS do not have the option to set a Master Page in the Site Settings, nor can they have drop downs added out-of-the-box to the tabbed horizontal navigation.

You can easily check to see if your WSS site is hosted on a server with MOSS installed by checking the Site Settings for the WSS site.

Go to Site Actions - select Site Settings
Look under the Look and Feel category. If you see:
- Top link bar, you have a WSS site on a server with only WSS installed.
- Master Page and Navigation, you have a WSS site on a server with MOSS installed.

Click here to see a screenshot of a stand-alone WSS site.

Click here to see a screenshot of a WSS site on a server with MOSS. All Site Setting differences have been marked.

For WSS only servers, you will have to set a custom master page for the site using SharePoint Designer. For drop down navigation, you will need to add a custom navigation solution to your master page.

As a side note, another user interface difference between the two is the Content Query Web Part (CQWP). The CQWP is a component of MOSS, so it is only available on WSS sites hosted a server with MOSS installed. Click here for info on how to customize the CQWP.

All Day Event Width Display Fix for Master Pages Using DOCTYPE

Heather Solomon — Wed, 21 Feb 2007 16:02:00 GMT

If you specify a HTML 4.0 DOCTYPE tag in your master page, the Calendar control will present a couple of issues. First, Appointments in Week View that are longer than a 1/2 hour block, will not expand down to fill the appointment area. Second, the All Day Event marker in Month View will push past the right border. Click here to see examples.

I don't have a fix for the first issue. I have tried every hack and workaround that I could think of or find to force the height of the appointment, but to no avail. I do however have a fix for the second issue.

In your custom CSS file, add the following style:
.ms-cal-workitem .contB, .ms-cal-muworkitem .contB {
width:95%;
}

This will reduce the width of the All Day Event marker, bringing it back within the constraints of the day borders.

Customized SharePoint 2007 Search Center Width Workaround

Heather Solomon — Tue, 30 Jan 2007 17:27:00 GMT

In SharePoint 2007, you may run into display issues with the form fields for Search Center when you apply your custom Master Page. I am not referring to the Search inputs usually located in the header area, but the actual Search Center site (http://site.com/SearchCenter) and the search area located near the top of the page under the horizontal navigation.

I have an easy workaround for this issue, read about it here.