These are some of the CSS code I have used on my Office Live sites.  I am as far from an expert as one can get, more like the fool who rushes in.  : )   I make no guarantee that they will work properly. They seem to work on my site and I haven't noticed any ill effects.  The ground has not shook and I haven't seen any smoke, although at times I do feel a little woozy...

To use the Style Sheet to apply CSS code to your site you need to activate the Advanced Design Features (it's free). That is done on the Page Manager, under the Site Actions drop down menu. Once activated, the Style Sheet icon will appear in Site Designer. Click on Style Sheet, paste the code in the area provided and make sure to check the box "apply Custom CSS code to my website".

essential resources...

The default CSS for your site can be viewed by clicking on Style Sheet in the site designer and clicking on the link that says 'view default css'.  It's up near the top.

{CodeRight} Design's  CSS Guide for Office Live Websites.  The guide is a PDF file available for download at their site, it is a great place to start. 

tip...

Using the Style Sheet in Office Live applies the CSS code to your entire site.  For trying things out, use the directions in the CSS Guide for having a different brand on each page (in step 4).  This will apply the code to the one page only (ideally, a page you keep off navigation for testing things out).  Interesting changes won't be visible on the rest of your site and any rumblings and smoke will hopefully be contained and put out by deleting the code or module.

here are the codes...

a border across the top of the screen

body
{
border-top: #f433b1 6px solid;
}

Change the width and line color, if bright pink doesn't suit you. Some other border options are solid, dashed and double, you can change to whichever you prefer.

the image at the bottom 

.MSC_Body
{
background-image: url(/images/ZipBG2.jpg);
background-position: bottom left;
background-repeat: no-repeat;
}

background color

.MSC_Body
{
background-color: #deecfa;

}

side borders

When using the OL header and footers with a white background, I felt it gave it a floating unconnected look.  I thought adding a border on both sides  of the page content area would look nice.  Some other options for the border are dashed, dotted or double.

.MSC_Body
{
border-left: #000000 2px solid;
border-right: #000000 2px solid;
} 

If you are using left navigation on your site, adding the border to just the right side could be a nice finishing touch. 

.MSC_Body
{border-right: 1px #000000 solid;}

If the border doesn't line up nicely, the page content may be pushing it out.  Try moving it in some.

change footer background color

.MSC_FooterFrame
{
 background-color:#000000;

}

footer background image:

} 

image link border

If you aren't too fond of the bright blue default border color around your image links you can remove the border.

a, img
{
border: 0px;

} 

Another option is to change the border color of the hyperlink.  This is what I used to change the border, the code changes it to the background color and then orange on hover:

top

link color

If you find the default bright blue color of your text links unappealing you can change the color.  The easiest way to do that is to just highlight the linked text and choose a different font color.  It will change the link color, but the link won't change on hover or when clicked.  If you want more, then use the code below.  You may not find bright pink and orange any more appealing than the bright blue, in which case change the color number to one of your liking. 

a:link {color: #000000;text-decoration:none;}
a:visited {color: #000000;text-decoration:none;}
a:hover {color: #f433b1;text-decoration:underline;}
a:active {color: #FF6C00;text-decoration:none;}

As is, with this code the links will be black, change to pink and underline on hover and then change to orange with no underline when clicked.  Visted and unvisited links are the same color.

If you have changed any of your text links manually (by highlighting and selecting a font color) you may have to remove the text and do them again to have the code work.

navigation link color

Changing the links seems to also effect the navigation links.  I used this code to change the navigation link color to black and change to white on hover and to remove the underline.  It will work for top or left navigation.

.MSC_PrimaryNavLink
{
color:#000000 !important;
font-size:12px;
text-decoration:none;
}
.MSC_PrimaryNavLink:hover
{
color:#ffffff !important;
font-size:12px;
text-decoration:none !important;
}

top

other link effects

Link text is bold:

a:link {color: #000000;text-decoration:none;font-weight:bold;}
a:visited {color: #000000;text-decoration:none;font-weight:bold;}
a:hover {color: #f433b1;text-decoration:underline;font-weight:bold;}
a:active {color: #FF6C00;text-decoration:none;font-weight:bold;}

You can also just highlight the linked text and click on bold (B) instead of using code.  This is handy if you don't want all of the text links to be bold.

Links underline on hover, visted links are lined through and change to underline on hover:

a:link {color: #000000;text-decoration:none;}
a:visited {color: #000000;text-decoration:line-through;}
a:hover {color: #f433b1;text-decoration:underline;}
a:active {color: #FF6C00;text-decoration:none;}

Links have a background color on hover and when clicked:

a:link {color: #000000;text-decoration:none;}
a:visited {color: #000000;text-decoration:none;}
a:hover {color: #f433b1;text-decoration:underline;background-color:#dfdfdf;}
a:active {color: #FF6C00;text-decoration:none;background-color:#dfdfdf;}

The CSS code I used for the links on this site, on hover the links have a background color and are overlined:

a:link {color: #000000;text-decoration:none;}
a:visited {color: #000000;text-decoration:none;}

a:hover {color: #1F70C1;text-decoration:overline;background-color: #cadef7;}
a:active {color: #f433b1;text-decoration:overline;background-color: #cadef7;}

The line-through, underline, overline and background color changes still seem to work for links that you manually change the color of the text (highlight and select a different text color).  The link below for the top of the page I used the font color selector to change it orange.  Hover over it and see what happens.

images & tables

modules

customize header

navigation

create a gallery

forms

 css codes

resources

feedback