Customize Your Office Live Public Site

Tim Aidlin, Design Evangelist at Microsoft has customized an Office Live demo site called Northwind Inn. The customization was done using the Site Designer and Page Editor tools that come with Office Live account. Tim has posted on systime blog about the customization work, here is how is had done it: The main section is an HTML module which […]

Tim Aidlin, Design Evangelist at Microsoft has customized an Office Live demo site called Northwind Inn. The customization was done using the Site Designer and Page Editor tools that come with Office Live account. Tim has posted on systime blog about the customization work, here is how is had done it:

The main section is an HTML module which contains HTML and CSS.

<div style="width:auto;height:auto;"><div style="float:left;width:320px;"><img src="/images/countryClassic_01c.jpg" / /></div><div style="margin-left:20px;font-family:segoe ui, tahoma, helvetica, san-serif;font-size:12px;line-height:19px;">The Northwind Inn offers all the charm of a bed &amp; breakfast with attractive prices. Nestled in the foothills of the Idaho Rockies, above the Kootenay River Valley, the Northwind&nbsp; Log Inn&nbsp; invites a crisp clean atmosphere like no other in the Pacific North West.<p style="margin-top:20px;">Each room is special, featuring hand-crafted log furniture, king or queen-size beds, a spacious bathroom, and country-style d├ęcor.<p style="margin-top:20px;">Relax in our roomy hot tub (Open Year Round), browse through the gift shop, walk beside the fish pond, or just settle into a comfy chair on the patio &amp; enjoy the gardens and scenery.</div></div>

The image is from http://countryclassicloghomes.com, which I designed a long time ago, and took this photo.

I wish I could space the center columns more.  They seem to run together.

The footer is easy to change, however I'd love more control on layout.  Specifically, the spacing between the links and the separator "pipes" isn't nearly enough.  I'd love to reduce the size of the footer font, too.

For the photos page, I wanted three columns. By using an "HTML Module" and a simple three-column table I was able to layout a three-column page with a spanning title space, which they don't offer in the templates.  I figured I'd just use tables for this one.

<div><table border="0" cellpadding="10" cellspacing="0" width="100%"><tr><td><img src="/images/scr-autumnroad.jpg" width="200"/ /></td><td><img src="/images/scr-bs12-jan04.jpg" width="200"/ /></td><td><img src="/images/scr-bscabins1.jpg" width="200"/ /></td></tr><tr><td><img src="/images/scr-bs3-jan04.jpg" width="200"/ /></td><td><img src="/images/scr-bs4-jan04.jpg" width="200"/ /></td><td><img src="/images/scr-bslodgereflec1.jpg" width="200"/ /></td></tr></table></div>

Continue to read full post....

Customizte, Web Site, Designing, Office Live Public Site, Office Live, Site Designer