Sidebar Time Tracking mods

  • 28 February 2016
  • 7 replies

I found a few things about the timer that we are not crazy about.

1. I think it's hard to remember to start the timer on tickets with it so far down the right sidebar.

2. I think with the lack of the display of seconds in the timer that it is difficult to see that the timer is running.

So I modified the FreshPlug that I found that moves the redactor up on the left side of the page.  I adapted that to the section of the right sidebar that holds the timer.

In addition to the jQuery that is used to move the div, I also applied some css to the timer.  This styles the timer to be red with ** next to it while time is running and back to black when the timer is stopped or when time is "saved".  This makes it easier to remember that there is time running or that it needs to be started up.

- I also added a few lines of css to tighten up the padding of the elements in the ticket properties section of the sidebar, so remove those if you don't like them.

If you have suggestions about how this could be bettered, please post them.  I hope this is usful for someone other than me.


This topic has been closed for comments

7 replies

I added a button to the reply/fwd/notes to hopefully remind the engineer to add time to a ticket, be good to use your css for tickets without time to make the button go red. Feel free to use if you think it would be of value.


I really like this Richard, nice job!  It really does help keep the timer visible especially if you have the Publica and Private notes in reverse order.

The text changing to red is not working for me. Changed from "red" to hex value, no go. Any other possible fixes?

Yes - my mistake.  In my interest in getting this posted and all clean, I added comments to the code and ended up using HTML style comments in the <style> block, so something was getting messed up.

You can just remove the comments and it should fix the issue - here's what I'm now using:


<!-- Change the location of the Time Tracking block -->

<div id="move_TimesheetTab"></div>
<script type="text/javascript">

<!-- Style some of the sidebar items -->

  .tkt-sidebar #TicketProperties li.field {
    padding-bottom: 2px;
  .tkt-sidebar #TicketProperties li.field label  {
    padding: 2px 0;
  span.tracked_time span.time[data-timer-running="true"]:before {
    content: "** ";
  span.tracked_time span.time[data-timer-running="true"] {
    color: red;


Also... any chance you could write in an "always expanded" state on the timer section?

That did the trick! Thank you. 

Hello Richard,

Is there a way we can have the option to show "ADD TIME TO THE CASE" only for a particular type? It helps, since the industry i work for not everything needs to be timed.