Este artículo también está disponible en:
Este artículo está traducido utilizando un traductor automático. Podría contener algunos errores o traducciones extrañas. De todos modos, creemos que es valioso que puedas leer este artículo de ayuda en tu idioma materno. Déjanos tu comentario al final del artículo si este artículo te resultó útil o si tienes algún otro comentario.

Con los planes Corporate y Enterprise Owl, es posible editar el CSS de su contenido de aprendizaje.

Es posible que desee cambiar las fuentes, los colores, las formas de los botones y el fondo de sus pruebas y cursos creados con Easy LMS. Una forma de hacerlo es ajustando la configuración en la sección Estilo pero es posible que quiera hacer aún más cambios que los disponibles directamente.

El acceso al CSS le permite cambiar la forma en que se presenta el contenido en línea, como los colores, las fuentes, los tamaños de letra, las formas de los botones, etc. Para tener acceso a esta función, es necesario tener un Plan corporativo o Enterprise Owl.

Dependiendo de tus conocimientos de CSS, hay muchos cambios que puedes hacer en la interfaz de tus pruebas. Hemos tenido clientes que han cambiado el aspecto de la barra del temporizador, han añadido llamativas transiciones animadas y otras cosas estupendas mediante CSS personalizado.
Cuestionarios, Evaluaciones, y Cursos

Si desea personalizar el CSS para su Cuestionario, Evaluación, o Cursoenvíanos un mensaje. Si el cambio es sencillo (como alterar el tamaño de la fuente), podemos hacerlo de inmediato.

Los cambios en el CSS pueden aplicarse, concretamente, a Cuestionario, Evaluación, o Cursoo a toda tu cuenta (si quieres utilizar la misma configuración para cada contenido que crees). El CSS puede guardarse como una lista en un documento del bloc de notas y enviárnoslo. Nosotros lo implementaremos en su cuenta.

Exámenes

Puede editar el CSS de su Examen directamente desde su cuenta. Vaya a su Examen > Crear > Estilos > CSS personalizados:



En el Gestor de archivos también puedes subir tus fuentes e imágenes para utilizarlas en la hoja de estilo CSS (consulta este artículo para saber más):



Sólo para dar un ejemplo, este es el enlace a un Examen que fue estilizado con las configuraciones disponibles en el Dashboard:
https://www.onlineexambuilder.com/ocean-sailor-exam/exam-70792



Y este es el mismo Examen, pero ahora con estilo CSS personalizado
https://www.onlineexambuilder.com/ocean-sailor-exam-css/exam-93757



Todos los cambios realizados en la pestaña Styling se aplicarán a su Examen a partir de ese momento, incluso si se trata de uno ya existente o si está incrustado en un sitio web.

Hoja de trucos de CSS personalizado

Nuestros queridos diseñadores han compartido algunos fragmentos de código que puedes utilizar para crear tu hoja CSS. Compruébalos a continuación.
1. Examen , Cuestionario, y Evaluación
Cambiar la familia de fuentes

Todas las fuentes de Google están ahora disponibles para Exámenes.
Si quieres cambiar el tipo de fuente de tu Evaluación y Cuestionario, consulta la lista de Fuentes seguras para la web, o consulte Google Fonts. No olvides importar la fuente al Gestor de archivos (en Exámenes > Estilos) y luego copiar y pegar la ruta de la fuente en tu hoja CSS.

Encabezados

Esto incluye las preguntas.

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

Cuerpo del texto

Incluye las respuestas.

body { font-family: Arial, Helvetica, sans-serif;}

Botones

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Todo (la misma fuente)

body, h1, h2, h3, h4, h5, h6, caption, *[ class*=heading_h], .examquestion>strong,.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}``
#### Cambiar el tamaño de la fuente

