Terminal view (styling)
Allright, now we have a pretty decent terminal, although, it would probably be hard to read from a distance,
and that remaining checkbox is useless now so lets get rid of that first.
open up includes/staff/tickets_terminal.inc.php
comment out lines 390-392 like this..
<?php /*?><?if($canDelete || $canClose) {?>
<?}?><?php */?>
then comment out lines 426-430 like this..
<?php /*?><?if($canDelete || $canClose) {?>
" onClick="highLight(this.value,this.checked);">
<?}?><?php */?>
The columns are now a bit too wide for the data that they hold..lets resize them.
Replace lines 392 - 401 with this code...
<th align="left" width="35" >
<a href="tickets.php?sort=ID&order=<?=$negorder?><?=$qstr?>" title="Sort By Ticket ID <?=$negorder?>">Ticket</a></th>
<th align="left" width="50">
<a href="tickets.php?sort=date&order=<?=$negorder?><?=$qstr?>" title="Sort By Date <?=$negorder?>">Date</a></th>
<th align="left" width="330">Subject</th>
<th align="left" width="120">
<a href="tickets.php?sort=dept&order=<?=$negorder?><?=$qstr?>" title="Sort By Category <?=$negorder?>">Department</a></th>
<th align="left" width="70">
<a href="tickets.php?sort=pri&order=<?=$negorder?><?=$qstr?>" title="Sort By Priority <?=$negorder?>">Priority</a></th>
<th align="left" width="180" >From</th>
And lines 429 - 438 with this code...
<td align="left" title="<?=$row?>" nowrap>
<a class="Icon <?=strtolower($row)?>Ticket" title="<?=$row?> Ticket: <?=$row?>"
href="tickets.php?id=<?=$row?>"><?=$tid?></a></td>
<td style="font-size; color:#ffffff;" align="left" nowrap><?=Format:($row)?></td>
<td style="font-size;color:#ffffff;"><?=$subject?>
<?=$row?"<span class='Icon file'> </span>":''?></td>
<td style="font-size; color:#ffffff;" align="left" nowrap><?=Format:($row,30)?></td>
<td style="font-size; color:#ffffff; background-color:<?=$row?>;" align="left" class="nohover" align="center" ><?=$row?></td>
<td style="font-size; color:#ffffff;" align="left" nowrap><?=Format:($row,22,strpos($row,'@'))?> </td>
</tr>
Priority colors are held in the database table ost_ticket_priority under the column priority_color. You'll need
PHPMyAdmin or a similar database editor to create a new column called terminal_priority_color on table ost_ticket_priority using this SQL...
ALTER TABLE ost_ticket_priority ADD terminal_priority_color VARCHAR(7) AFTER priority_color;
Fill in the new column with your color values. I used black #000000 for the low and normal priorities. Red #FF0000 for the high and emergency priorities.
Now lets make a copy of of includes/staff/header.inc.php and rename it to header_terminal.inc.php.
Also make a copy of includes/staff/footer.inc.php and rename it to footer_terminal.inc.php
Open up header_terminal.inc.php and comment out EVERYTHING from line 14 -64.
<?php /*?> Lines 14-65 <?php */?>
Eventually we will be creating our very own stylesheets for our terminal so lets go ahead and reference it in the header.
Change line 11 to this
and change line 12 to this...
Save that and open up includes/staff/footer_terminal.inc.php
Replace line 3 with this code...
<div id="footer">Copyright © 2006-<?=date('Y')?> osTicket.com. All Rights Reserved. <br>TERMINAL MOD BY <a href="mailto@gmail.com">TERYAKISAN</a></div>
Save that and open up /scp/tickets_terminal.php
Scroll all the way to the bottom and change line 477 (one that we commented out earlier) to this code..
require_once(STAFFINC_DIR.'header_terminal.inc.php');
and line 479 to this code...
require_once(STAFFINC_DIR.'footer_terminal.inc.php');
Now it points to our new header and footer (and our stylesheets!)
Save that and we are done with tickets_terminal.php
Now for the fun part!! Lets make a copy of scp/css/main.css and rename it to main_terminal.css.
Also make a copy of scp/css/style.css and rename it to style_terminal.css.
Our Terminal should now look like this...
I tend to prefer a dark background with light colors for the text in a terminal view, plus, I feel its easier on the eyes from a distance.
So now lets open up scp/css/main_terminal.css and lets make the background nice and black.
change line 2 to read..
background:#000;
and line 8 to read..
background(/images/bg.gif) #000;
On line 78 we have the .footer class...replace it with this code...
#footer {
padding 5px 2px 5px;
border solid #ccc;
border-top solid #666;
background:#000000;
color:#FFF;
font-size;
text-align;
margin auto 0 auto;
}
Now scroll down to line 218 and add..
font-size;
to the .Icon class.
And were done with that one.
Now lets open up scp/css/style_terminal.css.
Scroll down to line 32-33.. change them to this code...
color:#ffffff;
font-size;
Now scroll down to line 65. I'm going to go with two really dark greys here.
You can do whatever you think looks nice.
replace lines 66 through 68 with this code..
/* Alt rows used on most data tables */
.row1 td { background-color: #404040; }
.row2 td { background-color: #383838; }
Lets darken that table header too...change line 98 to read..
background: #3b3131;
All of the rest of the styling will be done on /include/staff/tickets_terminal.inc.php
so go ahead and open that up and scroll down to line 392 and replace lines 392-401 with this code...
<th align="left" width="35" >
<a style="font-size;" href="tickets.php?sort=ID&order=<?=$negorder?><?=$qstr?>" title="Sort By Ticket ID <?=$negorder?>">Ticket</a></th>
<th align="left" width="50">
<a style="font-size; href="tickets.php?sort=date&order=<?=$negorder?><?=$qstr?>" title="Sort By Date <?=$negorder?>">Date</a></th>
<th align="left" width="330"><span style="font-size;">Subject</span></th>
<th align="left" width="120">
<a style="font-size; href="tickets.php?sort=dept&order=<?=$negorder?><?=$qstr?>" title="Sort By Category <?=$negorder?>">Department</a></th>
<th align="left" width="70">
<a style="font-size; href="tickets.php?sort=pri&order=<?=$negorder?><?=$qstr?>" title="Sort By Priority <?=$negorder?>">Priority</a></th>
<th align="left" width="180" ><span style="font-size;">From</span></th>
Then scroll down and replace lines 429-437 with this code.
<td align="left" title="<?=$row?>" nowrap>
<a class="Icon <?=strtolower($row)?>Ticket" title="<?=$row?> Ticket: <?=$row?>"
href="tickets.php?id=<?=$row?>"><?=$tid?></a></td>
<td style="font-size; color:#ffffff;" align="left" nowrap><?=Format:($row)?></td>
<td style="font-size;color:#ffffff;"><?=$subject?>
<?=$row?"<span class='Icon file'> </span>":''?></td>
<td style="font-size; color:#ffffff;" align="left" nowrap><?=Format:($row,30)?></td>
<td style="font-size; color:#ffffff;" align="left" class="nohover" align="center" style="background-color:<?=$row?>;"><?=$row?></td>
<td style="font-size; color:#ffffff;" align="left" nowrap><?=Format:($row,22,strpos($row,'@'))?> </td>
And one last bit, for when the open ticket count reaches zero.
Scroll down to line 443 and replace it With this code....
<tr class="<?=$class?>"><td colspan=8><span style="color:#fff; font-size;">Query returned 0 results.</span></td></tr>
Awesome....now our terminal looks like this...
LIKE THIS MOD? ( BUY ME A BEER )