Since my last entry, I have had a number of users say they still are not able to get code to work in Office Live.  There have been two main reasons, 1.  The Custom Footer Module is broken.  The simple solution is simply use one of the other custom modules (Custom Header or Custom Navigation).  The second reason is codes that have a <form> tag in the code, this can include contact us forms, or even Google’s Search box has a <form> tag in it.

To make a code with a <form> tag work in Office Live, use the following base codes, these codes work in all the Custom modules.  There are two base codes, one for strict XHTML and one for codes that may not conform to XHTML standards.  If possible use the strict XHTML base code.  If the code does not work then use the second base code.

Base code for XHTML compliant codes:

Your code would go on line #5

1: <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
2: <xsl:output method="html" omit-xml-declaration="yes"/>
3: <xsl:template match="/">
4: <xsl:text disable-output-escaping="yes"><![CDATA[</form>]]></xsl:text>
5:
6: <xsl:text disable-output-escaping="yes"><![CDATA[<form>]]></xsl:text>
7: </xsl:template>
8: </xsl:stylesheet>

Example:

Base code for non-compliant codes:

Your code would go on line #6

1: <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
2: <xsl:output method="text" omit-xml-declaration="yes"/>
3: <xsl:template match="/">
4: <![CDATA[
5: </form>
6:
7: <form>
8: ]]>
9: </xsl:template>
10: </xsl:stylesheet>

Example:

<xsl:stylesheet xmlns:xsl=http://www.w3.org/1999/XSL/Transform version="1.0">
<xsl:output method="text" omit-xml-declaration="yes"/>
<xsl:template match="/">
<![CDATA[
</form>
<div align="left" >
<form action=http://solutionsforofficelive.com/search.aspx id="cse-search-box" style="background-color:#1b1b1b; background-repeat:repeat;width:275px; height:40px;">
<input type="hidden" name="cx" value="partner-pub-0488902814979569:dku8ma-8ngn" />
<input type="hidden" name="cof" value="FORID:11;NB:1" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="19" style="height:25px; vertical-align:middle; background-color:#ffffff; background-repeat:repeat; border : 1px solid #ff9900; font-size:12pt;"/>
<input type="image" src="/documents/mag_glass.gif" style="vertical-align:middle;" alt="Search" name="sa"/></form></div>
<form>
]]>
</xsl:template>
</xsl:stylesheet>

Many of are probably noticing that your sites are either down or are not displaying correctly.  Office Live is aware of the issue (after all they probably caused it?) and working to fix it.

Current Known Problems, you may or may not have all of them (currently they are all fixed as of 8/27/2009).

• You cannot edit your site you get an Access Denied message
• Custom Modules are down, this includes the Custom Footer, Navigation and Header modules.
• CSS styles are not being applied hence your site is not rendering properly.
• Images are displayed with a red X’s.
• And of course your site may not be displaying at all!

Essentially, with Office Live, you have two options for inserting code in Office Live. 

Method one (1) is to insert the code in the HTML module, this is the easiest, since you do not have to do anything special with the code, just paste it in the HTML Module.  However, not all codes work with the HTML module, about the only thing that works with the HTML module is plain HTML.  It should be noted, that the HTML module is an IFrame created through JavaScript.  Also NEVER NEVER try to use JavaScript that has external reference (<script type=”text/javascript” src=”somejssource.js”></script>) into the HTML module, it will lock up your site!  Solutions for Office Live does not recommend using the HTML Module!

Method two (2) is to use the Custom Modules (Header, Navigation, Footer).  It is recommend to use the Custom Footer module, though some people have errors with the Custom Footer module, in which case, you can try the Custom Header module.  With the Custom Modules, you can get most codes to work in Office Live, this method however is not as easy, since it requires modifying the code.  You can find several solutions for modifying codes to work at http://solutionsforofficelive.com, just use the search bar at the top of the site!  If you can’t find a specific solution, often a solution that is close/similar will work just as well.  If you still cannot find a solution follow the directions below.

The Custom Modules use XSLT, which requires a “base” code, currently there are two versions, each have there purpose, if possible you will want to use the first “base” code, which only supports Strict HTML/JavaScript and any comments will be removed (which is why the Google Adsense code requires further modification: http://solutionsforofficelive.com/googleadsense.aspx).  The second base code uses <![CDATA[  ]]> tags which basically tell the web server not to process the code.  Note, that there already is code in all of the Custom Modules, just make sure you remove that code before using any of these other codes!

First “Base” Code (For Strict HTML/JavaScript)
Your code, would go on line #4 (between the <xsl:template> tags.  The code can go all the Custom Modules.

1: <xsl:stylesheet xmlns:xsl="
http://www.w3.org/1999/XSL/Transform" version="1.0">
2: <xsl:output method="html" omit-xml-declaration="yes"/>
3:  <xsl:template match="/">
4:   
5: </xsl:template>
6: </xsl:stylesheet>

Example:

<xsl:stylesheet xmlns:xsl="
http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<marquee style="font-family: Times New Roman; font-size: 12pt"
direction="right" scrollamount="3" loop="-1" behavior="scroll">
replace text, replace text, replace text, replace text
</marquee>
</xsl:template>
</xsl:stylesheet>

Second “Base” Code (For any codes that will not work use first “base” code)
Your code, would go on line #5 (between the <![CDATA[  ]]> tags.  This code can go in all the Custom Modules.

1: <xsl:stylesheet xmlns:xsl="
http://www.w3.org/1999/XSL/Transform" version="1.0">
2: <xsl:output method="text" omit-xml-declaration="yes"/>
3: <xsl:template match="/">
4:  <![CDATA[
5:   
6:  ]]>
7:  </xsl:template>
8:  </xsl:stylesheet>

Example:

We have just released a new application for Office Live Business Applications that will allow you create a simple image gallery that will allow you enlarge images using Lightbox!  You can see it in action here: http://solutionsforofficelive.com/image_gallery.aspx and you can download it at: http://solutionsforofficelive.com/businessapps.aspx.