christine ibbitson's blog

SharePoint CSS Reference Guide

MSDN has a set of three articles to help with the customization of SharePoint Sites and Portals. Developers can learn ways you can customize a SharePoint site and an area; manage users, sites, and templates; change the structure of pages in a site; manage user access; and optimize style sheets.

Customizing SharePoint Sites and Portals: Using Templates and Site Definitions, Part 2 outlines how to create and edit a site using templates and site definitions.

Article three, Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3 provides a Web Part compatibility and style sheet class reference tables.

CSS dotted borders in SharePoint

One obstacle to over come in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders. To hack around this issue, create an image 2px by 2px with a single dot in the lower left corner.

Add the following rule to your stylesheet:

 

  .className {
                  margin: 0;
                  padding: 0;
                  border-bottom: 1px dotted #HexValueOfDot;
                }

Browsers, like Mozilla that are capable of implementing a dotted line will adhere to the above CSS rule. To apply the dotted line in Internet Explorer, add the following rule below it.

 

  * html .className {
                  background: url(/image/css-dotted-line.gif) repeat-x bottom;
                  padding: 1px;
                  border-bottom: none;
                  }

Internet Explorer requires a height value to apply the background image, however when you add height: 1px; Internet Explorer ignored the specified 1px. To work around this issue, the padding contains the height value therefore not allowing Internet Explorer to change the size.

CSS Browser & Opperating Rules Chart

To help your CSS to be cross-browser and platform compliant, Centricle.com has created a great quick reference chart that outlines CSS rules and if they are compatible to specific operating systems and browsers.

To assist readability of the chart, users can turn on an interactive highlight that changes the colour of the rules for the selected CSS rule results.

HTML Cheat Sheet

Dave Child of ilovejackdaniels.com has taken the time put together a HTML Character Entities cheat sheet listing the various character codes in HTML. The cheat sheet contains the actual code, the character itself and a description of the character. To learn more and download the sheet, visit ilovejackdaniels.com. It's available in PNG or PDF.

Designing in Black and White

The adage: If it doesn’t work in black and white it isn’t going to work in colour is a useful piece of advice when mocking up difficult design challenges.

When a design is arranged in black and white or various shades of grey, you are able to remove your focus from the colours and concentrate on the detail of the layout. How does each element on the page interact with one and other? Does the content placement follow the correct order of priority? Can the reader’s eyes easily move across the page?

Once your layout has met all your objectives, colour is added.

CSS Zen Garden

I am constantly amazed each time I visit CSS Zen Garden. Created by Dave Shea, CSS Zen Garden is a site that defines itself as "a demonstration of what can be accomplished visually through CSS-based design." The objective of the site is to provide a resource for designers to point out the benifits about CSS-based design.

The method is straightforward. Download the HTML and CSS and "modify the style sheet in any ways you wish, but not the HTML." The outcome is anything but ordinary. Each interpretation and modification of the style sheet is so different from the one before it and the one after it. Ideas seem to go for ever and ever.

It brilliantly illustrates that designers are only limited by thier own creativity. And how imformation with strict guidelines can be interpreted in so many ways.