CSS Challenge Response: Simple styles for SharePoint list

Please find the below links and code to change the  styles in SharePoint list


---------- Table Rows ----------*/
        background: #2E4C70;
/* Set background for every row */
    .ms-listviewtable > tbody > tr {
        background: white;

 Set border for every row */
    .ms-listviewtable > tbody > tr td{
        border-bottom: 1px solid #AFAFAF !important; /* !important needed over override SharePoint inline style */

 Set background for every alternating row */
    .ms-listviewtable > tbody > tr.ms-alternating {
        background: #E2E3E5;
    } Table Header Row 
 Remove background set in SharePoints general data table style */
    .ms-listviewtable tr.ms-viewheadertr {
        background: transparent;

    .ms-listviewtable {

}tr.ms-viewheadertr > th.ms-vh2-nograd {   color:white;}

 Modify background color */
 tr.ms-viewheadertr > th.ms-vh2-nograd,
    tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
    tr.ms-viewheadertr > th.ms-vh, /* Text */
    tr.ms-viewheadertr > th.ms-vh2 ,
    tr.ms-viewheadertr >th.ms-vh2-nofilter,
    tr.ms-viewheadertr >th.ms-vh-div/* Text */ {
        background: #2E4C70;
.ms-viewheadertr {


 Modify background color on hover */
    tr.ms-viewheadertr > th.ms-vh:hover,
    tr.ms-viewheadertr > th.ms-vh2:hover {
                background-color: #273C51;
                border-color: #273C51;

 Modify font color */
    .ms-viewheadertr a,
    .ms-viewheadertr div {
        color: grey;

 Modify font color on hover */
    .ms-viewheadertr a:hover,
    .ms-viewheadertr div:hover {
        color: blue;



Doc Open New Tap in SP

Below code to open doc in new tap in SP 2013.

function ()
// has to be on an interval for grouped doc libraries
// where the actual links are loaded only once a group
// is expanded
function ()
$(“a[onclick*=’return DispEx’][target!=’_blank’]”)
.attr(“target”, “_blank”)

// document type icons
.click(function (e)
window.open($(this).attr(“documentUrl”), “_blank”);
return false;
.each(function ()
.replace(/[“‘{}]/g, “”)
this.onclick = null;

Display a Task List on a Master Calendar

Display a Task List on a Master Calendar

1. From your SharePoint site, open your master Calendar, in this example I will open my “Team Calendar.”

2. At the top of the page click CALENDAR to expand the ribbon.

3. In the Manage Views section click Calendars Overlay.

4. On the Calendar Overlay Settings page click New Calendar.

5. In the Name and Type enter the following:

  • 1.Calendar Name: Internal Tasks
  • 2. The type of calendar is: SharePoint

6. In the Calendar Overlay Settings section enter the following information below:

  • 3. Description: Blank
  • 4. Color: Dark Green, #134029
  • 5. Web URL: (locate the site where your task list resides) click Resolve
  • 6. List: (select the task list you would like to display) Team Tasks
  • 7. List View: Calendar
  • 8. Always show: unchecked

7. Review your settings and click OK.

8. Under Additional Calendars you will see your new calendar overlay, which in this example is “Internal Tasks.”

9. Click OK.
10. You will now see items from your task list, in this example “Team Tasks” showing on the master calendar.

How to roll up calendars in SharePoint

How to roll up calendars in SharePoint

Ever wished you could aggregate multiple SharePoint calendars in one place? Usually, when you need to roll up content from multiple SharePoint sites – it is somewhat of a challenge. There is no web part that allows you to easily roll up documents, tasks or other content. However, SharePoint Calendar has a wonderful built-in feature called “Calendar Overlay“, allowing you to roll up calendars from various sites all in one place. Moreover, you can color code all those calendars as well! Let me show how to do this!


  1. Create all calendars you plan to roll up (I trust that you have already completed this part)
  2. Create a “Master” Calendar – a calendar where you will roll up all other calendars. All calendars can reside on different sites, but they have to reside on same site collection (you cannot roll up calendars from other site collections)
  3. Once the “Master” Calendar has been created, click on Calendar tab, then Calendar Overlaycalendaroverlay1
  4. On the next screen, click on New Calendarcalendaroverlay2
  5. On the next screen, give the calendar you are adding a name (does not matter what it is), leave SharePoint radio button checked, choose the color code (you have 9 colors to choose from). For Web URL, paste the URL of the site calendar resides on (NOTE: it has to be the site URL, not the Calendar URL), once you paste your website URL, click Resolve This will display all calendars that it can find on your site. Choose the right calendar, then Calendar View, then click OKcalendaroverlay3
  6. Repeat steps 4 & 5 for other calendars. Click OK
  7. All of the rolled up calendars will now appear on a single “Master” Calendarcalendaroverlay4


  1. You can only add/roll up to 10 calendars maxcalendaroverlay5
  2. All calendars you are rolling up need to reside in the same site collection
  3. Visitors to the site where aggregate calendar appears also need to have access to all the calendars being rolled up. If they don’t have access to at least 1 calendar, they will get a nasty error message when they try to view aggregate calendar. So make sure they have at least Readaccess to all the calendars.calendaroverlay6
  4. You can even use above instructions to color code different categories of events in SAME To do this, create different views of same calendar, 1 filtered view for each category. Then, when you add calendars using Calendar Overlay, for every calendar added, choose same calendar, but different view. So essentially you will be rolling up same calendar over and over, just different views!calendaroverlay7
  5. Above instructions apply to SharePoint Team Sites. If you use Calendar functionality as part of Office 365 Groups, you can easily overlay multiple calendars along with your personal calendar in Outlook Web App(will try to write a blog post on this down the road)


SharePoint 2013: Calendar – Colorize Event Categories

Table of Contents

In a standard implementation of the SharePoint calendar app it is not possible to visualize the event entries with a different background color depending on the category.
To implement such a feature we have to do some customizing.  In the following steps we will modify the calendar with an additional column that holds auto-calculated information. After that we will implement a JavaScript code block that contains the coloring logic.

Caution: The jQuery JavaScript library must be available in your environment.

Some events with different categories in the standard calendar implementation.

Create additional column

Go to the calendar settings page and create a new column called “TitleColorized”. The column will calculate its own value by concatenating the title and category text separated by three pipes (“|||”). You don’t need to add this column to the default view.

When you take a look on an event you will see the desired output:

For a better example I changed the Title property. As you see the text values are concatenated in the correct way.
The script that we will implement in the next step needs that value to do the coloring correctly.

Customizing the view

But before we do that we have to make a final change to the standard calendar view. Again go to the calendar settings and choose the “Calendar” view to edit.

In the “Calendar Columns” section change all title references to our newly created column.

Implementing the script

All requirements for the script logic are set up now. Let’s insert the script.
Open the calendar in the standard view (Calendar.aspx) and start editing that page.
You will see the Web Part frame called “Main”. On top of that click on “Add a Web Part”.
Go to the “Media and Content” categories and choose the “Script Editor” Web Part and add it to the page.
The Web Part has been added now. Click on “Edit Snippet” and copy and paste the following code into the pop-up window:

LoadSodByKey("SP.UI.ApplicationPages.Calendar.js"function () {
var SEPARATOR = "|||";
function WaitForCalendarToLoad() {
        SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = functionSP_UI_ApplicationPages_SummaryCalendarView$renderGrids($p0) {
        var $v_0 = new Sys.StringBuilder();
        var $v_1 = $p0.length;        for (var $v_2 = 0; $v_2
            this.$7V_2($v_2, $p0[$v_2]);
        for (var $v_3 = 0; $v_3

            this.$I_2.$7Q_1($v_0, $p0[$v_3], $v_3);


SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function($p0, $p1) {
  if (this.$K_1.$8G_0()) {
        this.$41_1 = false;
        if (this.$3G_1) {
            this.$3G_1 = false;
        if (SP.UI.ApplicationPages.SU.$2(this.$39_1[this.$j_1])) {
            this.$39_1[this.$j_1] = [];
        Array.addRange(this.$39_1[this.$j_1], $p0);
        this.$D_1.$7S_1(this.$j_1, this.$v_1, $p1, this.$39_1[this.$j_1]);
function ColourCalendar() {
        if(jQuery('a:contains(' + SEPARATOR + ')') != null)
   jQuery('a:contains(' + SEPARATOR + ')').each(function (i) {
   $box = jQuery(this).parents('div[title]');
   var colour = GetColourCodeFromCategory(GetCategory(this.innerHTML));
   this.innerHTML = GetActualText(this.innerHTML);
   jQuery($box).attr("title", GetActualText(jQuery($box).attr("title")));
   $box.css('background-color', colour);
function GetActualText(originalText) {    
 var parts = originalText.split(SEPARATOR);
 return parts[0] + parts[2];  
function GetCategory(originalText) {
 var parts = originalText.split(SEPARATOR);
 return parts[1];  
function GetColourCodeFromCategory(category) {
 var colour = null;    
 switch (category.trim()) {
  case 'Meeting':        
   colour = '#4FDB51';
  case 'Work hours':        
   colour = '#4FB8DB';
  case 'Business':        
   colour = "#F08616";
  case 'Holiday':        
   colour = "#F55875";        
  case 'Get-together':        
   colour = "#E0F558";        
  case 'Gifts':        
   colour = "#F558D5";        
  case 'Birthday':        
   colour = "#6E80FA";        
  case 'Anniversary':        
   colour = "#FF4040";        
 return colour;  

Stop editing the page.
Your result should look like that in the monthly scope:

The same should be on daily and weekly scope.


Create your website at WordPress.com
Get started