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>

Advertisements

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