* **Encabezados**
h1 { font-size: 28px;}h2, caption, .heading_h2, .examquestion>strong { font-size: 21px;}h3, .heading_h3 { font-size: 16.8px;}h4 { font-size: 15.4px;}h5 { font-size: 14px;}h6 { font-size: 11.2px;}```

Cuerpo del texto

body { font-size: 13px;}

Botones

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-size: 13px;}

Preguntas

#questioncontainer h1 { font-size: 28px;}

Respuestas

.answers label, .answers label span, .answerinput * { font-size: 13px;}
Añadir una imagen de fondo

Para Exámenes, puedes hacerlo directamente a través del panel de control en Estilo > Tema > Fondo de foto oscuro.

Sin embargo, para Evaluaciones y 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-repeat center fixed; background-size: cover;}html body { background: none rgba(59,59,59,0.7);}

Para añadir una imagen de fondo, primero tienes que subir esta imagen a nuestros servidores. Puedes hacerlo añadiéndolas al Administrador de Archivos en uno de tus Exámenes. Después de subirlas allí, se generará una ruta CSS en la sección Estilo > CSS personalizado personalizada. A continuación, puede copiar y pegar esta ruta de imagen/fuente en su hoja CSS.

2. Cursos
Cambiar la familia de fuentes

Si quiere cambiar el tipo de letra de su Curso, consulte una lista de Fuentes seguras para la web, o consulte Google Fonts. No olvides importar la fuente al Gestor de archivos (en Exámenes > Estilos) y luego copiar y pegar la ruta de la fuente en tu hoja CSS.

Encabezados

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

Cuerpo del texto

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

Botones

button, .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

Tableta y escritorio

@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óviles

h1 { font-size: 1,88889rem;}h2 { font-size: 1,55556rem;}h3 { font-size: 1,22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}

Todos los tamaños de pantalla

h1 { font-size: 1,88889rem;}h2 { font-size: 1,55556rem;}h3 { font-size: 1,22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}@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; }}

Cuerpo del texto

p, li, th, td, label, input, select, textarea, .qtype, .errorMessage, .assessboard p, .assessboard li, .contentcontainer .col12 .singleaxisscorecard p, .contentcontainer .col12 .singleaxisscorecard li {font-size: 1rem;}

Botones

button, .button { font-size: .88889rem;}

Preguntas

#questioncontainer h1 { font-size: 28px;}

Respuestas

.answers label>span, .answers label { font-size: .8rem;}
Añadir un fondo

No es posible utilizar CSS para añadir una imagen de fondo para Cursos. Tendrá que añadir la imagen de fondo directamente desde el menú Estilo de la página. Para más información, consulte la sección Opciones de estilo para Cursos artículo.
Añadir un logotipo

Cambiar el tamaño de la imagen

Para utilizar un logotipo en Curso, probablemente tendrá que cambiar su tamaño. Por lo tanto, utilice esta herramienta para cambiar el tamaño del logotipo antes de subirlo a Amazon: Resizer de imágenes en línea.

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



Ahora descargue el logotipo. PNG es su mejor opción.

Sube el logo

Para utilizar el logotipo, es necesario subir esta imagen a nuestros servidores. Por favor, añádelas a Examen > Estilos > Gestor de archivos y copie y pegue la ruta CSS en la parte inferior de la subpestaña de CSS personalizado para utilizarlo en su Curso.

Calcular el ancho correcto

En CSS, tendrás que especificar la altura y la anchura del logotipo que vas a añadir. Tienes que respetar la relación de aspecto del logotipo, por lo que necesitas una calculadora para hacerlo: Easy Aspect Ratio Calculator. Así es como se utiliza:

Encuentra primero las dimensiones actuales de tu imagen. Ve al logotipo que acabas de cargar en tu Explorador, haz clic con el botón derecho del ratón sobre él y haz clic en Propiedades. Seleccione la pestaña Detalles. Verás que las dimensiones aparecen en la parte superior
Vaya a la calculadora en línea. Introduce la anchura y la altura de la imagen (la que aparece 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: "¡Contempla! La nueva anchura", y su número está ahí Redondea este número al uno más cercano (no existen los medios píxeles).
Logotipo en el lado izquierdo (al lado del botón de menú)

Tenga en cuenta que la imagen de abajo fue estilizada directamente desde el botón del menú, y se agregó un color de fondo sólido al logotipo con relleno en su interior. Si necesita que esto sea diferente, tiene que jugar con el background-size y el background-position (ver el ejemplo de abajo).

.tab-bar::after { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_have_uploaded]'); background-repeat: no-repeat; background-position: right top; background-size: 156px 51px; content: ''; display: block; position: relative; float: left; width: 156px; height: 51px;}@media only screen and (min-width: 64,063em) { .tab-bar::after { background-size: 165px 54px; width: 165px; height: 54px; }}@media only screen and (max-width: 40em) { .tab-bar::after { width: 138px; height: 45px; background-size: 138px 45px; }}
Logotipo en el lado derecho

Tenga en cuenta que la imagen de abajo fue diseñada para tener un ligero relleno de los lados y la parte superior. Si no quieres eso, puedes establecer la altura de la imagen a 54px para escritorio y 45px para móvil y establecer el background-position a top right en su lugar (ver el ejemplo de arriba). La imagen tomará toda la altura 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_have_uploaded]'); background-position: top 10px right 10px; background-repeat: no-repeat; background-size: 117px 40px;}@media only screen and (max-width: 40em) { .tab-bar { background-position: right 10px center; background-size: 102px 35px; }}
Logotipo en la parte inferior izquierda o derecha

Ajuste el ancho, el alto y el tamaño del fondo según las dimensiones de su imagen

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

Si necesitas que el logo esté un poco alejado del borde, escribe cosas como right: 10px y bottom: 10px.

.main-section .ui-page::after { content: ''; display: block; width: 102px; height: 35px; background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_have_uploaded]'); background-size: 102px 35px; background-repeat: no-repeat; background-position: center; position: absolute; right: 0; bottom: 0; z-index: 99;}
¿Este artículo te resultó útil?
Cancelar
¡Gracias!