Using Office Live's Custom Header, Custom Footer, and Custom Navigation Modules Effectively

The power of Office Live Small Business's advanced design features lies in the access they provide to the underlying data. Most people use the Custom header, Custom Footer and Custom Navigation modules to simply add static html. While that may serve the purpose, it involves a lot of work because you have to maintain all the links in your header, footer, and navigation manually. And God forbid, if you decide to change the site design, you'll have a major project on your hands.

By making use of the XSL style sheets that these modules offer, you can use the links and navigation you've set up in Office Live's site designer. Here's an example: I wanted to make a small web site for my company. I wanted it to look like Acxede.Net, but I didn't want to write all the code. So I created a template using the Custom Naviagation and Custom Footer modules. (I didn't need the Custom Header module because my header and navigation are lumped together in the Custom Navigation module). Then I adapted Acxede.Net's stylesheet and applied to my Office Live site. That's it. I didn't have to code the links manually. The modules picked up the navigation and footer settings from the Site Designer. Here's the result


www.acxede.comgo there.

As you can see, it looks just like Acxede.Net. By the way I didn't have to write any html or javascript for selecting the correct tab, highlighting it, etc. Office Live's built-in events and my stylesheets took care of it.


Comments

August 27. 2008 06:32 PM

avd

The custom navigation module seems to default to a vertical nav bar:
http://hohokuscommunitychurch.org/test2.aspx

How can I change it place the nav bar horizontally right below a custom header? I can do it with html but would like to take advantage of the "automatic" page linking in OLSB's nav bar.

avd

August 28. 2008 08:57 PM

acxede 

In the properties of the navigation module, you'll see its XSLT code. Somewhere towards the middle, you'll see code that renders each link in a sepearate [i]<tr>[/i]. Just keep one of the tags are remove others so that the entire bar is rendered as multiple columns in a single row. If you can edit html, you can do this too.

Post back if you have problems.

acxede 

August 29. 2008 11:24 PM

avd

Thanks for the help. I did try figuring out where I should remove the <tr>'s but everytime I do, I get an error message (not well formed). The XSLT has me really confused. Could you take a look at the code and indicate where the tr's should be taken out?
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:param name="NavType">LEFT</xsl:param>
    <xsl:output method="html" omit-xml-declaration="yes"/>


    <xsl:template match="/NavNodes">
        <table cellpadding="0" cellspacing="0" class="MSC_PrimaryNavFrame" style="width:auto;">
            <xsl:for-each select="NavNode">
                <xsl:variable name="ChildSelected" select="count(NavNode[@selected='true']) != '0'" />
                <xsl:variable name="SelfOrChildSelected" select="$ChildSelected or (@selected='true')" />
                <tr>
                    <td>
                        <xsl:attribute name="class">
                            <xsl:choose>
                                <xsl:when test="$SelfOrChildSelected">MSC_PrimaryNavLinkFrame-On</xsl:when>
                                <xsl:otherwise>MSC_PrimaryNavLinkFrame</xsl:otherwise>
                            </xsl:choose>
                        </xsl:attribute>
                        <a>
                            <xsl:attribute name="href">
                                /<xsl:value-of select="@url"/>
                            </xsl:attribute>
                            <xsl:attribute name="class">
                                <xsl:choose>
                                    <xsl:when test="$SelfOrChildSelected">MSC_PrimaryNavLink-On</xsl:when>
                                    <xsl:otherwise>MSC_PrimaryNavLink</xsl:otherwise>
                                </xsl:choose>
                            </xsl:attribute>
                            <xsl:value-of select="@name"/>
                        </a>
                        <xsl:if test="$SelfOrChildSelected">
                            <xsl:if test="count(child::*) != '0'">
                              <table cellpadding="0" cellspacing="0" class="MSC_SecondaryNavFrame" >
                                    <xsl:for-each select="NavNode">
                                        <xsl:if test="position() &gt; 1 ">
                                            <tr>
                                                <td>
                                                    <xsl:attribute name="class">MSC_SecondaryNavTopSpace</xsl:attribute>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <xsl:attribute name="class">MSC_SecondaryNavBottomSpace</xsl:attribute>
                                                </td>
                                            </tr>
                                        </xsl:if>
                                        <tr>
                                            <td>
                                                <xsl:attribute name="class">
                                                    <xsl:choose>
                                                        <xsl:when test="@selected='true'">MSC_SecondaryNavLinkFrame-On</xsl:when>
                                                        <xsl:otherwise>MSC_SecondaryNavLinkFrame</xsl:otherwise>
                                                    </xsl:choose>
                                                </xsl:attribute>
                                                <a>
                                                    <xsl:attribute name="href">
                                                        /<xsl:value-of select="@url"/>
                                                    </xsl:attribute>
                                                    <xsl:attribute name="class">
                                                        <xsl:choose>
                                                            <xsl:when test="@selected='true'">MSC_SecondaryNavLink-On</xsl:when>
                                                            <xsl:otherwise>MSC_SecondaryNavLink</xsl:otherwise>
                                                        </xsl:choose>
                                                    </xsl:attribute>
                                                    <xsl:value-of select="@name"/>
                                                </a>
                                            </td>
                                        </tr>
                                    </xsl:for-each>
                                </table>
                            </xsl:if>
                        </xsl:if>
                    </td>
                </tr>
                <tr>
                    <td class="MSC_PrimaryNavTopSpace">
                    </td>
                </tr>
                <tr>
                    <td class="MSC_PrimaryNavBottomSpace">
                    </td>
                </tr>
            </xsl:for-each>
        </table>
    </xsl:template>
</xsl:stylesheet>

avd

August 31. 2008 04:14 PM

acxede 

Ok. I'll post the updated XSL when I get a chance... in a day or so mostly.

acxede 

September 17. 2008 05:03 PM

Jay Skinner

Is this issue has been resolved? If so, can you post the XSL code? Thank you!!!

Jay Skinner

March 8. 2009 03:09 PM

glo-mc

I removed all row code (<tr>, </tr>) except the outermost code, and all this did was remove the lines between the buttons. it did not change the layout of the navigation to horizontal. So the definition is somewhere else in the code.  

I looked at the source for your page, and it does not include the same code as the OLSB navigation module, so I wasn't able to sleuth anything there.

If you can offer any more info it would be appreciated. Merci.

glo-mc

March 8. 2009 04:32 PM

acxede 

You'll also need to define a custom style sheet. If you simply remove the tr tags, your markup still uses Office Live's default styles which is why your navigation looks like the original.

Besides, when you want to tweak OL's code, as opposed to wrting your own from scratch, you'll have to choose the vertical or horizontal layour BEFORE you drop the custom navigaton module. Vertical navigation on the left won't become horizontal navigation on the top simply by removing the tr tags.

If you post the url of your page and a note about what you want to do, I may be able to help.

acxede 

July 28. 2010 04:36 PM

Sell Used Books

Awesome post thank you. I will be back to read more.

Sell Used Books

Add comment




  Country flag

[b][i][u][quote]
Loading