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.

Found a used book store in 白金台(Shirokanedai)

A couple of weekends ago, we went to a museum near the 白金台(Shirokanedai) station and we visited one of the Book Off stores - they are a huge chain of used book stores with stores all over the place. But the Book Off in Shirokanedai has the largest selection of foreign language books I've ever seen at a used book store. I fact, I would say that this was bigger than the foreign language section of any regular book store that I have been to recently. They have a sign up that says that they have 40,000 book there. They even had five or six big shelves full of French books - something I've never seen in Japan. The prices were excellent, too. Most paperbacks with 350 yen with some at 200 yen and a handful at 500 yen.

The store even has a cafe with good coffee and snacks. The cafe is pretty crowded but still a good place to sit, read, or work. It is pretty easy to get to this store. Exit from the Shirokanedai station via Exit #2, take a left at the top the of stairs, and walk about 2-3 minutes. It will be on your left and you will probably see the cafe part first. If you are a foreigner living in Tokyo, this definitely worth a trip out there.

Tokyo Winter vs. Seattle Winter

Tokyo's winter has been very, very, very mild so far. It has been "long sleeve-shirt and light jacket only the morning" kind of weather. We've only had a couple of days of chilly and windy though we are supposed to get a couple of more days, apparently. Today was sunny and the high was 20 degree Celsius (68 degrees Fahrenheit) and the overnight low was at 14 C / 57 F.

Since Seattle is supposed to have a high of 11 C / 52 F, a low of 4 C / 39 F and rain... I think I like the Japanese version of winter a bit better. Of course, the real winter has moved in, yet.

Changing the link on the top of a web part

Found a new SharePoint trick the other day and figured I should share.

When you insert a web part into your SharePoint site, the title of web part is formatted to be a hyperlink to the list, document library, or other SharePoint item that you used for the web part. Some web parts don't have links by default but all web parts can have it. You can also customize where that link points to.

For example, you have a confogired a filtered view of the list to use as a web part. By default, the title of the web part is linked to the default view of the underlying list, not the filtered view I used. If you want people the click the title bar to go you a different view than the default you can.

• Select Modify Shared Web Part
• Scroll down to the advanced section
• Look for a field labeled Title URL.
• It probably points to the default view such as AllItems.ASPX. If I want to point it to a different view, just copy and paste URL to the filtered view into that field and hit OK.

You can have the link point anywhere, actually. you can have your title be a hyperlink to anywher on your site or somewhere on the internet. Every web part in SharePoint has this property. So even things that don't have one by default, like the photo viewer web part or content editor web part, can have a link added.

Two earthquakes

We had two earthquakes in Japan this week - a medium sized one on Sunday night (August 8th) and a slightly larger one Tuesday morning (Auguts 10th). The Sunday one was closer to us but a very deep earthquake, from what I heard. It lasted a long time but didn't do anything to our house other than make the lights sway and make the house creak. The Tuesday one was a quite a bit father away so we actually felt it less, even though it was a bigger earthquake.

Hopefully, there won't be any others any time soon. Since our building is only two years old, it should do okay in an earthquake, but I'm not interested in finding that out first hand.

Making SharePoint not look like SharePoint: An Odyssey - Part 1

Like I posted earlier, I have been working with a SharePoint design/branding project. I have to say that the available documentation for this is pretty vague. There is a lot of “you could do A, or B, or C” high level talk but very little details of the technical implementation of each option. Maybe it is because there are too many variable to write a comprehensive book.

Regardless, I am going to walk you through the way I did it. I doubt this is the best for everyone but this is low-code/minimum complexity way to create custom master page. In this project, I attempted to mimic an existing, public facing website for an internal portal. I did this by adding one customized master page, one CSS file, and a handful of graphics. I made no custom JavaScript and never fired up Visual Studio – this was done entirely from SharePoint Designer 2007.

After reading a lot of books and how to articles, I decided on some general rules for anyone tackling this for the first time:

Do not modify the basic SharePoint objects. Open and save as but do not just directly edit the default CSS styles, master pages, or graphics. It is highly likely that service packs or other upgrades will overwrite your changes. Also, it is sometimes hard to go back.

Double check your backups before you start. You have a pretty good chance to really screw things up so make sure you are backed up and run a test restore before you get started.

Never delete a tag from the master page. The master page forms the ultra-flexible “skin” for the website and these place holder objects tell other pages where you want things parked. If you are missing a placeholder, you get error messages. You can move place holders around and apply formatting but you have to publish with all of them. I create a panel at the bottom of my web pages that is hidden and park all of the placeholders I do not want to have displayed down there.

Don’t start from scratch. There is Microsoft TechNet article that tells you how to create an empty master page and you can design to your heart’s content. If you are new to this, like I was, “green field” development is tempting but just say NO. Open an existing master page and save as. You get some junk you don’t want but you will start with something that works.

SharePoint likes nested tables - live with it. I know that current web design treats nested tables as the dark spawn of Satan that leads to ultimate damnation but, unfortunately, SharePoint behaves better with nested tables. I am not sure why that is the case, but much of the pre-installed web components appear to assume that you are in nested tables where their CSS formatting is going to be isolated from the rest of the page. When the different styles become intermixed, you get some very entertaining results.

Test the Edit Page functions often. When trying to get the branding to look right, create the look, tweak the CSS, adjust the graphics, and take a look at the final page. Do yourself a big, big favor and select “Modify Web Part”, “Edit Page”, or any other site administrator function on the page. You may have accidentally shrunk, hidden, or mangled the toolbars that people need to actually get work done.

SharePoint Customization and Branding

I found a really good SharePoint related site from a consultant in called Clever Workarounds. I read through his four part series on SharePoint branding and made some additional experiments.

Whenever you want to change look and feel of a website, you normally want to adjust the CSS files that control it. Cascading Style Sheets are relatively straight forward and seem to behave logically. For example, you can have multiple definition of a paragraph and whichever style is applied last wins. It would seem that if you added your own CSS link, tweaked the settings you want, you wouldn’t make any changes to the preinstalled files. That way, patches and upgrades wouldn’t destroy your work - simple, right?

However, SharePoint has a big problem with this. The key problem with custom branding for SharePoint is that a large part of the functionality in SharePoint is defined by the CORE.CSS style sheet. No problem, right? You just need to add another CSS file below it in the header, and you’re done. Well, actually, it is not that simple. Unfortunately, the way that SharePoint builds the pages, the CORE.CSS file is always last - thus making it always be dominant.

Looking at the Clever Workarounds pages, it looked like getting around that would be very, very complicated. However, in reading the comments, there seemed like their might be a good way around it. Here is the comment (edited slightly for length):

Remember the Cascading part of cascading style sheets and the specificity of each rule. It doesn’t matter if your css rule appears before or after core.css If you want your rule to win you make it more specific. I have used this approach since SharePoint 2001 and have never had any problems. I place a unique, short ID attribute on my body element in the master page. Example Then when I find a rule that I want to override that core.css is currently rendering I create a duplicate rule in my stylesheet but place #dm in front of the rule. So for example .ms-WPHeader in core.css becomes #dm .ms-WPHeader in my stylesheet. Now that I have a more specific rule my style rule wins. Works every time … and it requires no custom code or major modifications to SharePoint.

So, I gave this a shot:

• You create your own CSS page and link to it.
• At the body level, inside a table tag, or whatever makes since, add the ID tag (the commenter used DM for his example but it can be anything)
• View your pages and see what CORE.CSS styles need changing
• The internet explorer Developer Toolbar is very useful for this
• In your custom CSS page, create rule with the same name and add the #ID in front of the definition
• Save and refresh – repeat as necessary.
  
  

Doing some development work

Recently, I’ve doing some development work instead of my more normal systems administration work. I’ve always done VBScript scripting of administration tasks, started fooling with PowerShell, and have always been messing around with websites but I’ve been going past that, recently. I’ve had a couple of things I’ve been working on:

• Creating custom “look and feel” to SharePoint sites
• Creating web parts for SharePoint sites
• Creating a C# web application for linking an outsourced CRM system to Groove
• Creating a C# console application to read three different calendars and then create a survey questionnaire based on information inside the meeting

It has been a real challenge I’m going to try and write some posts based on what I learned. For those of you with real developer experience, you will probably laugh over some of the things I had trouble with. Hopefully, if there is any other sysadmin that needs to do some quick prototype code, they can benefit from my experiments.

Thoughts on Japan

I have been here for over a year now, and I have come to appreciate a lot of the little things about Japan. Sure Tokyo is a noisy place, things are a bit crowded but there are so many things that make life easy:

• Our condo has 24x7 automated lockers. When a delivery comes and we're not home, they put the box in this locker and code in our address. We can open it with this special card when we get home. You can use that locker to send boxed and dry cleaning, too, and they auto-bill our credit card.
• Chiho found a company called Yoshikei ヨシケイ千葉 that does grocery delivery. The offer a menu of four meals per day and you order whichever one you like and they deliver the pre-measured ingredients to your day. There is almost no additional cost and there is no wastage.
• We have a bread store at our train station and at a nearby grocery store that is way better than anything you'd find in Seattle. All of the French people in my office say that Japanese bakeries are as good as Paris bakeries - some are even better.
• Most utility bills can be paid by direct bank deposit but you can pay all the others at any convenience store - with immediate credit for payment and no additional fee.

And that is just a short list. I will add some of the nice things in Japanese houses later.

Found an answer to my SharePoint question

I posted earlier about the odd behavior of the Advanced Search web part and I think I found my answer. That webpart assumes that you have a Enterprise Search site that was deployed from the MS stock template. There is a results.aspx page that works correctly.

Now, for my next project is to figure out how to get that to work without the Enterprise Search site, since that template is not available.

Clever Workarounds

I found a good SharePoint and IT Project Management website recently called Clever Workarounds http://www.cleverworkarounds.com/. Really a good read on the project management side. Some of his SharePoint tricks are slightly out of date but 90% of them are really good. His project management stuff seems to be pretty much dead-on to me.

It is spring in Tokyo now

Things have been warming up and it is cherry blossom season here in Tokyo. We hit 19 degrees C so right around 70 degrees F yesterday and today. It is quite pleasant around here - almost time to pack up the sweaters and the heavy coats. I didn't take any pictures of the cherry trees and it is already past the best time for pictures - maybe next year.

Indexing PDF files with SharePoint

By default, neither MOSS 2007 or SharePoint Service v3.0 will index the contents of PDF file. The setup process is pretty simple and is outlined on Steven Van de Craen's Blog on an old post of his. I'm made sure to keep of copy of that one around.

Bought a Netbook

We just picked up a netbook for Chiho to use for studying. We picked up a ASUS 1000HE from BIC Camera and took advantage of a promotional from EMOBILE. They are a cellular data provider and if you sign up for a two year data contract, they discount the netbook - just like buying a cell phone, really. The list price of the laptop was just under $450 USD and by signing up for the data plan, the cost was about $30 instead.

EMOBILE's service is Tokyo is really pretty good and they offer 7.3mbs connections. I routinely speed test mine at over 5mbs which seems very good to me. The coverage area is cities only, not up on the mountains, but it covers all of the areas we are likely to travel.

Is Microsoft's technical documentation gettting worse?

I've been assigned a new project, recently, trying to assess Microsoft Office Communications Server 2007 R2 and I've been digging through the TechNet information. I'm just doing an inital pass, really, nothing in depth, and the documentation is kind of depressing. They have several reference topologies and these little case studies scattered about and they are just pitiful. The reference topolgy diagram is missing some important info - like the number of employees that the topology was designed for? Kind of important to know if the diagram is applicable to 5,000 users or 50,ooo users but that is not there.

I wanted to find out just a few things:

• Is virtualization supported (hyper-v or vmware)
• If so, which roles are good candidates for virtualization
• As you move from simple to complex or small to big, which role can be combined onto one server and which should never be.

Isn't that fairly basic information? Or am I expecting too much for something that is new?

Finally got my Japanese drivers' license

It felt like it took forever but I finally got Japanesed drivers' license on Monday. I finally passed on my third try - boy these guys are picky, picky, picky...

Nice step-by-step for Outlook passwords

I found this one today and I was digging through Outlook 2007 password prompt issues for someone at work: http://www.petri.co.il/save-your-exchange-password-in-microsoft-outlook-2003-or-2007.htm