If you are using SharePoint Designer (SPD) to create a master page file that will then be placed on the web server for use, such as with a custom site definition or custom Feature, you may run into the following error when viewing or creating a new site:

Cannot convert type 'Microsoft.SharePoint.WebControls.ScriptLink' to 'System.Web.UI.IAttributeAccessor' 

This may be caused by the method you used to get your custom master page file out of the content database. If you used the Export feature in SPD (File --> Export --> File), SPD will add in a bunch of code that only SPD knows how to properly read and process.

For example, if you look at the HEAD area of your master page file in SPD, you will probably see something like:

<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
 <SharePoint:CustomJSUrl runat="server"/>
 <SharePoint:SoapDiscoveryLink runat="server"/>
 <SharePoint:CssLink runat="server"/>
 <SharePoint:Theme runat="server"/>

After you export the file, if you look at the code in Notepad, now the code looks like this:

<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server" __designer:Preview="&lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;/_layouts/1033/init.js?rev=ck%2BHdHQ8ABQHif7kr%2Bj7iQ%3D%3D&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;/_layouts/1033/core.js?rev=S5dt4K8TJGVTYU9HrW6enw%3D%3D&quot; defer&gt;&lt;/script&gt;
" __designer:Values="&lt;P N='Language' T='javascript' /&gt;&lt;P N='Name' T='core.js' /&gt;&lt;P N='Defer' T='True' /&gt;&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl01' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
 <SharePoint:CustomJSUrl runat="server" __designer:Preview="" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl02' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
 <SharePoint:SoapDiscoveryLink runat="server" __designer:Preview="&lt;link type=&quot;text/xml&quot; rel=&quot;alternate&quot; href=&quot;/_vti_bin/spsdisco.aspx&quot; /&gt;" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl03' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
 <SharePoint:CssLink runat="server" __designer:Preview="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/_layouts/1033/styles/core.css&quot;/&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/_layouts/1033/styles/mystyles.css&quot;/&gt;
" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl04' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
 <SharePoint:Theme runat="server" __designer:Preview="" __designer:Values="&lt;P N='Name' R='-1' /&gt;&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl05' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
 

When the master page file is placed on the web server and used, it will generate the error listed above.  To fix this issue, don't export out the file from SPD.  Instead just copy the code from SPD to an empty text file outside of SPD and then name it appropriately (mysite.master).

In some cases, when you do a manual code copy like this, control template paths are altered and that will need to be fixed prior to using the file.  It is always a good practice to double check this when you take your code out of SPD.  Look at the page directives in the top of the file, and ensure that a tilde and forward slash are present in the path(s):

<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>

Per some feedback, I added instructions to my latest branding article on how to create rounded corners for a web part title bar.  

» Part 3: Changing the look and feel of SharePoint components - Intro and Web Parts

I have posted the next article in my branding series, which is a follow up to Part 1: Designing your SharePoint site, and Part 2: Creating the Design in SharePoint.

» Part 3: Changing the look and feel of SharePoint components - Intro and Web Parts

The next installment (coming very soon) will cover changing navigation systems in SharePoint.

I have posted a large update to my SharePoint 2007 CSS reference chart.  In addition to adding some new styles and tips, I have added "Copy to Clipboard" functionality that will copy the CSS source code for the given style to your clipboard, so you don't have to chase down styles by looking up line numbers.  Instead you can just do a copy, paste into your CSS file, and make modifications from there.

The only section I did not do this for was the calendar, because I have previously posted all the calendar styles in a clean, condensed CSS file for your use.

Enjoy!  As with anything, there may be a mistake or two.  If you do a copy and it is not the correct style, please let me know.

» CSS Reference Chart for SharePoint 2007

