Tutorial: Traducciones rápidas usando CSS para el plugin Opal Estate Pro

Continuando con mi aprendizaje de CSS, esta vez he encontrado que necesito cambiar el idioma de los controles generados por el plugin Opal Estate Pro, un plugin para integrar un sistema inmobiliario completo en WordPress, que puedes encontrar en este enlace.

La verdad, este plugin es muy interesante y ofrece muchas funciones, pero su documentación solo se limita a su pagina web y su soporte es solo en inglés. Por esta razón, mientras trabajaba en un proyecto, encontré la necesidad de hacer una traducción rapida hasta que encontraba como traducir los controles o encontrar un plugin en español.

El problema

Opal Estate Pro solo tiene soporte en inglés y el cliente quería los textos de los controles en español. En un principio pensé en usar el plugin Polylang, pero no funcionó. Como el ´presupuesto no alcanzaba para buscar una mejor alternativa, opté por usar CSS para cambiar el contenido de las etiquetas «label» mediante el siguiente código:

#a{
   content:"nuevocontenido";
}

Esta código permite agregar contenido a la etiqueta, por lo que nuestro texto se agregará al que ya estaba presente. para corregir esto, se aplica el siguiente estilo.

#a{
   visibility:hidden;
}
#a::before{
   content:"nuevocontenido";
   visibility:visible;
}

Al aplicar este estilo, se oculta el contenido anterior de la etiqueta y se agrega el nuevo contenido, dejando solo visible este ultimo.

Aprovechando que Opal Estate tiene clases especificas para cada uno de sus controles, podemos aprovechar esto para crear nuevas clases que aplicaremos en el CSS adicional del tema que tengamos activo.

/*Cambiar el idioma del label "Bedrooms" a español*/
.opalestate-label--Bedrooms {
    visibility: hidden;
}
.opalestate-label--Bedrooms::before {
    content: "Habitaciones";
    visibility: visible;
}
/*Cambiar el idioma del label "Parking" a español*/
.opalestate-label--Parking {
    visibility: hidden;
}
.opalestate-label--Parking::before {
    content: "Parqueo";
    visibility: visible;
}
/*Cambiar el idioma del label "Country" a español*/
.opalestate-label--country {
    visibility: hidden;
}
.opalestate-label--country::before {
    content: "País";
    visibility: visible;
}
/*Cambiar el idioma del label "Bathroom" a español*/
.opalestate-label--Bathrooms {
    visibility: hidden;
}
.opalestate-label--Bathrooms::before {
    content: "Baños";
    visibility: visible;
}
/*Cambiar el idioma del label "Type" a español*/
.opalestate-label--type {
    visibility: hidden;
}
.opalestate-label--type::before {
    content: "Tipo";
    visibility: visible;
}
/*Cambiar el idioma del label "Price" a español*/
.opalestate-label--price {
    visibility: hidden;
}
.opalestate-label--price::before {
    content: "Precio";
    visibility: visible;
}

De esta manera, conseguiremos nuestra traducción rápida para casos de emergencia. Por el momento, solo tengo estos controles traducidos y el código no funciona con el botón de búsqueda, así que toca investigar mas para llegar a un resultado completo. Por el momento, esto ha funcionado lo suficientemente bien como para dejarlo aplicado en producción.

Tutorial: Resaltar las respuestas correctas en Moodle

A medida que se ha ido modernizando los métodos de enseñanzas, he encontrado diferentes LMS (Learning Management System) como Chamilio, Lifter LMS y Moodle, donde este último es el más frecuente de todos. Cada uno tiene sus fortalezas y debilidades, pero he elegido Moodle para mis actividades de enseñanza debido a su modularidad y escalabilidad. Esto significa también que he encontrado problemas de diferentes magnitudes donde es necesario intervenir un poco en el código del sistema.

El problema que resolveremos hoy, probablemente pase desapercibido por muchos, pero es uno relacionado a la accesibilidad. Algunos temas lo resuelve, pero el predeterminado y algunos otros carecen de esta opcion.

Al hacer un cuestionario, moodle da la opción de marcar las respuestas correctas e incorrectas, destacando con tan solo un check los resultados. Una mejora de accesibilidad sería el resaltar toda la fila, puesto que esto hace más fácil la lectura. para esto, tenemos que hacer lo siguiente:

Buscamos en la administración del sitio, en la subsección de apariencia, el tema que tengamos activo. En este caso, mi tema activo es el predeterminado para mi version, llamado Boost.

Dentro del tema, vamos a los ajustes avanzados y agregamos en «SCSS sin modificar» agregamos el siguiente selector de cascada:

.answer .correct{
    background-color: mediumspringgreen;
    border-radius: 35px;
}

Y listo, tenemos resaltado la respuesta correcta con un bonito color verde claro. Eso sí, resaltar la respuesta incorrecta requiere algo más elaborado, pero lo dejaré para la próxima ocasión.

Resaltado de respuesta correcta en Moodle
Resaltado de respuesta correcta en Moodle
A %d blogueros les gusta esto: