Many people have asked for print previews and print buttons, and some solutions have been posted in the forums. However, AFAIK, nobody ever provided a simple CSS file for printing, although this is probably the least invasive approach ;)
I gave it a first try, see below. It's not perfect and might not meet your particular needs, but it's easy to add and definitely improves printing tickets and ticket lists.
To add this, first create a file print.css with the following content:
/* print.css for osTicket by Andreas Schamanek v0.02 (c) public domain */
body { color: black; background-color: white;
font-family: arial, helvetica, sans-serif;
}
/**** elements to hide ****/
#header,
#nav,
table.ticketoptions,
#content div + table, /* SCP tabber after ticketthread */
.Icon, /* all icons */
input.button, /* all buttons */
img, /* all images */
input, /* all input fields, checkboxes, etc. */
#reply /* client reply */
{ display: none; }
#basic, #advance /* SCP search/query */
{ display: none !important; }
/* If we exclude .Icon we need to make some visible, though */
a.otherTicket, a.phoneTicket, a.emailTicket, a.webTicket,
a.assignedTicket, a.lockedTicket, a.overdueTicket { display: inline; }
/**** Margins + Padding ****/
/* osTicket unfortunately uses tables for the layout */
td { padding: 0.2em; }
#ticketnotes, #ticketthread { margin: 1em 0; }
#ticketnotes { margin-bottom: 2em; }
#ticketnotes table,
#ticketthread table { margin-top: 1em; }
/**** Ticket number + Subject ****/
td.msg, div.msg { font-size: 1.4em; padding: 0.3em; }
/**** Borders ****/
table.ticketinfo,
table.infotable,
#ticketnotes,
#ticketthread { padding: 0.4em; border: 1px solid gray; }
#ticketnotes table,
#ticketthread table { padding-top: 1em; border-top: 1px solid black; }
#ticketnotes table-child,
#ticketthread table-child { padding-top: 0; border-top: 0; }
/**** Miscellaneous ****/
a { color: navy; text-decoration: underline; }
th { text-align: left; }
/**** Ticket lists ****/
/* Borders in ticket lists */
#content div > table table td
{ padding: 0.2em; border-bottom: 1px solid gray; padding-top: 0.4em; }
#content div > table table th
{ padding: 0.3em; border-bottom: 2px solid black;
border-top: 1px solid black; padding-top: 0.5em;
}
#content div > table table a { color: black; text-decoration: none; }
Upload this file 2 times, once into folder styles, and again into folder scp/css.
Finally, 2 small modifications are needed to tell your osTicket to use print.css. Let's first edit include/client/header.inc.php. Right at the top you'll find
<link rel="stylesheet" href="./styles/main.css" media="screen">
<link rel="stylesheet" href="./styles/colors.css" media="screen">
After these 2 lines add
<link rel="stylesheet" href="./styles/print.css" media="print">
Then edit file include/staff/header.inc.php. After
<link rel="stylesheet" href="css/main.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
insert
<link rel="stylesheet" href="css/print.css" media="print">
That's it. HTH.
P.S.: There is one small related bug in include/client/footer.inc.php which for me caused unexpected results in IE. To fix, search for and remove the >.