Este artículo también está disponible en:
Con los planes del Búho Corporativo y Empresarial, es posible editar el CSS de su contenido de aprendizaje.

Es posible que quieras cambiar las fuentes, los colores, las formas de los botones y el fondo de tus pruebas y cursos creados con Easy LMS. Una forma de hacerlo es ajustando los parámetros en la pestaña Styling, pero puede que quieras hacer aún más cambios que los que están disponibles directamente.

El acceso al CSS permite cambiar la forma en que se presenta el contenido en línea, como los colores, las fuentes, los tamaños de las fuentes, las formas de los botones, etc. Para tener acceso a esta característica, necesitas tener un plan de Búho Corporativo o Empresarial.

Dependiendo de tus habilidades en CSS, hay muchos cambios que puedes hacer en la interfaz de tus pruebas. Hemos tenido clientes que cambiaron el aspecto de la barra de tiempo, añadieron transiciones animadas llamativas y otras cosas geniales a través de CSS personalizado.

Pruebas, evaluaciones y cursos

Si quieres personalizar el CSS para tu Quiz, Evaluación, o Curso, envíanos un mensaje. Si el cambio es simple (como alterar el tamaño de la fuente), podemos hacerlo de inmediato.

Si necesita más cambios, le enviaremos un archivo 📂 para que lo personalice y nos lo devuelva, y luego aplicaremos los cambios a su cuenta. Envía tu solicitud a través del chat.

Los cambios en el CSS pueden aplicarse, específicamente a un Quiz, Evaluación o Curso, o en toda su cuenta (si desea utilizar la misma configuración para cada pieza de contenido que cree). El CSS puede ser guardado como una lista en un documento del bloc de notas y enviado a nosotros. Luego lo implementaremos en tu cuenta.

Exámenes

Puedes editar el CSS de tu examen directamente desde tu cuenta. Ve a tu Examen > Crear > Estilo > CSS personalizado:



En la pestaña File manager, también puedes subir tus fuentes e imágenes para usarlas en la hoja de estilo CSS (consulta este artículo para saber más):



Sólo para darte un ejemplo, este es el enlace a un examen que fue diseñado con los ajustes disponibles en el Dashboard:
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

Y este es el mismo examen, pero ahora con un estilo CSS personalizado:
https://www.onlineexambuilder.com/general-knowledge-exam-css/exam-276765

Todos los cambios realizados en la pestaña de Estilo se aplicarán a tu examen a partir de entonces, incluso si es uno ya existente o si está incrustado en un sitio web.

Hoja de trucos CSS personalizada

Nuestros queridos diseñadores compartieron algunos fragmentos de código que puedes usar para crear tu hoja de CSS. Compruébalos a continuación.

1. Examen, prueba y evaluación

Cambiando la familia de fuentes

Todas las fuentes de Google están ahora disponibles para los exámenes.
Si desea cambiar el tipo de letra de su Evaluación y Cuestionario, por favor vea una lista de Fuentes Seguras en la Web, o vea Fuentes de Google. No olvides importar la fuente al administrador de archivos (en Exámenes > Estilo) y luego copiar-pegar la ruta de la fuente a tu hoja CSS.

Encabezados

Esto incluye las preguntas.

h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong { font-family: Georgia, serif;}

Texto del cuerpo

Esto incluye las respuestas.

cuerpo { font-familia: Arial, Helvética, sans-serif;}

Botones

.contenedor .botón, .entrada de contenedor[tipo=solicitud], .entrada de contenedor[tipo=botón], .botón de contenedor, .contenedor .juego.continuar {familia de fuentes: Arial, Helvetica, sans-serif;}

Todo (la misma fuente)

cuerpo, h1, h2, h3, h4, h5, h6, pie de foto, *[clase*=cabecera_h], .examquestion>strong,.contenedor .botón, .entrada de contenedor[tipo=sumisión], .entrada de contenedor[tipo=botón], .botón de contenedor, .contenedor .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Cambiar el tamaño de la fuente

Encabezados

h1 { tamaño de fuente: 28px;}h2, caption, .heading_h2, .examquestion>strong { tamaño de fuente: 21px;}h3, .heading_h3 { tamaño de fuente: 16.8px;}h4 { tamaño de fuente: 15.4px;}h5 { tamaño de fuente: 14px;}h6 { tamaño de fuente: 11.2px;}

Texto del cuerpo

cuerpo { tamaño de fuente: 13px;}

Botones

