office live design tips

Tips and How To's for Office Live Web Design

 home   services   blog   about   contact

                                                                                                         

| More

customize the office live header

 
There are several ways to customize the Office Live Header to make your site look unique or match what your site is about.  The header on this page is one of the Office Live ones, with the color customized and a custom theme image of my dog, Zip.

 

add a logo

You can add your own logo to any of the Office Live headers.  Upload your logo image to the Image Gallery.  In Site Designer click on Logo and select your image.  You can choose to have it above or next to the title and what size to display it.  The different header styles place the logo in different areas of the header, a little experimenting is needed to find one that pleases you.

 

You can change the logo at any time by simply selecting a new image.  To remove your logo from the header, click on logo and click on 'No Image' at the bottom.

 
use a custom theme image

Adding a Custom Theme Image allows you to replace the image in the Office Live themes with your own.  I've done that on this page using a picture of Zip, my border collie.  If you see an accounting image instead of Zip, it's because for some reason it is being randomly changed all by itself and it snuck in again without my noticing : (  Hopefully they will fix that bug soon! 

 

 

Upload the image you want to the Image Gallery.   In Site Designer, click on Themes and then Custom Theme Image listed at the top.  Click New at the right and you can choose your image from the gallery.

 

tip

You can check what size the image used in the themes are by viewing the page and right clicking on the image and selecting properties.  The first number is the width.

 

 

 

New!  customize the theme colors

With the February 2009 updates comes the ability to change the colors in the Office Live themes.

 

 

In Site Designer, click on color.  The usual menu of all the color selections will open.  On the top it will say Current or Custom.  On the bottom you will see a link for Custom Color Scheme.  Click on that.  You'll get a new menu where you can select 2 colors for the header.  If you don't want to use the basic OL color pallet, clie on more colors and you will be able to have any color you desire!  It will take some experimenting with all the different headers to find the perfect one.  The header on this page was changed exactly this way. (you can also use custom colors for the body, navigation and footer!)  Thank you Microsoft!!!

 

 

 

replace the office live header and use your own

Replacing the Office Live header gives you any design and color you desire.  First, you will need to create an image the size of the header and you will need to include the text of your site title and slogan in the header image.    When you upload your image to the image gallery, be sure to uncheck "optimize my image' so it will upload full size.

 

 

Next, follow these steps:

 

●  In Site Designer select General, no Photos for your Theme.

 

●  For the Style, choose the 3rd one from the bottom.

 

●  Remove the Site Title and Slogan text from the header.

 

●  In the Header dialog box, click on the Logo tab and choose your header image.

 

●  Select next to title and full size, click ok and save the page.

 

●  Enjoy your new header! : )

 

 

remove the office live header

All of this site (except this page) was done by removing the Office Live header, footer and navigation menu.  This can be done in page properties on a page by page basis.  In Page Editor click on Page Properties and uncheck the box for the elements you want to remove.  Any element you remove can be replaced at any time by rechecking the box.  If you do not see that option in Page Properties you need to activate the Advanced Design Features.  That is done on the Page Manager, the is a little drop down menu for Site Options where you can select to activate them.  You may have to close the Site Designer and reopen it to see the new features.

 

Removing all the elements gives you a blank website.  Use zones, tables, images and your imagination and you can create a website that looks any way you wish. Once you have your design the way you like it, save that page as a template and you will be able to use your new design to create your pages. 

 

site title, site slogan and footer text

You can still enter your Site Title, Site Slogan and Footer information in Site Designer if you turn off the header and/or footer on your pages.  Then you can use the Site Information Module to put that information anywhere on your page, the modules will display that information.  On this site, my Site Title is actually on the bottom of the page, in the zone I used instead of the footer.  The text after © 2007 - 2009 is my site title module.  They could be used in the top zone to create your own header, along with some images, visit networking4change to see an example of how that can work, the logo is an image placed in the top zone (floated left) and the text next to it are the Site Title and Site slogan modules.

 

use your header image as the page background

The new design options include using a bg image on your pages as well as being able to place them where you want on the page.  You could use this to put a header image at the top of the page.  This would allow you to put text or the site title module and other things over the image you use.  It might take a bit of experimenting to get the background image and content arranged so that it doesn't overlap the header image.  This would allow you to use a different header on different pages.

 

With all the different options for customizing the Office Live Header there are countless web design possibilities.  A little imagination and you can do almost anything. 

 

Don't have the tools to create your own header?  Get one designed just for you.

 

  

  

 

 

 

© 2007 - 2009 office live design tips   all rights reserved   www.oldesigntips.com