El sistema cuenta con una funcionalidad para poder modificar el diseño de los resultados personalizados, de los tickets digitales, informes y mucho más para adaptar todo completamente a la identidad digital del evento. Para eso se escribe en código CSS los cambios en la configuración de textos (Configuración > Inscripciones > Textos).
¿Qué se puede modificar?
Se puede editar completamente el diseño y gran parte del contenido de:
- Formulario de inscripciones
- Informes de participantes y estadísticas
- Todos los Resultados (generales, por categoría, por etapas, etc.)
- Ticket Digital y Ticket Impreso
- Diseño de los mails a participantes
Si bien esta nota está orientada a explicar como modificar el diseño, queremos contarles que vamos a mostrar como ocultar algunas columnas y que el sistema también cuenta con formas para cambiar las palabras y el contenido de los resultados por ejemplo agregando columnas.
Estos son algunos ejemplos
En algunas ocasiones las organizaciones o los eventos no tienen sitios web por lo que aprovechan el formulario de inscripción para informar todos los detalles del evento.
Siempre es bueno insertar logos del evento y de los sponsors:
Y no nos olvidemos del ticket digital que tanto le gusta a los participantes
¿Cómo lo podemos hacer?
Las páginas y todo el contenido en Internet está construído con 3 “lenguajes” o tecnologías: HTML, CSS y JS. En el HTML se encuentra el contenido a mostrar, como los textos, las imágenes, encabezados, etc. En el CSS se encuentra el diseño de la página, incluyendo fuentes, colores, tamaños, fondos, etc. Y por último en el JS (Javascript) se encuentra la parte de la programación que se ejecuta en el navegador.
Pero queremos que conozca un poco más del diseño, entonces nos toca aprender CSS, así que podemos empezar leyendo un poco la documentación: https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics
¿Cómo seguimos?
Una vez que comprendemos un poco lo básico de CSS, podemos empezar a probar cambios en el sistema. Para que veamos los cambios, vamos a tener que grabarlos haciendo un clic en Siguiente o Anterior. Generalmente se hacen las pruebas en el navegador y luego se guardan los cambios que ya comprobamos que nos gustan. Si quieres aprender esto también 💪 puedes ver https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-styles?hl=es
Al mostrarse un informe, estos códigos se muestran luego de los CSSs básicos del sistema. En Configuración > Cronometraje se puede activar un diseño base o elegir que los informes arranquen con el diseño en blanco.
Analicemos el CSS de un evento real
Veamos un caso real para que puedas comprender mejor. En este caso vamos a ver las modificaciones que hicimos en el evento SARR 2020. Pueden ver como quedaron en los siguientes enlaces
Resultados Generales: cronometrajeinstantaneo.com/resultados/south-american-rally-race/generales?idcarrera=-1
Resultados de parciales para la etapa 4 de Motos y Quads: https://wp.cronometrajeinstantaneo.com/resultados/south-american-rally-race/seguimiento?idetapa=1501&xcategorias=1
Ticket digital para el participante 1: https://wp.cronometrajeinstantaneo.com/resultados/south-american-rally-race/ticket?idparticipante=1
Le recomendamos ir despacio, y también ir haciendo pruebas a medida que vaya entendiendo conceptos
EMPECEMOS CON LOS CAMBIOS GENERALES
/* En el body se puede especificar el tipo de letra (font-family) y el tamaño (font-size) de todo el documento.
Además podemos cambiar el fondo (background) pudiendo dejar una imágen en svg como la predeterminada, un color RGB, una imágen especificando la url o simplemente sin fondo como en este ejemplo para después ponerle sólo al header y al footer */
body {
font-family: "Days One",sans-serif,"google";
font-size: 18px;
background: none;
}
/* Al encabezado le pusimos el mismo fondo que a los tickets y le especificamos una altura mínima para que se pueda apreciar. Como el ticket no tiene encabezado, hay que especificarlo en ambos lados */
header {
min-height: 150px;
background: url(https://storage.googleapis.com/cronometrajeinstantaneo-eventos/380/imagen_1.jpg);
}
/* A los informes también le pusimos una imágen de fondo al footer, en este caso no queremos que se repita (no-repeat), que se ajuste al ancho de la página (background-size: contain) y también con un mínimo de altura para que se muestre (min-height) */
footer {
background: url(https://storage.googleapis.com/cronometrajeinstantaneo-eventos/380/imagen_2.jpg);
background-repeat: no-repeat;
background-size: contain;
min-height: 167px;
}
/* Ocultamos el enlace a cronometrajeinstantaneo.com para que no tape el footer */
footer a {
display: none;
}
/* Ahora se pueden agregar varios logos del evento. En este caso el segundo era más chico y tuvimos que subirlo un poco para que quede mejor */
.logo:nth-child(2) {
margin-bottom: 15px;
}
/* Le pusimos a todas las líneas impares un fondo blanco sin transparencia (el estilo predeterminado tiene transparencia) */
.tabla_interna tbody tr:nth-child(odd) td {
background-color: rgb(255, 255, 255, 1);
}
/* Le pusimos a todas las lineas pares un color gris sin transparencia */
.tabla_interna tbody tr:nth-child(even) td {
background-color: rgb(209, 200, 183, 1);
border-radius: 0;
}
/* Le sacamos todos los bordes a las tablas */
.tabla_interna, .tabla_interna tr, .tabla_interna td {
border: none;
border-radius: 0;
}
/* Le cambiamos el color de fondo y de las letras cuando se pone el mouse sobre una línea */
.tabla_interna tbody tr:hover td,
.tabla_interna tbody tr:hover td a {
background-color: #670000;
color: #fff;
}
/* Los títulos de las tablas, donde aparece el nombre de la carrera o de la categoría, van con color de texto negro */
.tabla_interna thead {
color: black;
}
/* La primer línea de títulos de las tablas, tienen otra letra (font-family), otro fondo (background-color) y forzamos las mayúsculas (text-transform: uppercase) */
.tabla_interna thead tr:nth-child(1) {
font-family: "PT Sans Narrow",sans-serif,"google";
font-weight: normal;
font-style: normal;
color: #fff;
background-color: #670000;
border-radius: 6px;
text-transform: uppercase;
}
/* Sólo para el informe de generales, ocultamos la 2° columna de posición por sexo, ya que no había esta discriminación en el evento, y además la columna de localidad porque usamos la de Nacionalidad */
#informe_generales .tabla_interna th:nth-child(2),
#informe_generales .tabla_interna td:nth-child(2),
#informe_generales .tabla_interna th:nth-child(7),
#informe_generales .tabla_interna td:nth-child(7) {
display: none;
}
/* Sólo en el informe de etapas, ocultamos la localidad */
#informe_etapas .tabla_interna th:nth-child(5),
#informe_etapas .tabla_interna td:nth-child(5) {
display: none;
}
/* En el informe de generales, nos quedaba mejor especificar un ancho mínimo para la columna del nombre y otro para la columna 4*/
#informe_generales .tabla_interna th:nth-child(5) {
min-width: 200px;
}
#informe_generales .tabla_interna th:nth-child(4) {
min-width: 40px;
}
/* En el informe de generales, centramos las columnas 6 y 8 */
#informe_generales .tabla_interna tr td:nth-child(6),
#informe_generales .tabla_interna tr td:nth-child(8) {
text-align: center;
}
/* Ocultamos columna 5 en el informe de etapas */
#informe_etapas .tabla_interna th:nth-child(5),
#informe_etapas .tabla_interna td:nth-child(5) {
display: none;
}
/* En el informe de etapas, centramos las columnas 4 y 6 */
#informe_etapas .tabla_interna tr td:nth-child(4),
#informe_etapas .tabla_interna tr td:nth-child(6) {
text-align: center;
}
/* En el infomre de seguimiento (todavía no público para el resto de eventos), ocultamos la columna 5 */
#informe_seguimiento .tabla_interna th:nth-child(5),
#informe_seguimiento .tabla_interna td:nth-child(5) {
display: none;
}
/* En el infomre de seguimiento (todavía no público para el resto de eventos), centramos columnas 4 y 6 */
#informe_seguimiento .tabla_interna tr td:nth-child(4),
#informe_seguimiento .tabla_interna tr td:nth-child(6) {
text-align: center;
}AHORA SIGAMOS POR LOS BOTONES DE FILTROS
/ * Le cambiamos las fuentes, colores, mayúsculas, bordes y fondo para que sean iguales a los que utilizan en su página web www.sarr2020.com */
.contenedor_filtro .filtros a {
font-family: "PT Sans Narrow",sans-serif,"google";
font-weight: normal;
font-style: normal;
color: #fff;
background-color: #670000;
border-radius: 6px;
text-transform: uppercase;
}Y AHORA VAYAMOS CON LOS TICKETS DIGITALES
/* Para los tickets, usamos un fondo subido en la nueva funcionalidad para subir logos, afiches e imágenes especificando que se repita tanto en el eje x como en el y */
#informe_ticket {
background: url(https://storage.googleapis.com/cronometrajeinstantaneo-eventos/380/imagen_1.jpg);
background-repeat: repeat;
}
/* Ocultamos el footer porque no queremos que se vea */
#informe_ticket footer {
display: none;
}
/* La información de etapas se imprime como oculta, en caso de querer mostrarla tenemos que poner el display como block */
.ticket_etapas {
display: block;
}
/* Ahora se pueden agregar varios logos del evento. En este caso el segundo era más chico y tuvimos que subirlo un poco para que quede mejor */
.ticket_logo .logo:nth-child(2)
margin-bottom: 55px;
}
/* Ocultamos la posición por sexo que no la necesitamos y ocultamos el salto de línea que le sigue */
.contenedor_ticket .pos_sexo,
.contenedor_ticket br:nth-child(9) {
display: none;
}
/* Cambiamos el color de varios textos dentro del ticket */
.contenedor_ticket .tiempo_nro,
.contenedor_ticket .pos_general_nro,
.contenedor_ticket .pos_sexo_nro,
.contenedor_ticket .pos_categoria_nro,
.ticket_etapas .pena_nro {
color: #670000;
}
/* Cambiamos el color de las líneas separadoras */
.contenedor_ticket hr {
border-color: #670000;
}
/* Ocultamos la línea que separa las etapas */
.ticket_etapas hr {
opacity: 0;
}¿Cómo seguimos?
Si le gustó modificar diseños con CSS, hay mucho más que se puede hacer, le recomendamos leer más de CSS. Un buen lugar es:
