SharePoint: Design

How to Create Rounded Corners for Web Part Title Bars

Heather Solomon — Wed, 09 Jul 2008 18:25:03 GMT

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

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

Heather Solomon — Wed, 09 Jul 2008 02:25:35 GMT

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.

Big Update to CSS Reference Chart

Heather Solomon — Wed, 02 Jul 2008 21:05:02 GMT

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

SharePoint Conference 2008 Wrap Up & Slide Decks

Heather Solomon — Mon, 10 Mar 2008 18:05:41 GMT

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

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

DOCTYPES and SharePoint

Heather Solomon — Fri, 25 Jan 2008 17:28:39 GMT

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:

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.

UPDATE 3/10/08: Randy Drisgill has tested SharePoint in the next version of Internet Explorer, IE8, and has a recommendation to include the meta tag that forces IE8 to render the web page based on IE7 parameters.
<meta http-equiv="X-UA-Compatible" content="IE=7" />

UPDATED: Base Master Page - DOCTYPE

Heather Solomon — Thu, 24 Jan 2008 17:40:48 GMT

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">

<!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.

UPDATED: Base Master Page

Heather Solomon — Mon, 10 Dec 2007 19:57:05 GMT

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!

SharePoint Calendar CSS - Clean and Condensed - Repost for RSS

Heather Solomon — Wed, 28 Nov 2007 06:06:51 GMT

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

SharePoint Calendar CSS - Clean and Condensed

Heather Solomon — Tue, 20 Nov 2007 17:20:03 GMT

One of the SharePoint branding tasks that I find rather frustrating is skinning the Calendar control. The control is already pretty complex with the multiple views and options for appointments, but add in the fact that every line and color block is run by its own style and you have the making of a bad branding headache.

I attempted to document many of the styles in my CSS Chart, but realistically it isn't feasible for me to document every single calendar style in that chart. Instead I have gone through and combined duplicate rules and commented the declarations so you know what styles are changing what elements in the calendar.

About the CSS Code

My version of the calendar CSS isn't the default blue, but instead in shades of gray. The CSS code references four images (on lines 95, 102, 110, 117) and uses the default image for the current day marker that OOTB SharePoint does (on line 129).

Click on the links to see screen shots of the calendar: Month View; Week View; Day View.

I am not suggesting you keep the calendar in gray tones, it is just what the code is formatted to do. Please take this CSS and run with it and customize it to your own color palette. And hey, if you want to share, let me know and I will post your CSS on my site (and give you credit).

Things to Watch Out For...

Themes

If you are using a theme, styles in the theme may override some of the calendar styles. If you are only using a theme, just list these calendar styles at the end of the file. If you are using a Theme with a Master Page, you may have to put these styles in the theme.css file, or store the calendar styles in a file on its own and import the file into both your master page and theme CSS files.

SharePoint Designer

SPD has a nasty habit of expanding combined duplicate rules. The fact that the rules are combined in this style sheet is what makes it so handy. The OOTB SharePoint calendar style sheet is so bloated mainly because the same styles are listed over and over. This version combines rules, making it a lot simpler to rebrand the calendar control. I haven't pinpointed when SPD expands out the styles, but I have opened and closed a CSS file several times, then the next time I open it all of the styles will be expanded. It is a royal pain. After you make your CSS customizations (and this goes for any CSS file) I recommend making a backup copy of the file and storing it somewhere so if SPD does expand out your styles you are covered and don't have to spend a lot of time combining them again.

Alternatively, don't even use SPD to edit your styles and instead use a CSS editor (like TopStyle) to make your changes.

Simplified Calendar

This calendar heavily uses combined styles, which means when you change a color for the horizontal lines, all of the horizontal lines will be updated. If you looking to specify a lot of different colors for the various components of the calendar, this version of the calendar styles is not for you.

Colors are in RGB Values

If you aren't used to using RGB values for colors in your CSS don't be alarmed by the RGB codes in this file. Just swap it out for named colors or HEX values if you would like to use that instead. For example:

border:solid 1px rgb(0, 0, 0);

change to...

borer: solid 1px #000000; or border: solid 1px black;

Enough already, how about the file?

Here you go. Zip file includes CSS file and 4 images. Make sure you add the images (if you plan on using them) and reference them correctly in the style sheet.

Download Heather's Clean Calendar CSS Code