UX & IA Design Thinking

I really was not that happy with the look of the first calendar so after some modifications and a bit of CSS magic I have come up with a really good looking small calendar. At least I think so… Basically I have replaced the text of an event item with a color coded box. The benefit that you get out of this is that you don’t have to try and read the even within the small calendar but if you hover over and click on the color block you get the list Item display. Orange is for single event items (8am-10am, etc) Green is for full day events or repeat events Another nice feature to this is that I have also simplified the visual indicator when there are more then two event items in one day. Instead of seeing the arrow and text all you see is the arrow. Once you click on the arrow it will show the other blocks of events (Right image). Here is the CSS Code: Download Here Simply place a content editor web part on the same page as the calendar Paste the code from t...

Well I guess I did not do my research enough and found a site that had an even smaller SharePoint calendar by just modifying the CSS. http://pathtosharepoint.wordpress.com/2008/10/06/tiny-sharepoint-calendar-1/ With these styles below you can drastically transform your SharePoint Calendar view into a tiny box. Yes there is limited functionality but if you have been looking for something like this with no custom code you got it!   (Left) No events                     (Right) Events populated Copy this CSS code below and past it into your custom CSS! /* Remove week blocks */ .ms-cal-weekempty {display:none;} .ms-cal-week {display:none;} .ms-cal-weekB {display:none;} .ms-cal-weekB {display:none;} /* Shrink cells */ .ms-cal-workitem2B {display:none;} .ms-cal-noworkitem2B {display:none;} .ms-cal-nodataBtm2 {display:none;} .ms-cal-todayitem2B {d...

Have you ever needed to add a Event Calendar to your Team Site with the calendar view but you didn’t because it basically took up the whole site? Well just today I was messing around with this and came up with some interesting results. If you look at the code for a calendar view everything looks fine except for a hidden shared class at the very top of the calendar right below the webpart title. This image is 742 pixels wide and forces the calendar view to be minimally that width. With the CSS below you can now hide that image and allow the calendar to fit within your team site with no problems at all. By making these changes you will not change the look of the full view of the calendar when you click on the event list. The screenshot below was taken with 1024x768 resolution. Here is the CSS: .ms-calheader img{ display: none; } #CalViewTable12 img{ display: inline; } .ms-cal-nav-buttonsltr{ white-space: nowrap; } Full Calendar View with styles applied: ...

I can pretty much say I know my way around SharePoint… But every once in a while you learn about a feature that you never knew was there… Most of the time its those annoying bugs that we call “features” but are true head against the wall things that make you go hmmmm… But this time its a good thing… I was tasked with finding a way to create a header and footer for a publishing site. This header and footer would be consistent across all pages within the content area of the site. My First thought was ok I need a custom page layout, but this would not work since it needs to be easily updated via the SharePoint Interface. So after some investigation I found out that SharePoint has a built in feature called “Reusable Content” Basically all you need to do is simply edit the page of your publishing site and click on a content editor control. If you look at the image below there is a icon next to the image icon. The icon is not very obvious hence the reason why I never noticed it befo...

During the creation of the CSS, Master Pages, and Page layouts its critical to stay on top of your Front End Development testing. As you know many classes in SharePoint are shared classes so when you make a modification to one element you have to test, test, test. Below are some helpful things to review before giving that oh so critical demo… Hopefully these will help you out during your development process and testing. Create and test all OOTB SharePoint templates Publishing Sites Publishing Toolbar Page Layouts (All that are available) My Sites My Profile Organization Hierarchy web part In Common with you web part Team Sites Meeting Workspaces Tabs Recurring Meeting Workspaces Quick Launch Blog Unique Quick Launch Post date, title, content, and links Wiki Functional Links (Edit, History, Incomin...

Rounded corners have become a staple in website design. But they come with a price. Don't get me wrong I really like the look of them and they really help soften the look of the site. In most cases you can create this look by using the method below. Later on in this post I will highlight some of the things you can do and some of the things not technically possible without major custom development. Design 1: Rounded corners to frame a site: Open up your master page and add 1 <div> tag right before the ms-main table to represent the site container (This is used to position the site and give it its width) Add 4 more <div> tags before the ms-main table to represent your 4 corners (top left, top right, bottom left, bottom right) <div id="xyz-content-corner-tl"> <div id="xyz-content-corner-tr"> <div id="xyz-content-corner-bl"> <div id="xyz-content-corner-br"> Add in the followin...

Click to watch the video presentation (36MB WMV), thanks to my friend Paul Galvin for taking the video. Update: For some reason the link was not good. I have updated it and it should work now.