In my sessions last week I stressed the importance of learning about content types, and really stressed the importance of learning CSS.  I have had several people ask me for some suggestions for resources for both of these topics.  If you have a resource or a book you just love that I don't mention here, please post a comment about it for everyone's benefit.  Also, someone at the conference told me about this stellar CSS book, and I can't recall the name.  If that person was you, please let us know the CSS book you mentioned to me. Thanks!!

Content Types

• Introduction to Content Types on MSDN
• Plan content types (Office SharePoint Server) on TechNet
• What Are Content Types, Anyway? blog post by Andrew May
• Content Type Technical Posters for Download by Andrew May
• Creating and Using Content Types in Windows SharePoint Services 3.0 screencast on Channel 9 by Ted Pattison
• What are Content Types? blog post by Martin Kearn

CSS

• CSS: The Definitive Guide
• CSS Mastery: Advanced Web Standards Solutions
• Beginning CSS Web Development: From Novice to Professional
• CSS: The Missing Manual
• Transcending CSS: The Fine Art of Web Design

First off, thanks to everyone who attended my sessions and who stopped by the SharePoint Experts booth and said hello. I got to meet a lot of people last week and it is very exiciting to see the huge interest in SharePoint branding.  Thank you so much for all of the positive feedback and comments.  Last week was a great week, if you didn't make it, be sure to try to go next year.  :-)

I have posted my slide decks from my two presentations on my Speaking page, and below are direct links to download the ZIP files.  I will be presenting my Intro to Branding session again at TechEd 2008 Developer Conference, and a version of it at the TechEd 2008 IT Professional Conference.  

Cheers!

» SharePoint Tools for Style: How to Start Branding SharePoint
» SharePoint Tools for Style: Advanced Techniques for Branding SharePoint

He may be new to blogging, but he is definitely not new to SharePoint. I am very happy to say that SharePoint Experts Director of Implementations and Senior Trainer Matt Passannante is now blogging! 