.contenedor .botón, .entrada de contenedor[tipo=solicitud], .entrada de contenedor[tipo=botón], .botón de contenedor, .contenedor .juego.continuar {tamaño de fuente: 13px;}

Preguntas

#contenedor de preguntas h1 { tamaño de fuente: 28px;}

Respuestas

...etiqueta de respuestas, ...espacio de la etiqueta de respuestas, ...entrada de respuestas * { tamaño de fuente: 13px;}

Añadiendo una imagen de fondo

Para los exámenes, puedes hacerlo directamente a través del tablero en Styling > Theme > Dark photo background.

Sin embargo, para las evaluaciones y los cuestionarios se necesitan las siguientes líneas de código:

html { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') no-repetición centro centro fijo; background-size: cover;}html body { background: none rgba(59,59,59,0.7);}

Para agregar una imagen de fondo, primero debes subir esta imagen a nuestros servidores. Puedes hacerlo agregándolas al Administrador de Archivos en uno de tus exámenes. Después de subirlas allí, se generará una ruta CSS en la pestaña Styling > Custom CSS. A continuación, puedes copiar y pegar esta imagen/ruta en tu hoja de CSS.


2. Cursos

Cambiando la familia de fuentes

Si desea cambiar el tipo de fuente de su curso, por favor vea una lista de Fuentes Seguras para la Web, o vea Fuentes de Google. No olvides importar la fuente al administrador de archivos (en Exámenes > Estilo) y luego copiar-pegar la ruta de la fuente a tu hoja de CSS.

Encabezados

h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong { font-family: "Droid Serif", serif;}

Texto del cuerpo

body { font-family: "Open Sans", sans-serif;}

Botones

botón, .button { font-family: "Open Sans", sans-serif;}

Todo (la misma fuente)

body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}

Cambiar el tamaño de la fuente

Encabezados

Los tamaños de los encabezados son diferentes entre los distintos tamaños de pantalla.

Tablet y Desktop

