Tony Stephens / Simian Design

I don’t like the default SharePoint breadcrumbs. They annoy me in multiple ways.  And I’m not alone in my disdain.

MOSS 2007 has two breadcrumbs that are included on the master page.  Not one, but two.  The Global Breadcrumb appears in the upper left of a default SharePoint site, and it shows the site levels as a person delves into a site.   A very high-level breadcrumb.  

The Page Level breadcrumb is also included on the master page, wrapped in a content placeholder.   This allows the master page to provide default information, but allowing the pages to replace that default content with it’s own.  If on the page level you empty out that content placeholder, you can zero out the Page Level breadcrumbs.  Annoying.

Heather Solomon has a great writeup on breadcrumbs (shocker), which is well worth a read.  I particularly like the demo image she provides showing the difference between the two main providers you can choose from.

The next challenge with the breadcrumb is the site map provider it uses.  There are several available in SharePoint, and two that are used predominantly for WSS and MOSS sites in the breadcrumb.   The problem is the WSS one is great for lists and libraries, and the MOSS one is great for publishing pages.  But they each are not great for the other. 

Breadcrumb with site map provider best for WSS: 
<asp:SiteMapPath SiteMapProvider=”SPContentMapProvider“ id=”ContentMap” SkipLinkText=”" NodeStyle-CssClass=”ms-sitemapdirectional” runat=”server”/>

Breadcrumb with site map provider best for MOSS (publishing sites):
<asp:SiteMapPath ID=”siteMapPath” Runat=”server” SiteMapProvider=”CurrentNavSiteMapProviderNoEncode“ RenderCurrentNodeAsLink=”false” CurrentNodeStyle-CssClass=”breadcrumbCurrent” NodeStyle-CssClass=”ms-sitemapdirectional”/>

The main issue with the WSS site map provider is it will show directories you don’t want it to (mainly the Pages library) in the breadcrumb, and on some pages it will show “.aspx” on the end of the page name. The MOSS site map provider is more graceful, it just doesn’t show the list or library name in the breadcrumb.

There is also a great collection of reference links at the bottom of the post as well.

Poolie Studios has a nice collection off icons that he uses to iconify links.  This process is a fairly lightweight, unobtrusive way to show what your links are.

a[href$=".pdf"] { BLAH BLAH } is the core of the it all.  This CSS selector object (easily done via jQuery for older browsers) allows you to showcase exactly what your links are.

I’m not 100% positive that this is always a good idea, but this is a nice collection of icons that fit the link sizes, and thus I’m linking it to you.

d’bug has a nice writeup on recreating the search field using CSS.

Normally I wouldn’t be a giant fan of changing the default input/form fields in a browser.  I think having those standards that everyone recognizes and know how to use is a powerful tool. Deviating too much from them is a risky proposition at times.   At least in my opinion it is.
But that being said, his end result is nice.  It seems to work.  And as a concept piece it’s cool. Go check it out.

Ok, two quick links today of useful pages that I ran across.

One is a LONG list of links that deal with building better forms. Web form basics, usability, accessibility, form design, form processing, validation, and generators are all covered.

The other is a useful page on 5 JavaScript Tricks Made Easy with jQuery. Swapping form fields, character countdowns in textareas, centering a div popup, collapsing table columns, and reading RSS are the tricks.

Okay, you’ve maybe seen the reports.  You know, Site Actions > View Reports > Checked Out To Me?

Did you know it’s not that impossible to add to that list?  All you really need to know is some CAML.  (I know this isn’t really about UI customization, but it’s still cool, so bear with me.)
To access the reports, go to your root directory, and click on Site Actions > View All Site Content.  The directory you’re looking for is called “Content and Structure Reports “.

When you click into this folder, you’ll see a normal list.  Let’s edit the report called “Checked Out To Me”.

Here are the fields  that we care about when you create a new report.

Report Title: What it’s called.  This can be anything.

Resource Id: both of them.   Don’t know why there are two.  (oh, apparently it’s an internal naming convention.  You can ignore it.)  Don’t use these.
CAML List Type: This is where you’d link it up to a list template here if you only want your report to search through a specific type.  You can get a list of the internal ID’s here.
CAML Query: The actual query.  I really find it easier to copy and existing one and modify it.

Target Audiences: If you were to target an audience with this report, you’d put that here.

Report Description: What the description of the report will be in the drop down.

The end result is a nice customization of the drop-down.   (note: Another site that talks about just this exact thing is located here.)

In typesetting, a widow is a single word on a line by itself at the end of a paragraph and is considered bad style.

Shaun Inman created a widget/do-dad that fixed this autmatically.  This was called Widon’t.  Now it’s been recreated in XSL, thanks to Oleg Kourapov.

Now given my recent Sharepoint leanings, you might wonder why I’m excited about this.  It’s the itemstyle.xsl.

The itemstyle.xsl controls a great deal of the MOSS  2007 outputs.  Most noticeably is the Content Query.

It seems by adding a line for this function into our itemstyle, we can control widows.  I’ll be playing with this shortly, should update you on how it turns out.

Eric Meyer, CSS Guru gives us a run down on some extreme CSS Reset. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults.

“That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”. Nor am I saying that everyone must use them or else be cast into darkness. Remember before that I termed these “my take on the topic of reset styles” (emphasis added). Your take may be subtly or greatly different. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults. Simply the act of taking those defaults into consideration and thinking about them closely puts you ahead of 99% of your peers. I do think that reset styles are quite useful; otherwise, I wouldn’t have written about them here, and certainly not to the extent that I have. My hope is that people will use them as a launch pad for their own resets and for deeper thinking about styling and browsers.”

It’s a small chunk of code to simplify things, and make your life easier.  You should try this out and see if it’s for you.

Coda is the latest tool from Panic, and it looks quite intriguing. What makes this different is that Panic went the ‘all-in-one’ route for web development, having a tool that does CSS, coding, FTP, terminal, and more.  All wrapped up in a slick and pretty package that makes me wish I coded on the Mac.

John Gruber has an excellent write-up on Coda, and what makes this a nice and different offering.

From A List Apart: Setting Type on the Web to a Baseline Grid.

“We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid.”

A nice writeup to an odd problem that does plague sites.

Peter writes about the still present window.onload problem. It’s a most excellent article, and you should go read it.

The base problem is that if you truly do seperate presentation, structure and interaction (HTML, CSS or Javascript), then you can be presented with a situation where a large image is trying to load, preventing from the window.onload from firing, which is preventing the Javascript from attaching the functions needed. If that Javascript doesn’t fire, the user can then easily break the page.

Luckily Peter outlines several solutions, all very easily explained.