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.

A really great chart to determine the Pixels to Ems Conversion Table for CSS. Thank you Jon Tan.  A quick over-view/sampling below.

What this chart allows you to do is determine the em width of something. Say you have something that is 770px wide, and using a font-size of 1em. You know then that the em-width of the layout is: 1 ÷ 16 × 770 = 48.125em.

I’m working on a project that requires some vertical text.  But I was unsure as to the “correct” way for the vertical text to be set, 90 degrees clockwise or counter-clockwise.  Luckily, I didn’t have to do a lot of research, as it’s been done for me. Robust Vertical Text Layout outlines the basic rules for vertical text for me.

In a purely physical layout scheme, each of these text layout properties would be given as an absolute: The inline progression of this run of English is top to bottom, its glyph orientation is 90 degrees clockwise, its block progression is from right to left.

But absolutes don’t hold much water.

For scripts in a non-native orientation, the natural inline text flow depends on the direction of line stacking: the text is most comfortably laid out as if the whole text block were merely rotated from the horizontal. For example, English text in vertical lines that stack from left to right will face with the glyphs’ tops towards the left and the text direction running from bottom to top. The same text, by the same logic, would in a right-to-left line stacking context face right and flow within each line from top to bottom.

Basically it boils down to this from what I can determine: Have the bottom of the text point in the direction of the block progression.

Eric Meyers Reset CSS has found a permanent home now. Reset CSS is a useful tool to help you default a lot of generic styles built into browsers.

” The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.”

Also be sure to check out his diagnositic css file as well.

“With a diagnostic stylesheet, you can quickly see where your markup might have some trouble. If you want to see this in action, there are two demos to check out:”

Incredibly useful tools, check them out.

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.

Using HTML Lists Properly is a decent refresher on what semantic HTML is, and how to go about using it.  He focuses on three things; Ordered Lists, Unordered Lists and Definition Lists.
He talks about how to combine them, use them and style them.  Nothing earth-shattering here, nor anything new if you’ve been dealing with HTML for a while.  But it is always decent to remind yourself of the base items, and if you’re new to codind HTML, this is a good starting point.