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-->
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s