Kevin Tunis

I had started this project about two and a half to three weeks ago with the objective to create a vertical navigation on the default page and a horizontal navigation on all the other pages. While Community Server 2007 is built on ASP.NET 2.0 and uses master pages, you cannot seem to view the master page when creating a new theme using Visual Studio. We will get into that a little later post. To start out with I copied the site theme default and named it blue_v since I was going to create a blue vertical theme. This is located at CS2007_3.0.20409.794\Web\Themes depending on where you download the file. Now since my default page is to have vertical navigation, I created a second master which I copied from the master.master and called it vertical.master.  The master files are located at CS2007_3.0.20409.794\Web\Themes\blue_V\Common. To start with I commented out the horizontal navigation:

<!--<div class="CommonTabBar">

<script type="text/javascript">

// <![CDATA[

function tabOver(e)

{

if (e.className!='CommonSimpleTabStripSelectedTab')

                      e.className='CommonSimpleTabStripTabHover';

            }

            function tabOut(e)

            {

                  if (e.className!='CommonSimpleTabStripSelectedTab')

                      e.className='CommonSimpleTabStripTab';

            }

            // ]]>

</script>

<CSControl:NavigationList runat="server" Tag="div" CssClass="CommonTabBarInner">

<HeaderTemplate><table cellspacing="0" cellpadding="0" border="0"><tr valign="middle">

</HeaderTemplate>

<ItemTemplate>

<CSControl:CSLinkData runat="server" Tag="Td" CssClass="CommonSimpleTabStripSelectedTab" onmouseover="tabOver(this);" onmouseout="tabOut(this);" LinkTo="Link" Property="Text">

<DisplayConditions><CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" /></DisplayConditions>

                  </CSControl:CSLinkData>

                  <CSControl:CSLinkData runat="server" Tag="Td"

CssClass="CommonSimpleTabStripTab"

onmouseover="tabOver(this);" onmouseout="tabOut(this);"

LinkTo="Link" Property="Text">

<DisplayConditions Operator="Not"><CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" /></DisplayConditions>

                  </CSControl:CSLinkData>

            </ItemTemplate>

      <FooterTemplate></tr></table></FooterTemplate>

</CSControl:NavigationList>

</div>-->

And replaced it with:

<CSControl:NavigationList runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <CSControl:CSLinkData runat="server" Tag="Li" LinkTo="Link" Property="Text" />
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</CSControl:NavigationList>

This creates the vertical navigation.

To get the images and layout I wanted on the default page, I created a table. I tried to do this in CSS but I was not getting it position where I wanted. I will continue to work on this. First I started Visual Studio and created a new site and then I added the images I wanted to use. This let me see the position of the table with the background of the document that I was working on. Then back in the vertical.master, I commented out the existing table layout under <div id="CommonBody"> and then replaced it with the table I created earlier in Visual Studio. I am currently looking at how to theme the new vertical control – I will update this post on how I do this.

You can view this site at http://knowledgemgmtsolutions.com