SharePoint Breadcrumb Oddity

I was setting up a new SharePoint master page and I was having a horrible time trying to figure out why my breadcrumb navigation was working for some pages and not for others. I finall found this blog post explaining what was going on: http://www.novolocus.com/2008/02/22/more-sharepoint-breadcrumb-wtf/

It turns out that some of the default publishing layouts "blank" the placeholder I was using to control the breadcrumb navigation. Once I inserted my own and moved the place holder somewhere esle, everything was fine.

Odd...

Creating a site banner with the Content Editor Web Part

NOTE: This article is intended for people who are really, really, really picky about the look and feel of their SharePoint site (like me). I am going to show a level of detail that is unimportant to 95% of the population.

For those of you with web design experience, you have probably created splash pages and page banners for other websites and may want to add one to your SharePoint site. There are several ways to create a banner for your site - the simplest is to just create an image and then use the Image View Web Part. You can use Paint.NET, GIMP, or other image editing software to create a GIF, PNG, or JPG image that you then upload and display.

However, an image is a fixed-width image that may or may not line up with other things on the page. Also, if you need to change the text or change the width, you have to fire up the image editor (again), change the text (again), export the image to PNG (again), upload it (again), and then repeat for every little adjustment. This especially annoying for typos - but maybe that is just my problem.

There are probably some of you saying "If I was going my own page, I would just put a background image behind a table or something, and then put text in front" which means you can change the text as without using an image editor. But you can't do that with SharePoint - or can you?

Actually, you can - if you are a little bit careful.

You can use a Content Editor Web Part to display something close to raw HTML code. There are only a couple of things you need to keep in mind:

• Close your tags PERFECTLY - if you open something, close it. Do not leave an un-closed row, table, SPAN, or DIV.


• Match your tags PERFECTLY - don't close something you didn't open. SharePoint has a lot of nested tables so if your code has an extra </table> tag, things can get very interesting.

Now, I will show you an example. For this site, I knew that I, as a site collection administrator, had a large number of tags across the top of the screen and I knew that a regular visitor would not. So, what I saw would be different than a regular visitor. In order to accommodate that, I wanted a banner that "expanded" to the left and right to fill the space of the column.

First, I created an image and "faded" to one site to a solid color. I use Paint.NET for my image editor because it is open source and quite flexible. Paint.NET also gives me the hex code for the color I used on the image. I can simply copy and paste the color code into my CSS markup.

In this example, I created a image that is designed to displayed on the right and is tall enough to not need repeating vertically. Upload the image to a document library on your site and copy the full URL to this image - you will need it in your CSS markup, too.

Create a new text file and start out with a simple table layout:

<table cellpadding=0 cellspacing=0 border=0 width=100%>
<tr>
<td width=100%>
</td>
</tr>
</table>

This table layout gives you table with a single cell. If you are an HTML or CSS purist, you probably hate me right now since I am using tables to control page layout. However, SharePoint runs on nested tables so it simply easier to keep going with the existing system.

Next, you need to add inline CSS to the TD tag to add your background image. Here is the markup I used to push the image to the right:

<td
style="background-image: url([Insert your path]/PublishingImages/banner.png) ;
background-repeat: no-repeat;
background-position: right;
background-color: #E5E5E5;"
width=100%>

In line CSS needs to be enclosed in a single string. Each specification needs to be terminated with a semi-colon.

background-image: url(PATH); - you need to enter the path to the image you uploaded.
background-repeat: no-repeat; - will show the image once. There are other options available if your image needs to be repeated to form a pattern
background-position: right; - should be self explanatory. There are other options available.
background-color: #E5E5E5; - this is the light grey that is my "fade" color. This is what allows the cell to change width but still look like a single item.

Then, I added text into the cell. I added inline formatting for my text as well, but that is completely optional.

<p style="font: small-caps bold 1.5em; padding: 10px; ">Redesign and Improve - 2009</p>
<p style="font: bold 2.0em; padding: 10px;">IT Portal v2.0</p>

Then, save the text file to a document library on the site just like you did for the image file and copy the full URL the text file, too. Edit your page and add a new Content Editor Web Part. Use the option to point to the text file that you just uploaded.

There are a couple of advantages of using the text file instead of just entering HTML straight into the Content Editor Web Part:

• If you delete a text file, it goes to the site recycle bin. If you delete a Content Editor Web Part, it is permanently deleted.


• You can enable versions in the document library, you can roll back changes


• You can reuse the HTML code in a text file on many pages.

Found a great SharePoint CSS reference

You guys may have found this one before but I only just found it. This site has full list of the various CSS classes used and how to modify them.

CSS Reference Chart for SharePoint 2007 (Microsoft Office SharePoint Server 2007 and Windows SharePoint Services v3)

She has a bunch of other articles about branding and CSS tricks on her blog as well. Definately going to bookmark that one.

Things have been busy

Things have definately been busy around the office but it looks like I am going to be able to make it back to the states for Christmas. It will be a short trip but at least I can go this year. I missed Christmas last year.