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

Search Site Custom Master Page and Default Master Pagge

Wasted my SharePoint Administrator half a day to debug something that was my fault. Sorry Dave!

The search site(Standard SharePoint) uses minimal.master as the Site master page(In SPD, choose Set As Custom Master Page) and uses v4.master as the System master page(In SPD, choose Set As Default Master Page)

To customize the master page on search site, make copy of minimal.master and DON’T change v4.master as the DEFAULT MASTER PAGE!!

 

Add home and back button to the search result page in SharePoint 2010

Once people get into the search result page, there is no way to go back to the previous page without clicking the browser back button.

We can add some code to a content editor web part to display a button on the page to let people go back to previous page and with search term displaying in the search box.

Here is the code to add to a content editor web part:

<!–Home button–>

<a href=”/”>
 <img src=”_layouts/images/hhome.png” border=”0″ alt=””/>
</a>
<a href=”/”>Home</a>

<!–Back button–>
<a onclick=”history.go(-1)” href=”#”>
 <img src=”_layouts/images/back.gif” border=”0″ alt=””/>
</a>
<a onclick=”history.go(-1)” href=”#”>Back</a>

Adding a jQuery image carousel to SharePoint 2010 using content editor web part

I couldn’t find a carousel web part for SharePoint 2010 so decide to use a content editor web part to include some html and JavaScript to display an image carousel. Initially, found a jQuery plugin called jCarousel Lite which didn’t provide any css so looked for another one which is called Infinite Carousel. This one worked for me.

Final look:

  • Clicked on the demo link in the article and “View Source”ed it. All the code are laid out nicely.
  • Copy and paste everything to a text editor and remove the unwanted parts and change the image urls, save it as a .txt file. Upload the text file to SharePoint (In this case, Style Library/custom_scripts)
  • Downloaded the “arrow” image and added to Style Library/Images
  •  On the SharePoint page where I need this carousel, add a content editor web part, click on “Edit Web Part”.
  • In the content link box, paste the url of the text file I uploaded to SharePoint before.

  • Change Appearance->Chrome Type to “None” and click OK

Here’s the code I used, unfortunately wordpress doesn’t let me upload text files, so I had to copy and paste it to a Word document.

Change the default markup style

For content editors, we can choose a markup style for the ribbon to format the text.

These styles are defined in core.css. We can overwrite them in our custom css file by adding the following classes:

.ms-rteElement-H1
{
font-size:x-large !important;
font-weight:normal;
}
.ms-rteElement-H2
{
font-size:large !important;
font-weight:normal;
}
.ms-rteElement-H3
{
font-size:medium !important;
}
.ms-rteElement-H4
{
font-size:medium !important;
font-weight:normal;
font-style:italic;
}
.ms-rteElement-H1B
{
/* [ReplaceColor(themeColor:”Accent1″)] */ color:#028CD3;
font-size:x-large !important;
font-weight:normal;
}
.ms-rteElement-H2B
{
/* [ReplaceColor(themeColor:”Accent2″)] */ color:#052569;
font-size:large !important;
font-weight:normal;
}
.ms-rteElement-H3B
{
/* [ReplaceColor(themeColor:”Accent3″)] */ color:#028CD3;
font-size:medium !important;
}
.ms-rteElement-H4B
{
/* [ReplaceColor(themeColor:”Accent5″)] */ color:#058036;
font-size:medium !important;
font-weight:normal;
font-style:italic;
}
.ms-rteElement-Hr
{
/* [ReplaceColor(themeColor:”Light1-Medium”)] */ background-color:#b6b6b6;
height:1px;
}
.ms-rteElement-P
{
/* [ReplaceColor(themeColor:”Dark2-Darker”)] */ color:#576170;
}
.ms-rteElement-Callout1
{
color:660000;
background-color:#fef4e4;
float:left;
width:25em;
padding:10px;
border:1px solid #FD9F08;
}
.ms-rteElement-Callout2
{
color:#353738;
background-color:#f2f2f2;
float:left;
width:100%;
padding:10px;
text-align:justify;
border:1px solid #5a6600;
}
.ms-rteElement-Callout3
{
font-style:italic;
color:#CA0078;
float:right;
width:25em;
padding:10px;
}
.ms-rteElement-Callout4
{
color:#005677;
float:right;
width:20em;
padding:10px;
background-color:#d8f4ff;
font-family:Verdana,Geneva,sans-serif;
border:1px solid #00ADEE;
}
.ms-rteStyle-Normal
{
-ms-name:”Normal”;
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:”Dark1″)] */ color:#676767;
/* [ReplaceColor(themeColor:”Light1″)] */ background-color:#fff;
}
.ms-rteStyle-Highlight
{
-ms-name:”Highlight”;
/* [ReplaceColor(themeColor:”Dark1-Darker”)] */ color:#312a26;
/* [ReplaceColor(themeColor:”Accent6″)] */ background-color:#fae032;
}
.ms-rteStyle-Byline
{
-ms-name:”By Line”;
/* [ReplaceColor(themeColor:”Dark1″,themeTint:”0.29″)] */ color:#b6b6b6;
}
.ms-rteStyle-Tagline
{
-ms-name:”Tag Line”;
font-size:1.3em;
/* [ReplaceColor(themeColor:”Dark1″,themeTint:”0.45″)] */ color:#8b8b8b;
}
.ms-rteStyle-Comment
{
-ms-name:”Comment”;
font-style:italic;
/* [ReplaceColor(themeColor:”Accent5-Darkest”)] */ color:#36b000;
/* [ReplaceColor(themeColor:”Dark1″)] */ text-shadow:0px 0px 5px #000;
}
.ms-rteStyle-References
{
-ms-name:”References”;
/* [ReplaceColor(themeColor:”Dark1-Lightest”)] */ color:#828282;
}
.ms-rteStyle-Caption
{
-ms-name:”Caption”;
/* [ReplaceColor(themeColor:”Accent3″)] */ color:#00adee;
}

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.