Modify Project Summary Web Part Countdown

This is a bit of an odd one… but I love to show examples of how simple CSS can meet your needs, however different they may be, for SharePoint and SharePoint web parts.  A student needed to convert the Project Summary web part countdown box to a single line above the rest of the web part content.  The following CSS can make this happen.

Project Summary Countdown

Here is how the Project Summary count down (task X due in X days) looks by default:

Project Summary Web Part

My student wanted it moved above the web part.  Here is the result:

Project Summary Web Part with CSS changes

Here is the CSS to accomplish this task:

/* =SharePoint Experts, Inc. - CSS for converting the Project Summary countdown box to a single line above the web part content. SharePoint 2013.
-sharepointexperience.com
*/


/* ---- Project Summary Web Part ---- */

/* Add space for countdown line between web part title and web part content */
	div[id^="OuterPanel"] {
		margin-top: 30px;
	}

/* Move countdown area to above web part contents */
	div[id$="CountDown"] {
		position: absolute;
		top: -30px; /* Match or closely mirror margin-top value above */
		width: 100%;
		border-right: 0;
	}

/* Remove default margin for countdown and main content area */
	.ms-psum-headlines-area {
		margin-left: 0 !important;  /* !important needed to override inline SharePoint style */
	}
	.ms-psum-countdown-contents {
		margin: 0;
	}

/* Collapse countdown text components into one line */
	.ms-psum-heading-task-text,
	.ms-psum-heading-text{
		float: left;
		width: auto;
		line-height: 1.5em;  /* Required to create consistent vertical spacing */
	}

/* Add to sides of center text to create the look of character spaces */
	.ms-psum-heading-text {
		padding: 0 5px;
	}

/* Adjust formatting of actual countdown to match rest of text */
	.ms-psum-countdown-number {
		font-size: 1.5em;  /* Match OOTB SharePoint font size for rest of countdown text */
		line-height: 1.5;   /* Required to create consistent vertical spacing */
	}


/*
SharePoint Experts, Inc.
sharepointexperience.com
*/

The niftier bit of this code snippet is the use of attribute selectors (lines 9 and 14) to target a couple of DIVs that have some hairy looking IDs. By using an attribute selector we can create a simpler CSS selector and stay away from things like this:

#OuterPanel_ctl00_ctl39_g_6785cfab_4428_4818_909a_ee39d0563e77  {
	margin-top: 30px;
}

I don’t know about you, but once an ID hits 61 characters, it gives me the heebie jeebies. No human created that ID and I don’t trust auto generated IDs to remain consistent as I move from SharePoint site to SharePoint site or from environment to environment. 🙂

7 thoughts on “Modify Project Summary Web Part Countdown”

  1. On my system, if I have a milestone viewed the web part first shows the project milestones, then the countdown page, then back to the milestone page and sticks. can it be set to keep flipping between these ‘pages’?

    1. Sorry, I don’t know without researching it myself. CSS can’t be used to create new or edit existing functionality. It can only be used to modify the look and feel.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.