Matt is a fantastic guy with an infectious enthusiasm about SharePoint. He really knows his stuff and has unique and solid theories and ideas about how to map out and set up SharePoint.  He will also be at the SharePoint Conference next week, so be sure to stop by and meet him at the SharePoint Experts booth (#710) or check out his session about MOSS deployment on Monday at  1pm in 606-609.

Welcome Matt!  http://www.sharepointblogs.com/matt 

Well like all things in life, time is zipping by and now the SharePoint Conference (SPC) is already upon us!  If you are heading to Seattle next week, be sure to stop by the SharePoint Experts Booth, Ask the Experts lunch, Game Night and/or one of my sessions and say hello.

Our whole crew from SharePoint Experts will be presenting, including Dustin Miller, Todd Baginski and Matt Passannante. We have a booth (#710) and of course we have some very cool vendor swag, so be sure to stop by.  SharePoint Experts is sponsoring the Ask the Experts lunch on Wednesday from 11:30 - 1:00 PM PT and Game Night on Wednesday night from 5:00 - 9:00 PM PT.

I have (sudo) back to back presentations about branding. Both sessions are on Wednesday, March 5th:

SharePoint Tools for Style: How to Start Branding SharePoint
6ABC, 10:15 AM - 11:30 AM
You have a site design and your trusty copy of SharePoint Designer, but now what? In this session, we cover SharePoint branding concepts and benefits and show step by step how to create a custom master page using Microsoft Office SharePoint Designer.

SharePoint Tools for Style: Advanced Techniques for Branding SharePoint
6ABC, 1:00 - 2:15 PM
SharePoint branding can be flexible, fun, and frustrating all at once. During this session, we do a deep dive into the details of branding and look at how to handle CSS, multiple designs, navigation styling and manipulating content placeholders. We also address branding other SharePoint elements such as application screens, My Sites, and Blogs.

I look forward to seeing you there!

Want to go to Disneyland and learn about SharePoint? Our next public SharePoint Bootcamp just went on sale for May 12-16, 2008 at the Hyatt Regency Orange County Hotel in Anaheim, CA.

Say Heather, what is SharePoint Bootcamp?   Several times a year SharePoint Experts hosts public classes in several different flavors for SharePoint.  In Anaheim we will be hosting the Original SharePoint Bootcamp (taught by Dustin Miller), the SharePoint Development Bootcamp (taught by Todd Baginski) and the SharePoint Branding Bootcamp (hey, taught by me!).  We have a laid back atmosphere, we feed you like crazy, and we give away cool stuff. :-)

If you sign up by March 1st, you can get the discounted rate of $2,500. After 3/1, the rate is $2,800.  Don't delay! Classes fill up FAST.   And it is a great time of year to visit the area and plenty of things to do after you max out on SharePoint during the day.

Learn more and buy tickets

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

I got asked by two separate friends of mine just within a few days of each other if I had any recommendations for what DOCTYPE tag should be used in SharePoint.  Honestly up until that point, I had not put a lot of thought into outside of the attitude of look up whatever A List Apart recommends and use that.   So I delved into it a bit more and now I do have an opinion on the matter.

A little info first, DOCTYPE is short for Document Type Declaration. A DOCTYPE associates a web page with a Document Type Definition (DTD).  The DTD is the definition of the particular version of HTML or XHTML you are using in your site and is what will be used for rendering of the web page.  For DTDs, there are generally 3 types, strict, transitional and frames.

Strict means there isn't presentational elements in your code, such as formatting and alignment.  Instead everything has be to controlled separately in the CSS.   Transitional allows both CSS and presentational elements in the code.  Frames, well is for frames and if you are still using those we need to chat.   :-)

Based on your DTD and what browser you are viewing your site in, your page will render in Standards mode or Quirks mode.  Standards mode renders the page based on the DTD you defined. Quirks mode will render the page the best it can while emulating older browsers.  If you don't define a DTD to use, the browser will default to Quirks mode. 

So what about SharePoint?  First off, note that default.master does not specify a DTD! The publishing master pages (blueband, blackband, etc) use the HTML 4.0 Transitional DTD that renders in Standards mode.

For my base master pages, I put in a DOCTYPE that uses the HTML 4.0 transitional DTD that will render the site in quirks mode.   Why?  It is the lowest common denominator and appropriate for the general use of the master page.  This is not to say this is the DTD you should be using for your site.  Ultimately, you need look at the site's target audience and purpose and select a DTD based on your individual site needs.

However, I do think Transitional DTDs should be used since there is a lot of rendered code with out of the box SharePoint that you don't have control over, therefore your page will have presentation elements in the code and not solely use CSS for formatting.  That and Transitional is best when you use tables for page layout.   Tables vs. CSS positioning wars aside, out of the box SharePoint makes heavy use of tables for layout so stick with the transitional DTDs.

I personally don't use the XHTML DTDs because I have yet to see justification for using them, and I get a bit worried about the fact that XHTML 1.0 won't be supported in XHTML 2.0 and vice versa.  It seems to me if you go with a XHTML DTD, you are limiting yourself.  But again, this goes back to what does your site need, not what makes me nervous.

Another important thing about DTDs, is you need to select one BEFORE you delve too deep in developing your user interface.  The DTD you specify in the DOCTYPE tag will affect how your page is rendered, so don't write a bunch of HTML and CSS and then apply or change the DTD, many of your page elements could go out of whack and you will have to rewrite some of your code.

Here are the two DTDs I think are best for SharePoint:

HTML 4.0 Transitional in Standards Mode (use this one if you can):
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.0 Transitional in Quirks Mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN">

Here are some additional resources:

• W3Schools DOCTYPE Definition and Usage
• FAQ: Choosing the best doctype for your site
• Doctypes and their respective layout mode
• Fix Your Site With the Right DOCTYPE!
• Using the DOCTYPE Tag
• Why XHTML? Or, Why not HTML?
• Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

UPDATE 1/25/08: Well DOCTYPES must be in the air, Waldek Mastykarz just posted about DOCTYPEs as well, and recommended the use of XHTML 1.0 Strict or Transitional DTD.  He talks about his reasonings and the benefits, drawbacks and challenges with this approach.  For a different viewpoint, read his article here.

I have updated my Base Master Pages again, this time changing or adding the DOCTYPE tag in each.  Please note that the base master pages include the HTML Transitional DTD that will display your site in quirks mode.  Please replace the DTD if you need a more refined presentation mode for your site.

I selected this DTD because it can assist the broadest audience (older browsers, mobile views, newer browsers, etc).  If you want to use a standards compliant presentation mode, you can switch the DOCTYPE to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

For more info about DOCTYPEs, check out the info at W3Schools.

Please note that there has been two typos in my Base Master Page file.  I have uploaded a corrected version and it is available on the Base Master Page web page on my site.

Typo 1

In the HEAD area of the master page, the SharePoint tag pulling in the Theme was before the SharePoint tag pulling in all of the CSS files.  This resulted in overriding your custom themes with the default SharePoint CSS styles which meant you canceled out any Theme you applied.  In your existing master pages, make sure the following tags are in the HEAD in this order:

<SharePoint:CssLink runat="server"/>
 <SharePoint:Theme runat="server"/>

Typo 2

I had an extra closing DIV tag in the Quick Launch area after the SharePoint:SPLinkButton tag in the View All Site Content block of code.  This can cause you grief if you are working with DIVs in your master page since it could prematurely close an opening DIV tag.

Thanks and sorry!

I am reposting this post because Feedburner didn't pick it up....

I posted Calendar CSS code for SharePoint. Check it out here: http://www.heathersolomon.com/blog/archive/2007/11/20/SharePoint-Calendar-CSS--Clean-and-Condensed.aspx

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:

<!--- --- --- Edit Consoles --- --- --->
   <!-- Edit console that appears in page Edit mode -->
   <asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
    <table><wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/></table>
   </asp:ContentPlaceHolder>
   <!-- Publishing console control -->
   <asp:ContentPlaceHolder ID="SPNavigation" runat="server">
    <table><SharePoint:DelegateControl runat="server" ControlId="PublishingConsole"
       PrefixHtml="&lt;tr&gt;&lt;td colspan=&quot;4&quot; id=&quot;mpdmconsole&quot; class=&quot;ms-consolemptablerow&quot;&gt;"
       SuffixHtml="&lt;/td&gt;&lt;/tr&gt;">
    </SharePoint:DelegateControl></table>
   </asp:ContentPlaceHolder>
<!--- --- --- End of Edit Consoles --- --- --->

Going to SharePoint Connections in Vegas? If so, stop by the Coral Reef bar on Tuesday evening after the sessions.  Andrew Connell is hosting "SharePoint by Day, SharePint by Night" and it will be a relaxing, low-key op to chat with one of us poor SharePoint geeks or just throw back a drink with a few fellow friends.

AC has all the details on his blog, please go check out his post for more info.  See you there!

I have pulled together a list of items in SharePoint 2007 that may haunt your custom branding if you don't take special note to address it in the interface.   Often while branding SharePoint you can get wrapped up with just working with a single web page while changing your design.  There is a large application to worry about and this list will hopefully help you avoid bits and pieces of the old SharePoint look popping up on you after you are done branding SharePoint.

If there are other elements in this list that have caused you grief, feel free to share.

Page elements to double check while rebranding SharePoint

If you have no need or plans to use Meeting Workspaces in your SharePoint site, you can skip this. You can always come back and go through this in case you do decide to use Meeting Workspaces. For those of you who are planning on using Meeting Workspaces, this post is for you.

By default when you create a Meeting Workspace site, it uses it's own master page called the mwsdefault.master.  This file is stored in the Global folder in the 12 directory (12\Template\Global) on the SharePoint web server.  This master page has some different code than the other master pages in SharePoint and from any base, minimal or default master page you are using for your custom branding.  If you ever decide to apply a custom master page to a meeting workspace, some of the workspace functionality will seemingly disappear. See below for an example of this.  NOTE: If you are using a Theme or an alternate CSS file for your branding, you can just override the styles used by the meeting workspace.  This post is not for you.

So what do you do? You take a copy of mwsdefault.master and combine it with your custom changes to create a branded master page that provides meeting workspace functionality. You can then safely apply this custom master page to your meeting workspace site while keeping unique workspace navigation and functionality.

OK, how do I automatically apply the custom master page to meeting workspaces?  Yup, here is the crummy part.  By default your new meeting workspace site will default to use mwsdefault.master and not your custom file. You have a few options here for how to handle this:

1. Manually apply the master page every time you create a site.  Not an optimal solution unless you only have a few sites you will be creating.  This is definitely not a viable solution if you are allowing your content owners the ability to create their own meeting workspaces (through the SharePoint UI or Outlook).
2. Create a copy of the Layouts folder in the 12 directory (12\Template\Layouts) and then make your changes directly to the mwsdefault.master page file. In IIS you can change the virtual directory your SharePoint site uses to the new copy. This is a safer alternative then directly editing the master page file on the server.  If you ever have any issues with your SharePoint site, you can easily switch the virtual directory in IIS to use the original Layouts directory.
3. Use a Feature to automatically set Meeting Workspaces to you your custom master page file. For this you will need a developer and knowledge on how to create Features and do Feature stapling.  I would suggest this as the best practice approach to solving this issue.

Meeting Workspace example:

1. Create a meeting workspace, in this example I created a Multi-page Meeting Workspace.
2. The Multi-page Meeting Workspace has 'Home/Page 1/Page 2' tabs across the top and options under Site Actions to Add Pages and Manage Pages. See a screenshot.
3. If you go into the Master Page Settings for the site, a warning message tells you that the master page setting is currently invalid (a.k.a. it isn't even using this master page) and the master page is "seemingly" set to default.master (or whatever master page you have set for the inheritance). See a screenshot.
4. Change the Site master page setting to default.master (or your custom master page file).  We are setting the Site master page (as opposed to System) because the content page (default.aspx) for the Meeting Workspace points to the custom master page field value in the database. Custom is the same as the Site master page setting.
5. Return to the meeting workspace. The 'Home/Page 1/Page 2' tabs across the top and options under Site Actions to Add Pages and Manage Pages has disappeared.  The reoccurring meeting navigation area has appeared, despite this meeting not having multiple instances. See a screenshot.

I got asked a question I have never heard before, so I decided to post a reply here.

Q: Can you turn a SharePoint master page into a theme?

A: Depends. I know, awful answer, but it really does depend on what you have done in your master page.   Master pages control more design elements than a theme does.  So depending on how you created those changes, they may or may not translate over to a theme.

SharePoint uses a set of CSS styles.  Some of those styles are referenced in the user controls like Search.  Some of the styles are referenced in the navigation, like CssClass in the the AspMenu control.  Other styles are assigned to HTML table tags that contain and organize elements in the SharePoint web page.

If you created new styles to override existing SharePoint styles for the user controls or the navigation, those can easily be transported over to a theme.  If you created new styles to override existing SharePoint styles for the container tables, then those can easily be transported over to a theme as well.   But if you used different HTML and CSS styles in your master page to layout your web page, then that is where you may run into a problem taking that into a theme.

A theme merely re-skins a master page. Note I didn't say re-skins SharePoint. It can update the colors and images used in the master page, no matter if the master page is one that ships with SharePoint or a custom master page you created.

So you can essentially create a custom master page with all your own styles, then create theme(s) for your custom master page that changes colors and images.  Nice thing about themes is that it bleeds over and affects the application (_layouts) screens as well.

So ultimately, the answer to whether or not you can take your master page and create a theme really depends on what is in that master page and what master page will be assigned to the site when you apply the theme.  Don't forget that whether you want to use a master page or not, the SharePoint site will use one no matter what, be it the default one it ships with, or a custom one you create.  

Here are a few scenarios to help illustrate what we are talking about.

Scenario 1:  You made edits to Core.css or created a custom CSS file and tweaked the look and feel of the default SharePoint site.  Maybe you added a few custom elements in the master page, but for the most part the master page being used is largely based on default.master.   Now you want to create a theme for the changes.
Can you do it? Yes, you can create a theme out of your image and CSS changes.  Keep your master page changes in the master page.

Scenario 2: You created a custom master page and it doesn't look anything like default.master.  You have new HTML, new CSS classes, and some edited SharePoint styles to change the branding of the user controls.  Now you want to create a theme that recreates these changes that you can then use on other SharePoint sites. 
Can you do it? No, this will not work! You will only get a piece of the branding transferred over to the theme.

Scenario 3: You created a custom master page and it doesn't look anything like default.master and you want to create variations of this design by changing colors and images (maybe for departmental or divisional areas of a site). You think a theme can create that variation.
Can you do it?  Yes! Themes are a great way to create color and image variations for a master page.

Ticket sales have opened for the next public offering of SharePoint Branding Bootcamp (taught by me) and the SharePoint Administration Bootcamp (Matt Passannante is the Admin instructor and he is fabulous!!).  Get info and tickets here: http://www.sharepointbootcamp.com/schedule.htm.

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.

Part 2 of a multi-part series, in this article I cover site design implementation options (a fancy way to say master pages, themes and CSS) that you have for implementing your site design in SharePoint 2007.

Branding SharePoint - Part 2: Creating the Design in SharePoint

Part 1 of this series is: Branding SharePoint - Part 1: Designing your SharePoint Site

Thanks to everyone who has patiently waited for dates for upcoming SharePoint Bootcamps. A schedule for the rest of 2007 and all of 2008 is now posted on the SharePoint Bootcamp site: Full Bootcamp Schedule.

The SharePoint Branding Bootcamp will be offered in Houston (whoo-hoo, my home town) in December 2007, and again in these lovely cities in 2008:

• Anaheim, CA - April
• Las Vegas, NV - July
• Washington D.C. - September
• Chicago, IL - November

Tickets for the Houston Bootcamp in December go on sale VERY soon! Please sign up for the SharePoint Bootcamp mailing list (we promise, no spam) at http://www.sharepointbootcamp.com/mailing_list.htm to be notified when tickets go on sale, and I will also post that info here on my blog.

Houston is not always on everyone's list of top places to visit, but trust me, we got a lot of cool stuff! Between shopping, stellar restaurants, NASA, the beach, and fantastic museum and theater districts, you will find plenty of great things to do. And did I mention the food?  Seriously folks, we know how to cook here. And despite some beliefs, we are not brown and dusty with tumbleweeds, that is another part of the state.  Houston is near the coast and is very green.  In fact we are a lot like Orlando. Class will be held in a trendy spot in town with plenty of choices for local entertainment, live music and a great place to eat every night of the week. The weather is nice here in December, escape chillier temperatures up north and enjoy balmy 60's in the south.

Stay tuned for more info to come.

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:

<td valign="middle" class="ms-globallinks">
   <wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
   </wssuc:Welcome>
</td>

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">
   <!-- Welcome Menu -->
   <wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
   </wssuc:Welcome>
</div>

Look at a sample screenshot.

Part 1 of a multi-part series about how to brand SharePoint sites.   In this first segment, I talk about gathering design resources and having a little SharePoint know-how before you dive into creating designs for your SharePoint site.  The next part will address how to start your code for your final design.

Branding SharePoint - Part 1: Designing your SharePoint Site