Estilo personalizado o CSS 🇪🇸

La función de CSS personalizado te permite agregar tu toque personal al contenido de H5P. De esta manera, puedes, por ejemplo, reemplazar los colores y fuentes predeterminados de H5P con la marca de tu organización, dándote aún más control sobre el aspecto y la sensación de tu contenido.

Cómo funciona la función de CSS personalizado

La función de CSS personalizado permite a los administradores agregar sobrescrituras de CSS. Los administradores pueden agregar sobrescrituras primero en un modo de vista previa, donde los cambios solo son visibles para los administradores. Cuando estés satisfecho con las pruebas de los estilos en tu contenido, puedes aplicar las sobrescrituras de CSS en vista previa a todo el contenido de la organización.

Las sobrescrituras de CSS, cuando se aplican a toda la organización, afectan todo el contenido de H5P para todos los usuarios.

Activación de la función de CSS personalizado

Por defecto, la función de CSS personalizado está deshabilitada y los clientes deben contactar a su representante de clientes para obtener acceso a esta función.

Advertencias

La razón por la cual la función de CSS personalizado está deshabilitada por defecto es que, si se usa incorrectamente, la función puede dañar el aspecto, la funcionalidad y la accesibilidad del contenido. Incluso si el contenido parece funcionar después de agregar el CSS, una futura actualización de H5P que no sea compatible con los cambios de CSS puede dañar el aspecto o el comportamiento del contenido. El acceso a la función de CSS también introduce problemas de seguridad. Abre algunas vías de ataque para alguien con acceso a las cuentas de administración del cliente.

Flujo de trabajo recomendado

H5P utiliza grandes cantidades de CSS. Leer la estructura de CSS y DOM línea por línea no es práctico. En su lugar, recomendamos el siguiente flujo de trabajo al trabajar en el CSS de H5P.com:

1. Usa la herramienta de desarrollo de tu navegador y crea sobrescrituras de CSS en tu navegador.
2. Copia las sobrescrituras de CSS desde tu navegador a un archivo o directamente al campo de sobrescrituras de CSS en la interfaz de administración de H5P.com. (La interfaz CSS está en Administrar Organización > Configuración > CSS Personalizado)
3. Prefija todos tus selectores de CSS con .h5p-content
4. Prueba todos los tipos de contenido que puedan verse afectados por las sobrescrituras y asegúrate de que funcionen correctamente en todos los navegadores. Ten en cuenta que si haces sobrescrituras para, por ejemplo, Multiple Choice, este puede ser utilizado dentro de Course Presentation, Question Set, Interactive Video y Column, por lo que los Multiple Choice dentro de estos H5Ps también serán afectados. Idealmente, deberás verificar que tus sobrescrituras funcionen como se espera en todos estos contextos diferentes.
5. Aplica los cambios a tu organización utilizando la interfaz de administración de H5P.com cuando sientas que tus cambios tienen el efecto deseado.

Qué cambiar y qué no cambiar

Todas las sobrescrituras de CSS conllevan un riesgo. Los tipos de contenido de H5P.com se actualizan regularmente y siempre existe la posibilidad de que una actualización haga que tus sobrescrituras de CSS dejen de funcionar. Los colores son lo más seguro de cambiar. Las cosas más riesgosas de cambiar son las que afectan la posición o el tamaño de los objetos. Tales cambios pueden arruinar el contenido al ser actualizado, arruinando el contenido si se exporta desde H5P.com y subido a un sitio que no tiene las mismas sobrescrituras de CSS.

Sobrescritura de fuentes

