Display special character in SharePoint global navigation, quick launch and breadcrumb

On my SharePoint global navigation menu, quick launch or breadcrumb, for pages that has special character in their name, the characters are encoded. For example, “Health & Safety” displays as “Health & Safety”, “Tomorrow’s Leader” displays as “Tomorrow#39;s”.

The solution for the global navigation is to add

EncodeTitle=”false” in the AspMenu control.

<!-- ------------| TOP NAVIGATION  |------------ -->
<div>
<!-- top navigation publishing data source -->
<SharePoint:AspMenu
   ID="TopNavigationMenuV4"
   Runat="server"
   EnableViewState="false"
   DataSourceID="topSiteMap"
   AccessKey="<%$Resources:wss,navigation_accesskey%>"
   UseSimpleRendering="true"
   UseSeparateCss="false"
   Orientation="Horizontal"
   StaticDisplayLevels="1"
   MaximumDynamicDisplayLevels="1"
   SkipLinkText=""
   EncodeTitle="false"
   CssClass="s4-tn"/>

<asp:SiteMapDataSource
   ShowStartingNode="False"
   SiteMapProvider="CombinedNavSiteMapProvider"
   id="topSiteMap"
   runat="server"/>
</div>
<!-- ------------| TOP NAVIGATION  |------------ -->
The solution for the quick launch is to add EncodeTitle=”false” in the quick launch control:
<SharePointWebControls:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" EncodeTitle="false" UseSeparateCss="false" Orientation="Vertical" StaticDisplayLevels="10" MaximumDynamicDisplayLevels="7" SkipLinkText="" CssClass="s4-ql noindex" />
The solution for the breadcrumb is different. We need to add javascript to do this. Here is the js code:
<script type="text/javascript">

    jQuery(document).ready(function () {

        fixSiteTitleBug();

    });

    function fixSiteTitleBug()
    {
        var searchAmp = '&amp;';
        var replaceAmp = '&';
        var searchQuote = '#39;';
        var replaceQuote = '\'';

        // Fix Quick Launch items
        var html = jQuery('#s4-leftpanel-content').html().replace(searchPattern, replacement);
        jQuery('#s4-leftpanel-content').html(html);

        // Fix breadcrumb items
        jQuery('a.SolidBreadCrumbRoot').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchAmp , replaceAmp ));
        });

        jQuery('a.SolidBreadCrumb').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchAmp , replaceAmp ));
        });

        jQuery('.SolidBreadCrumbCurrent').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchAmp , replaceAmp ));
        });

        jQuery('a.SolidBreadCrumbRoot').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchQuote, replaceQuote));
        });

        jQuery('a.SolidBreadCrumb').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchQuote, replaceQuote));
        });

        jQuery('.SolidBreadCrumbCurrent').each(function () {
            jQuery(this).html(jQuery(this).html().replace(searchQuote, replaceQuote));
        });
    }

</script>
Reference:
Advertisements

Create Custom Master Page on SharePoint Search Site

I’ve been working on customizing the CCRB search site to match the look of the home page. As the home page uses Synesthesia template so initially tried to use the search master page associated with it. However, after applying it, the content area stretched to have a full width rather than fixed and centered. Thus, decided to  started from scratch and include the classes that used in the template.

Setup:

  1. Standard SharePoint 2010
  2. Uses Synesthesia template 

Final look:

  • Follow Randy’s article to create a basic master page with navigation for the search site. (Note: it uses v4.master not minimal.master)
  • Add
<script type="text/javascript"> 
     function ProcessImn(){} 
     function ProcessImnMarkers(){}    
 </script>

after <SharePoint:SPHelpPageComponent>, before the style tag

  • Apended the following code inside the style tag in the header section.
/* ------------------------------------------ */ 
/* -- My Custom CSS -- */ 
/* ------------------------------------------ */ 
body.v4master{
 background:url('../../../Style Library/CCRB/images/mainBG.jpg') top center no-repeat #fff;
 font-family:Arial, Helvetica, sans-serif;
 overflow:visible!important;
}
#s4-workspace{
 width: 960px !important;
 overflow:visible!important;
 height:auto!important;
}
#s4-leftpanel-content
{
 display:none;
}
.s4-ca
{
 background-color:transparent!important;
}
.srch-stats
{
 background-color:transparent!important;
}
ul.s4-breadcrumb
{
 display:none;
}
/* Top Menu */
.NavMainBar {
 position:relative; 
 width:100%; 
 height:30px; 
 padding-bottom:1px; 
 border:0px solid #000;
 z-index:1;
}
.NavBarIn {
 float:left; 
 padding-left:10px; 
 height:30px;
}
.NavBarLeft {
 float:left; 
 height:30px; 
 width:9px; 
 background-image:url('../../../Style Library/CCRB/images/navBarLeft.png'); 
 background-repeat:no-repeat;
}
.NavBarRight {
 float:left; 
 height:30px; 
 width:9px; 
 background-image:url('../../../Style Library/CCRB/images/navBarRight.png'); 
 background-repeat:no-repeat;
}
.NavBarFill {
 float:left; 
 width:98%; 
 height:30px; 
 background-image:url('../../../Style Library/CCRB/images/navBarFill.png'); 
 background-repeat:repeat-x;}
