Forums/Documentation/CSS cookbook (Zendesk Classic)

Customizing the tickets table in the Zendesk Classic agent interface

Anton de Young
posted this on July 13, 2011 12:04

The tickets table in the Zendesk Classic agent interface is called table.tickets and this example describes how to do the following CSS customizations:

  • Set the background color of the table header row, the alternating shaded rows, and the 'group by' rows
  • Set the hover background and font color for the active table row

For more information about getting started with CSS customization in Zendesk, see How to brand your Web portal.

Before

table_before.png

Active row hover:

table_row_hover_before.png

After

tables_after.png

Active row hover:

table_row_hover_after.png

CSS code

This example changes the background and border colors of the elements in the table.

/* Set the header row background color of the tickets table */
table.tickets thead th {
	background-color:#F1F2E8; /* tan */
}  
 
/* Set the font color and background color of the active row */
table.tickets tr.linked:hover > td, table.tickets tr.linked:active > td {
    background-color:#FFCD72; /* light orange */
} 
 
/* Set the background color of the alternating shaded table rows */
table.tickets tr.linked:nth-child(2n+1) {
    background-color: #F1F2E8; /* tan */
}  
 
/* Set the background color of the table 'group by' rows */
table.tickets tr.group_by td {
    background-color: #F1F2E8; /* tan */
    border-bottom: 2px solid #F1F2E8; /* tan */
}
 
/* Set the color of the bottom border of the table rows */
table.tickets td {
    border-bottom: 1px solid #F1F2E8; /* tan */
}