Archive

Posts Tagged ‘Publishing site’

Customization of SharePoint 2010 navigation – publishing site

February 12th, 2010 2 comments

In my previous blog, I customized the SharePoint 2010 publishing site. Now I will give you some idea that how you can create customize the navigation according to new look and feel. There are different ways to customize the navigation of SharePoint. I like to use a custom control which returns navigation in the form of xml and then I transform it from xsl. In this way you can easily control the output of the navigation or any other control.  

<SafeControl Assembly=SalmanSPControls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=49908bd985021621 Namespace=SalmanSPControls TypeName=* Safe=True />You need to add a reference in your SharePoint master page. It would be like this. 

<% @ Register Tagprefix=”SWC” Namespace=”SalmanSPControls” Assembly=”SalmanSPControls, Version=1.0.0.0, Culture=neutral, PublicKeyToken=49908bd985021621″ %>  

Then I created a class for navigation inherited from ASP .Net Menu and xml based control class. This class is not doing much but just adding all the items in xml. It’s getting these items from Menu items. In the master page when you use this control you need to specify the data source id. If you search in your master page you can find a tag like this.  

<PublishingNavigation:PortalSiteMapDataSource EnableViewState=”false” ID=”leftNavDataSource” Runat=”server” SiteMapProvider=”CombinedNavSiteMapProvider” StartFromCurrentNode=”true” StartingNodeOffset=”1″ ShowStartingNode=”true” TreatStartingNodeAsCurrent=”true” TrimNonCurrentTypes=”Heading” />  

There will be two tags like above one for global navigation and other for current navigation. For left navigation you have to look the current navigation site map data source. In portal site map data source you can also change the SiteMapProvider, depending on your needs. You can use the current or combine or global. These site map providers are defined in web.config. You can find the difference of these site map providers in SharePoint documentation.
Now you have to replace the existing navigation control with your new custom navigation control. After that your master page changes are over. Now your control is ready and will display instead of default SharePoint current navigation. Here is how your navigation control will look like.  

<SWC:Navigation cacheperpage=”true” EnableViewstate=”false” ID=”LeftNav” Runat=”server” DataSourceID=”leftNavDataSource” Transform-XslName=”leftnav.xsl” Transform-CacheOutput=”false”/> 
 
But this control is just returning xml. You need to transform it in an html through some xsl. For this I created one xsl file and use some style classes to give it new look.  Here is the piece of code I use in my xsl to transform navigation xml into new look. 
 
<xsl:template match=”/>
    <xsl:if test=count(Navigation/Item) &gt; 0>
        <div id=nav-y>
             <p>
                 <a href={Navigation/Item/@Url}title=”{Navigation/Item/@Title}>
                      <xsl:value-of select=”Navigation/Item/@Titledisable-output-escaping=”yes/>
                 </a>
             </p>
             <ul>
                 <xsl:apply-templates select=”Navigation/Item>
                     <xsl:with-param name=”levelselect=”1/>
                     <xsl:with-param select=”@Titlename=”sectionTitle/>
                 </xsl:apply-templates>
              </ul>
        </div>
    </xsl:if>
 </xsl:template>
 
<xsl:template match=”Item“>
    <xsl:param name=”level” />
    <xsl:param name=”sectionTitle” />
    <xsl:choose>
        <xsl:when test=”$level != 1“>
            <li>
                <xsl:if test=”@Selected=’True’ or @Current=’True“>
                    <xsl:attribute name=”class“>Selected</xsl:attribute>
                </xsl:if>
                <a href=”{@Url}title=”{@Title}“>
                    <xsl:value-of select=”@Titledisable-output-escaping=”yes“/>
                </a>
                <xsl:if test=”count(Item) &gt; 0 and @Current = ‘True“>
                    <ul>
                        <xsl:apply-templates select=”Item“>
                            <xsl:with-param name=”levelselect=”$level + 1” />
                            <xsl:with-param select=”@Titlename=”sectionTitle” />
                        </xsl:apply-templates>
                    </ul>
                </xsl:if>
            </li>
        </xsl:when>
        <xsl:otherwise>
            <xsl:apply-templates select=”Item“>
                <xsl:with-param name=”levelselect=”$level + 1” />
                <xsl:with-param select=”@Titlename=”sectionTitle” />
            </xsl:apply-templates>
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>
 
 So now after doing all these changes my new site will look like this.
  
   

Hope you enjoyed customization of SharePoint 2010 navigation in publishing sites.  

Cheers

Branding of SharePoint 2010 publishing site

February 8th, 2010 Comments off

Couple of days ago, I was thinking to look the customization of new SharePoint 2010 publishing site. Here are the steps I took to achieve this goal. When you create a basic SharePoint publishing site, it looks like this.

As you people now that SharePoint websites are based on master-pages, and previously when we had to achieve branding in SharePoint 2007. We used minimal master page and then our own styling for it. I was thinking the same way that how I can get a minimal master page for SharePoint 2010. By the way if you look in the master pages library there is a master page named minimal.master. This page is a simple master page without navigation and much of the controls. It is a default master page for search pages. Anyhow the new term for minimal master page in SharePoint 2010 is starter page. Thanks to MSDN and Randy Drisgill, this starter page is available on CodePlex and MSDN. I picked the one from CodePlex and use the _starter.master. It is very well commented and easy to understand.

I have done the changes for html in master page for new look. For my style sheet I added a reference like this.

<SharePoint:CssRegistration name=“/Style Library/Styles/styles.css” After=“corev4.css” runat=“server”/>

If you want to do any change in the global (top) navigation or current (left) navigation you can do it from the SharePoint settings page. For this purpose you can select ‘Modify Navigation’ from the ‘Site Actions’ menu.

This is how it looks after the customization.

In next post I will talkabout creating custom controls for SharePoint 2010 publishing sites.