.s4-tn{padding:0; margin:0; background-color:transparent; color:#444;}
.s4-pr s4-notdlg {background-color:#e6f5c5;}
.s4-tn li.static > .menu-item{color:#444; padding:6px 20px 0 20px; margin:0; font-size:14px; font-weight:bold; height:20px;background-image:url('../../../Style Library/CCRB/images/navBarSep.png'); background-repeat:no-repeat; background-position:right 0px;}
.s4-tn li.static > a:hover{color:#0072bc; text-decoration:none;}
.s4-toplinks .s4-tn a.selected{border:0px solid #444; background-color:#2e84b6; color:#fff; padding:5px 10px; margin:0 2px 0 0;}
.s4-toplinks .s4-tn a.selected:hover{color:#333;}
/* Sub items border */
.s4-tn ul.dynamic{background-color:transparent; z-index:20;}
/* Menu Item */
.s4-tn li.dynamic > .menu-item{display:block; padding:4px 10px; background-color:#fff; color:#333; border-bottom:1px solid #ccc;}
.s4-tn li.dynamic > a, .s4-tn li.dynamic > a:visited {color:#333;}
/* Menu Item Hover Over */
.s4-tn li.dynamic > a:hover{color:#0072bc; text-decoration:none; background-color:#b5d1e1; font-weight:bold;}
.container{
 text-align:left; 
 width:1016px; 
 margin:0 auto; 
 padding:0;
}
.shadowLeft {
 background: url("../../../Style Library/CCRB/images/shadow-left.png"); 
 background-repeat: repeat-y;
 background-position: left; 
 padding: 0 0 0 28px;
}
.shadowRight {
 background: url("../../../Style Library/CCRB/images/shadow-right.png");
 background-repeat: repeat-y;
 background-position: right top;
 padding: 0 28px 0 0;
}
.shadowBottom {
 background: url("../../../Style Library/CCRB/images/shadow-bottom.png");
 background-repeat: no-repeat;
 height: 36px;
}
.bodyContainer {
 margin:0; 
 padding:0;
}
/* Bottom Footer */
.bFooter{background:#d1e4ef; font-size:10px; color:#666; clear:both; width:100%; height:30px;}
.bFooter p{margin:0; padding:5px 10px;}
.bFooter a{display:inline; padding:0; color:#666;}
/*-----------------End My Custom CSS---------------------------------*/
  • Remove
scroll="no"

from body tag.

  • Add
<div class="container">
  <div class="shadowLeft"><!-- Start Shadow Left -->
    <div class="shadowRight"><!-- Start Shadow Right -->

after the body tag before the form tag.

  • Wrap around the s4-ribbonrow div tag with the following code around
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
</SharePoint:SPSecurityTrimmedControl>

after the ControlId=”GlobalNavigation” tag to control whether display the ribbon for anonymous users.

  • After the s4-searcharea div, remove
 <div class="s4-rp s4-app"></div>

and

<div class="s4-lp s4-toplinks">
  • Add
<div class="NavMainBar">
  <div class="NavBarLeft"></div>
  <div class="NavBarFill">
    <div class="NavBarIn">

before the PlaceHolderTopNavBar tag and add close tag around it

  • Remove the h2 tag and it’s content after
  • After the close tag of the NavBarFill, add
 <div class="NavBarRight"></div>
  • Scroll to the very bottom of the page, Before the close body tag and after the WarnOnUnsupportedBrowsers, add
 <div class="bFooter"><p>Copyright</p></div>
</div><!--close shadowRight div-->
</div><!--close shadowLeft div-->
<div class="shadowBottom"></div>
</div><!--close container div-->

Custom Advanced Search Box in SharePoint 2010

Today I had to customise the advanced search box in our CCRB website. (My current SP version is Standard SharePoint 2010)

All I needed was to make the search box stands out from other content. so only used one image to customise it.

Here is the final look of it in IE8 (a little bit different in IE7):

Image

Very simple to achieve.

  1. Added the top blue bar image to Style Library-> Images folder (Image width is 385px)
  2. Went to the style sheet in the Style Library and added some code to the bottom of the file 

.srch-advancedtable
{
 margin: 0 auto;
 padding-bottom:10px;
 padding-top:20px;
 border: #0089D0 1px solid; 
 background:url(../images/srch.png) top center no-repeat #f2f2f2;
}

Also found this article for customising standard search box.