Adam A Davidson

Found this Sharepoint tutorial at SharepointHosting's blog. Probably something I should have worked out by myself, but then with Sharepoint the things that should be obvious often aren't!

This will work really well for booking meeting rooms, projectors etc and will save having to input the data twice (once into your meeting invite and another time into the resource calendar). Also should be handy for scheduling meetings and showing the meeting on the workspace calendar.

While your looking at the tutorial, check out the other stuff that's there. It's a great resource to direct users to for information, as it gives them a hands on demo. Well done to the guys at SharepointHosting.com!

Loading mentions Retweet

My website is built using Microsoft Office Live. I chose this because they were offering free domain names at the time (they've now stopped doing that), so it was an easy way to get a free domain name with hosted web pages and email (through Hotmail).

Below is some high-level detail on how I designed my site, and customised it to look as I wanted. I'll try to post some more detailed information at some point in the future.

There are a lot of resources to set you on your way with Office Live, but two of the best for me were Solutions For Office Live and Acxede.net. Below are some notes on how I got my site to look as it does:

The key features are:

• Custom header/navigation
• Custom CSS styling
• Custom footer with Google Analytics code built in
  

To allow you to implement the above, you need to enable the advanced design features in Office Live. To do this, log into your Office Live account, go to the Page Manager and click on Site Actions. Then choose to enable the advanced design features.

Custom header/navigation:
The standard Office Live navigation is a bit dull, and as I didn't have many links, I wanted something a bit bigger. I created a new page, and opted not to include the header, footer or navigation. This effectively gave me a blank page. The layout should be 3 zones, one on top of the other.

In the top zone, insert a customer navigation module. To do this, open your page in design mode, then click on the module button and choose Custom Navigation. You can either add the XSL code in the window, or create it in a Notepad file and upload it to your documents gallery. I opted for the latter so that I can simply change the one file in the future to change the header/navigation on all my pages in one go.

I created a custom XSL file to get me the layout that I wanted to display my photo (as a background) and my site title (which is my name), as well as my navigation structure. You can see the XSL file here.

Custom CSS styling
This ties into the customer header/navigation, as this provides the styling for the headers. The CSS is relatively uncomplicated, an simply puts my photo in as a background picture to the header, and sets the colour, size and font of the text in the header and navigation.

To get the "tab" effect in the navigation, I simply put a bottom border on all of the navigation links except the active link. The active link gets a border all round except on the bottom. This creates the "tab".

You can get my custom CSS file here.

Custom footer
The custom CSS file also styles the footer. To add a customer footer, go into the bottom zone of the page click on the module button and choose Custom Footer. As for the custom navigation, you can either add the XSL code in the window, or create it in a Notepad file and upload it to your documents gallery. Again, I opted for the latter so that I can simply change the one file in the future to change the footer on all my pages in one go. My XSL file also contains my Google Analytics code so that I can track the usage of the site. To find out how to do this, see the Solutions For Office Live tip.

Once your happy with the basic structure of your page, save it and go back to your page manager. With the advanced design features enabled, you can now save that page as a template to use for all your future pages.

Loading mentions Retweet