locked
Gantt view - change a color of the current day marker RRS feed

  • Question

  • How can I change a color of the current day marker (vertical line, now yellowish, not visible much on white background) in a gantt view ?

    Thanks.

     

    • Moved by Mike Walsh FIN Thursday, July 22, 2010 9:48 AM not general (From:SharePoint - General Question and Answers and Discussion (pre-SharePoint 2010))
    Thursday, July 22, 2010 9:33 AM

All replies

  • Sounds like you might need to implement a jquery solution here.  I'd check out blog.pathtosharepoint.com.  Paul Grenier has done some pretty cool colour coding stuff with the default Gantt views so maybe you can get a pointer there?
    SharePoint Administrator and MCTS | SharePoint Fan www.davepyett.wordpress.com - Follow me on twitter: twitter.com/dpyett
    Friday, July 23, 2010 10:08 AM
  • Any other way of doing this? Maybe with some script inserted into Content Editor Web Part?
    Wednesday, July 28, 2010 6:24 AM
  • @GfxApprentice: I was also looking for a solution to this problem here with the 'yellow' day bar that was near invisible on the Gantt Chart, and seeing that this post provided little to no assistance (albeit a great link to some color coding Gantt Options can be found here: http://blog.pathtosharepoint.com/2009/09/08/color-coded-gantt-view/ and I do recommend it also) I had to search for my own solution. I was in fact rather disappointed that MSDN could not answer such a simple question either.

    So, I derived my own solution by first installing this 'Web Developer' plug-in for Firefox here: https://addons.mozilla.org/en-US/firefox/addon/web-developer/ and used it to 'Inspect' the CSS properties of the 'current day' marker by simply clicking on it. This revealed the following CSS code:

    .ms-GT (line 3104)
    {
    background-color: cornsilk;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    }
    .ms-ganttInnerTable td, .ms-ganttInnerTable th (line 3052)
    {
    font-family: verdana;
    font-size: 0.68em;
    }

    Well, 'cornsilk' for 'background-color:' sounded kind of 'yellowy' to me.. so I opted to change it to something more bold like 'red'  and visible.

    Try adding this CSS to a Content Web Editor Part on your page. Be sure to make the web part not visible, or hidden so you don't see the title. Oh yeah, I also placed this at the very bottom of the page - but I don't think it matters where you place it.

    <style type="text/css"> 
    .ms-GT
    {
    background-color: red;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    }
    .ms-ganttInnerTable td, .ms-ganttInnerTable th
    {
    font-family: verdana;
    font-size: 0.68em;
    }
    </style> 

    Anyways, this worked like a charm for me and I am quite proud of this in-house solution that I fingered out on my own. Yeah, a tip that I did not even see on Heather Solomon's website ( http://www.heathersolomon.com/content/sp07cssreference.htm#Calendar ) .

    So, not to shabby for a SharePoint Hillbilly such as I consider myself to be. Hope this works for you too. =)

     

     


    Wednesday, January 4, 2012 4:42 PM
  • Hi, from the share point designer you can achieve this by formatting the color on some condition.
    Anil
    Thursday, January 5, 2012 1:22 PM