En CSS, tienes la posibilidad de cargar y usar otras fuentes, además de las predeterminadas proporcionadas por H5P. Debido a la estricta Política de Seguridad de Contenidos (CSP) en H5P.com, la única opción es usar las fuentes servidas por Google Fonts (https://fonts.google.com/).

Especificidad de CSS

Es importante tener una buena comprensión de cómo funciona CSS antes de crear tus propias personalizaciones. Hay muchos buenos recursos en línea, y no vamos a duplicarlos aquí. Pero vamos a ver un poco cómo funciona la especificidad de CSS. Es decir: cómo selecciona el navegador qué propiedades aplicar cuando hay varios selectores para un elemento DOM con la misma propiedad. Comenzaremos con un ejemplo:

button {
  /* Esto afectara todos los botones*/
  background-color: red;
}

button.retry {
  /* Para todos los botones que tengan la clase="retry", el color de fondo de 
arriba sera alterado */
  background-color: green;
}

En el ejemplo anterior, "button.retry" obtiene un mayor peso (ya que es más específico) y, por lo tanto, usará esta propiedad background-color para todos los botones que tengan class="retry".

Aquí tienes otro ejemplo:

.h5p-joubelui-button {
  background-color: green;
}
.h5p-joubelui-button {
  background-color: red;
}

Estas dos declaraciones tienen igual especificidad. En este caso, se aplica al elemento de la última declaración encontrada, es decir, el color de fondo será rojo. Esto es relevante para h5p.com, ya que el CSS personalizado se carga después del CSS predeterminado proporcionado por h5p.com.

Lee más sobre la especificidad de CSS aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Mejores Prácticas

Sobrescribe solo las cosas que deseas cambiar. Es decir, no agregues CSS que no cambie nada.
Sé específico al crear las reglas de selectores de CSS. Por ejemplo, si solo deseas cambiar el color de un botón dentro de Multiple Choice, asegúrate de que tu selector refleje eso, refiriéndote a los ejemplos a continuación.
Agrega comentarios a tus personalizaciones de CSS, para que sea fácil entender más tarde qué estás cambiando realmente. En CSS, los comentarios deben usar el siguiente formato: /* Aquí hay un comentario */

Ejemplos:

Cambiar los colores de todos los botones en (la mayoría de) los tipos de contenido

En este ejemplo, cambiaremos el color de fondo de los botones en diferentes tipos de contenido.

.h5p-joubelui-button {
  background-color: #000;
}
/* Efecto de colocar ratón sobre y foco */
.h5p-joubelui-button:hover,
.h5p-joubelui-button:focus {
  background-color: #444;
}
/* Efecto de clic */
.h5p-joubelui-button:active {
  background-color: #222;
  box-shadow: none;
}

Al aplicarse, debería verse así:

 

Ten en cuenta que esto no se aplicará a todos los botones en todos los tipos de contenido, sino solo a aquellos que tengan la clase h5p-joubelui-button.

Cambiar colores para los botones en un cierto tipo de contenido

En este ejemplo, vamos a cambiar los colores de los botones dentro del contenido Fill in the Blanks.

.h5p-blanks .h5p-joubelui-button {
  background-color: #000;
}
/*  Efecto de colocar ratón sobre y foco */
.h5p-blanks .h5p-joubelui-button:hover,
.h5p-blanks .h5p-joubelui-button:focus {
  background-color: #444;
}
/* Efecto de clic */
.h5p-blanks .h5p-joubelui-button:active {
  background-color: #222;
  box-shadow: none;
}

 

Como puedes ver, hemos añadido ".h5p-blanks" a cada uno de los selectores. Para encontrar el selector a usar para un cierto tipo de contenido, debes localizar el elemento DOM dentro del iframe de H5P que tenga la clase h5p-container, la cual también tendrá una clase "h5p-<tipo-de-contenido>".

Cambiar colores para botones cuando se incluye un tipo de contenido dentro de otro 

En el ejemplo anterior, cambiamos el color del botón para Fill in the Blanks en todas partes. Es decir, tanto de forma independiente como también cuando se usa dentro de otros tipos de contenido (por ejemplo, en Course Presentation). En este ejemplo, estamos aplicando el mismo cambio, pero solo cuando Fill in the Blanks se muestra dentro de una Course Presentation:

.h5p-course-presentation .h5p-blanks .h5p-joubelui-button {
  background-color: #000;
}
/* Efecto de colocar ratón sobre y foco */
.h5p-course-presentation .h5p-blanks .h5p-joubelui-button:hover,
.h5p-course-presentation .h5p-blanks .h5p-joubelui-button:focus {
  background-color: #444;
}
/* Efecto de clic */
.h5p-course-presentation .h5p-blanks .h5p-joubelui-button:active {
  background-color: #222;
  box-shadow: none;
}

.h5p-content[data-content-id="1291454716549314006"] .h5p-joubelui-button {
  background-color: #000;
}
/* Efecto de colocar ratón sobre y foco */
.h5p-content[data-content-id="1291454716549314006"] .h5p-joubelui-button:hover,
.h5p-content[data-content-id="1291454716549314006"] .h5p-joubelui-button:focus {
  background-color: #444;
}
/* Efecto de clic */
.h5p-content[data-content-id="1291454716549314006"] .h5p-joubelui-button:active {
  background-color: #222;
  box-shadow: none;
}

Como puedes ver arriba, hemos añadido .h5p-content[data-content-id="1291454716549314006"] en el selector. El data-content-id es único para cada elemento de contenido y es el mismo valor que se ve en la última parte de la URL al ver un H5P.

Usando una extensión de Google Chrome para crear el CSS

Si estás realizando grandes personalizaciones de CSS, puede ser un poco engorroso cambiar el CSS personalizado en h5p.com una y otra vez. Otra opción es usar las capacidades del navegador para crear el CSS localmente. Esto también tiene otros beneficios:

• La persona que crea el CSS no necesita tener acceso de administrador a la cuenta de h5p.com.
• Los cambios de CSS se reflejan de inmediato. Es decir, no tienes que actualizar la página del navegador.
• El CSS se puede crear mientras se visualiza el H5P desde dentro del LMS.

Hay varias formas de lograr esto, pero aquí veremos cómo usar una extensión de Google Chrome llamada Stylus:

Primero, necesitas instalar Stylus. Luego, debes configurarlo como se ilustra a continuación:

 

Debajo se muestra el resultado al visitiar un Fill in the Blanks desde el LMS Canvas: