UX & IA Design Thinking

I hope this post will help many of you feel comfortable with using the Content Query Web Part. In this post I will walk you through the process of creating a content query web part and configuring it to show custom field types. I will also give details on how to use XSLT to stylize and format the data being pulled. I will be using the following scenario as an example. Say that you had a site collection with a top level publishing site. This publishing site would display a the most recent blog posts from all blog sites within its own site collection. To solve this problem we will use a Content Query Web Part and a customized ItemStyle.xsl using XSLT. Please note that the “SharePoint Server Publishing Infrastructure” needs to be enabled at the site collection to display the content query web part. Step 1: Add a Content Query Web Part to Page Navigate to the site that you want the blog posts to show up and click on edit page. Under Editing Tools in the Ribbon, Click on ...

As you design your sites it is very critical that you test, test, test. Here is a common issue that has caused a lot of people headache in the past. If you have ever had the issue of your datasheet background color being the same color as the body of your site here is a fix to get it back to normal. Say you wanted a SharePoint design that was fixed width and center justified. This is pretty easy as long as you don’t change the body color to anything other than white. Example: Fixed Width site with dark body background. You might think to use the following CSS: body{ background-color:#000; text-align: center; } .ms-main{ margin:0 auto; width: 980px; background-color:#FFF; } #mainTable{ width: 100%; } Well that would be great if you never wanted to use the datasheet viewer… Here is how it looks with the CSS from above: Whoa… Look familiar? Well with just using the following classes you can keep the background color for your site but n...

There have been multiple request for the source code related to my original post for creating a two tier global navigation in SharePoint 2007. Click HERE to download the supporting files. Here is what it will look like with once implemented with just the OOTB styles: Steps to get it implemented: Download the .zip file: HERE Navigate on your server to the following location: C:\inetpub\wwwroot\wss\VirtualDirectories\80 Rename original “web.config” to “web_original.config” Copy custom web.config file to this location Open up the “_app_bin” folder in that same directory and copy in the “mainMenu.sitemap” file Upload the custom master page “globalnav.master” into the site collection master page gallery. Choose the globalnav.master as your site master page Once you see that it is working simply update the mainMenu.sitemap file in with your custom nodes. Thanks

In SharePoint Designer 2007 you can simply open up any type of file you wanted even if it did not reside in SharePoint. Well now things have change for 2010… Now you are forced to open up a SharePoint site before attempting to open up a file that resides outside of SharePoint. If you try before opening up a site you get the following error message: “You must first open a Web site before editing external Web pages…” Not really sure why they changed this maybe they want to ensure that you are not downloading the free SharePoint designer and simply using it as a HTML editor for non-SharePoint sites… Anyways that is not the focus of this post. I also noticed that SharePoint designer tricks you to thinking that you cannot edit pages. Say you want to modify a file that does reside in SharePoint. By Default it will open up in a read only view (HTML) and will not allow you to change the file. It will have a orange like highlight to areas that are not editable. So the trick is to righ...

I am in the mood for sharing today so here is a great starter file to get your new design rolling. I created one for 2007 and now here is one for SharePoint 2010. I increased the resolution to 1280x800. Download it Here.

As you all know SharePoint has a new theme engine for 2010. You can do cool things such as create a theme in PowerPoint, export it and then import it into SharePoint 2010, click apply and you got a custom theme. One aspect that I could not find documented is the definition of when you choose a color for a particular element what is it really changing? If you modify the theme for a site you can use the picker to choose a OOTB or custom theme. Or you have the ability to choose your own color scheme via the following elements. My approach: Make each element white to start with and then one by one add color and document the results. Just for kicks here is what it looks like when it is completely white… (not a color scheme I would recommend…) I will be using a red color: #C12345 for testing. Here are the details for each one of the elements above: Text/Background- Dark 1 (41 Classes) Page Title Hyperlink Text Hover Text VB Body Text Site Action Menu Text ...

Here is a simple yet effective way to stylize individual top navigation items for SharePoint 2007 & 2010 just using CSS. SharePoint 2010 will need a slight modification to the master page but the same effect can be achieved. See bottom of post for 2010 implementation. To start off with lets review how this can be accomplished for 2007. SharePoint 2007 provides a unique ID for each note in the navigation. 1st Tab: Dedicated as your default Home or root node ID: zz1_TopNavigationMenun0 2nd Tab: This is the first child node from the root ID: zz1_TopNavigationMenun1 3rd Tab: This is the second child node from the root ID: zz1_TopNavigationMenun2 4th Tab: This is the third child node from the root ID: zz1_TopNavigationMenun3   See the pattern… It keeps going and going. Here is what it looks like from the IE DOM Explorer in IE8: So you might ask well what can I do with this unique ID? Well here is a quick samp...