osTicket Admin Interface – Personalizar los Colores
Algunos puede que no conozcan la interfaz o la aplicación web osTicket pero quiero decirles que es muy poderosa en lo que hace. osTicket es un sistema de soporte y administración de tickets via web muy completo, con muchas funciones y lo mejor de todo, totalmente gratis. Funciona bajo php, javascript y mysql, algo parecido a lo que es WordPress pero en este caso en vez de un blog tenemos una plataforma de soporte de tickets con creación, ver el estado, etc. Muy buena plataforma para brindar soporte a nuestros usuarios.
En este caso quiero comentar sobre una customización a los colores que hice en la interfaz de administración. Así como se puede customizar el WordPress y nuestro blog aquí podemos customizar o personalizar el theme de osTicket. Tanto la parte cliente es que la que ven los usuarios como la parte de administración que ven los técnicos.
No solo podemos customizar la parte gráfica también podemos hacer modificaciones al código del producto para agregar funciones, modificar otras, etc. En el foro de la página principal estan todas las modificaciones que envían los usuarios, algunas que yo hice después las voy a ir mostrando, en esta ocasión sólo les comento la modificación que hice a los colores de la parte administrativa cuando vemos un ticket para que podamos identificar mas fácilmente cuál es la nota que envía el usuario, cuál es la nota interna entre el personal de soporte y cuál es la nota en respuesta al cliente. Esto lo dividí en colores fácilmente reconocibles, además modifiqué los colores de los formularios de respuesta para que sean iguales a los anteriores y por último hay un par de modificaciones a un archivo php que también comento el por qué lo hice.
Además adjunto el archivo css para que lo puedan bajar directamente con las modificaciones realizadas así no tienen que estar tocando ustedes los archivos salvo el php. Ahora bien ustedes pueden tocar a gusto lo que yo hice para modificar los colores, no hace falta que lo dejen así pero es bastante fácil de ver un ticket con esa gama.
Como se ve en la imagen, el color amarillo y sus variantes fueron utilizados para las notas internas, el color azul representa lo que el cliente dice y el verde y sus variantes fue utilizado para las respuestas del personal. Luego las transferencias y asignaciones que se muestran en una sola línea tiene una variante de rosa que eso se dejó por defecto con dicho color, sólo se le asignó al formulario en cuestión. Acá les detallo el código CSS agregado y modificado del archivo original.
Archivo: /scp/css/style.css
Buscar:
/* Ticket view (Notes, Messages and Responses) */
Hacia abajo reemplazar todo lo que existe con el siguiente código:
#ticketthread table.message {
margin:10px 0 5px 0;
}
#ticketthread table.response {
margin-bottom:10px;
margin-top:10px;
}
#ticketthread table.note {
margin:10px 0 5px 0;
}
#ticketnotes table.note {
margin-bottom:10px;
}
table.message {
border: 2px solid;
border-color:#8cbef3;
}
table.response {
border: 2px solid;
border-color:#adcf6e;
}
table.note {
border: 2px solid;
border-color:#e0c85e;
}
table.message td, table.message th,table.response td, table.response th,table.note td, table.note th {
padding:5px;
}
table.message td, table.response td, table.note td{
background-color: #FAFAFA;
}
table.message th, table.response th, table.note th {
line-height:30px;
font-size:12px;
font-weight:bold;
text-align: left;
padding:1px;
padding-left:5px;
}
table.message th {
background-color: #99cdff;
}
table.response th {
background-color: #c2de87;
}
table.note th {
background-color: #fee179;
color: #3E3E3E;
}
table.message tr.header td {
background-color: #cfe1fb;
border-color:#85b2e9;
padding:1px;
padding-left:5px;
}
table.response tr.header td {
background-color: #e2f3be;
border-color:#b4d675;
padding:1px;
padding-left:5px;
}
table.note tr.header td{
background-color: #fcfd97;
border-color:#ddcc4a;
padding:1px;
padding-left:5px;
}
#reply.tabbertab {
background-color: #e1f7b2;
border-bottom: 2px solid;
border-color:#b4d675;
}
#notes.tabbertab {
background-color: #faf5b3;
border-bottom: 2px solid;
border-color:#ddcc4a;
}
#transfer.tabbertab {
background-color: #fdedc1;
border-bottom: 2px solid;
border-color: #fad163;
}
#assign.tabbertab {
background-color: #fdedc1;
border-bottom: 2px solid;
border-color: #fad163;
}
Por ultimo hay que hacer unas breves modificaciones en un archivo php para la vista del ticket. Aquí les paso lo que habría que modificar.
Archivo: /include/staff/viewticket.inc.php
Buscar:
//Internal Notes
Bajo esta línea empiezan las notas, respuestas y mensajes con los colores que pasé mas arriba. Acá vamos a encontrar el box grande de Internal Notes y Ticket thread con la siguiente línea iniciando el box.
<div align="left">
Y eso lo podemos reemplazar con lo que nosotros queremos, en mi caso quedó de la siguiente manera:
Internal Notes
<div style='text-align:left; background-color:#faf5b3;border-top: 2px solid;border-bottom: 2px solid;border-color:#ddcc4a;'>
Ticket thread
<div style='text-align:left; background-color:#d8e5f8;border-top: 2px solid;border-bottom: 2px solid;border-color:#85b2e9;'>
Después podes agregar un par de renglones donde lo creas necesario o modificar el código HTML/PHP según lo necesites. Después de hacer estas modificaciones vas a ver instintivamente dónde está ubicado cada grupo de código para modificar los cuadros donde aparecen los mensajes en los tickets. También podrías modificar unas cuantas cosas mas, pero en esta ocasión sólo estábamos customizando los colores de dicha página.
Con estas modificaciones vas a tener una interfaz de administración o de staff para ver los tickets mucho mas cómoda e intuitiva, así que te recomiendo que lo tomes, lo adaptes a los colores que mas te gusten y ya lo pases a producción. Te dejo el css modificado en un archivo zip por si no queres entrar a hacer modificaciones.
osTicket.Admin.Style.CSS (1.4 KiB, 568 hits)
Link | osTicket Home Page
Link | osTicket Forums
Artículos relacionados:
Te gustó el Artículo? Compártelo!
September 21st, 2009 - 16:18
hola me gustaria si me puedes enviar informacion a mi mail sobre en que archivo se puede modificar el idioma, muchas gracias!!
October 1st, 2009 - 17:14
@clau, te sugiero que te bajes un template que ya esté traducido al español porque los archivos a modificar son muchos, no es solo uno o dos sino varios porque hay templates que no usan variables y tenes que modificar los textos en los archivos del sitio. Al instalar uno ya traducido te ahorras mucho trabajo y luego solo modificas el diseño.
Saludos!
May 5th, 2010 - 11:20
Hola que tal, muy buena tu info gracias, en este momento yo estoy trabajando en agregarle nuevas funcionalidades a osticket para un proyecto personal, sin embargo hay no encuentro la forma de personalizar las alertas enviadas por correo electronico automaticamente por el sistema; tendras algo de info sobre eso???? gracias.
November 23rd, 2010 - 20:38
Hola, queria saber si es accesible cambiar el diseño de osticket y si no se infringe la licencia??
August 13th, 2011 - 15:18
Hola, alguien ha traducido la última versión o tiene un tamplate español para el osticket? Encontré cosas en algunos sitios pero para versiones viejas. cual es el archivo lang (si existe)?