Skip to main content
Closed for Voting

Note field easier to spot

Related products:Freshdesk
  • December 9, 2011
  • 4 replies
  • 32 views

Private notes should be easy to spot, maybe a different background color to distinguish them from regular replies. Notes should also notify the agent the ticket belongs if another agent leaves a note but doesn't take it over

4 replies

  • Community Debut
  • May 21, 2015

I agree, private notes should be easier to spot. Just like Zendesk.


  • Community Debut
  • July 31, 2015
You can do this with a really simple Freshplug

Admin | Integrations | FreshPlugs | New FreshPlug
Give it a 'Name' and a 'Description' and use the following code. Just change the colour to suit.
<style>
.private-note.commentbox-gray { background: #d3ffce; }
</style>

 

 Hope this helps

--Stuart


  • Contributor
  • June 29, 2017

I found Stuart's suggestion to be be very helpful, although the naming convention has changed since his original post. Here is an update:

Admin > Apps > Custom Apps > New Custom app


I also wanted to leave private notes as grey and instead highlight the customer-facing notes in a brighter color. This is was my approach:

<style>
.commentbox-gray { background: #f4fffc; }
.private-note.commentbox-gray { background: #fafafa; }
</style>

If you recolor commentbox-gray, it will also recolor the private notes... so it is necessary to set private note back to the default.



My preferred display enhancements, including green shades for private notes ( to match the green 'Visible to customer: NO' button when creating a new private note ).
<style>
  div#original_request.conversation_thread div.conversation div.commentbox.private-note {
    max-height: 60vh;
    overflow-y: auto;
  }

  div.helpdesk_note div.details {
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .commentbox.commentbox-gray.private-note {
    background-color: #e3ffce;
    border-color: #d3efbe;
  }
  
  .commentbox.commentbox-requester.private-note {
    background-color: #f3ffce;
    border-color: #d3efbe;
  }
  
  div#execute_scenario div.modal-body {
    max-height: 80vh;
  }  
  
  div.execute_scenario div.dialog-well {
    height: 70vh;
    min-height: 350px;
  }
  
  div.fd-branding a.logo_text {
    color: #ccc;
    padding: 10px 0 0 20px;
  }

  div#sticky_header.tkt-details-sticky div.sticky_left {
    color: #555;
  }
  
  span#ticket-display-id {
    color: #888;
    letter-spacing: 1px;
    padding: 0 0 0 5px;
  }
</style>
<div id="display_enhancements"></div>
<script type="text/javascript">
  jQuery('#display_enhancements').closest('.widget').removeClass('widget');
</script>