@media only screen and (min-width: 40.0625em) { h1 { font-size: 2.55556rem; } h2 { font-size: 2.11111rem; } h3 { font-size: 1.66667rem; } h4 { font-size: 1.11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Móvil

h1 { tamaño de fuente: 1.88889rem;}h2 { tamaño de fuente: 1.55556rem;}h3 { tamaño de fuente: 1.22222rem;}h4 { tamaño de fuente: .77778rem;}h5 { tamaño de fuente: 1rem;}h6 { tamaño de fuente: 1rem;}

Todos los tamaños de pantalla

h1 { tamaño de fuente: 1.88889rem;}h2 { tamaño de fuente: 1.55556rem;}h3 { tamaño de fuente: 1.22222rem;}h4 { tamaño de fuente: .77778rem;}h5 { tamaño de fuente: 1rem;}h6 { tamaño de fuente: 1rem;}@pantalla sólo para medios y (ancho mín.: 40.0625em) { h1 { tamaño de fuente: 2.55556rem; } h2 { tamaño de fuente: 2.11111rem; } h3 { tamaño de fuente: 1.66667rem; } h4 { tamaño de fuente: 1.11111rem; } h5 { tamaño de fuente: 1rem; } h6 { tamaño de fuente: 1rem; }}

Texto del cuerpo

p, li, th, td, label, input, select, textarea, .qtype, .errorMessage, .assessboard p, .assessboard li, .contentcontainer .col12 .singleaxisscorecard p, .contentcontainer .col12 .singleaxisscorecard li {tamaño de fuente: 1rem;}

Botones

botón, .botón { tamaño de fuente: .88889rem;}

Preguntas

#contenedor de preguntas h1 { tamaño de fuente: 28px;}

Respuestas

etiqueta de respuesta>span, etiqueta de respuesta {tamaño de fuente: .8rem;}

Añadiendo un fondo

body { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') no-repetición centro fijo; background-size: cover;}

Para agregar una imagen de fondo, primero debes subir esta imagen a nuestros servidores. Puedes hacerlo agregándolas al Administrador de Archivos en uno de tus exámenes. Después de subirlas allí, se generará una ruta CSS en la pestaña Estilo > CSS personalizado. A continuación, puedes copiar y pegar esta imagen/ruta en tu hoja de CSS.

Para una mejor legibilidad, puedes añadir un color de superposición entre la imagen de fondo y el contenido. Cambie el último número para la opacidad; 0.5 significa 50% de transparencia).

Para una capa negra:

.off-canvas-wrap {fondo: rgba(0, 0, 0, 0.5);}

Para una capa blanca:

.off-canvas-wrap {fondo: rgba(255, 255, 255, 0.5);}

Añadir un logotipo

Cambie el tamaño de la imagen

Para usar un logo en un curso, probablemente necesite cambiar su tamaño. Por lo tanto, por favor use esta herramienta para cambiar el tamaño del logo antes de subirlo a Amazon: Online Image Resizer.

Sube la imagen. Puedes recortarla si lo necesitas, pero si no es necesario, ve directamente al paso 4. Ponga el número "108" en la última casilla, y mantenga la casilla marcada, así:



Ahora descarga el logo. PNG es tu mejor apuesta.

Sube el logo

Para usar el logo, necesitas subir esta imagen a nuestros servidores. Por favor, añádala a un examen de > Estilo > Administrador de archivos y copie y pegue la ruta CSS en la parte inferior de la subpestaña CSS personalizada para usarla en su curso.

Calculando el ancho correcto

En CSS, tendrás que especificar la altura y el ancho del logo que estás agregando. Tienes que respetar la relación de aspecto del logo, así que necesitas una calculadora para hacerlo: Easy Aspect Ratio Calculator. Así es como se usa:

Encuentra primero las dimensiones actuales de tu imagen. 2. Ve al logo que acabas de subir a tu Explorador, haz clic con el botón derecho del ratón en él y haz clic en Propiedades. 2. Selecciona la pestaña Detalles. Verás tus dimensiones en la parte superior:
Ve a la calculadora en línea. 3. Introduce el ancho y la altura de la imagen (la que está en las propiedades), selecciona Nueva altura e introduce la nueva altura (ver abajo después de tamaño de fondo, el segundo valor es la altura que quieres).
La calculadora dirá algo como: "¡Contemplen! La nueva anchura", ¡y tu número está ahí! 4. Redondea este número al más cercano (no hay tal cosa como medio píxel).

Logotipo en el lado izquierdo (junto al botón de menú)

Tenga en cuenta que la imagen de abajo fue estilizada directamente desde el botón del menú, y se añadió un color de fondo sólido al logotipo con relleno en el interior. Si necesita que esto sea diferente, debe jugar con el tamaño del fondo y la posición del fondo (ver el ejemplo a continuación).

.tab-bar::after { imagen de fondo: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); fondo-repetición: no-repetición; fondo-posición: arriba a la derecha; fondo-tamaño: 156px 51px; contenido: ''; visualización: bloque; posición: relativa; flotar: izquierda; anchura: 156px; altura: 51px;}@pantalla sólo para medios y (anchura mín.: 64.063em) { .tab-bar::after { tamaño del fondo: 165px 54px; ancho: 165px; alto: 54px; }}@pantalla sólo para medios y (ancho máximo: 40em) { .tab-bar::after { ancho: 138px; alto: 45px; tamaño del fondo: 138px 45px; }}

Logotipo en el lado derecho

Tenga en cuenta que la imagen de abajo se diseñó para tener un ligero acolchado por el lado y la parte superior. Si no quieres eso, puedes establecer la altura de la imagen a 54px para el escritorio y 45px para el móvil y establecer la posición de fondo a superior derecha en su lugar (ver el ejemplo anterior). La imagen tomará la altura completa de la barra superior y se pegará a los bordes de la ventana.

.tab-bar { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-position: top 10px right 10px; background-repeat: no-repeat; background-size: 117px 40px;}@media only screen and (max-width: 40em) { .barra de pestañas { posición de fondo: derecha 10px centro; tamaño de fondo: 102px 35px; }}

Logotipo en la parte inferior izquierda o derecha

Ajuste el ancho, altura y tamaño del fondo de acuerdo con las dimensiones de su imagen.

En el ejemplo siguiente, el logotipo está alineado a la derecha. Para alinearlo a la izquierda, cambie derecha: 0 a izquierda: 0.

Si necesitas que el logo esté un poco desde el borde, escribe cosas como bien: 10px y bajo: 10px.

...sección principal... página de la UI... después de... contenido: ''; visualización: bloque; anchura: 102px; altura: 35px; fondo-imagen: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); fondo-tamaño: 102px 35px; fondo-repetición: no-repetición; fondo-posición: centro; posición: absoluta; derecha: 0; fondo: 0; índice z: 99;}
¿Este artículo te resultó útil?
Cancelar
¡Gracias!