El editor de plantillas

Introducción

Un tema del formulario controla el aspecto de su formulario para los participantes: el diseño de la página, los colores, las fuentes, los logotipos y el estilo de cada pregunta. Los temas se crean con plantillas Twig, CSS y JavaScript, y utilizan Bootstrap 5 como framework CSS.

Muchos cambios habituales no requieren nada de código. El logotipo, los colores, las fuentes y varios ajustes de visualización se pueden cambiar con las opciones de tema. Utilice el editor de temas descrito en esta página cuando quiera ir más lejos: añadir su propio CSS o JavaScript, cambiar el HTML de una página o subir imágenes y otros archivos para su tema.

LimeSurvey incluye estos temas de formulario del núcleo:

• Fruity TwentyThree (fruity_twentythree): El tema predeterminado.
• Bootstrap Vanilla (vanilla): Un tema base sencillo para desarrolladores que quieran crear su propio tema basado en Bootstrap.
• Fruity (fruity) y Bootswatch (bootswatch): Ambos extienden Bootstrap Vanilla.

El aspecto de cada tipo de pregunta se controla mediante los temas de pregunta, no mediante el tema del formulario. Para cambiar el HTML de un tipo de pregunta, cree un tema de pregunta.

Antes de empezar

Para usar el editor de temas, necesita el permiso global Temas (consulte permisos globales) o ser superadministrador. Extender un tema requiere el derecho Crear, guardar los cambios requiere Actualizar, y borrar un tema o reiniciar un archivo requiere Borrar.

  Un tema con errores puede dejar inutilizable cualquier formulario que lo utilice. Pruebe sus cambios con una vista previa del formulario antes de usar el tema en un formulario activo.

Los temas del núcleo no se pueden editar: extiéndalos

Los temas del núcleo se actualizan junto con LimeSurvey, por lo que no se pueden modificar directamente. Para personalizar uno, extiéndalo. Al extenderlo se crea un nuevo tema de usuario que hereda todo de su tema padre. Su tema solo contiene los archivos que usted cambie; todo lo demás se toma del tema padre. De este modo, su tema sigue recibiendo las correcciones de errores y las mejoras cuando LimeSurvey actualiza el tema padre.

Para extender un tema, puede:

• Ir a Configuración > Temas, abrir el menú de acciones (⋯) al final de la fila del tema y hacer clic en Extender, o bien
• Abrir el tema en el editor de temas y hacer clic en Extender en la barra de herramientas.

Introduzca un nombre para el nuevo tema. A continuación, el editor de temas abrirá su nuevo tema.

Dónde se almacenan los temas

• Temas del núcleo: themes/survey/ en su instalación de LimeSurvey.
• Temas de usuario (temas extendidos, subidos o importados): upload/themes/survey/.

También puede editar los archivos de un tema de usuario directamente en el servidor con su propio editor. Asegúrese de que el servidor web pueda seguir leyendo y escribiendo los archivos después, para poder seguir utilizando también el editor de temas.

El editor de temas

Para abrir el editor de temas, vaya a Configuración > Temas, abra el menú de acciones (⋯) al final de la fila del tema y haga clic en Editor de temas.

Si abre un tema del núcleo, una nota le indica que se trata de un tema estándar y ofrece un enlace para extenderlo. Puede ver sus archivos y la vista previa, pero no puede guardar los cambios.

Barra de herramientas

• Exportar: Descarga el tema como un archivo ZIP.
• Extender: Crea un nuevo tema que hereda de este (consulte más arriba).
• Renombrar: Cambia el nombre del tema. Solo está disponible para los temas de usuario.
• Borrar: Borra el tema. No se puede borrar el tema que está establecido como tema predeterminado.
• Tema: Cambia el editor de temas a otro tema.
• Pantalla: Selecciona qué página del formulario se muestra en la vista previa y qué archivos se listan para editar. Las pantallas son: Pregunta, Lista de encuestas/formularios, Bienvenida, Completado, Evaluaciones, Error, Limpiar todo, Cargar, Guardar, Registro, Imprimir respuestas, Estadísticas públicas, PDF, Cuotas excedidas, Navegación y Participante.

Edición de archivos

Los paneles de la derecha listan los archivos utilizados por la pantalla seleccionada:

• Mostrar partes del archivo: Las plantillas Twig que construyen la página.
• Archivos JavaScript
• Archivos CSS
• Otros archivos: Imágenes, fuentes y cualquier otro archivo del tema.

Haga clic en el nombre de un archivo para abrirlo en el editor. Los archivos marcados como heredado provienen del tema padre. Aun así, puede editar un archivo heredado: el botón situado debajo del editor mostrará entonces Copiar al tema local y guardar los cambios, y al guardar se copia el archivo en su tema con sus cambios. A partir de ese momento se utiliza su copia en lugar del archivo del tema padre.

Los archivos que pertenecen a su tema tienen un botón Reiniciar. Reiniciar borra su copia, de modo que se vuelve a utilizar el archivo del tema padre.

Subir archivos

Utilice el campo de subida situado en la parte inferior del panel Otros archivos para añadir imágenes, fuentes u otros archivos a su tema. Los archivos subidos se almacenan en la carpeta files/ del tema. De forma predeterminada, puede subir imágenes (gif, ico, jpg, jpeg, png) y estos tipos de archivo: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq y lsg. Su administrador puede cambiar estas listas con los ajustes allowedthemeimageformats y allowedthemeuploads de config.php.

Para mostrar una imagen subida en un archivo Twig, utilice la función image():

{{ image('./files/myfile.png', 'Alternative text for the picture', {"class": "myclass"}) }}

En los archivos CSS, haga referencia a los archivos subidos con una ruta relativa a la carpeta css, por ejemplo url('../files/background.jpg').

Vista previa

Debajo del editor, una vista previa muestra la pantalla seleccionada con contenido de ejemplo. Utilice los botones Móvil, 640x480, 800x600, 1024x768 y Completo para comprobar la página con distintos tamaños de pantalla.

La vista previa utiliza datos de ejemplo y puede que no muestre todos los estilos exactamente como lo hace un formulario real. Compruebe siempre sus cambios también en una vista previa de un formulario real.

Importar y exportar temas

• Para trasladar un tema a otra instalación de LimeSurvey, haga clic en Exportar en la barra de herramientas del editor de temas. Esto descarga el tema como archivo ZIP.
• Para instalar un tema desde un archivo ZIP, vaya a Configuración > Temas y haga clic en Cargar e instalar.

Cómo se construye un tema

Carpeta del tema

Una carpeta de tema contiene:

• config.xml: El manifiesto del tema: nombre, tema padre, archivos CSS y JavaScript, opciones del tema y las pantallas que se muestran en el editor de temas.
• views/: Las plantillas Twig. layout_global.twig es el diseño principal de la mayoría de las páginas del formulario. Otros diseños se utilizan para páginas especiales, por ejemplo layout_survey_list.twig para la lista pública de formularios y layout_errors.twig para las páginas de error. La carpeta views/subviews/ contiene las plantillas más pequeñas que incluyen los diseños.
• css/ y scripts/: Los archivos CSS y JavaScript del tema.
• files/: Imágenes y otros archivos utilizados por el tema.
• options/: La página de las opciones del tema.

Plantillas Twig

Las plantillas reciben los datos del formulario en la variable aSurveyInfo. Para ver todo su contenido, active el modo de depuración en application/config/config.php y añada esta línea al final del elemento body en layout_global.twig:

{{ dump(aSurveyInfo) }}

Para conocer las funciones que puede utilizar en las plantillas, consulte Funciones Twig disponibles. Por motivos de seguridad, las plantillas se ejecutan en un entorno aislado (sandbox), por lo que solo están disponibles estas funciones.

config.xml

La sección <files> enumera los archivos CSS y JavaScript que se cargan en las páginas del formulario:

• <add> añade un archivo. Si el tema padre ya tiene un archivo con el mismo nombre, su archivo lo reemplaza.
• <remove> impide que se cargue un archivo del tema padre.

No es necesario volver a enumerar los archivos del tema padre: se cargan de todos modos.

LimeSurvey lee config.xml cuando se instala un tema y guarda la configuración en la base de datos. Después de modificar config.xml de un tema instalado, vaya a Configuración > Temas, abra el menú de acciones (⋯) del tema y haga clic en Reiniciar para volver a cargar el archivo.

Añadir su propio CSS y JavaScript

Cada tema del núcleo tiene dos archivos reservados para su propio código:

• css/custom.css: Se carga después de todos los demás archivos CSS, por lo que sus reglas sustituyen a los estilos del tema.
• scripts/custom.js: Se carga después del JavaScript propio del tema.

Cuando extiende un tema, estos son los archivos que debe modificar. Añada su CSS a custom.css en lugar de editar los archivos CSS principales del tema, para que su tema siga recibiendo las actualizaciones del tema padre.

Para añadir más archivos, súbalos y enumérelos en la sección <files> del config.xml de su tema. Utilice un nombre de archivo que no exista en el tema padre; de lo contrario, su archivo reemplazará el del padre:

<files>
    <css>
        <add>css/my-styles.css</add>
    </css>
    <js>
        <add>scripts/my-script.js</add>
    </js>
</files>

Las páginas del formulario se cargan con Ajax de forma predeterminada, por lo que el navegador no realiza una carga completa de la página cuando un participante pasa a la siguiente. Ejecute su JavaScript tanto en la primera carga de la página como en cada carga de página mediante Ajax:

$(document).on('ready pjax:scriptcomplete', function () {
    // Your code here
});

Preguntas de estilo con CSS

Todos los ejemplos de esta sección van en el archivo custom.css de su tema.

Clases de página

Los elementos <html> y <body> incluyen clases que puede utilizar para dar estilo a páginas completas:

• html: El código de idioma (por ejemplo en) y la dirección del texto (dir-ltr o dir-rtl).
• body: El nombre del tema y de cada tema padre (por ejemplo fruity_twentythree), la fuente (por ejemplo font-ibm-sans), el idioma (por ejemplo lang-en) y brand-logo cuando se muestra el logotipo.

Clases del contenedor de la pregunta

Cada pregunta está envuelta en un elemento con la clase question-container. También incluye:

• La clase del tipo de pregunta (consulte la tabla siguiente).
• mandatory: La pregunta es obligatoria o parcialmente obligatoria.
• input-error: La respuesta no superó la validación, o no se respondió a una pregunta obligatoria.
• missing: La pregunta aún tiene partes sin responder y el participante ya ha pasado de ella.
• ls-hidden y ls-irrelevant: La pregunta está oculta por su condición.
• ls-hidden-attribute: La pregunta está oculta por su configuración "Ocultar permanentemente esta pregunta".
• Cualquier clase introducida en el ajuste Clases CSS de la pregunta (en Mostrar). Utilícelo para dar estilo a preguntas individuales.

Por ejemplo, una pregunta obligatoria de tipo Lista (radio) que no se ha respondido:

<div id="question123" class="row list-radio mandatory input-error question-container">
    ...
</div>

Clases de tipo de pregunta

Tipo de pregunta	Clase	Código del tipo
Elección de 5 puntos	.choice-5-pt-radio	5
Matriz	.array-flexible-row	F
Matriz (elección de 5 puntos)	.array-5-pt	A
Matriz (elección de 10 puntos)	.array-10-pt	B
Matriz (Ampliar, Mantener, Reducir)	.array-increase-same-decrease	E
Matriz (Números)	.array-multi-flexi	:
Matriz (Textos)	.array-multi-flexi-text	;
Matriz (Sí/Incierto/No)	.array-yes-uncertain-no	C
Matriz en columnas	.array-flexible-column	H
Matriz de doble eje	.array-flexible-dual-scale	1
Fecha/Hora	.date	D
Ecuación	.equation	*
Subir ficheros	.upload-files	|
Género	.gender	G
Texto libre (enorme)	.text-huge	U
Cambio de idioma	.language	I
Lista (Desplegable)	.list-dropdown	!
Lista (Radio)	.list-radio	L
Lista (botones radiales) con comentarios	.list-with-comment	O
Texto libre (largo)	.text-long	T
Opción múltiple	.multiple-opt	M
Opción múltiple con comentarios	.multiple-opt-comments	P
Entrada numérica múltiple	.numeric-multi	K
Texto corto múltiple	.multiple-short-txt	Q
Entrada numérica	.numeric	N
Ranking	.ranking	R
Texto libre (breve)	.text-short	S
Mostrar texto	.boilerplate	X
Sí/No	.yes-no	Y

Clases para las partes de una pregunta

Dentro del contenedor de la pregunta, el área de respuestas utiliza estas clases. Algunas dependen de los ajustes de visualización de la pregunta: por ejemplo, Matriz (Números) utiliza clases diferentes cuando muestra casillas en lugar de desplegables.

Clase	Se utiliza para	Utilizada por (ejemplos)
.ls-answers	El elemento que contiene todas las opciones de respuesta	Todos los tipos de pregunta
.answers-list	Una lista o fila de opciones de respuesta	Lista (Radio), Opción múltiple, Ranking, filas de la mayoría de las matrices
.subquestion-list, .questions-list	Una lista o tabla de subpreguntas	Matrices, Texto corto múltiple, Entrada numérica múltiple
.answer-item	Una opción de respuesta o entrada	Casi todos los tipos de pregunta
.noanswer-item	La opción "Sin respuesta"	Matrices, Elección de 5 puntos, Lista (botones radiales) con comentarios
.question-item	Una subpregunta que también es una respuesta	Opción múltiple, Texto corto múltiple, Entrada numérica múltiple
.radio-list	Una lista o fila de botones de radio	Lista (Radio), Elección de 5 puntos, Lista (botones radiales) con comentarios, filas de matrices de botones de radio
.radio-array	Una tabla de botones de radio	Matriz, Matriz (elección de 5 puntos), Matriz (elección de 10 puntos), Matriz (Ampliar, Mantener, Reducir), Matriz (Sí/Incierto/No)
.radio-item	Un botón de radio con su etiqueta	Lista (Radio), Elección de 5 puntos, Lista (botones radiales) con comentarios, matrices de botones de radio
.checkbox-list	Una lista de casillas	Opción múltiple, Opción múltiple con comentarios
.checkbox-array	Una tabla de casillas	Matriz (Números) con formato de casilla
.checkbox-item	Una casilla con su etiqueta	Opción múltiple, Opción múltiple con comentarios, Matriz (Números) con formato de casilla
.checkbox-text-item	Una casilla con un campo de texto	Opción múltiple con comentarios
.comment-item	El campo de comentario junto a una casilla	Opción múltiple con comentarios
.text-list	Una lista de entradas de texto	Texto corto múltiple, Entrada numérica múltiple
.text-item	Una entrada de texto	Texto libre (breve), (largo) y (enorme), Texto corto múltiple, Matriz (Textos)
.number-list, .numeric-item	Entradas numéricas	Entrada numérica múltiple, Entrada numérica
.number-array	Una tabla de entradas numéricas	Matriz (Números), Matriz (Textos)
.text-array	Una tabla de entradas de texto	Matriz (Textos), Matriz (Números)
.dropdown-array, .dropdown-list, .dropdown-item	Tablas, filas y celdas con desplegables	Matriz (Números), Matriz de doble eje con desplegables
.date-item	La entrada de fecha	Fecha/Hora
.upload-item	El área de subida de ficheros	Subir ficheros
.answertext	El texto de la subpregunta en una fila de matriz	Matrices
.col-answers	La columna de textos de subpreguntas	Matrices
.ls-heading	La fila de encabezado con las opciones de respuesta	Matrices
.ls-odd, .ls-even	Filas alternas	Matrices
.ls-label-xs-visibility	Una etiqueta que solo es visible en pantallas pequeñas y para lectores de pantalla	Celdas de matrices
.ls-input-group-extra	El prefijo o sufijo de una entrada	Texto libre (breve), Entrada numérica, Texto corto múltiple, Entrada numérica múltiple
.ls-js-hidden	Oculto cuando JavaScript está activo	Matriz de doble eje, Lista (Radio)
.ls-no-js-hidden	Oculto cuando JavaScript no está activo	Ranking
.ls-js-hidden-sr	Oculto cuando JavaScript está activo, pero leído igualmente por los lectores de pantalla	Ranking

En Lista (Radio), la opción "Sin respuesta" tiene la clase no-anwser-item (con esta ortografía) en lugar de noanswer-item.

Por ejemplo, este es el HTML de las respuestas de una pregunta de tipo Lista (Radio):

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

Clases de validación y de ayuda

Las ayudas de validación (como "Seleccione una de las siguientes opciones" o "Introduzca un número entre 1 y 10") siempre tienen la clase ls-em-tip. Mientras el participante responde, LimeSurvey añade ls-em-success cuando se cumple la regla de la ayuda y ls-em-error cuando no se cumple, de modo que pueda aplicar un estilo distinto a cada estado. Las ayudas ocultadas con el ajuste Ocultar la ayuda de la pregunta reciben la clase hide-tip.

Cada ayuda también tiene una clase según su tipo:

Clase	Ayuda
.em_default	La ayuda predeterminada del tipo de pregunta (por ejemplo, "Seleccione una de las siguientes opciones")
.em_num_answers	Número mínimo o máximo de respuestas
.em_value_range	Valor mínimo o máximo
.em_sum_range	Suma mínima o máxima de los valores
.em_sum_equals	Los valores deben sumar un total determinado
.em_value_integer	Solo se permiten números enteros
.em_numbers_only	Solo se permiten números
.em_other_numbers_only	Solo se permiten números en el campo "Otro"
.em_other_comment_mandatory	La opción "Otro" está seleccionada pero su campo de texto está vacío
.em_regex_validation	La respuesta debe coincidir con el patrón de validación
.em_q_fn_validation	La ecuación de validación de la pregunta
.em_sq_fn_validation	La ecuación de validación de la subpregunta

Idiomas de derecha a izquierda (RTL)

Para los idiomas de derecha a izquierda, el elemento <html> tiene la clase dir-rtl y los temas del núcleo cargan una versión RTL de su archivo CSS principal. Utilice .dir-rtl en su CSS para las reglas que solo se apliquen a idiomas de derecha a izquierda.

Consejos y trucos

Estas recetas se añaden a custom.css (o a un archivo Twig, cuando se indique) de un tema que haya extendido a partir de un tema del núcleo. En los ejemplos, sustituya #c0392b por su propio color.

Cambiar el color de los botones de opción y las casillas de verificación

Para usar uno de los colores que incluye Fruity TwentyThree, seleccione un Color del tema en las opciones de tema. Las opciones de tema también le permiten elegir un Icono de selección diferente.

Para cualquier otro color, añada CSS a custom.css. Los temas del núcleo dibujan sus propios botones de opción y casillas de verificación en lugar de usar los predeterminados del navegador, por lo que cambiar el color implica modificar estos elementos dibujados.

Fruity TwentyThree:

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla, Fruity y Bootswatch:

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

Mantenga suficiente contraste entre el color y el fondo, para que los participantes con baja visión puedan seguir viendo qué respuestas están seleccionadas.

Hacer más grandes los botones de opción y las casillas de verificación

Los botones de opción y las casillas de verificación más grandes son más fáciles de pulsar en teléfonos y tabletas. Esto funciona en todos los temas del núcleo:

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

En Fruity TwentyThree, añada también algo de espacio entre los botones de opción y el texto de la respuesta:

.radio-item label {
    padding-left: 14px;
}

Los valores de hasta aproximadamente 1,4 funcionan sin más cambios. Con valores mayores, los controles empiezan a solaparse con el texto de la respuesta y con los bordes de las filas de las matrices en pantallas pequeñas, por lo que también deberá añadir más espacio a su alrededor.

Cambiar el color de la barra de progreso

.progress-bar {
    background-color: #c0392b;
}

Mostrar contenido solo en un idioma

El elemento <body> tiene una clase con el idioma actual, como lang-en o lang-fr. Puede usarla para mostrar contenido diferente según el idioma, por ejemplo una línea de ayuda en el pie de página. Añada el texto de cada idioma a un archivo Twig de su tema, como subviews/footer/footer.twig:

<div class="help-fr" lang="fr">Pour de l'aide, appelez le 000000</div>
<div class="help-en" lang="en">For help, please call 000000</div>

Después, oculte el texto de los demás idiomas en custom.css:

body:not(.lang-fr) .help-fr,
body:not(.lang-en) .help-en {
    display: none;
}

Usar un logo diferente para cada formulario

No necesita un tema distinto para cada logo. Las opciones de tema se pueden establecer para un solo formulario: abra el formulario, haga clic en Opciones de tema en el menú Configuración de encuestas/formularios y seleccione otro Archivo con el logo. Consulte Opciones de tema.

Mostrar un favicon personalizado

Un favicon es el pequeño icono que se muestra en la pestaña del navegador y en los marcadores. Los temas del núcleo muestran el archivo files/favicon.ico del tema. Para usar su propio icono, llámelo favicon.ico y súbalo en el panel Otros archivos de su tema extendido. Sustituye al icono del tema padre.

Centrar el logo en Fruity TwentyThree

Active el Logo en las opciones de tema y, a continuación, añada esto a custom.css:

#survey-nav .container-fluid {
    position: relative;
}
#survey-nav .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Añadir su propio logo a la lista pública de encuestas/formularios

La lista pública de encuestas/formularios muestra de forma predeterminada el logo de LimeSurvey. Para mostrar su propio logo:

1. Extienda Fruity TwentyThree y abra su tema en el editor de temas.
2. Suba su logo en el panel Otros archivos.
3. Seleccione la pantalla Lista de encuestas/formularios y abra layout_survey_list.twig.
4. Busque el <div> que contiene {{ include('./ls_logo_svg.twig') }}. Sustituya todo este <div>, incluida la línea include, por el código que se muestra debajo de estos pasos.
5. Haga clic en Copiar al tema local y guardar los cambios.
6. Vaya a Configuración > Configuración global > General y seleccione su tema como Tema para la lista pública de encuestas y las páginas de error.

Utilice el nombre del archivo que ha subido y el nombre de su organización como texto alternativo:

{{ image('./files/mylogo.png', 'Name of your organisation', {"class": "img-fluid mx-auto d-block"}) }}

Añadir una línea separadora a las matrices de doble eje

Para dibujar una línea vertical entre las dos escalas de una pregunta de tipo Matriz de doble eje:

.array-flexible-dual-scale .header_separator,
.array-flexible-dual-scale .dual_scale_separator {
    border-right: 1px solid #00a8e1;
}

JavaScript en las preguntas

Para ejecutar JavaScript en todas las páginas de sus formularios, colóquelo en custom.js de su tema (consulte más arriba).

También puede añadir un script al texto de una sola pregunta o grupo. LimeSurvey elimina los scripts de estos textos a menos que el filtro XSS esté desactivado para su usuario. El filtro nunca se aplica a los superadministradores. Para el resto de usuarios, la opción Filtrar HTML para XSS debe estar desactivada en Configuración > Configuración global > Seguridad. Haga esto solo si confía en todas las personas que pueden editar formularios. Para más detalles y ejemplos, consulte Soluciones alternativas: manipular un formulario en tiempo de ejecución con JavaScript.