Colour by case status

Keep in mind that CaseTracker uses views for displaying. You can theme views. I did a lot of exploring (since i've never themed a view before - shame on me) and finally i made it with the help of these two fantastic tutorials:

1. Views Row Theming (Mustardseed) - shows the great concept of how to theme a view. wow - that easy!
http://mustardseedmedia.com/podcast/episode30

Since we have to deal with a table view all row data are stored in arrays which makes a little difference in how to display them.

2. I stumbled upon this wonderful comment by merlinofchaos which describes every piece step by step.
http://drupal.org/node/286700#comment-935655

After that i was able to add this little magic to CaseTracker.
I'm using the field 'case_status_id' as a css class for a row. Works like a charme.
Have a look at the screenshot.

cheers, Ronald

jQuery solution:

jQuery

$(".views-field-case-status-id").each(function(){
  $(this).parent().addClass('ct-'+$(this).text().trim().toLowerCase().replace(/\s+/g, '-'));
});

CSS

.ct-closed.odd td,
.ct-closed.even td {
  background:#c0ffc0;
}

.ct-deferred.odd td,
.ct-deferred.even td {
  background-color:#ddddff;
}

FYI. Related active post in the Views issue queue http://drupal.org/node/261171

the jquery stuff from #2 may works but it hasnt a good performance, since it has look for every class, trim, lower and replace.

the php thing from #1 should be the first choice

just my 2 cents, greetz from germany

I did a similar thing as suggested in the issue Chris Herberte posted in #3. In case someone else might find this useful, I'm attaching my views template (i came here out of curiosity to see how others have done this). Anyeay, we can mark this 'fixed' since there are a few different ways to do it, can't we?

Here's how to use this template if you want to:

1. Drop this into your theme (make sure to rename the file "views-view-table--casetracker-project-cases.tpl.php")
2. Clear the Views cache (so Views picks up the new theme template - you can rescan files in the view under 'theme information') -- Now your rows will have classes
3. Add styles to your stylesheet to match your case status names. Here are mine (the border stuff worked for my theme, yours may not need that):

  /* Casetracker view */
  .view-casetracker-project-cases tr.open /* Open */
  {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #FFFFDD;
  }

  .view-casetracker-project-cases tr.resolved /* Resolved */
  {
    border-top: 1px solid green;
    border-bottom: 1px solid green;
    background-color: #C0FFC0;
  }

  .view-casetracker-project-cases tr.deferred /* Deferred */
  {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #FFE7DD;
  }

  .view-casetracker-project-cases tr.duplicate /* Duplicate */
  {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #DDDDFF;
  }

  .view-casetracker-project-cases tr.closed /* Closed */
  {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #FFC9C9;
  }

thanks so much for this!!

fyi, using the same tpl.php file you can have the case colours applied also to your translated cases modifying your css with something like this:

/* nodetype case tracker in english, catalan and spanish */
 /* Casetracker view */
  .view-casetracker-project-cases tr.open, .view-casetracker-project-cases tr.obert, .view-casetracker-project-cases tr.abierto /* Open */
  {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #FFFFDD;
  }

  .view-casetracker-project-cases tr.resolved, .view-casetracker-project-cases tr.resolt, .view-casetracker-project-cases tr.resuelto /* Resolved */
  {
    border-top: 1px solid green;
    border-bottom: 1px solid green;
    background-color: #C0FFC0;
  }

  .view-casetracker-project-cases tr.deferred, .view-casetracker-project-cases tr.aplaçat, .view-casetracker-project-cases tr.aplazado /* Deferred */
  {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #FFE7DD;
  }

  .view-casetracker-project-cases tr.duplicate, .view-casetracker-project-cases tr.duplicat, .view-casetracker-project-cases tr.duplicado /* Duplicate */
  {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #DDDDFF;
  }

  .view-casetracker-project-cases tr.closed, .view-casetracker-project-cases tr.tancat, .view-casetracker-project-cases tr.cerrado/* Closed */
  {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #FFC9C9;
  }

Just make sure your translations are consistent with the classes

@castawaybcn: I hadn't thought about translations with theming casetracker, but good point. Awesome!

I used solution #5. I cleared the views cache but the colours are not displaying and in the XHTML it's still just doing even and odd classes and not based on the status. Any ideas?

It doesn't work for me either.

If i track it down in the source code, i get this:

class="crayon crayon-swatch crayon-3" style=""><span class="label">XXX</span><span class="crayon-popup"><span class="crayon-popup-label"><span class="crayon-marker crayon-3" style=""></span>XXX</span></span></a><span class="case-priority priority-1">1</span>

Apparently it uses the css from seed.css but i have no idea why it uses "crayon-3".

Any ideas?

I'm using open atrium, so i put the "views-view-table--casetracker-project-cases.tpl.php" file in the directory /profiles/openatrium/themes/ginko because i use only one theme.

Hi,

I am trying to use the solution in #5. However, it does not work.

In my case, I have disabled the view provided by casetracker module, and provided a new view:

casetracker_project_cases_customized, it contains several different page displays.

Then what I did are as following:

1) rename the file to be : views-view-table--casetracker-project-cases-customized.tpl.php
2) copy it into my theme directory
3) replace .view-casetracker-project-cases with .view-casetracker-project-cases-customized
4) copy the css to my theme's style sheet
5) flush all caches

Is there anything I did wrong?

Thanks.

Find a solution as following:

.view-casetracker-project-cases-customized tr.open, .view-casetracker-project-cases-customized tr.open td /* Open */
{
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background-color: #FFFFDD;
}

......

Currently, I am using theme: acquia marina.

It works find when I put the tpl.php file in my theme folder, and add the css to my theme style sheet.

However, I am wondering, if this can be achieved by:

1) create a module
2) keep keep both tpl.php, and the css within the module
3) let the module inform the system that the template and css should be used when theming my views table.

Basically, I want to use a customized module to manage things above, since it looks like a cleaner solution( Not sure if I am right about this )

Any ideas?

Thanks.