Actions

New Template System in LS3.x/es: Difference between revisions

From LimeSurvey Manual

(Created page with "__TOC __ =Introducción=")
(Created page with "<div class='form-group row'> <label for='simple_edit_options_surveyname2' class='control-label'>Nombre de la encuesta debajo de la barra de progreso</label> <div class='col-s...")
 
(177 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<languages />
<languages />


__TOC __
__TOC__
=Introducción=
=Introducción=


On this page you'll learn how to:
Tenga en cuenta: en versiones anteriores de LimeSurvey, los archivos que definen cómo se ve la encuesta, cómo se presenta la encuesta en términos de colores, fuentes, diseño y (algunos) comportamientos, se denominaban "plantilla". Debido a nuevos conocimientos, esto ahora se denomina "tema", mientras que la plantilla está reservada para, por ejemplo, encuestas.


* Use the new theme system of LimeSurvey 3.0.
En esta página aprenderá cómo:
* Use inheritance to manage your own themes.
 
* Add a picture to your theme
* Usar el nuevo sistema de temas de LimeSurvey 3.0.
* Manage theme options for your surveys and survey groups
* Usar la herencia para administrar sus propios temas.
* Agregar una imagen a su tema.
* Administrar opciones del tema para sus encuestas y grupos de encuestas.


<hr/>
<hr/>


LimeSurvey 3 introduces a complete new theme engine system, based on Twig 1.29, Bootstrap, and allowing theme inheritance and theme options. It completely removes the old replacement keywords system. So now, 100% of the frontend HTML can be customized. For example, in the old theme system, there was a keyword {ASSESSMENTS} that was replaced by the assessment HTML at execution time. A theme designer had no way to customize this HTML (other than using JavaScript). Now, there is a file called assessments.twig that contains the logic (written in Twig) to generate this HTML. In these pages, we will give you some explanation about how to use this new theme engine.
LimeSurvey 3 presenta un nuevo sistema de motor de temas completo, basado en Twig 1.29, Bootstrap, y que permite la herencia de temas y las opciones de temas. Elimina por completo el antiguo sistema de reemplazar palabras clave . Ahora, el 100% del HTML  del frontend se puede personalizar. Por ejemplo, en el antiguo sistema de temas, había una palabra clave {EVALUACIONES} que fue reemplazada por  evaluaciones en HTML en el momento de la ejecución. Un diseñador de temas no tenía forma de personalizar este HTML (aparte de usar JavaScript). Ahora, hay un archivo llamado evaluaciones.twig que contiene la lógica (escrita en Twig) para generar este HTML. En estas páginas, le daremos una explicación sobre cómo usar este nuevo motor de temas.


<div class="simplebox">[[File:help.png]] We will not detail here how Twig works. It’s kind of very simplified PHP that offers a high level of security thanks to the “sandbox” system (we’ll see that in more detail in the part about the Theme Engine Core code). If you already know PHP, it will be extremely easy for you to master. If you don’t know PHP, it still should be pretty easy to learn. Please, have a look to the Twig 1.X documentation:
<div class="simplebox"> [[File:help.png]] No detallaremos aquí cómo funciona Twig. Es una especie de PHP muy simplificado que ofrece un alto nivel de seguridad gracias al sistema "sandbox" (lo veremos con más detalle en la parte sobre el código de Theme Engine Core). Si ya conoce PHP, le será extremadamente fácil de dominar. Si no conoce PHP, igual le debería ser bastante fácil de aprender. Por favor, eche un vistazo a la documentación de Twig 1.X:
https://twig.symfony.com/ </div>
https: //twig.symfony.com/ </div>


=Editing Using the Admin Interface=
=Edición usando la interfaz de administración=
==theme list==
==Lista de temas==
On the admin dashboard, there is now a box to access the theme list:
En el panel de administración, ahora hay un cuadro para acceder a la lista de temas:
[[File:Template list.jpg|thumb|800px|center|baseline|border|''The theme list after a fresh install of RC3'']]
[[File:Template list.jpg | thumb | 800px | center | baseline | border | '' La lista de temas después de una nueva instalación de RC3 '']]
<br />
<br />
The list is divided in 5 columns:
La lista se divide en 5 columnas:
* a preview of the theme: it’s just a picture file called “preview.png” at the root of the theme
* Una vista previa del tema: es solo un archivo de imagen llamado "preview.png" en la raíz del tema.
* the “title” of the theme as specified in the manifest (config.xml in the root of the theme)
* El "título" del tema como está especificado en el manifiesto (config.xml en la raíz del tema).
* the description of the theme: a string set in its manifest
* La descripción del tema: una cadena establecida en su manifiesto.
* the type of theme: Core theme (provided with LimeSurvey), User theme (added in upload directory), XML theme (not loaded in database)
* El tipo de tema: tema principal (proporcionado con LimeSurvey), tema de usuario (agregado en el directorio de carga), tema XML (no cargado en la base de datos).
* Extends: if the theme extends another theme, its name will be indicated here
* Extenciones: si el tema se extiende otro tema, su nombre se indicará aquí.
* Some action buttons:
* Algunos botones de acción:
** Install: it will load the manifest of a theme to add it to database and make it available for selection at the survey level
** Instalar: cargará el manifiesto de un tema para agregarlo a la base de datos y lo hará disponible para su selección en el nivel de la encuesta.
** Uninstall: it will delete the configuration entries of a theme in the database
** Desinstalar: eliminará las entradas de configuración de un tema en la base de datos.
** Theme editor: it will redirect you to the theme editor
** Editor de temas: lo redirigirá al editor de temas.
** Theme option: it will lead you the global configuration of theme options
** Opción de tema: lo llevará a la configuración global de las opciones de tema.


==Theme Editor==
==Editor de temas==
<div class="simplebox">[[File:help.png]] This documentation supposes you already know how to use the Template Editor in the previous version of LS. </div>
<div class="simplebox"> [[File:help.png]] Esta documentación supone que ya sabes cómo utilizar el Editor de temas en la versión anterior de LS.</div><br>  
<br>
El editor de temas se ha mantenido lo más parecido posible al original. Entonces, cuando abres un tema principal, no puedes editarlo. Pero ahora, en lugar de un botón de “copiar”, tienes un “botón de extender”.
The Template Editor has been kept as close as possible to the original one. So, when you open a Core Template, you can’t edit it. But now, instead of a “copy” button, you have an “extend button”.
<br>  
<br>
[[Archivo:Extiende default.png|centro|baseline|border|''Ahora '''extiende''' el tema'']]
[[File:Extends default.png|center|baseline|border|''Now you '''extend''' theme'']]


====A quick overview of the concept of theme inheritance====
====Una descripción rápida del concepto de herencia de temas====


In LS3, a theme can now inherit from another theme, it can “extend” another theme. This means that the theme directory will be practically empty, it will only contain the files (views, style sheets, scripts, resources etc.) that differ from the original ones. Doing so, it will be easy for you to create a fleet of themes for your different users without having to maintain a lot of different themes. For example: you can have your own home-made theme, and then a version for a company (with its logo, its style, maybe a link to its website on the footer etc.), another version for another company etc. If then you update the CSS or the global layout of your custom theme, all the themes that inherit from it will be updated automatically. Note that the inheritance is recursive: a theme can extend a theme that extends another one etc.
En LS3, un tema ahora se puede heredar de otro tema, puede "extender" otro tema. Esto significa que el directorio de temas estará prácticamente vacío, solo contendrá los archivos (vistas, hojas de estilo, scripts, recursos, etc.) que difieran de los originales. Al hacerlo así, será fácil para usted crear un conjunto de temas para sus diferentes usuarios sin tener que mantener muchos temas diferentes. Por ejemplo: puede tener su propio tema personalizado y luego una versión para una empresa (con su logotipo, su estilo, quizás un enlace a su sitio web en el pie de página, etc.), otra versión para otra empresa, etc. Si actualiza el CSS o el diseño global de su tema personalizado, todos los temas que hereden de él se actualizarán automáticamente. Tenga en cuenta que la herencia es recursiva: un tema puede extender un tema que extiende otro, etc.


<div class="simplebox">[[File:help.png]] It also means that if you extend one of the core themes of LimeSurvey, you will still benefit from its updates.</div>
<div class="simplebox"> [[File:help.png]] También significa que si extiende uno de los temas centrales de LimeSurvey, aún se beneficiará de sus actualizaciones. </div>


====Novelties in the user interface====
====Novedades en la interfaz de usuario====


To extend the Monochrome theme of LimeSurvey, go to the Template list, click on the button “Template Editor” of the Monochrome theme. Then, click on “extend” and validate the new name “extends_monochrome”.
Para ampliar el tema Monocromo de LimeSurvey, vaya a la lista de Temas, haga clic en el botón "Editor de temas" del tema Monocromo. Luego, haz clic en “extender” y valida el nuevo nombre “extends_monochrome”.


If you now go to the upload directory (with your file/ftp client), you’ll see that a new directory has been created: '''upload/themes/extends_monochrome'''
Si ahora va al directorio de carga (con su cliente de archivos/ftp), verá que se ha creado un nuevo directorio: '''upload/themes/extend_monochrome''' que contiene un archivo XML y algunos directorios, pero la mayoría de los directorios estarán vacíos. No tiene vistas ni CSS ni JS. Sin embargo, aún puede seleccionar este tema como uno normal de una encuesta y se verá exactamente como el tema monocromo.
It contains an XML file and directories, but most directories are empty. It has neither views nor CSS nor JS. But, you can still select this theme as a normal one from a survey and it will look exactly like the monochrome theme.


[[File:Extends monochrome empty.jpg|center|baseline|border|''The theme tree (directory and files) just after its creation. It's practically empty'']]
[[File:Extends monochrome empty.jpg|center|baseline|border|''El árbol de temas (directorio y archivos) justo después de su creación. Está prácticamente vacío'']]


<div class="simplebox">[[File:help.png]] The resources (jpg, png etc.) from the original theme are copied when extending a theme. This is because if you copy a CSS file from the original theme locally, and if it refers to those files (like in background-image statement), it will need to find those pictures in the current theme path. </div>
<div class="simplebox"> [[File:help.png]] Los recursos (jpg, png, etc.) del tema original se copian al extender un tema. Esto se debe a que si copia un archivo CSS del tema original localmente, y si se refiere a esos archivos (como en la declaración de imagen de fondo), necesitará encontrar esas imágenes en la ruta del tema actual. </div>


The theme editor for the extends_monochrome theme looks like that:
El editor de temas para el tema extend_monochrome se ve así:
[[File:Editing extends monochrome.jpg|center|baseline|border|'' Editing extends_monochrome theme'']]
[[File:Editing extends monochrome.jpg|center|baseline|border|''Edición del tema extend_monochrome'']]
<br /><br />
<br />
There is no big difference with the old theme editor. Let’s list the main ones:
<br />
 <br />
No hay gran diferencia con el antiguo editor de temas. Hagamos una lista de los principales cambios:
* The keyword '''inherited''' on the file list. It means that the file is not present in the theme directory and that the file from the original theme will be used.
<br />
* La palabra clave '''heredada''' en la lista de archivos. Significa que el archivo no está presente en el directorio de temas y que se usará el archivo del tema original.
[[File:Inherited.jpg|center]]
[[File:Inherited.jpg|center]]
<br>
<br>
* The main editor ( [https://ace.c9.io ACE editor ] ) shows the content of the selected file. The files not only contain HTML, CSS or JS, but also Twig statements. Those Twig statements give us the possibility to push some logic to theme views that were located deep in the core before, and that now can be customized.
* El editor principal ([https://ace.c9.io ACE editor]) muestra el contenido del archivo seleccionado. Los archivos no solo contienen HTML, CSS o JS, sino también declaraciones Twig. Esas declaraciones de Twig nos dan la posibilidad de llevar algo de lógica a las vistas de temas que se encontraban en el núcleo antes, y que ahora se pueden personalizar.
[[File:Twig code in editor.jpg|center|''Some twig code, for Survey List'']]
[[File:Twig code in editor.jpg|center|''Algo de código twig, para la Lista de encuestas'']]
<br>
<br>
* This is why you have more screen types available in the dropdown selector of the top menu now. You’ll notice pages such as ‘Survey List’, ‘Load’, ‘Save’, ‘Error’, ‘Registration’, ‘Assessments’, ‘Print Answers’ that weren’t available before, or that you couldn’t really be customized before.
* Es por eso que ahora tiene más tipos de pantallazos disponibles en el selector desplegable del menú superior. Verá páginas como 'Lista de encuestas', 'Cargar', 'Guardar', 'Error', 'Registro', 'Evaluaciones', 'Imprimir respuestas' que no estaban disponibles antes, o que realmente no podía personalizar antes.
[[File:Newscreens editables.jpg|195px|center|''Now, you can customize all screens'']]
[[File:Newscreens editables.jpg|195px|center|' Ahora, puede personalizar todas las pantallas'']]
<br />
<br />
* The ‘tip’ link at the bottom of the file list gives you the Twig way to add a picture in your HTML
* El enlace 'sugerencia' en la parte inferior de la lista de archivos le ofrece la forma Twig de agregar una imagen en su HTML.
[[File:Tip picture.png|605px|center]]
[[File:Tip picture.png|605px|center]]
<br />
<br />
* The button ‘save changes’ becomes a button '''Copy to local theme and save changes'''
* El botón 'guardar cambios' se convirtió en el botón '''Copiar al tema local y guardar cambios'''
[[File:Copytolocal.png|360px|center]]
[[File:Copytolocal.png|360px|center]]


====Quick example: adding a picture ====
====Ejemplo rápido: agregar una imagen====


The button '''Copy to local theme and save changes''' will do exactly what it says: if you edit anything inside the file and then click on that button, it will copy the file to the theme you’re editing, and save your changes.
El botón '''Copiar al tema local y guardar los cambios''' hará exactamente lo que dice: si edita algo dentro del archivo y luego hace clic en ese botón, copiará el archivo al tema que está editando, y guardará sus cambios.
<br>
<br>
For example: click on the file layout_global.twig, then just before the block content ( {% block content %}) add the text “TEST” and click the button. You can see that the label of the file changed from “inherited” to “local” and now the button is a simple button '''save changes'''.  
Por ejemplo: haga clic en el archivo layout_global.twig, luego justo antes del contenido del bloque ({% block content%}) agregue el texto "PRUEBA" y haga clic en el botón. Puede ver que la etiqueta del archivo cambió de “heredado” a “local” y ahora el botón es un simple botón '''guardar cambios'''.
[[File:After edition.png|center|''just after clicking on the button'']]
[[File:After edition.png|center|''justo después de hacer clic en el botón'']]
<br>
<br>
If you open a file explorer and go to the directory upload/themes/extends_monochrome/views/, you will see that it contains only one file, the file layout_global.twig and that the string “TEST” is there.
Si abre un explorador de archivos y va al directorio upload/themes/extend_monochrome/views/, verá que contiene solo un archivo, el archivo layout_global.twig y que la cadena "PRUEBA" está allí.
[[File:Tree with layout global arrow.png|center|''Now the file is present in your theme'']]
[[File:Tree with layout global arrow.png|center|''¡Ahora el archivo está presente en su tema'']]
<br><br>
<br><br>
Now instead of addind a random text, we will add a picture. If you click on the tip link, it will tell you:
Ahora, en lugar de agregar un texto aleatorio, agregaremos una imagen. Si hace clic en el enlace de la sugerencia, le dirá:
<br>
<br>
To use a picture in a .twig file:
Para usar una imagen en un archivo .twig:
'''{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}'''
'''{{ image('./files/myfile.png', 'texto alternativo del archivo', {"class": "myclass"}) }}'''
<br>
<br>
If you have read the Twig documentation (and you should have done so at this point), you know that '''&#123;&#123; function( ) }}<nowiki />''' will echo the result of a function on screen. Here, the function is image( ).  
Si ha leído la documentación de Twig (y debería haberlo hecho en este punto), sabe que '''&#123;&#123; function( ) }}<nowiki />''' hará eco del resultado de una función en la pantalla. Aquí, la función es image( ).  


<div class="simplebox">[[File:help.png]] If you’re curious to know what it does, you can find it in the code here (version of RC3): [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba958f3eba3eba2e1/application/core/LS_Twig_Extension.php#L219-L237 image() function in RC3]
<div class="simplebox"> [[File:help.png]] Si tiene curiosidad por saber qué hace esta función, puede encontrarla en el código aquí (versión de RC3): [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba958f3eba3eba2e1 /application/core/LS_Twig_Extension.php#L219-L237 función image( ) en RC3]
If you don’t understand the code: don’t worry, you don’t need to know how it works, but why to use it and how to use it.
Si no entiende el código: no se preocupe, no necesita saber cómo funciona, pero si, por qué usarlo y cómo usarlo.
</div>
</div>
<br>
<br>
You should use the function image() for two reasons:
Debe usar la función image( ) por dos razones:
* The function image loops through the theme to find the image. If the theme you’re working on is extended to another theme, and if you copy the file to where you inserted the picture locally, but that picture is not copied in the local theme, it will loop through the theme inheritance tree to find where that picture is.
* La función de imagen recorre el tema para encontrar la imagen. Si el tema en el que está trabajando se extiende a otro tema, y si copia el archivo donde insertó la imagen localmente, pero esa imagen no se copia en el tema local, recorrerá el árbol de herencia del tema para encontrar dónde está esa imagen .
* It will use the asset manager, so it will improve the performance of your theme. See the Yii Asset Manager documentation for more information about it: http://www.yiiframework.com/wiki/148/understanding-assets/
* Utilizará el administrador de activos, por lo que mejorará el rendimiento de su tema. Consulte la documentación de Yii Asset Manager para obtener más información al respecto: http://www.yiiframework.com/wiki/148/understanding-assets/


<div class="simplebox">
<div class="simplebox">
So, to add a picture to your theme:
Entonces, para agregar una imagen a su tema:
* just upload it as usual with the file uploader on the right and then add it to where you want it in any twig file:
* Simplemente cárguela como de costumbre con el cargador de archivos a la derecha y luego agréguela donde lo desee en cualquier archivo de twig:
'''&#123;&#123; image('./files/myfile.png') }}'''
'''&#123;&#123; image('./files/myfile.png') }}'''


* If you want to add an alternate text for your picture (for screen readers and HTML validation), add:
* Si desea agregar un texto alternativo para su imagen (para lectores de pantalla y validación HTML), agregue:
&#123;&#123; image('./files/myfile.png'), ''' ‘my alternative text’ ''' }}
&#123;&#123; image('./files/myfile.png'), ''' ‘mi texto alternativo’ '''}}


* If you want to add a class attribute and add an id to it:
* Si desea agregar un atributo de clase y agregarle una identificación:
&#123;&#123; image('./files/myfile.png'), ‘my alternative text’, ''' &#123;“class”: “a_nice_css_class”, “id”: “any_id”} ''' }}
&#123;&#123; image('./files/myfile.png'), ‘mi texto alternativo’, ''' &#123;“class”: “a_nice_css_class”, “id”: “any_id”} ''' }}
</div>
</div>


====Some things on our TO-DO list====
====Algunas cosas en nuestra lista de tareas pendientes====
* Give users the possibility to upload a custom preview file from the editor itself
* Brinde a los usuarios la posibilidad de cargar un archivo de vista previa personalizado desde el editor en sí.
* Add a button to delete the local file and return to the inherited statement
* Agregue un botón para eliminar el archivo local y volver al declaración heredada.
* Only copy the picture used in the CSS files (by listing them in the manifest as file to copy)
* Sólo copie la imagen utilizada en los archivos CSS (enumerándolos en el manifiesto como archivo para copiar).
* Remind which theme the current one extends (if any)
* Recuerde de qué tema se extiende el actual (si lo hay).


==Template options==
==Opciones de tema==
Another novelty of LS3 is the theme option page. As we’ll see later, theme creators can create their own options and even their own admin option page. Here, we’ll quickly see how the option page of the Core Templates work. To access the theme options at global level: click on “theme options” in the theme list
Otra novedad de LS3 es la página de opciones de tema. Como veremos más adelante, los creadores de temas pueden crear sus propias opciones e incluso su propia página de opciones de administrador. Aquí veremos rápidamente cómo funciona la página de opciones de los Temas principales. Para acceder a las opciones del tema a nivel global: ¡haga clic en “opciones de tema” en la lista de temas
===Advanced options===
===Opciones avanzadas===




{{QS:Theme editor - advanced options}}
{{QS:Theme editor - advanced options}}


===Simple options===
===Opciones simples===


The Simple option page comes from the Template itself. It’s made via a twig file and some javascript inside the theme's /options directory:
La página de opciones simples proviene de la propia plantilla. Se realiza a través de un archivo de twig y algunos javascript dentro del directorio /options del tema:
https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Broken link)
https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Enlace roto)
<div class="simplebox">[[File:help.png]] This page can be completely different from a theme to another, and theme providers are strongly encouraged to create their own look & feel. </div>
<div class="simplebox">[[File:help.png]] Esta página puede ser completamente diferente de un tema a otro, y se recomienda encarecidamente a los proveedores de temas que creen su propia apariencia. </div>


[[File:Options.png|thumb|750px|center]]
[[File:options.png|thumb|750px|center]]
<br><br>
<br><br>
The simple option page simply fills in the advanced form inputs. You can see it by turning on or off a setting in the simple page, and see how the related input in the advanced form is modified accordingly. For example, in Default Template’s simple options,, if you change the Bootswatch theme to “Darkly” and then click on the tab for advanced options (even without saving) you’ll see that the field “Cssframework Css” changed from
La página de opciones simples simplemente completa las entradas de formulario de opciones avanzadas. Puede verlo activando o desactivando una configuración en la página simple, y vea cómo la entrada relacionada en el formulario avanzado se modifica en consecuencia. Por ejemplo, en las opciones simples de la Plantilla predeterminada, si cambia el tema de Bootswatch a "Oscuro" y luego hace clic en la pestaña de opciones avanzadas (incluso sin guardar) verá que el campo "Cssframework Css" cambió de


&#123;"replace": &#91;&#91;"css/bootstrap.css","css/flatly.css"]]}<br>
&#123;"replace": &#91;&#91;"css/bootstrap.css","css/flatly.css"]]}<br>
to<br>
a<br>
&#123;"replace": &#91;&#91;"css/bootstrap.css","css/darkly.css"]]}
&#123;"replace": &#91;&#91;"css/bootstrap.css","css/darkly.css"]]}
<br>
<br><br>
Here are the different simple options for the Core themes:
Aquí están las diferentes opciones simples para los temas principales:
*'''Ajax mode:''' Should the next page be loaded via ajax (faster) or via page reload (better for debugging purpose)
* '''Modo Ajax:''' ¿Debería cargar la página siguiente a través de ajax (más rápido) o mediante recarga de página (mejor para la depuración)
*'''Background image:''' if set to Yes, the image called pattern.png will be loaded (will be replaced by a file selector in Master)
* '''Imagen de fondo:''' si se establece en Sí, se cargará la imagen llamada pattern.png (será reemplazada por un selector de archivos en Master)
*'''Box container:''' if set to No, the questions will not be contained in a box (so you can use large arrays bigger than the screen width)
* '''Contenedor de caja:''' si está configurado en No, las preguntas no se incluirán en un cuadro (por lo que puede usar matrices largas más grandes que el ancho de la pantalla)
*'''Brandlogo:''' if set to no, the name of the survey will be shown in top bar, else, you can select one of the pictures inside the file directory to be used as logo picture.
* '''Brandlogo:''' si se configura en no, el nombre de la encuesta se mostrará en la barra superior, de lo contrario, puede seleccionar una de las imágenes dentro del directorio de archivos para utilizarla como imagen de logotipo.
*'''Animate body:''' if set to yes, you can choose one of the animations to apply when the body of the survey is loaded
* '''Cuerpo animado:''' si se establece en sí, puede elegir una de las animaciones para aplicar cuando se carga el cuerpo de la encuesta.
*'''Animate question:''' same with questions
* '''Pregunta animada:''' lo mismo con las preguntas.
*'''Animate alerts:''' same with alerts
* '''Alertas animadas:''' lo mismo con las alertas.
*'''Bootstrap theme:''' here, you can choose a Bootstrap theme to load. They come from Bootswatch https://bootswatch.com/3/
* '''Tema Bootstrap:''' aquí puede elegir un tema Bootstrap para cargar. Provenientes de Bootswatch https://bootswatch.com/3/
<br>
<br>
The library used for animations is animate.css: https://daneden.github.io/animate.css/
La biblioteca utilizada para animaciones es animate.css: https://daneden.github.io/animate.css/
Of course, a theme provider could add his own animation library or no animation library at all.
Por supuesto, un proveedor de temas podría agregar su propia biblioteca de animación o ninguna biblioteca de animación.


<div class="simplebox">[[File:help.png]] The monochrome themes use the same bootstrap color theme as the admin user interface. They’re not using the css framework replacement system, but simply add a CSS file. So, it illustrates another way to deal with custom themes for theme providers.</div>
<div class="simplebox">[[File:help.png]] Los temas monocromáticos usan el mismo tema de color de arranque que la interfaz de usuario de administrador. No están utilizando el sistema de reemplazo de framework css, sino que simplemente agregan un archivo CSS. Por lo tanto, ilustran otra forma de tratar temas personalizados para proveedores de temas. </div>


===Inheritance system===
===Sistema de herencia===


In the previous part, we’ve seen that a theme can extend another theme. A theme configuration can also inherit from another theme configuration. It means that for a given theme, you can have a configuration at
En la parte anterior, hemos visto que un tema puede extender otro tema. Una configuración de tema también puede heredar de otra configuración de tema. Significa que para un tema determinado, puede tener una configuración en


* global level (the one we’ve just seen accessible from the theme list)
* nivel global (el que acabamos de ver accesible desde la lista de temas).
* at survey group level
* a nivel de grupo de encuesta.
* a last one at survey level.  
* un último a nivel de encuesta.  


Each parameter at a certain level can inherit from the upper level: survey group inheritance. First, let’s see the survey group level.
Cada parámetro en un cierto nivel puede heredar del nivel superior: herencia del grupo de encuesta. Primero, veamos el nivel del grupo de encuesta.


====At survey group level====
====A nivel de grupo de encuesta====


Indeed, one of the other great novelties of LS3 is the survey group system. You can now create different groups to organize your surveys. To access it, go to the survey list and then click on the survey group tab:
De hecho, una de las otras grandes novedades de LS3 es el sistema de grupos de encuestas. Ahora puede crear diferentes grupos para organizar sus encuestas. Para acceder, vaya a la lista de encuestas y luego haga clic en la pestaña del grupo de encuestas:
[[File:Surveygroup.png|thumb|800px|center|''The survey groups tab'']]
[[File:Surveygroup.png|thumb|800px|center|''Pestaña de grupos de encuestas'']]
<br>
<br>
In this list, you have two action buttons. If the group is empty, you can delete it. Else, you can always edit it. By clicking on the edit button, you reach the Survey Group configuration page:
En esta lista, tiene dos botones de acción. Si el grupo está vacío, puede eliminarlo. De lo contrario, siempre puedes editarlo. Al hacer clic en el botón editar, llega a la página de configuración del Grupo de encuesta:
[[File:Surveygroupedit.png|thumb|800px|center|''Editing Default Survey Group'']]
[[File:Surveygroupedit.png|thumb|800px|center|''Edición del grupo de encuesta predeterminado'']]
<br>
<br>
The third tab of this page is called “Template options for this survey group”. If you click on it, you’ll see the same list of themes than in the theme list, except that here only the option button is visible (theme editor can be reached only from the main list).
La tercera pestaña de esta página se llama "Opciones de plantilla para este grupo de encuesta". Si hace clic en él, verá la misma lista de temas que en la lista de temas, excepto que aquí solo está visible el botón de opción (solo se puede acceder al editor de temas desde la lista principal).
<br>
<br>
Now, if you click on the option for Default Template, you’ll see this:
Ahora, si hace clic en la opción de Plantilla predeterminada, verá esto:
[[File:Option group inherit.png|thumb|800px|center|''At Survey Group, Template Options are inherited by default'']]
[[File:Option group inherit.png|thumb|800px|center|''En el Grupo de encuesta, las Opciones de plantilla se heredan por defecto'']]
<br>
<br>  
* '''Inherit everything''' means that all the configuration will be inherited from the Global configuration level.  
* '''Heredar todo''' significa que toda la configuración se heredará del nivel de configuración Global.
* If you go to the '''advanced options page''', you’ll see that all the fields are set to inherit.
* Si va a la '''página de opciones avanzadas''', verá que todos los campos están configurados para heredar.
* If you click on "no" for "Inherit everything" in the simple options, you’ll again see a very similar page to the global option page. The only difference is that for each field, you can set it to yes, no, or inherit; and each dropdown selector has an ''inherit''' value.
* Si hace clic en "no" para "Heredar todo" en el opciones simples, nuevamente verá una página muy similar a la página de opciones global. La única diferencia es que para cada campo, puede establecerlo en sí, no o heredar; y cada selector desplegable tiene un valor '''heredar'''.
[[File:Inherit group.png|thumb|800px|center|''Each setting can have a inherited value'']]
[[File:inherit group.png|thumb|800px|center|''Cada configuración puede tener un valor heredado'']]


<div class="simplebox">[[File:help.png]] A survey group can be a child of another group. In this case, it will inherit from its parent.</div>
<div class="simplebox">[[File:help.png]] Un grupo de encuesta puede ser hijo de otro grupo. En este caso, heredará de su padre. </div>


====At survey level====
====A nivel de encuesta====
When editing a survey, in the left bar menu, you’ll see a new entry “Template Options”. It will lead you to the option page of the Template selected for the current survey. You’ll find the same inheritance system as in the survey group, but this time, inherit means that the setting will be inherited from the Survey Group of the survey.
Al editar una encuesta, en el menú de la barra izquierda, verá una nueva entrada "Opciones de tema". Lo llevará a la página de opciones del Tema seleccionado para la encuesta actual. Encontrarás el mismo sistema de herencia que en el grupo de encuesta, pero esta vez heredar significa que la configuración se heredará del grupo de encuesta de la encuesta.  
[[File:Options survey.png|thumb|800px|center|''Template Options at Survey Level'']]
[[Archivo:Opciones encuesta.png|thumb|800px|center|''Opciones de tema a nivel de encuesta'']]


==Use case example==
==Ejemplo práctico==
Let’s say you’re using a single theme for different companies (A and B). You set your favorites options at global level (e.g.: ajax on, animate body with a slide in, alerts with a pulse). Then you create a survey group for each company: a survey group for company A that will host all the surveys for this company, and a survey for company B that will host all the surveys for company B. At this level, you’ll set the logo and the background only, and you will let the other options to inherit. So, all the surveys in group A will use the logo from the company A, and all the survey from group B the logo from company B. For one of the surveys of company A, you could use a different background in relation with the topic of the survey: you just change the background in options at survey level. If someone in company B tells you that the pulsing alert is too aggressive and he would prefer something smoother like a fade in, you just change the alert animation at the Survey Group B level and all the surveys of this group will now use this animation. If the company A changes its logo, you can change it at the level of Survey Group A, and all the surveys of this group will use the new logo.
Digamos que está utilizando un solo tema para diferentes empresas (A y B). Configura sus opciones favoritas a nivel global (por ejemplo: ajax activado, animar el cuerpo con una diapositiva, alertas con un pulso). Luego, crea un grupo de encuestas para cada compañía: un grupo de encuestas para la compañía A que alojará todas las encuestas para esta compañía, y un grupo de encuestas para la compañía B que alojará todas las encuestas para la compañía B. En este nivel, establecerá solo el logotipo y el fondo, y dejará que las otras opciones hereden. Por lo tanto, todas las encuestas del grupo A utilizarán el logotipo de la empresa A, y todas las encuestas del grupo B, el logotipo de la empresa B. Para una de las encuestas de la empresa A, puede utilizar un fondo diferente en relación con el tema de la encuesta: simplemente cambia el fondo en las opciones a nivel de encuesta. Si alguien en la compañía B le dice que la alerta de pulso es demasiado agresiva y que preferiría algo más suave como un desvanecimiento, simplemente cambie la animación de alerta en el nivel del Grupo de encuesta B y todas las encuestas de este grupo ahora usarán esta animación. Si la empresa A cambia su logotipo, puede cambiarlo al nivel del Grupo de encuesta A, y todas las encuestas de este grupo utilizarán el nuevo logotipo.
<br>
<br>
<div class="simplebox">Those examples are based on the current options of the core theme. But of course, if you are a theme provider, or if you’re able to script a bit with twig, you can add your own options. For example, you could add an option “info footer” where you could add data like the company website or a phone number for help. Then, if company A has different departments, with different phone numbers, you can just create one sub-group for each department in Survey Group A. Each subgroup will have its own phone number in these options.</div>
<div class="simplebox"> Esos ejemplos se basan en las opciones actuales del tema central. Pero, por supuesto, si eres un proveedor de temas, o si eres capaz de escribir un poco con Twig, puedes agregar tus propias opciones. Por ejemplo, podría agregar una opción "pie de página de información" donde podría agregar datos como el sitio web de la empresa o un número de teléfono para obtener ayuda. Luego, si la empresa A tiene diferentes departamentos, con diferentes números de teléfono, puede crear un subgrupo para cada departamento en el Grupo de encuesta A. Cada subgrupo tendrá su propio número de teléfono en estas opciones. </div>


= FAQ about theme customization =
= Preguntas frecuentes sobre la personalización del tema =


You'll find here some answers to questions that have been asked in the forum and that could help you to customize your theme.
Encontrarás aquí algunas respuestas a las preguntas que se hicieron en el foro y que podrían ayudarte a personalizar tu tema.


==Customizing CSS/JS: deal with the asset manager ("why are my changes not applied?") ==
== Personalizar CSS / JS: tratar con el administrador de activos ("¿por qué no se aplican mis cambios?") ==
<br />
<br />


If you're trying to update the CSS/JS of a theme by directly editing the code with your favorite editor, you could be surprised that your changes are not applied.
Si está intentando actualizar el CSS/JS de un tema editando directamente el código con su editor favorito, podría sorprenderse de que sus cambios no se apliquen.


<br />
<br />


Since 2.50, LS use the Yii asset manager:
Desde 2.50, LS utiliza el administrador de activos de Yii:[http://www.yiiframework.com/wiki/148/understanding-assets/ Documentación sobre los Assets de Yii]
[http://www.yiiframework.com/wiki/148/understanding-assets/ Yii Documentation about Assets]
<br />
<br />


It moves the CSS/JS files of a theme to a tmp/ sub-directory with a random string (eg: "tmp/1ef64ml/"). So if you make any change to a css/js file, and tell it to the asset manager, the files are copied to a new sub-directory with a new name so the user browser's cache is updated and they see the new css/js. Else, they would have to clean their browser cache.  
Mueve los archivos CSS/JS de un tema a un subdirectorio tmp/ con una cadena aleatoria (por ejemplo: "tmp/1ef64ml/"). Entonces, si realiza algún cambio en un archivo css/js y se lo indica al administrador de activos, los archivos se copian en un nuevo subdirectorio con un nuevo nombre para que la memoria caché del navegador del usuario se actualice y vean el nuevo css/js . De lo contrario, los usuarios tendrían que limpiar el caché de su navegador.  


<br />
<br />


Here the CSS links in header when asset manager is on:
Aquí los enlaces CSS en el encabezado cuando el administrador de activos está activado:
<br />
<br />
[[File:Assets on vanilla.jpg]]
[[File:Assets on vanilla.jpg]]
<br />As you can see they all refer to the tmp/ subfolders.
<br />
Como puede ver, todos se refieren a subdirectorios en tmp/  


<br />
<br />


Here the CSS links in header when asset manager is off:
Aquí los enlaces CSS en el encabezado cuando el administrador de activos está desactivado:
<br />
<br />
[[File:Asset off.png]]
[[File:Asset off.png]]
<br />As you can see they point to the real files of the theme.  
<br />
Como puede ver, apuntan a los archivos reales del tema.  


<br />
<br />


<div class="simplebox">[[File:help.png]] Of course, if the Asset Manager doesn't know you changed the file, the old file from the old tmp/directory remain unchanged, and your changes will never be applied..</div>
<div class="simplebox"> [[File:help.png]] Por supuesto, si el Administrador de activos no sabe que usted ha cambiado el archivo, el archivo antiguo del directorio tmp/ antiguo permanecerá sin cambios y sus cambios nunca se aplicarán. </div>


So, when you're editing CSS/JS of a theme you have various possibilities:
Por lo tanto, cuando edita CSS/JS de un tema, tiene varias posibilidades:
*'''You can use the the LS Theme Editor:''' it deals with the asset manager and you don't have to worry about anything
* '''Puede usar el Editor de temas LS:''' éste trata con el administrador de activos y usted no tiene que preocúpese por nada.
*'''You can turn debug mode on:''' it will turn asset manager off, so the real css/js files of your themes are called (but then, you have to refresh your browser cache at each load)
* '''Puede activar el modo de depuración:''' se desactivará el administrador de activos, por lo que se invocan los archivos css/js reales de sus temas (pero luego, debe actualizar la memoria caché del navegador en cada carga)
* '''You can refresh the  assets cache''': from Global Settings -> General -> Clear asset cache
* '''Puede actualizar el caché de activos''': desde Configuración global -> General -> Borrar caché de activos.


[[File:Clearassets-ls3 3.png]]
[[File:Clearassets-ls3 3.png]]


<div class="simplebox">[[File:help.png]] '''Using the theme editor to edit the custom CSS is by far the best solution.''' </div>
<div class="simplebox">[[File:help.png]] '''La mejor solución es usar el editor de temas para editar el CSS personalizado'''. </div>




Using the theme editor will help you to understand the architecture of the new theme engine.
El uso del editor de temas lo ayudará a comprender la arquitectura del nuevo motor de temas.
Also, if your customizing fruity, be careful with CSS specifity: most of the definitions use the selector ".fruity" (one of the class of the body element)
Además, si está personalizando fruity, tenga cuidado con la especificidad de CSS: la mayoría de las definiciones usan el selector ".fruity" (una de la clases del elemento del cuerpo)


== Adding custom fonts to my theme ==
== Agregar fuentes personalizadas a mi tema ==
=== The easy way: using Google Font CDN ===
=== La manera fácil: usando Google Font CDN ===
Bootswatch Survey Theme uses Google Font CDN. Let's have a look to how it works:
Bootswatch Survey Theme usa Google Font CDN. Echemos un vistazo a cómo funciona:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css


<syntaxhighlight lang="css" enclose="div">
<syntaxhighlight lang="css">
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
</syntaxhighlight>
</syntaxhighlight>


Then the Lato font is used via CSS rules:
Luego, la fuente Lato se usa mediante reglas CSS:
https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
<syntaxhighlight lang="css" enclose="div">
<syntaxhighlight lang="css">  
body {
cuerpo {
  ...
... familia de fuentes: "Lato";
font-family: "Lato";
  ...
  ...
}
}
</syntaxhighlight>
</syntaxhighlight>


You can use any google font that way in your custom theme. Of course, you should remove the font selector from the options of your theme. Delete those lines in options.twig:
De esa manera usted puede usar cualquier fuente de Google en su tema personalizado. Por supuesto, debe eliminar el selector de fuente de las opciones de su tema. Elimine esas líneas en options.twig:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230


=== Using local font  ===
=== Usando fuente local ===
Of course, you can also download the font files and use them from local server rather than from Google CDN (better for privacy). To have an example of how to it, here our local version of noto font:
Por supuesto, también puede descargar los archivos de fuentes y usarlos desde el servidor local en lugar de desde Google CDN (mejor para la privacidad). Para tener un ejemplo de cómo hacerlo, aquí nuestra versión local de la fuente noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
<syntaxhighlight lang="css" enclose="div">
<syntaxhighlight lang="css">  
@font-face {
@font-face {
  font-family: 'Noto Sans';
familia de fuentes: 'Noto Sans';
  font-weight: 300;
peso de fuente: 300;
  font-style: normal;
estilo de fuente: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
}
...
...
</syntaxhighlight>
</syntaxhighlight>


You can use a very similar definition in your theme css file, and then by copying the file NotoSans-Regular.ttf in your theme css/font-src/ folder.  
Puede usar una definición muy similar en su archivo css de tema y luego copiando el archivo NotoSans-Regular.ttf en la carpeta css/font-src/ del tema.  


Then, apply that font to your body (or any other element) like above, and remove the default option font selector.
Luego, aplique esa fuente a su cuerpo (o cualquier otro elemento) como arriba, y elimine la opción predeterminada de selector de fuente.


=== Creating your own font selector in options  ===
=== Creando tu propio selector de fuentes en opciones ===
For now, you can't easily use the core font selector to add your own font in options. We need first to give the possibility to end user to upload custom packages (see next paragraph: A look into the Fruity Font Selector )  
Por ahora, no puedes usar fácilmente el selector de fuentes principal para agregar tu propia fuente en opciones. Primero debemos brindarle al usuario final la posibilidad de cargar paquetes personalizados (consulte el siguiente párrafo: Una mirada al Selector de fuentes Fruity)  
<br>
<br>  
Here how to proceed:
Aquí cómo proceder:
<br>
<br>  
*Add two fonts (my_custom_font and my_custom_other_font) into your theme, using CDN or local server
*Agregue dos fuentes (my_custom_font y my_custom_other_font) a su tema, usando CDN o servidor local  
*Then, in your css file, add two new classes:
*Luego, en su archivo css, agregue dos nuevas clases:
<br>
<br> !¡NORTE!<syntaxhighlight lang="css">  
<syntaxhighlight lang="css" enclose="div">
.font-my_custom_font {
.font-my_custom_font {
  font-family: 'my_custom_font ';
  font-family: 'my_custom_font ';
}
}
.font-my_custom_other_font {
.font-my_custom_other_font {
  font-family: 'my_custom_other_font';
  familia de fuentes: 'my_custom_other_font';
}
}
</syntaxhighlight>
</syntaxhighlight>  
*In the XML file of your theme, add a font option (default one will be my_custom_font) :
*En el archivo XML de su tema, agregue una opción de fuente (la predeterminada será my_custom_font):
<syntaxhighlight lang="xml" enclose="div">
<syntaxhighlight lang="xml"><options> .... <font>my_custom_font</font>  
    <options>
</options></syntaxhighlight>
        ....
        <font>my_custom_font</font>
    </options>
</syntaxhighlight>


* in option.twig, add you font picker adding those lines (untested for now, so come complain to the forum if it doesn't work):
* en option.twig, agrega tu selector de fuentes agregando esas líneas (no probado por ahora, así que ven a quejarte al foro si no funciona):
<syntaxhighlight lang="html" enclose="div">
<syntaxhighlight lang="html"> !¡NORTE! !¡NORTE!<div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'> <hr/> </div> <div class='row action_hide_on_inherit'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-heading'> {{ "Mis fuentes personalizadas" | t }}</div><div class='panel-body'><div class='form-group row'><label for='simple_edit_font' class='control-label'>{{ "Seleccionar fuente:" | t }}</label>  
           
<div class='col-sm-12'><select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> {% si templateConfiguration.sid no está vacío o templateConfiguration.gsid no está vacío %} //¡¿No debería ser "tema" en lugar de "plantilla"?
            <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
{% set fontOptions = fontOptions ~ '<option value = "inherit" > Heredar</option> ' %}
                <hr/>
{% endif %}
            </div>
<optgroup  label="{{ "My Custom fonts" | t }}"><option class="font-my_custom_font"    value="custom_font"  data-font-package=""  > Costumbre</option><option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  > Otro</option></optgroup></select></div></div></div></div></div> </div></syntaxhighlight>
            <div class='row action_hide_on_inherit'>
                <div class='col-sm-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                  <optgroup  label="{{ "My Custom fonts" | t }}">
                                  <option class="font-my_custom_font"    value="custom_font"  data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                 
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</syntaxhighlight>


<br>
<br>  
Now your users should be able to choose between those two fonts.
Ahora sus usuarios deberían poder elegir entre esas dos fuentes.


=== A look into the Fruity Font Selector ===
=== Una mirada al selector de fuentes Fruity ===
In the future, we'll give the possibility to final user to upload their own asset packages, including font packages. It will make very easy any customization of fonts.  
En el futuro, le daremos al usuario final la posibilidad de cargar sus propios paquetes de recursos, incluidos paquetes de fuentes. Hará muy fácil cualquier personalización de fuentes.<br>  
<br>
Para entender los Paquetes Yii:
To understand Yii Packages:
<br>  
<br>
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
<br>
<br><br> Los paquetes
<br>
LimeSurvey se definen en archivos diferentes. Los paquetes de fuentes se definen aquí:
LimeSurvey packages are defined in different files. Fonts packages are defined here:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
<br>
<br>  
For example, the Noto font package is defined here:
Por ejemplo, el paquete de fuentes Noto se define aquí:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53
<br>
<br><syntaxhighlight lang="php">
<syntaxhighlight lang="php" enclose="div">


     'font-noto' => array(
     'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
'basePath' => 'fuentes',
        'css' => array(
'css' => array(
            'noto.css',
' noto.css',
        ),
),
    ),
),
</syntaxhighlight>
</syntaxhighlight><br>  
<br>
El archivo noto.css que contiene está aquí:
The noto.css file it contains is here:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
<br>
<br>  
Notice the definition of the css class ".font-noto" at the end of it:
Observe la definición de la clase CSS ".font-noto" al final:
<syntaxhighlight lang="css" enclose="div">
<syntaxhighlight lang="css">  
@font-face {
@font-face {
  font-family: 'Noto Sans';
familia de fuentes: 'Noto Sans';
  ...
...
}
}
...
...
.font-noto{
.font-noto{
    font-family: 'Noto Sans';
familia de fuentes: 'Noto Sans';
}
}


</syntaxhighlight>
</syntaxhighlight>
<br>
<br>
Then, in Vanilla Theme, noto font is used by adding the noto package and defining the font option to noto:
Luego, en el Tema Vanilla, la fuente noto se usa agregando el paquete noto y definiendo la opción de fuente noto:
<br>
<br>
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79


<syntaxhighlight lang="xml" enclose="div">
<syntaxhighlight lang="xml"><packages>....<add> fuente-noto</add></packages></syntaxhighlight >  
        <packages>
            ....
            <add>font-noto</add>
        </packages>
</syntaxhighlight >
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58
<br>
<br><syntaxhighlight lang="xml"><options> ....<font>nota</font>  
<syntaxhighlight lang="xml" enclose="div">
</options></syntaxhighlight><br>  
    <options>
Luego, la fuente de la clase del cuerpo se define usando este valor:
        ....
        <font>noto</font>
    </options>
</syntaxhighlight>
<br>
Then, the body class font is defined using this value:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<syntaxhighlight lang="html" enclose="div">
<syntaxhighlight lang="html"><body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... ></syntaxhighlight>
<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >
</syntaxhighlight>


Of course, the XML file only contains the default values for your theme configuration. But indeed, those values are defined and read inside the database (table "template_configuration" (Question: "template_" of "theme_"?) as json strings. The option.js file just use the value of the font selector of the simple option to change the value inside the advanced tab form:
Por supuesto, el archivo XML solo contiene los valores predeterminados para la configuración de su tema. Pero, de hecho, esos valores se definen y leen dentro de la base de datos (tabla "template_configuration" (Pregunta: "template_" de "theme_"?) Como cadenas json. El archivo option.js solo usa el valor del selector de fuente de la opción simple para cambiar el valor dentro de la pestaña avanzada:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174


So when the "upload asset package" functionality will be available, it will be easy to add a script that scan all the existing font packages to add them in the selector.
Entonces, cuando esté disponible la funcionalidad "cargar paquete de activos", será fácil agregar un script que escanee todos los paquetes de fuentes existentes para agregarlos en el selector.


== Adding theme options to control positioning and display of survey elements  ==
== Agregar opciones de tema para controlar el posicionamiento y la visualización de los elementos de la encuesta ==
This tutorial will show how to add options to an extended theme to display survey elements in various locations. In this case, we will create theme options to show the survey title in two different locations.
Este tutorial mostrará cómo agregar opciones a un tema extendido para mostrar elementos de la encuesta en varias ubicaciones. En este caso, crearemos opciones de tema para mostrar el título de la encuesta en dos ubicaciones diferentes.
<div class="simplebox">[[File:help.png]] For the sake of simplicity, we will base the tutorial on an extension of the "bootswatch" theme in LimeSurvey version 3.4.3.</div>
<div class="simplebox"> [[Archivo:help.png]] Para simplificar, basaremos el tutorial en una extensión del tema "bootswatch" en LimeSurvey versión 3.4.3.</div>  
=== Create a custom theme  ===
=== Crear un tema personalizado ===
#Extend the "bootswatch" theme as described above.
#Extiende el tema "bootswatch" como se describe arriba.
#Copy <span style="color: #BA2121;">custom.css</span> to the local theme as described above.
#Copia <span style="color: #BA2121;">custom.css</span> al tema local como se describe arriba.
===Create new theme options===
===Crear nuevas opciones de tema===
#Copy the contents of <span style="color: #BA2121;">/themes/survey/bootswatch/options/</span> to <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span>.
#Copie el contenido de <span style="color: #BA2121;">/themes/survey/bootswatch/options/</span> a <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span> .
#Open <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/options.twig</span> in an editor and find "{# Bootstrap Bootswatch theme #}". Directly before its parent  <nowiki><div class='row'></nowiki> element, add this:<syntaxhighlight lang="html" enclose="div">
#Open <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/ options/options.twig</span> en un editor y busque "{# Bootstrap Bootswatch theme #}". Directamente antes de su padre<nowiki><div class='row'></nowiki> elemento, agregue esto:<syntaxhighlight lang="html"> {# Nombre de la encuesta personalizada en la barra de navegación #}
{# Custom survey name in navbar #}
<div class='row'><div class='col-sm-12 col-md-6'>
<div class='row'>
<div class='col-sm-12 col-md-6'>


<div class='form-group row'>
<div class='form-group row'> <label for='simple_edit_options_surveyname1' class='control-label'>Nombre de la encuesta en la barra de navegación</label>  
<label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label>
<div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> ¡Si n!</label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> ¡No!</label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div>
<div class='col-sm-12'>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
Yes
</label>
<label class="btn btn-default">
<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
No
</label>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<hr/>
</div>


{# Custom survey name below progress bar #}
{# Nombre de la encuesta personalizada debajo de la barra de progreso #}
<div class='row'>
<div class='row'> <div class='col-sm-12 col-md-6'>
<div class='col-sm-12 col-md-6'>


<div class='form-group row'>
<div class='form-group row'>
<label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label>
<label for='simple_edit_options_surveyname2' class='control-label'>Nombre de la encuesta debajo de la barra de progreso</label>  
<div class='col-sm-12'>
<div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> ¡Si n!</label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> ¡No!</label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div></syntaxhighlight>  
<div class="btn-group" data-toggle="buttons">
#Abra <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/config.xml</span> y agregue dos elementos al bloque "opciones" para que se vea así:<syntaxhighlight lang="xml"><options> <ajaxmode> en</ajaxmode> ... <surveyname1> en</surveyname1> <surveyname2> en</surveyname2> </options></syntaxhighlight>  
<label class="btn btn-default">
#Esto debería brindarle dos nuevas opciones en la pantalla Opciones de tema como esta:<br /> [[File:Tutorial_tp_1_1.png]]
<input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
Yes
</label>
<label class="btn btn-default">
<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
No
</label>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<hr/>
</div></syntaxhighlight>
#Open <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/config.xml</span> and add two items to the "options" block so it looks like this:<syntaxhighlight lang="xml" enclose="div">   <options>
        <ajaxmode>on</ajaxmode>
        ...
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options></syntaxhighlight>
#This should give you two new options in the Theme Options screen like this:<br />[[File:Tutorial_tp_1_1.png]]


===Modifed view for Survey Title in the navbar===
===Vista modificada para el título de la encuesta en la barra de navegación===
#Create a new directory <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/header/</span>.
#Crear un nuevo directorio <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/header/ .</span>  
#Copy <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> to that new directory.
#Copy <span style="color: #BA2121;">/themes/survey/vanilla/ views/subviews/header/nav_bar.twig</span> a ese nuevo directorio.
#Open <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> and find "{# Logo option #}". Under that, modify the IF statement for the logo/survey-name, so it looks like this:<syntaxhighlight lang="html" enclose="div">
#Abra <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> y busque "{# Opción de logotipo #}". Debajo de eso, modifique la declaración IF para el logotipo/nombre de la encuesta, para que se vea así:<syntaxhighlight lang="html">  
{# Logo option #}
{# Opción de logotipo #}
        {% if( aSurveyInfo.options.brandlogo == "on") %}
{% if( aSurveyInfo.options.brandlogo == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
<div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >  
                {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
{{ imagen(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
            </div>
</div>  
        {% endif %}
{% endif %}
        {% if( aSurveyInfo.options.surveyname1 == "on") %}
{% if( aSurveyInfo.options.surveyname1 == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
<div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >  
                {{ aSurveyInfo.name }}
{{ aSurveyInfo.name }}
            </div>
</div>  
        {% endif %}</syntaxhighlight>
{% terminara si %}</syntaxhighlight>  
#Add something like this to <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span>:<syntaxhighlight lang="css" enclose="div">.navbar-brand {
#Agregue algo como esto a <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-marca {
    line-height: 60px;
altura de línea: 60px;
    font-size: 32px;
tamaño de fuente: 32px;
}</syntaxhighlight>
}</syntaxhighlight>  
#Toggle the "Survey name in navbar" theme option to "Yes"
#Cambie la opción de tema "Nombre de la encuesta en la barra de navegación" a "Sí"
#You should see this:<br />[[File:Tutorial_tp_1_2.png]]
#Deberías ver esto:<br /> [[Archivo:Tutorial_tp_1_2.png]]
===Modifed view for Survey Title under progress bar===
===Vista modificada para el título de la encuesta debajo de la barra de progreso===
#Create a new directory <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews</span>.
#Crea un nuevo directorio <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews</span> .
#Copy <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> to that new directory.
#Copia <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> a ese nuevo directorio.
#Open <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> and add an <nowiki><h1></nowiki> element for the survey name. So it looks like this:<syntaxhighlight lang="html" enclose="div"><div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
#Open <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig</span> y agrega un<nowiki><h1></nowiki> elemento para el nombre de la encuesta. Entonces se ve así: <syntaxhighlight lang="html"><div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
   
  {# Nombre de la encuesta personalizada #}
    {# Custom survey name #}
{% if( aSurveyInfo.options.surveyname2 == "on") %}
    {% if( aSurveyInfo.options.surveyname2 == "on") %}
<h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1>  
    <h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
{% endif %}
    {% endif %}
  {# Nombre del grupo #}
   
{{ include('./subviews/survey/group_subviews/group_name.twig') }}
    {# Group Name #}
  {# Descripción del grupo #}
    {{ include('./subviews/survey/group_subviews/group_name.twig') }}
{{ include('./subviews/survey/group_subviews/group_desc.twig') }}
   
  {# ¡PRESENTA LAS PREGUNTAS
    {# Group Description #}
  Esta es la parte principal. ¡Representará cada pregunta para este grupo
    {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
#} <!-- PRESENT THE QUESTIONS --> {% para unaPregunta en unGrupo.aPreguntas %}
   
{{ include('./subviews/survey/question_container.twig') }}
    {#
{% endfor %}
        PRESENT THE QUESTIONS
  <!-- Hidden inputs --> {% if aGroup.show_last_group == true %}
   
<input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> {% endif %}
        This is the main part. It will render each question for this group
  {% if aGroup.show_last_answer == true %}
    #}
<input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> {% endif %}
</div></syntaxhighlight>  
    <!-- PRESENT THE QUESTIONS -->
# Agregue algo como esto a <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-marca {
    {% for  aQuestion in aGroup.aQuestions %}
altura de línea: 60ph1.nombre-encuesta-personalizado {
        {{ include('./subviews/survey/question_container.twig') }}
margen: 0;
    {% endfor %}
alineación de texto: centro;
   
}</syntaxhighlight>  
    <!-- Hidden inputs -->
#Cambie la opción de tema "Nombre de la encuesta debajo de la barra de progreso" a "Sí"
    {% if aGroup.show_last_group == true %}
#Deberías ver esto:<br /> [[File:Tutorial_tp_1_3.png]]
        <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' />
    {% endif %}
   
    {% if aGroup.show_last_answer == true %}
        <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' />
    {% endif %}
</div></syntaxhighlight>
# Add something like this to <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span>:<syntaxhighlight lang="css" enclose="div">.navbar-brand {
    line-height: 60ph1.custom-survey-name {
margin: 0;
text-align: center;
}</syntaxhighlight>
#Toggle the "Survey name below progress bar" theme option to "Yes"
#You should see this:<br />[[File:Tutorial_tp_1_3.png]]


===Downloads===
===Descargas===
* Sample extended theme: [[Media:Test_survey_names.zip]]
* Ejemplo de tema extendido: [[Media:Test_survey_names.zip]]


=Creating a theme from scratch=
=Creando un tema desde cero=
Documentation coming soon.
La documentación estará disponible próximamente.


For now, just giving few tips.
Por ahora, solo daré algunos consejos.


==theme structure==
==Estructura del tema==


=== Files and directories ===
=== Archivos y directorios ===
When you create a Theme from scratch, you don't need to respect the file/directory structure/css/js from Vanilla.  
Cuando creas un tema desde cero, no necesitas respetar la estructura de archivos/directorios/css/js de Vanilla.  
The mandatory css/js is added by core (you can still remove it if needed)
El css/js obligatorio lo agrega el núcleo (aún puedes eliminarlo si es necesario)


The only files your theme must have are the layout files:
Los únicos archivos que debe tener tu tema son los archivos de diseño:


* '''layout_global.twig''' : render the pages for survey taking
* '''layout_global.twig''' : renderiza las páginas para realizar encuestas
* '''layout_survey_list.twig''' : render the survey list (if this theme is set as default)
* '''layout_survey_list.twig''' : renderiza la lista de encuestas (si este tema está configurado como predeterminado)
* '''layout_errors.twig''' : used to render errors that block survey rendering. ( wrong survey id, empty group in preview group, etc.)
* '' 'layout_errors.twig''': se utiliza para representar errores que bloquean la representación de la encuesta. (ID de encuesta incorrecto, grupo vacío en el grupo de vista previa, etc.)
* '''layout_user_forms.twig''': renders the user forms such as: token (survey participant), and register.
* '''layout_user_forms.twig''': representa los formularios del usuario como: token (participante de la encuesta) y registro.
* '''layout_print.twig''' : used to print the survey to pdf
* '' 'layout_print.twig''': se utiliza para imprimir la encuesta en pdf
* '''layout_printanswers.twig''': print the answers
* '''layout_printanswers.twig''': imprime las respuestas


The content of those files, the files they include or not, is entirely up to you.  
El contenido de esos archivos, los archivos que incluyen o no, depende totalmente de usted.  
All the other files and directories that you find on Vanilla are purely optional, feel free to organize your code the way you want.
Todos los demás archivos y directorios que encuentre en Vanilla son puramente opcionales, siéntase libre de organizar su código de la forma que desee.


<div class="simplebox">[[File:help.png]] If you read the frontend rendering code, you'll see that those files names appear directly in it. That's why they are mandatory.  
<div class="simplebox">[[Archivo:help.png]] Si lees el código de renderizado del frontend, verás que los nombres de esos archivos aparecen directamente en él. Por eso son obligatorios.  
Eg: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462
Por ejemplo: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462
</div>
</div>


=== Content ===
=== Contenido ===


In Vanilla's layout_global.twig, you'll see we use a variable called "include_content" to decide what to show
En layout_global.twig de Vanilla, verá que usamos una variable llamada "include_content" para decidir qué mostrar. https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/ diseño_global.twig#L114-L115
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115


<syntaxhighlight lang="php" enclose="div">
<syntaxhighlight lang="php">
                    {% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
{% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}
{% incluye './subviews/content/outerframe.twig' con {'include_content': sViewContent } %}
</syntaxhighlight>
</syntaxhighlight>


aSurveyInfo.include_content tell you what action is currently going on: showing questions? showing submit result? showing clear all? etc
aSurveyInfo.include_content le indica qué acción se está llevando a cabo actualmente: ¿mostrando preguntas? ¿Mostrando el resultado de envío? mostrando claro todo? ¡etc
As you can see, in vanilla, we create one file to include by action. So if you want to know the list of actions, just check the vanilla's directory '''views/subviews/content''', and remove the "twig" extension :
Como puede ver, en Vanilla, creamos un archivo para incluir por acción. Entonces, si desea conocer la lista de acciones, simplemente consulte el directorio básico '''views/subviews/content''' y elimine la extensión "twig":
https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content
https://github.com/LimeSurvey/LimeSurvey /tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content


* '''clearall.twig'''  
* '''clearall.twig'''  
* '''firstpage.twig'''  
* '''firstpage.twig'''  
* '''load.twig'''  
* '''load.twig'''  
* '''mainrow.twig'''  
* '''mainrow.twig'''
* '''main.twig'''  
* '''main.twig'''  
* '''optin.twig'''  
* '''optin.twig'''  
* '''optout.twig'''  
* '''optout.twig'''  
* '''outerframe.twig'''  
* '''outerframe.twig'' '  
* '''printanswers.twig'''  
* '''printanswers.twig'''  
* '''quotas.twig'''  
* '''quotas.twig'''  
* '''register.twig'''  
* '''register.twig'''  
* '''save.twig'''  
* '''save.twig '''  
* '''submit_preview.twig'''  
* '''submit_preview.twig'''  
* '''submit.twig'''  
* '''submit.twig'''  
* '''userforms.twig'''  
* '''userforms.twig'''  


If you already created a them for 2.x versions of LimeSurvey, you'll notice that most of them corresponds to the old pstpl files for limesurvey 2.x.  
Si ya los creó para las versiones 2.x de LimeSurvey, notará que la mayoría de ellos corresponden a los archivos pstpl antiguos para limesurvey 2.x.  
Again, there is no obligation for you in your theme to create those files, with those names, in this directory. You could for example just add a giant switch in layout_global.twig with the wanted HTML for each action.
Nuevamente, usted no tiene la obligación en su tema de crear esos archivos, con esos nombres, en este directorio. Por ejemplo, podría simplemente agregar un interruptor gigante en layout_global.twig con el HTML deseado para cada acción.


=== The manifest config.xml ===
=== El manifiesto config.xml ===


The manifest of the theme contains the main informations about your theme. When you install a theme, the content of the manifest will be loaded in the database, in two different tables: template and template_configuration. So each time you modify the manifest of a theme, you must uninstall and reinstall it (or just reset it). Because this process is annoying while developing a theme you can force the direct usage of the XML file rather than the DB entries. To do so, in config.php turn on debug mode and 'force_xmlsettings_for_survey_rendering' to true.
El manifiesto del tema contiene la información principal sobre su tema. Cuando instalas un tema, el contenido del manifiesto se cargará en la base de datos, en dos tablas diferentes: plantilla y plantilla_configuración. Entonces, cada vez que modificas el manifiesto de un tema, debes desinstalarlo y reinstalarlo (o simplemente restablecerlo). Debido a que este proceso es molesto al desarrollar un tema, puede forzar el uso directo del archivo XML en lugar de las entradas de la base de datos. Para hacerlo, en config.php active el modo de depuración y 'force_xmlsettings_for_survey_rendering' en verdadero.


==== The metadata section ====
==== La sección de metadatos ====


Nothing complex: just the main infos about your theme. It will be pushed in the table templates_configuration   
Nada complejo: solo la información principal sobre tu tema. Se insertará en la tabla templates_configuration   


<syntaxhighlight lang="xml" enclose="div">
<syntaxhighlight lang="xml">
    <metadata>
<metadata>  
        <name>the_name_of_your_theme</name>
<name> el_nombre_de_tu_tema</name>  
        <title>The Title of your theme</title>
<title> El título de tu tema.</title>  
        <creationDate>16/10/2017</creationDate>
<creationDate> 16/10/2017</creationDate>  
        <author>Your Name</author>
<author> Su nombre</author>  
        <authorEmail>your@email.org</authorEmail>
<authorEmail> tu@correo electrónico.org</authorEmail> <authorUrl> http://www.tusitioweb.org</authorUrl>  
        <authorUrl>http://www.yourwebsite.org</authorUrl>
<copyright> Tus derechos de autor</copyright>  
        <copyright>Your Copyright </copyright>
<license> Licencia de tu tema</license>  
        <license>Licence of your theme</license>
<version> versión de tu tema</version>  
        <version>version of your theme</version>
<apiVersion> 3</apiVersion>  
        <apiVersion>3</apiVersion>
<description> Descripción de tu tema</description>  
        <description>Description of your theme</description>
<extends> tema_padre</extends>  
        <extends>parent_theme</extends>
</metadata>  
    </metadata>
</syntaxhighlight>
</syntaxhighlight>




Few remarks:
Algunas observaciones:
* '''name''': will be used as a key in the db. So it must be unique, and it should not have any special chars (no spaces). Note that cases will not be taken in account
* '''nombre''': se utilizará como clave en la base de datos. Por lo tanto, debe ser único y no debe tener caracteres especiales (sin espacios). ¡Tenga en cuenta que los casos no se tendrán en cuenta
* '''Title''': will be used to display your theme name in the different lists. It can have special chars
* '''Título''': se utilizará para mostrar el nombre de su tema en las diferentes listas. Puede tener caracteres especiales
* '''description''': will be used in the main list of survey theme. It can contains special chars, and even HTML code by using
* '''descripción''': se utilizará en la lista principal del tema de la encuesta. Puede contener caracteres especiales e incluso código HTML usando
* '''extends''': optional, it defines the parent themes. So if any file is not present in this theme (twig/js/css/jpg, etc) it will look for it in the parent theme
* '''extends''': opcional, define los temas principales. Entonces, si algún archivo no está presente en este tema (twig/js/css/jpg, etc.), lo buscará en el tema principal.




<div class="simplebox">[[File:help.png]] If you extended one of the the 3 core themes (Vanilla, Bootswatch, Fruity), you can change the "extends" value from one parent theme to the other. Of course, you'll have to reset the theme. </div>
<div class="simplebox">[[File:help.png]] Si extendiste uno de los 3 temas principales (Vanilla, Bootswatch, Fruity), puedes cambiar el valor "extiende" de un tema principal al otro. Por supuesto, tendrás que restablecer el tema.</div>




Line 647: Line 542:




==== The files section ====
==== La sección de archivos ====


This one is an important one. It will be pushed in the table template_configuration, in the field files_css, files_js, files_print_css as json arrays.   
Éste es importante. Se insertará en la tabla template_configuration, en el campo files_css, files_js, files_print_css como matrices json.   


Eg: the files section of the Material Premium Theme:
Por ejemplo: la sección de archivos del Tema Material Premium:


<syntaxhighlight lang="xml" enclose="div">
<syntaxhighlight lang="xml">
    <files>
<files> !¡NORTE!<css>  
        <css>
<add> css/bootstrap-material-design.css</add>  
            <add>css/bootstrap-material-design.css</add>
<add> css/ripples.min.css</add>  
            <add>css/ripples.min.css</add>
<replace> css/ajaxify.css</replace>  
            <replace>css/ajaxify.css</replace>
<replace> css/tema.css</replace>  
            <replace>css/theme.css</replace>
<replace> css/personalizado.css</replace>  
            <replace>css/custom.css</replace>
<remove> impresionante-bootstrap-checkbox/increíble-bootstrap-checkbox.css</remove>  
            <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
</css> !¡NORTE!<js>  
        </css>
<replace> scripts/tema.js</replace>  
        <js>
<replace> scripts/ajaxify.js</replace>  
            <replace>scripts/theme.js</replace>
<add> scripts/material.js</add>  
            <replace>scripts/ajaxify.js</replace>
<add> scripts/ripples.min.js</add>  
            <add>scripts/material.js</add>
<replace> scripts/personalizado.js</replace>  
            <add>scripts/ripples.min.js</add>
</js> !¡NORTE!<print_css>  
            <replace>scripts/custom.js</replace>
<add> css/print_theme.css</add>  
        </js>
</print_css> !¡NORTE!</files>  
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>
</syntaxhighlight>
</syntaxhighlight>


All the CSS/JS files present in this section will be loaded at the launch of the survey (in ajax mode. If ajax mode is off, then of course all the files are reloaded at each page).  
Todos los archivos CSS/JS presentes en esta sección se cargarán al iniciar la encuesta (en modo ajax. Si el modo ajax está desactivado, entonces, por supuesto, todos los archivos se recargan en cada página).  




They will be added to a Yii Asset Packet based on the name of the theme. So when Asset Manager is on (debug mode being off), those files will be copied to the tmp directory with the rest of the theme (so you can use relative path in the CSS and JS to reach the image files).
Se agregarán a un Yii Asset Packet según el nombre del tema. Entonces, cuando Asset Manager está activado (el modo de depuración está desactivado), esos archivos se copiarán al directorio tmp con el resto del tema (para que pueda usar la ruta relativa en CSS y JS para acceder a los archivos de imagen).  
About the Asset manager in Yii: https://www.yiiframework.com/wiki/148/understanding-assets  
Acerca del administrador de activos en Yii: https://www.yiiframework.com/wiki/148/understanding-assets  
About packages in Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
Acerca de los paquetes en Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#paquetes-detalle




They will use the inheritance system. It means that if you add a CSS/JS file to a theme, but it's not present in the theme, then the engine will look into all the mother themes of this theme and will use the first one it finds. So if a user extends your theme via the theme editor, all those files will be inherited in his theme. The keywords refer to this inheritance system.
Utilizarán el sistema de herencia. Significa que si agrega un archivo CSS/JS a un tema, pero no está presente en el tema, entonces el motor buscará todos los temas principales de este tema y usará el primero que encuentre. Entonces, si un usuario extiende su tema a través del editor de temas, todos esos archivos se heredarán en su tema. Las palabras clave se refieren a este sistema de herencia.




* '''add''' : it will add the file to the theme, and to all its inherited theme
* '''add''': agregará el archivo al tema, ¡y a todos sus temas heredados
* '''replace''': it will replace the the file of its mother theme
* '''replace''': reemplazará el archivo de su tema madre
* '''remove''': it will remove the file from '''any''' package, even the core package (since 3.14)
* '''remove''': eliminará el archivo de '''cualquier''' paquete, incluso el paquete principal (desde 3.14)


<div class="simplebox">[[File:help.png]]   Remember you can set in config.php 'force_xmlsettings_for_survey_rendering' so configuration is read from XML instead of DB (no reset needed). This will make easier to test the modifications of the XML files, and will avoid you to uninstall/reinstall theme at each modification of the XML </div>
<div class="simplebox">[[File:help.png]] Recuerde que puede configurar en config.php 'force_xmlsettings_for_survey_rendering' para que la configuración se lea desde XML en lugar de DB (no es necesario restablecer). Esto facilitará la prueba de las modificaciones de los archivos XML y evitará que desinstale/reinstale el tema en cada modificación del XML.</div>




Few remarks on those keywords:  
Algunas observaciones sobre esas palabras clave:  




===== Inheritance tips  =====
===== Consejos de herencia =====
As explained before, the "add" keyword can refer to a file being in one of the mother theme. So you can "add" a file in this section, and still not having this file in your theme, but in one of its parents theme. The engine will look into all its parent themes and will use the first one it finds. If it can't find the file, and debug mode is on in config, and js frontend debug mode is on in global setting, a message in console will warn you. Eg: if we add in a my_theme: <add>css/unexisting.css</add>, in the console we'll see:
Como se explicó antes, la palabra clave "agregar" puede referirse a un archivo que se encuentra en uno de los temas principales. Por lo tanto, puede "agregar" un archivo en esta sección y aún no tener este archivo en su tema, sino en uno de sus temas principales. El motor examinará todos sus temas principales y utilizará el primero que encuentre. Si no puede encontrar el archivo y el modo de depuración está activado en la configuración y el modo de depuración de la interfaz js está activado en la configuración global, un mensaje en la consola le advertirá. Por ejemplo: si agregamos my_theme:<add> css/inexistente.css</add> , en la consola veremos:


<syntaxhighlight lang="" enclose="div">
<syntaxhighlight lang="">
  (¯`·._.·(¯`·._.· Theme Configuration Error ·._.·´¯)·._.·´¯)  
  (¯`·._.·(¯`·._.· Error de configuración del tema ·._.·´¯)·._.·´¯)  


Can't find file 'css/unexisting.css' defined in theme 'my_theme'  
¡No se puede encontrar el archivo 'css/unexisting.css' definido en el tema 'my_theme'!
</syntaxhighlight>
</syntaxhighlight>


If the debug mode is off, then no error at all will be seen. The engine will just ignore the wrong add statements.
Si el modo de depuración está desactivado, no se verá ningún error. El motor simplemente ignorará las declaraciones add incorrectas.






===== When to use add, when to use replace, when can I just leave it to the parent theme? =====
===== ¿Cuándo usar agregar, cuándo usar reemplazar, cuándo puedo dejarlo en el tema principal? =====


First: add and replace are the very same keyword. You can use the one or the other, the engine will just do the same. They are distinct for human readers, so they understand what was your intention.  
Primero: agregar y reemplazar son la misma palabra clave. Puedes usar uno u otro, el motor hará lo mismo. Son distintos para los lectores humanos, por lo que entienden cuál era su intención.  




You can't add a file with the same name as the mother theme: it will always replace it. eg: If you have a file called "my_mother_theme/foo.css" and you add a file called "foo.cs" in the daughter theme, only  "daughter_theme/foo.css" will be added to the theme. If you want to keep "my_mother_theme/foo.css", just choose another name for "daughter_theme/foo.css", like "daughter_theme/bar.css". So the keyword "add" can be used as a "replace" keyword.  
No puedes agregar un archivo con el mismo nombre que el tema madre: siempre lo reemplazará. Por ejemplo: si tiene un archivo llamado "mi_tema_madre/foo.css" y agrega un archivo llamado "foo.cs" en el tema hijo, solo se agregará "tema_hija/foo.css" al tema. Si desea conservar "mi_tema_madre/foo.css", simplemente elija otro nombre para "hija_tema/foo.css", como "hija_tema/bar.css". Por lo tanto, la palabra clave "agregar" se puede utilizar como palabra clave "reemplazar".  




If you wonder why: this make much easier the automatic generation of inherited theme, copying the file section works out of the box (no need to rename "add" to "replace" when extending one the file).  
Si se pregunta por qué: esto facilita mucho la generación automática del tema heredado, copiar la sección del archivo funciona de inmediato (no es necesario cambiar el nombre de "agregar" a "reemplazar" al extender un archivo).  




To make it clear, let's take the Fruity example. Here its css file section:
Para que quede claro, tomemos el ejemplo de Fruity. Aquí su sección de archivos CSS:




<syntaxhighlight lang="xml" enclose="div">
<syntaxhighlight lang="xml">
        <css>
<css>  
            <add>css/variations/sea_green.css</add>
<add> css/variaciones/sea_green.css</add>  
            <replace>css/animate.css</replace>
<replace> css/animado.css</replace>  
            <replace>css/theme.css</replace>
<replace> css/tema.css</replace>  
            <replace>css/custom.css</replace>
<replace> css/personalizado.css</replace>  
        </css>
</css>  
</syntaxhighlight>
</syntaxhighlight>




If you look to the custom.css file in fruity, it is exactly the same as the vanilla one. We could delete the custom.css file inside fruity, the one of vanilla would loaded. We could remove the statement <replace>custom.css</replace> from the Fruity manifest, the statement from vanilla will be used, and the vanilla custom.css would be loaded.  
Si miras el archivo custom.css en formato afrutado, es exactamente igual que el de vainilla. Podríamos eliminar el archivo custom.css dentro de fruity, se cargaría el de vanilla. Podríamos eliminar la declaración.<replace> personalizado.css</replace> del manifiesto de Fruity, se utilizará la declaración de vainilla y se cargará el archivo personalizado.css de vainilla.  




So why do we use the statement  <replace>custom.css</replace> inside the fruity manifest? The answer is easy: because we want the end user to be able to extend the fruity theme, to modify the file in his local theme, and to load this modified file from his inherited theme. To understand, just extend fruity and have a look to the extended theme. THe extended theme doesn't even have the file custom.css. So the one of fruity will be used. But: if the user create this file in the extended theme (by clicking on "extend" in the theme editor), then this file will be loaded from his theme.  
Entonces, ¿por qué usamos la declaración?<replace> personalizado.css</replace> ¿Dentro del manifiesto frutal? La respuesta es fácil: porque queremos que el usuario final pueda extender el tema frutal, modificar el archivo en su tema local y cargar este archivo modificado desde su tema heredado. Para entenderlo, simplemente extienda afrutado y eche un vistazo al tema ampliado. El tema extendido ni siquiera tiene el archivo custom.css. Entonces se utilizará el de afrutado. Pero: si el usuario crea este archivo en el tema extendido (haciendo clic en "extender" en el editor de temas), este archivo se cargará desde su tema.  




So in general:  
Entonces, en general:  
if you create a theme from scratch not extending any theme, just use the add statement to add your css/js files. Easy peasy.
si crea un tema desde cero sin extender ningún tema, simplemente use la instrucción add para agregar sus archivos css/js. Fácil.
if you create a theme extending another theme, and you don't want the users to be able to extends the css/js file from the mother theme: don't use the add statement in your manifest. THe files will still be loaded from the mother theme configuration.
si crea un tema que extiende otro tema y no desea que los usuarios puedan extender el archivo css/js del tema principal: no use la instrucción add en su manifiesto. Los archivos aún se cargarán desde la configuración del tema principal.
if you create a theme extending another theme, and you want to replace a file from the mother theme: use the replace keyword (the add keyword will have the same result)
si crea un tema que extiende otro tema y desea reemplazar un archivo del tema principal: use la palabra clave reemplazar (la palabra clave agregar tendrá el mismo resultado)  
if you create a theme extending another theme, if you don't replace a given file from css/js, but you want the users to be able to extend this file: then use the "replace" statement in your manifest for this file. Even if you don't replace the file, by using the keyword replace in the manifest: you allow the user to do it if he wants to do it.   
si crea un tema que extiende otro tema, si no reemplaza un archivo determinado de css/js, pero desea que los usuarios puedan extender este archivo: entonces use la declaración "reemplazar" en su manifiesto para Este archivo. Incluso si no reemplaza el archivo, al usar la palabra clave reemplazar en el manifiesto: permite al usuario hacerlo si así lo desea.   




Only this very last case needs a bit of mental gymnastic ot understand, all the other cases are trivial.
Sólo este último caso necesita un poco de gimnasia mental para comprenderlo, todos los demás casos son triviales.






<div class="simplebox">[[File:help.png]]  
<div class="simplebox">[[File:help.png]]  
You can also register CSS and JS files directly from the twig code. Those files will be loaded only when the twig file is asked. If you want the users to be able to inherit those JS/Css files from the theme editor, remember to use the functions {{registerTemplateCssFile('my_style.css')}} and {{registerTemplateScript('my_script.js')}}. If you don't use those functions, your theme may work, but inheritance on it will be broken. It is the same logic as the {{image('my_picture.jpg')}} function
También puedes registrar archivos CSS y JS directamente desde el código twig. Esos archivos se cargarán sólo cuando se solicite el archivo twig. Si desea que los usuarios puedan heredar esos archivos JS/Css del editor de temas, recuerde usar las funciones {{registerTemplateCssFile('my_style.css')}} y {{registerTemplateScript('my_script.js')}} . Si no utiliza esas funciones, su tema puede funcionar, pero la herencia se romperá. ¡Es la misma lógica que la función {{image('my_picture.jpg')}}
</div>
</div>


===== The remove keyword  =====
===== La palabra clave eliminar =====


The remove keyword is available only since 3.14. With this one, you can remove any css/file from any package, even the core ones. It is used in Material Premium Theme to remove the Awseome Bootstrap Checkbox's files:
La palabra clave eliminar solo está disponible desde 3.14. Con este, puede eliminar cualquier archivo/css de cualquier paquete, incluso los principales. Se utiliza en Material Premium Theme para eliminar los archivos de Awseome Bootstrap Checkbox:


<syntaxhighlight lang="xml" enclose="div">
<syntaxhighlight lang="xml">
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
<remove> impresionante-bootstrap-checkbox/increíble-bootstrap-checkbox.css</remove>  
</syntaxhighlight>
</syntaxhighlight>


so you should use the very same syntax as the package's file (eg: "awesome-bootstrap-checkbox.css" alone without it's folder path would not work). You'll find the complete list of core packages and their files in /application/config/packages.php and config/third_party.php. For example, for awesome-bootstrap-checkbox.css:
por lo que debe usar la misma sintaxis que el archivo del paquete (por ejemplo: "awesome-bootstrap-checkbox.css" solo sin la ruta de su carpeta no funcionaría). Encontrará la lista completa de paquetes principales y sus archivos en /application/config/packages.php y config/third_party.php. Por ejemplo, para awesome-bootstrap-checkbox.css:
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56


<syntaxhighlight lang="php" enclose="div">
<syntaxhighlight lang="php">
        'css'=> array(
'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),
),
</syntaxhighlight>
</syntaxhighlight>




Another way to find the exact name to use in the remove tag is to turn asset manager on (turning debug mode off or setting 'use_asset_manager'=>true in the config). Then, the path to use will be the one just after the random directory in the tmp directory. For example, for awesome-bootstrap-checkbox.css:
Otra forma de encontrar el nombre exacto que se usará en la etiqueta de eliminación es activar el administrador de activos (desactivando el modo de depuración o configurando 'use_asset_manager'=>true en la configuración). Entonces, la ruta a utilizar será la que está justo después del directorio aleatorio en el directorio tmp. Por ejemplo, para awesome-bootstrap-checkbox.css:
<syntaxhighlight lang="html" enclose="div">
<syntaxhighlight lang="html">  
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />  
</syntaxhighlight>
</syntaxhighlight>


Files you should not remove:
Archivos que no debes eliminar:


'''jquery-3.1.1.min.js''' : needed
'''jquery-3.1.1.min.js''': necesario


'''jquery-migrate-3.0.0.min.js''' : needed
'''jquery-migrate-3.0.0.min.js''': necesario


'''survey.js''' : needed
'''survey.js''': necesario


'''moment-with-locales.min.js''' : needed for date question type (and some other i think)
'''moment-with-locales.min.js''': necesario para el tipo de pregunta de fecha (y algunas otras, creo)


'''em_javascript.js''' : needed for all Expression Manager javascript
'''em_javascript.js''': necesario para todos los javascript de ExpressionScript


==== The options section ====
==== La sección de opciones ====


This section is relative to the option of your theme. It will be used to feed the filed "options" of the table template_configuration as a json array.
Esta sección es relativa a la opción de su tema. Se utilizará para alimentar las "opciones" archivadas de la tabla template_configuration como una matriz json.


=== Further information ===
=== Más información ===


* [[Theme:Available function]]
* [[Tema:Función disponible]]


== Some notes ==
== Algunas notas ==


'''NOTE''': if you edit the XML file of a theme, you must uninstall and reinstall the theme so it's taken into account.  
'''NOTA''': si editas el archivo XML de un tema, debes desinstalar y reinstalar el tema para que se tenga en cuenta.  


'''NOTE''': to avoid that, you can force the use to the XML rather than DB. In config.php turn debug mode on and uncommment:
'''NOTA''': para evitar eso, puede forzar el uso del XML en lugar de la base de datos. En config.php, active el modo de depuración y descomente:


'force_xmlsettings_for_survey_rendering' => true, // Uncomment if you want to force the use of the XML file rather than DB (for easy theme development)  
'force_xmlsettings_for_survey_rendering' => true, // Descomentar si desea forzar el uso del archivo XML en lugar de la base de datos (para facilitar el desarrollo del tema)  


Becareful: everything will be loaded from the XML (included options, etc)
Cuidado: todo se cargará desde el XML (opciones incluidas, etc)




'''NOTE''': if you manually edit the CSS/JS files (without using the Theme Editor), and if debug mode is off, you can now force the asset to be flushed. In "Global Settings", "General tab", click the button "Clear assets cache".
'''NOTA''': si edita manualmente los archivos CSS/JS (sin usar el Editor de temas) y si el modo de depuración está desactivado, ahora puede forzar la eliminación del activo. En "Configuración global", "Pestaña General", haga clic en el botón "Borrar caché de activos".


'''NOTE''': if you remove the section
'''NOTA''': si eliminas la sección

Latest revision as of 13:20, 11 September 2023

Other languages:

Introducción

Tenga en cuenta: en versiones anteriores de LimeSurvey, los archivos que definen cómo se ve la encuesta, cómo se presenta la encuesta en términos de colores, fuentes, diseño y (algunos) comportamientos, se denominaban "plantilla". Debido a nuevos conocimientos, esto ahora se denomina "tema", mientras que la plantilla está reservada para, por ejemplo, encuestas.

En esta página aprenderá cómo:

  • Usar el nuevo sistema de temas de LimeSurvey 3.0.
  • Usar la herencia para administrar sus propios temas.
  • Agregar una imagen a su tema.
  • Administrar opciones del tema para sus encuestas y grupos de encuestas.

LimeSurvey 3 presenta un nuevo sistema de motor de temas completo, basado en Twig 1.29, Bootstrap, y que permite la herencia de temas y las opciones de temas. Elimina por completo el antiguo sistema de reemplazar palabras clave . Ahora, el 100% del HTML del frontend se puede personalizar. Por ejemplo, en el antiguo sistema de temas, había una palabra clave {EVALUACIONES} que fue reemplazada por evaluaciones en HTML en el momento de la ejecución. Un diseñador de temas no tenía forma de personalizar este HTML (aparte de usar JavaScript). Ahora, hay un archivo llamado evaluaciones.twig que contiene la lógica (escrita en Twig) para generar este HTML. En estas páginas, le daremos una explicación sobre cómo usar este nuevo motor de temas.

No detallaremos aquí cómo funciona Twig. Es una especie de PHP muy simplificado que ofrece un alto nivel de seguridad gracias al sistema "sandbox" (lo veremos con más detalle en la parte sobre el código de Theme Engine Core). Si ya conoce PHP, le será extremadamente fácil de dominar. Si no conoce PHP, igual le debería ser bastante fácil de aprender. Por favor, eche un vistazo a la documentación de Twig 1.X: https: //twig.symfony.com/

Edición usando la interfaz de administración

Lista de temas

En el panel de administración, ahora hay un cuadro para acceder a la lista de temas:

La lista de temas después de una nueva instalación de RC3


La lista se divide en 5 columnas:

  • Una vista previa del tema: es solo un archivo de imagen llamado "preview.png" en la raíz del tema.
  • El "título" del tema como está especificado en el manifiesto (config.xml en la raíz del tema).
  • La descripción del tema: una cadena establecida en su manifiesto.
  • El tipo de tema: tema principal (proporcionado con LimeSurvey), tema de usuario (agregado en el directorio de carga), tema XML (no cargado en la base de datos).
  • Extenciones: si el tema se extiende otro tema, su nombre se indicará aquí.
  • Algunos botones de acción:
    • Instalar: cargará el manifiesto de un tema para agregarlo a la base de datos y lo hará disponible para su selección en el nivel de la encuesta.
    • Desinstalar: eliminará las entradas de configuración de un tema en la base de datos.
    • Editor de temas: lo redirigirá al editor de temas.
    • Opción de tema: lo llevará a la configuración global de las opciones de tema.

Editor de temas

Esta documentación supone que ya sabes cómo utilizar el Editor de temas en la versión anterior de LS.


El editor de temas se ha mantenido lo más parecido posible al original. Entonces, cuando abres un tema principal, no puedes editarlo. Pero ahora, en lugar de un botón de “copiar”, tienes un “botón de extender”.
centro|baseline|border|Ahora extiende el tema

Una descripción rápida del concepto de herencia de temas

En LS3, un tema ahora se puede heredar de otro tema, puede "extender" otro tema. Esto significa que el directorio de temas estará prácticamente vacío, solo contendrá los archivos (vistas, hojas de estilo, scripts, recursos, etc.) que difieran de los originales. Al hacerlo así, será fácil para usted crear un conjunto de temas para sus diferentes usuarios sin tener que mantener muchos temas diferentes. Por ejemplo: puede tener su propio tema personalizado y luego una versión para una empresa (con su logotipo, su estilo, quizás un enlace a su sitio web en el pie de página, etc.), otra versión para otra empresa, etc. Si actualiza el CSS o el diseño global de su tema personalizado, todos los temas que hereden de él se actualizarán automáticamente. Tenga en cuenta que la herencia es recursiva: un tema puede extender un tema que extiende otro, etc.

También significa que si extiende uno de los temas centrales de LimeSurvey, aún se beneficiará de sus actualizaciones.

Novedades en la interfaz de usuario

Para ampliar el tema Monocromo de LimeSurvey, vaya a la lista de Temas, haga clic en el botón "Editor de temas" del tema Monocromo. Luego, haz clic en “extender” y valida el nuevo nombre “extends_monochrome”.

Si ahora va al directorio de carga (con su cliente de archivos/ftp), verá que se ha creado un nuevo directorio: upload/themes/extend_monochrome que contiene un archivo XML y algunos directorios, pero la mayoría de los directorios estarán vacíos. No tiene vistas ni CSS ni JS. Sin embargo, aún puede seleccionar este tema como uno normal de una encuesta y se verá exactamente como el tema monocromo.

El árbol de temas (directorio y archivos) justo después de su creación. Está prácticamente vacío
El árbol de temas (directorio y archivos) justo después de su creación. Está prácticamente vacío
Los recursos (jpg, png, etc.) del tema original se copian al extender un tema. Esto se debe a que si copia un archivo CSS del tema original localmente, y si se refiere a esos archivos (como en la declaración de imagen de fondo), necesitará encontrar esas imágenes en la ruta del tema actual.

El editor de temas para el tema extend_monochrome se ve así:

Edición del tema extend_monochrome
Edición del tema extend_monochrome



No hay gran diferencia con el antiguo editor de temas. Hagamos una lista de los principales cambios:

  • La palabra clave heredada en la lista de archivos. Significa que el archivo no está presente en el directorio de temas y que se usará el archivo del tema original.


  • El editor principal (ACE editor) muestra el contenido del archivo seleccionado. Los archivos no solo contienen HTML, CSS o JS, sino también declaraciones Twig. Esas declaraciones de Twig nos dan la posibilidad de llevar algo de lógica a las vistas de temas que se encontraban en el núcleo antes, y que ahora se pueden personalizar.
Algo de código twig, para la Lista de encuestas
Algo de código twig, para la Lista de encuestas


  • Es por eso que ahora tiene más tipos de pantallazos disponibles en el selector desplegable del menú superior. Verá páginas como 'Lista de encuestas', 'Cargar', 'Guardar', 'Error', 'Registro', 'Evaluaciones', 'Imprimir respuestas' que no estaban disponibles antes, o que realmente no podía personalizar antes.
' Ahora, puede personalizar todas las pantallas
' Ahora, puede personalizar todas las pantallas


  • El enlace 'sugerencia' en la parte inferior de la lista de archivos le ofrece la forma Twig de agregar una imagen en su HTML.


  • El botón 'guardar cambios' se convirtió en el botón Copiar al tema local y guardar cambios

Ejemplo rápido: agregar una imagen

El botón Copiar al tema local y guardar los cambios hará exactamente lo que dice: si edita algo dentro del archivo y luego hace clic en ese botón, copiará el archivo al tema que está editando, y guardará sus cambios.
Por ejemplo: haga clic en el archivo layout_global.twig, luego justo antes del contenido del bloque ({% block content%}) agregue el texto "PRUEBA" y haga clic en el botón. Puede ver que la etiqueta del archivo cambió de “heredado” a “local” y ahora el botón es un simple botón guardar cambios.

justo después de hacer clic en el botón
justo después de hacer clic en el botón


Si abre un explorador de archivos y va al directorio upload/themes/extend_monochrome/views/, verá que contiene solo un archivo, el archivo layout_global.twig y que la cadena "PRUEBA" está allí.

¡Ahora el archivo está presente en su tema
¡Ahora el archivo está presente en su tema



Ahora, en lugar de agregar un texto aleatorio, agregaremos una imagen. Si hace clic en el enlace de la sugerencia, le dirá:
Para usar una imagen en un archivo .twig: {{ image('./files/myfile.png', 'texto alternativo del archivo', {"class": "myclass"}) }}
Si ha leído la documentación de Twig (y debería haberlo hecho en este punto), sabe que {{ function( ) }} hará eco del resultado de una función en la pantalla. Aquí, la función es image( ).

Si tiene curiosidad por saber qué hace esta función, puede encontrarla en el código aquí (versión de RC3): /application/core/LS_Twig_Extension.php#L219-L237 función image( ) en RC3

Si no entiende el código: no se preocupe, no necesita saber cómo funciona, pero si, por qué usarlo y cómo usarlo.


Debe usar la función image( ) por dos razones:

  • La función de imagen recorre el tema para encontrar la imagen. Si el tema en el que está trabajando se extiende a otro tema, y si copia el archivo donde insertó la imagen localmente, pero esa imagen no se copia en el tema local, recorrerá el árbol de herencia del tema para encontrar dónde está esa imagen .
  • Utilizará el administrador de activos, por lo que mejorará el rendimiento de su tema. Consulte la documentación de Yii Asset Manager para obtener más información al respecto: http://www.yiiframework.com/wiki/148/understanding-assets/

Entonces, para agregar una imagen a su tema:

  • Simplemente cárguela como de costumbre con el cargador de archivos a la derecha y luego agréguela donde lo desee en cualquier archivo de twig:

{{ image('./files/myfile.png') }}

  • Si desea agregar un texto alternativo para su imagen (para lectores de pantalla y validación HTML), agregue:

{{ image('./files/myfile.png'), ‘mi texto alternativo’ }}

  • Si desea agregar un atributo de clase y agregarle una identificación:

{{ image('./files/myfile.png'), ‘mi texto alternativo’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

Algunas cosas en nuestra lista de tareas pendientes

  • Brinde a los usuarios la posibilidad de cargar un archivo de vista previa personalizado desde el editor en sí.
  • Agregue un botón para eliminar el archivo local y volver al declaración heredada.
  • Sólo copie la imagen utilizada en los archivos CSS (enumerándolos en el manifiesto como archivo para copiar).
  • Recuerde de qué tema se extiende el actual (si lo hay).

Opciones de tema

Otra novedad de LS3 es la página de opciones de tema. Como veremos más adelante, los creadores de temas pueden crear sus propias opciones e incluso su propia página de opciones de administrador. Aquí veremos rápidamente cómo funciona la página de opciones de los Temas principales. Para acceder a las opciones del tema a nivel global: ¡haga clic en “opciones de tema” en la lista de temas

Opciones avanzadas

<translate>
Other languages:

When you open the theme options tab, you can choose to edit either its simple options or its advanced options. “Advanced options” is just a naked form that gives you access to the main theme configuration fields from the database. To understand how it works, you should also read about the XML file and the creation of a theme from scratch. So, it’s rather complex and made for advanced users.

However, if you do wish to perform advanced settings editing, click on the advanced options tab



  • Files css: The CSS files that should be added to the template;
  • Files js: The JS files that should be added to the template;
  • Files Print Css: The CSS files to load when printing a template;
  • Options: This field includes the options (and their value) that should be parsed to the template view;
  • CssFramework Name: The name of the CSS framework to load. For now, only Bootstrap or nothing;
  • Cssframework Css: You can replace the core bootstrap.css in this field by a different custom version of it;
  • Cssframework Js: The field core boostrap.js can be replaced from here by a different custom version of it;
  • Packages To Load: You can load from this setting some core asset packages from LimeSurvey.

You’ll notice an upload input at the top, which gives you the possibility to upload a file into the file directory of the theme. These parameters can be used to change the entire appearance of the theme.

  Warning! : Don't touch the values unless you know what you're doing!


</translate>

Opciones simples

La página de opciones simples proviene de la propia plantilla. Se realiza a través de un archivo de twig y algunos javascript dentro del directorio /options del tema: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Enlace roto)

Esta página puede ser completamente diferente de un tema a otro, y se recomienda encarecidamente a los proveedores de temas que creen su propia apariencia.



La página de opciones simples simplemente completa las entradas de formulario de opciones avanzadas. Puede verlo activando o desactivando una configuración en la página simple, y vea cómo la entrada relacionada en el formulario avanzado se modifica en consecuencia. Por ejemplo, en las opciones simples de la Plantilla predeterminada, si cambia el tema de Bootswatch a "Oscuro" y luego hace clic en la pestaña de opciones avanzadas (incluso sin guardar) verá que el campo "Cssframework Css" cambió de

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
a
{"replace": [["css/bootstrap.css","css/darkly.css"]]}

Aquí están las diferentes opciones simples para los temas principales:

  • Modo Ajax: ¿Debería cargar la página siguiente a través de ajax (más rápido) o mediante recarga de página (mejor para la depuración)
  • Imagen de fondo: si se establece en Sí, se cargará la imagen llamada pattern.png (será reemplazada por un selector de archivos en Master)
  • Contenedor de caja: si está configurado en No, las preguntas no se incluirán en un cuadro (por lo que puede usar matrices largas más grandes que el ancho de la pantalla)
  • Brandlogo: si se configura en no, el nombre de la encuesta se mostrará en la barra superior, de lo contrario, puede seleccionar una de las imágenes dentro del directorio de archivos para utilizarla como imagen de logotipo.
  • Cuerpo animado: si se establece en sí, puede elegir una de las animaciones para aplicar cuando se carga el cuerpo de la encuesta.
  • Pregunta animada: lo mismo con las preguntas.
  • Alertas animadas: lo mismo con las alertas.
  • Tema Bootstrap: aquí puede elegir un tema Bootstrap para cargar. Provenientes de Bootswatch https://bootswatch.com/3/

La biblioteca utilizada para animaciones es animate.css: https://daneden.github.io/animate.css/ Por supuesto, un proveedor de temas podría agregar su propia biblioteca de animación o ninguna biblioteca de animación.

Los temas monocromáticos usan el mismo tema de color de arranque que la interfaz de usuario de administrador. No están utilizando el sistema de reemplazo de framework css, sino que simplemente agregan un archivo CSS. Por lo tanto, ilustran otra forma de tratar temas personalizados para proveedores de temas.

Sistema de herencia

En la parte anterior, hemos visto que un tema puede extender otro tema. Una configuración de tema también puede heredar de otra configuración de tema. Significa que para un tema determinado, puede tener una configuración en

  • nivel global (el que acabamos de ver accesible desde la lista de temas).
  • a nivel de grupo de encuesta.
  • un último a nivel de encuesta.

Cada parámetro en un cierto nivel puede heredar del nivel superior: herencia del grupo de encuesta. Primero, veamos el nivel del grupo de encuesta.

A nivel de grupo de encuesta

De hecho, una de las otras grandes novedades de LS3 es el sistema de grupos de encuestas. Ahora puede crear diferentes grupos para organizar sus encuestas. Para acceder, vaya a la lista de encuestas y luego haga clic en la pestaña del grupo de encuestas:

Pestaña de grupos de encuestas


En esta lista, tiene dos botones de acción. Si el grupo está vacío, puede eliminarlo. De lo contrario, siempre puedes editarlo. Al hacer clic en el botón editar, llega a la página de configuración del Grupo de encuesta:

Edición del grupo de encuesta predeterminado


La tercera pestaña de esta página se llama "Opciones de plantilla para este grupo de encuesta". Si hace clic en él, verá la misma lista de temas que en la lista de temas, excepto que aquí solo está visible el botón de opción (solo se puede acceder al editor de temas desde la lista principal).
Ahora, si hace clic en la opción de Plantilla predeterminada, verá esto:

En el Grupo de encuesta, las Opciones de plantilla se heredan por defecto


  • Heredar todo significa que toda la configuración se heredará del nivel de configuración Global.
  • Si va a la página de opciones avanzadas, verá que todos los campos están configurados para heredar.
  • Si hace clic en "no" para "Heredar todo" en el opciones simples, nuevamente verá una página muy similar a la página de opciones global. La única diferencia es que para cada campo, puede establecerlo en sí, no o heredar; y cada selector desplegable tiene un valor heredar.
Cada configuración puede tener un valor heredado
Un grupo de encuesta puede ser hijo de otro grupo. En este caso, heredará de su padre.

A nivel de encuesta

Al editar una encuesta, en el menú de la barra izquierda, verá una nueva entrada "Opciones de tema". Lo llevará a la página de opciones del Tema seleccionado para la encuesta actual. Encontrarás el mismo sistema de herencia que en el grupo de encuesta, pero esta vez heredar significa que la configuración se heredará del grupo de encuesta de la encuesta. thumb|800px|center|Opciones de tema a nivel de encuesta

Ejemplo práctico

Digamos que está utilizando un solo tema para diferentes empresas (A y B). Configura sus opciones favoritas a nivel global (por ejemplo: ajax activado, animar el cuerpo con una diapositiva, alertas con un pulso). Luego, crea un grupo de encuestas para cada compañía: un grupo de encuestas para la compañía A que alojará todas las encuestas para esta compañía, y un grupo de encuestas para la compañía B que alojará todas las encuestas para la compañía B. En este nivel, establecerá solo el logotipo y el fondo, y dejará que las otras opciones hereden. Por lo tanto, todas las encuestas del grupo A utilizarán el logotipo de la empresa A, y todas las encuestas del grupo B, el logotipo de la empresa B. Para una de las encuestas de la empresa A, puede utilizar un fondo diferente en relación con el tema de la encuesta: simplemente cambia el fondo en las opciones a nivel de encuesta. Si alguien en la compañía B le dice que la alerta de pulso es demasiado agresiva y que preferiría algo más suave como un desvanecimiento, simplemente cambie la animación de alerta en el nivel del Grupo de encuesta B y todas las encuestas de este grupo ahora usarán esta animación. Si la empresa A cambia su logotipo, puede cambiarlo al nivel del Grupo de encuesta A, y todas las encuestas de este grupo utilizarán el nuevo logotipo.

Esos ejemplos se basan en las opciones actuales del tema central. Pero, por supuesto, si eres un proveedor de temas, o si eres capaz de escribir un poco con Twig, puedes agregar tus propias opciones. Por ejemplo, podría agregar una opción "pie de página de información" donde podría agregar datos como el sitio web de la empresa o un número de teléfono para obtener ayuda. Luego, si la empresa A tiene diferentes departamentos, con diferentes números de teléfono, puede crear un subgrupo para cada departamento en el Grupo de encuesta A. Cada subgrupo tendrá su propio número de teléfono en estas opciones.

Preguntas frecuentes sobre la personalización del tema

Encontrarás aquí algunas respuestas a las preguntas que se hicieron en el foro y que podrían ayudarte a personalizar tu tema.

Personalizar CSS / JS: tratar con el administrador de activos ("¿por qué no se aplican mis cambios?")


Si está intentando actualizar el CSS/JS de un tema editando directamente el código con su editor favorito, podría sorprenderse de que sus cambios no se apliquen.


Desde 2.50, LS utiliza el administrador de activos de Yii:Documentación sobre los Assets de Yii

Mueve los archivos CSS/JS de un tema a un subdirectorio tmp/ con una cadena aleatoria (por ejemplo: "tmp/1ef64ml/"). Entonces, si realiza algún cambio en un archivo css/js y se lo indica al administrador de activos, los archivos se copian en un nuevo subdirectorio con un nuevo nombre para que la memoria caché del navegador del usuario se actualice y vean el nuevo css/js . De lo contrario, los usuarios tendrían que limpiar el caché de su navegador.


Aquí los enlaces CSS en el encabezado cuando el administrador de activos está activado:

Como puede ver, todos se refieren a subdirectorios en tmp/


Aquí los enlaces CSS en el encabezado cuando el administrador de activos está desactivado:

Como puede ver, apuntan a los archivos reales del tema.


Por supuesto, si el Administrador de activos no sabe que usted ha cambiado el archivo, el archivo antiguo del directorio tmp/ antiguo permanecerá sin cambios y sus cambios nunca se aplicarán.

Por lo tanto, cuando edita CSS/JS de un tema, tiene varias posibilidades:

  • Puede usar el Editor de temas LS: éste trata con el administrador de activos y usted no tiene que preocúpese por nada.
  • Puede activar el modo de depuración: se desactivará el administrador de activos, por lo que se invocan los archivos css/js reales de sus temas (pero luego, debe actualizar la memoria caché del navegador en cada carga)
  • Puede actualizar el caché de activos: desde Configuración global -> General -> Borrar caché de activos.

La mejor solución es usar el editor de temas para editar el CSS personalizado.


El uso del editor de temas lo ayudará a comprender la arquitectura del nuevo motor de temas. Además, si está personalizando fruity, tenga cuidado con la especificidad de CSS: la mayoría de las definiciones usan el selector ".fruity" (una de la clases del elemento del cuerpo)

Agregar fuentes personalizadas a mi tema

La manera fácil: usando Google Font CDN

Bootswatch Survey Theme usa Google Font CDN. Echemos un vistazo a cómo funciona: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css 

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

Luego, la fuente Lato se usa mediante reglas CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72 

 
cuerpo {
 ... familia de fuentes: "Lato";
 ...
}

De esa manera usted puede usar cualquier fuente de Google en su tema personalizado. Por supuesto, debe eliminar el selector de fuente de las opciones de su tema. Elimine esas líneas en options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Usando fuente local

Por supuesto, también puede descargar los archivos de fuentes y usarlos desde el servidor local en lugar de desde Google CDN (mejor para la privacidad). Para tener un ejemplo de cómo hacerlo, aquí nuestra versión local de la fuente noto: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css 

 
@font-face {
 familia de fuentes: 'Noto Sans';
 peso de fuente: 300;
 estilo de fuente: normal;
 src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

Puede usar una definición muy similar en su archivo css de tema y luego copiando el archivo NotoSans-Regular.ttf en la carpeta css/font-src/ del tema.

Luego, aplique esa fuente a su cuerpo (o cualquier otro elemento) como arriba, y elimine la opción predeterminada de selector de fuente.

Creando tu propio selector de fuentes en opciones

Por ahora, no puedes usar fácilmente el selector de fuentes principal para agregar tu propia fuente en opciones. Primero debemos brindarle al usuario final la posibilidad de cargar paquetes personalizados (consulte el siguiente párrafo: Una mirada al Selector de fuentes Fruity)
Aquí cómo proceder:

  • Agregue dos fuentes (my_custom_font y my_custom_other_font) a su tema, usando CDN o servidor local
  • Luego, en su archivo css, agregue dos nuevas clases:


 !¡NORTE!

 
.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 familia de fuentes: 'my_custom_other_font';
}
  • En el archivo XML de su tema, agregue una opción de fuente (la predeterminada será my_custom_font):
<options> .... <font>my_custom_font</font> 
</options>
  • en option.twig, agrega tu selector de fuentes agregando esas líneas (no probado por ahora, así que ven a quejarte al foro si no funciona):
 !¡NORTE! !¡NORTE!<div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'> <hr/> </div> <div class='row action_hide_on_inherit'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-heading'> {{ "Mis fuentes personalizadas" | t }}</div><div class='panel-body'><div class='form-group row'><label for='simple_edit_font' class='control-label'>{{ "Seleccionar fuente:" | t }}</label> 
<div class='col-sm-12'><select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> {% si templateConfiguration.sid no está vacío o templateConfiguration.gsid no está vacío %} //¡¿No debería ser "tema" en lugar de "plantilla"?
 {% set fontOptions = fontOptions ~ '<option value = "inherit" > Heredar</option> ' %}
 {% endif %}
<optgroup  label="{{ "My Custom fonts" | t }}"><option class="font-my_custom_font"     value="custom_font"   data-font-package=""  > Costumbre</option><option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  > Otro</option></optgroup></select></div></div></div></div></div> </div>


Ahora sus usuarios deberían poder elegir entre esas dos fuentes.

Una mirada al selector de fuentes Fruity

En el futuro, le daremos al usuario final la posibilidad de cargar sus propios paquetes de recursos, incluidos paquetes de fuentes. Hará muy fácil cualquier personalización de fuentes.
Para entender los Paquetes Yii:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Los paquetes LimeSurvey se definen en archivos diferentes. Los paquetes de fuentes se definen aquí: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Por ejemplo, el paquete de fuentes Noto se define aquí: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53 


    'font-noto' => array(
 'devBaseUrl' => 'assets/fonts/',
 'basePath' => 'fuentes',
 'css' => array(
 ' noto.css',
 ),
 ),


El archivo noto.css que contiene está aquí: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Observe la definición de la clase CSS ".font-noto" al final: 

 
@font-face {
 familia de fuentes: 'Noto Sans';
 ...
}
...
.font-noto{
 familia de fuentes: 'Noto Sans';
}


Luego, en el Tema Vanilla, la fuente noto se usa agregando el paquete noto y definiendo la opción de fuente noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79 

<packages>....<add> fuente-noto</add></packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58 


<options>  ....<font>nota</font> 
</options>


Luego, la fuente de la clase del cuerpo se define usando este valor: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76 

<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

Por supuesto, el archivo XML solo contiene los valores predeterminados para la configuración de su tema. Pero, de hecho, esos valores se definen y leen dentro de la base de datos (tabla "template_configuration" (Pregunta: "template_" de "theme_"?) Como cadenas json. El archivo option.js solo usa el valor del selector de fuente de la opción simple para cambiar el valor dentro de la pestaña avanzada: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Entonces, cuando esté disponible la funcionalidad "cargar paquete de activos", será fácil agregar un script que escanee todos los paquetes de fuentes existentes para agregarlos en el selector.

Agregar opciones de tema para controlar el posicionamiento y la visualización de los elementos de la encuesta

Este tutorial mostrará cómo agregar opciones a un tema extendido para mostrar elementos de la encuesta en varias ubicaciones. En este caso, crearemos opciones de tema para mostrar el título de la encuesta en dos ubicaciones diferentes.

Archivo:help.png Para simplificar, basaremos el tutorial en una extensión del tema "bootswatch" en LimeSurvey versión 3.4.3.

Crear un tema personalizado

  1. Extiende el tema "bootswatch" como se describe arriba.
  2. Copia custom.css al tema local como se describe arriba.

Crear nuevas opciones de tema

  1. Copie el contenido de /themes/survey/bootswatch/options/ a /upload/themes/survey/yourThemeName/options/ .
  2. Open /upload/themes/survey/yourThemeName/ options/options.twig en un editor y busque "{# Bootstrap Bootswatch theme #}". Directamente antes de su padre<div class='row'> elemento, agregue esto:
     {# Nombre de la encuesta personalizada en la barra de navegación #}
<div class='row'><div class='col-sm-12 col-md-6'>

				<div class='form-group row'> <label for='simple_edit_options_surveyname1' class='control-label'>Nombre de la encuesta en la barra de navegación</label> 
<div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> ¡Si n!</label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> ¡No!</label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div>

		{# Nombre de la encuesta personalizada debajo de la barra de progreso #}
<div class='row'> <div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
<label for='simple_edit_options_surveyname2' class='control-label'>Nombre de la encuesta debajo de la barra de progreso</label> 
<div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> ¡Si n!</label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> ¡No!</label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div>
  3. Abra /upload/themes/survey/yourThemeName/config.xml y agregue dos elementos al bloque "opciones" para que se vea así:
    <options> <ajaxmode> en</ajaxmode> ... <surveyname1> en</surveyname1> <surveyname2> en</surveyname2> </options>
  4. Esto debería brindarle dos nuevas opciones en la pantalla Opciones de tema como esta:

Vista modificada para el título de la encuesta en la barra de navegación

  1. Crear un nuevo directorio /upload/themes/survey/yourThemeName/views/subviews/header/ .
  2. Copy /themes/survey/vanilla/ views/subviews/header/nav_bar.twig a ese nuevo directorio.
  3. Abra /themes/survey/vanilla/views/subviews/header/nav_bar.twig y busque "{# Opción de logotipo #}". Debajo de eso, modifique la declaración IF para el logotipo/nombre de la encuesta, para que se vea así:
     
 {# Opción de logotipo #}
 {% if( aSurveyInfo.options.brandlogo == "on") %}
 <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  > 
 {{ imagen(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
</div> 
 {% endif %}
 {% if( aSurveyInfo.options.surveyname1 == "on") %}
<div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} > 
 {{ aSurveyInfo.name }}
</div> 
 {% terminara si %}
  4. Agregue algo como esto a /upload/themes/survey/yourThemeName/css/custom.css :
     .navbar-marca {
 altura de línea: 60px;
 tamaño de fuente: 32px;
}
  5. Cambie la opción de tema "Nombre de la encuesta en la barra de navegación" a "Sí"
  6. Deberías ver esto:
    Archivo:Tutorial_tp_1_2.png

Vista modificada para el título de la encuesta debajo de la barra de progreso

  1. Crea un nuevo directorio /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews .
  2. Copia /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig a ese nuevo directorio.
  3. Open /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig y agrega un<h1> elemento para el nombre de la encuesta. Entonces se ve así: 
    <div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 {# Nombre de la encuesta personalizada #}
 {% if( aSurveyInfo.options.surveyname2 == "on") %}
<h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> 
 {% endif %}
 {# Nombre del grupo #}
 {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 {# Descripción del grupo #}
 {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 {# ¡PRESENTA LAS PREGUNTAS
 Esta es la parte principal. ¡Representará cada pregunta para este grupo
 #} <!-- PRESENT THE QUESTIONS --> {% para unaPregunta en unGrupo.aPreguntas %}
 {{ include('./subviews/survey/question_container.twig') }}
 {% endfor %}
 <!-- Hidden inputs --> {% if aGroup.show_last_group == true %}
<input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> {% endif %}
 {% if aGroup.show_last_answer == true %}
<input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> {% endif %}
</div>
  4. Agregue algo como esto a /upload/themes/survey/yourThemeName/css/custom.css :
     .navbar-marca {
 altura de línea: 60ph1.nombre-encuesta-personalizado {
 margen: 0;
 alineación de texto: centro;
}
  5. Cambie la opción de tema "Nombre de la encuesta debajo de la barra de progreso" a "Sí"
  6. Deberías ver esto:

Descargas

Creando un tema desde cero

La documentación estará disponible próximamente.

Por ahora, solo daré algunos consejos.

Estructura del tema

Archivos y directorios

Cuando creas un tema desde cero, no necesitas respetar la estructura de archivos/directorios/css/js de Vanilla. El css/js obligatorio lo agrega el núcleo (aún puedes eliminarlo si es necesario)

Los únicos archivos que debe tener tu tema son los archivos de diseño:

  • layout_global.twig : renderiza las páginas para realizar encuestas
  • layout_survey_list.twig : renderiza la lista de encuestas (si este tema está configurado como predeterminado)
  • 'layout_errors.twig': se utiliza para representar errores que bloquean la representación de la encuesta. (ID de encuesta incorrecto, grupo vacío en el grupo de vista previa, etc.)
  • layout_user_forms.twig: representa los formularios del usuario como: token (participante de la encuesta) y registro.
  • 'layout_print.twig': se utiliza para imprimir la encuesta en pdf
  • layout_printanswers.twig: imprime las respuestas

El contenido de esos archivos, los archivos que incluyen o no, depende totalmente de usted. Todos los demás archivos y directorios que encuentre en Vanilla son puramente opcionales, siéntase libre de organizar su código de la forma que desee.

Archivo:help.png Si lees el código de renderizado del frontend, verás que los nombres de esos archivos aparecen directamente en él. Por eso son obligatorios.

Por ejemplo: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

Contenido

En layout_global.twig de Vanilla, verá que usamos una variable llamada "include_content" para decidir qué mostrar. https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/ diseño_global.twig#L114-L115 

{% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
 {% incluye './subviews/content/outerframe.twig' con {'include_content': sViewContent } %}

aSurveyInfo.include_content le indica qué acción se está llevando a cabo actualmente: ¿mostrando preguntas? ¿Mostrando el resultado de envío? mostrando claro todo? ¡etc Como puede ver, en Vanilla, creamos un archivo para incluir por acción. Entonces, si desea conocer la lista de acciones, simplemente consulte el directorio básico views/subviews/content y elimine la extensión "twig": https://github.com/LimeSurvey/LimeSurvey /tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content

  • clearall.twig
  • firstpage.twig
  • load.twig
  • mainrow.twig
  • main.twig
  • optin.twig
  • optout.twig
  • 'outerframe.twig '
  • printanswers.twig
  • quotas.twig
  • register.twig
  • save.twig
  • submit_preview.twig
  • submit.twig
  • userforms.twig

Si ya los creó para las versiones 2.x de LimeSurvey, notará que la mayoría de ellos corresponden a los archivos pstpl antiguos para limesurvey 2.x. Nuevamente, usted no tiene la obligación en su tema de crear esos archivos, con esos nombres, en este directorio. Por ejemplo, podría simplemente agregar un interruptor gigante en layout_global.twig con el HTML deseado para cada acción.

El manifiesto config.xml

El manifiesto del tema contiene la información principal sobre su tema. Cuando instalas un tema, el contenido del manifiesto se cargará en la base de datos, en dos tablas diferentes: plantilla y plantilla_configuración. Entonces, cada vez que modificas el manifiesto de un tema, debes desinstalarlo y reinstalarlo (o simplemente restablecerlo). Debido a que este proceso es molesto al desarrollar un tema, puede forzar el uso directo del archivo XML en lugar de las entradas de la base de datos. Para hacerlo, en config.php active el modo de depuración y 'force_xmlsettings_for_survey_rendering' en verdadero.

La sección de metadatos

Nada complejo: solo la información principal sobre tu tema. Se insertará en la tabla templates_configuration 

<metadata> 
<name> el_nombre_de_tu_tema</name> 
<title> El título de tu tema.</title> 
<creationDate> 16/10/2017</creationDate> 
<author> Su nombre</author> 
<authorEmail> tu@correo electrónico.org</authorEmail> <authorUrl> http://www.tusitioweb.org</authorUrl> 
<copyright> Tus derechos de autor</copyright> 
<license> Licencia de tu tema</license> 
<version> versión de tu tema</version> 
<apiVersion> 3</apiVersion> 
<description> Descripción de tu tema</description> 
<extends> tema_padre</extends> 
</metadata>


Algunas observaciones:

  • nombre: se utilizará como clave en la base de datos. Por lo tanto, debe ser único y no debe tener caracteres especiales (sin espacios). ¡Tenga en cuenta que los casos no se tendrán en cuenta
  • Título: se utilizará para mostrar el nombre de su tema en las diferentes listas. Puede tener caracteres especiales
  • descripción: se utilizará en la lista principal del tema de la encuesta. Puede contener caracteres especiales e incluso código HTML usando
  • extends: opcional, define los temas principales. Entonces, si algún archivo no está presente en este tema (twig/js/css/jpg, etc.), lo buscará en el tema principal.


Si extendiste uno de los 3 temas principales (Vanilla, Bootswatch, Fruity), puedes cambiar el valor "extiende" de un tema principal al otro. Por supuesto, tendrás que restablecer el tema.



La sección de archivos

Éste es importante. Se insertará en la tabla template_configuration, en el campo files_css, files_js, files_print_css como matrices json.

Por ejemplo: la sección de archivos del Tema Material Premium: 

<files> !¡NORTE!<css> 
<add> css/bootstrap-material-design.css</add> 
<add> css/ripples.min.css</add> 
<replace> css/ajaxify.css</replace> 
<replace> css/tema.css</replace> 
<replace> css/personalizado.css</replace> 
<remove> impresionante-bootstrap-checkbox/increíble-bootstrap-checkbox.css</remove> 
</css> !¡NORTE!<js> 
<replace> scripts/tema.js</replace> 
<replace> scripts/ajaxify.js</replace> 
<add> scripts/material.js</add> 
<add> scripts/ripples.min.js</add> 
<replace> scripts/personalizado.js</replace> 
</js> !¡NORTE!<print_css> 
<add> css/print_theme.css</add> 
</print_css> !¡NORTE!</files>

Todos los archivos CSS/JS presentes en esta sección se cargarán al iniciar la encuesta (en modo ajax. Si el modo ajax está desactivado, entonces, por supuesto, todos los archivos se recargan en cada página).


Se agregarán a un Yii Asset Packet según el nombre del tema. Entonces, cuando Asset Manager está activado (el modo de depuración está desactivado), esos archivos se copiarán al directorio tmp con el resto del tema (para que pueda usar la ruta relativa en CSS y JS para acceder a los archivos de imagen). Acerca del administrador de activos en Yii: https://www.yiiframework.com/wiki/148/understanding-assets Acerca de los paquetes en Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#paquetes-detalle


Utilizarán el sistema de herencia. Significa que si agrega un archivo CSS/JS a un tema, pero no está presente en el tema, entonces el motor buscará todos los temas principales de este tema y usará el primero que encuentre. Entonces, si un usuario extiende su tema a través del editor de temas, todos esos archivos se heredarán en su tema. Las palabras clave se refieren a este sistema de herencia.


  • add: agregará el archivo al tema, ¡y a todos sus temas heredados
  • replace: reemplazará el archivo de su tema madre
  • remove: eliminará el archivo de cualquier paquete, incluso el paquete principal (desde 3.14)
Recuerde que puede configurar en config.php 'force_xmlsettings_for_survey_rendering' para que la configuración se lea desde XML en lugar de DB (no es necesario restablecer). Esto facilitará la prueba de las modificaciones de los archivos XML y evitará que desinstale/reinstale el tema en cada modificación del XML.


Algunas observaciones sobre esas palabras clave:


Consejos de herencia

Como se explicó antes, la palabra clave "agregar" puede referirse a un archivo que se encuentra en uno de los temas principales. Por lo tanto, puede "agregar" un archivo en esta sección y aún no tener este archivo en su tema, sino en uno de sus temas principales. El motor examinará todos sus temas principales y utilizará el primero que encuentre. Si no puede encontrar el archivo y el modo de depuración está activado en la configuración y el modo de depuración de la interfaz js está activado en la configuración global, un mensaje en la consola le advertirá. Por ejemplo: si agregamos my_theme:<add> css/inexistente.css</add> , en la consola veremos: 

 (¯`·._.·(¯`·._.· Error de configuración del tema ·._.·´¯)·._.·´¯) 

¡No se puede encontrar el archivo 'css/unexisting.css' definido en el tema 'my_theme'!

Si el modo de depuración está desactivado, no se verá ningún error. El motor simplemente ignorará las declaraciones add incorrectas.


¿Cuándo usar agregar, cuándo usar reemplazar, cuándo puedo dejarlo en el tema principal?

Primero: agregar y reemplazar son la misma palabra clave. Puedes usar uno u otro, el motor hará lo mismo. Son distintos para los lectores humanos, por lo que entienden cuál era su intención.


No puedes agregar un archivo con el mismo nombre que el tema madre: siempre lo reemplazará. Por ejemplo: si tiene un archivo llamado "mi_tema_madre/foo.css" y agrega un archivo llamado "foo.cs" en el tema hijo, solo se agregará "tema_hija/foo.css" al tema. Si desea conservar "mi_tema_madre/foo.css", simplemente elija otro nombre para "hija_tema/foo.css", como "hija_tema/bar.css". Por lo tanto, la palabra clave "agregar" se puede utilizar como palabra clave "reemplazar".


Si se pregunta por qué: esto facilita mucho la generación automática del tema heredado, copiar la sección del archivo funciona de inmediato (no es necesario cambiar el nombre de "agregar" a "reemplazar" al extender un archivo).


Para que quede claro, tomemos el ejemplo de Fruity. Aquí su sección de archivos CSS: 


<css> 
<add> css/variaciones/sea_green.css</add> 
<replace> css/animado.css</replace> 
<replace> css/tema.css</replace> 
<replace> css/personalizado.css</replace> 
</css>


Si miras el archivo custom.css en formato afrutado, es exactamente igual que el de vainilla. Podríamos eliminar el archivo custom.css dentro de fruity, se cargaría el de vanilla. Podríamos eliminar la declaración.<replace> personalizado.css</replace> del manifiesto de Fruity, se utilizará la declaración de vainilla y se cargará el archivo personalizado.css de vainilla.


Entonces, ¿por qué usamos la declaración?<replace> personalizado.css</replace> ¿Dentro del manifiesto frutal? La respuesta es fácil: porque queremos que el usuario final pueda extender el tema frutal, modificar el archivo en su tema local y cargar este archivo modificado desde su tema heredado. Para entenderlo, simplemente extienda afrutado y eche un vistazo al tema ampliado. El tema extendido ni siquiera tiene el archivo custom.css. Entonces se utilizará el de afrutado. Pero: si el usuario crea este archivo en el tema extendido (haciendo clic en "extender" en el editor de temas), este archivo se cargará desde su tema.


Entonces, en general: si crea un tema desde cero sin extender ningún tema, simplemente use la instrucción add para agregar sus archivos css/js. Fácil. si crea un tema que extiende otro tema y no desea que los usuarios puedan extender el archivo css/js del tema principal: no use la instrucción add en su manifiesto. Los archivos aún se cargarán desde la configuración del tema principal. si crea un tema que extiende otro tema y desea reemplazar un archivo del tema principal: use la palabra clave reemplazar (la palabra clave agregar tendrá el mismo resultado) si crea un tema que extiende otro tema, si no reemplaza un archivo determinado de css/js, pero desea que los usuarios puedan extender este archivo: entonces use la declaración "reemplazar" en su manifiesto para Este archivo. Incluso si no reemplaza el archivo, al usar la palabra clave reemplazar en el manifiesto: permite al usuario hacerlo si así lo desea.


Sólo este último caso necesita un poco de gimnasia mental para comprenderlo, todos los demás casos son triviales.


También puedes registrar archivos CSS y JS directamente desde el código twig. Esos archivos se cargarán sólo cuando se solicite el archivo twig. Si desea que los usuarios puedan heredar esos archivos JS/Css del editor de temas, recuerde usar las funciones Template:RegisterTemplateCssFile('my style.css') y Template:RegisterTemplateScript('my script.js') . Si no utiliza esas funciones, su tema puede funcionar, pero la herencia se romperá. ¡Es la misma lógica que la función Template:Image('my picture.jpg')

La palabra clave eliminar

La palabra clave eliminar solo está disponible desde 3.14. Con este, puede eliminar cualquier archivo/css de cualquier paquete, incluso los principales. Se utiliza en Material Premium Theme para eliminar los archivos de Awseome Bootstrap Checkbox: 

<remove> impresionante-bootstrap-checkbox/increíble-bootstrap-checkbox.css</remove>

por lo que debe usar la misma sintaxis que el archivo del paquete (por ejemplo: "awesome-bootstrap-checkbox.css" solo sin la ruta de su carpeta no funcionaría). Encontrará la lista completa de paquetes principales y sus archivos en /application/config/packages.php y config/third_party.php. Por ejemplo, para awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56 

 'css'=> array(
 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
 ),


Otra forma de encontrar el nombre exacto que se usará en la etiqueta de eliminación es activar el administrador de activos (desactivando el modo de depuración o configurando 'use_asset_manager'=>true en la configuración). Entonces, la ruta a utilizar será la que está justo después del directorio aleatorio en el directorio tmp. Por ejemplo, para awesome-bootstrap-checkbox.css: 

 
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

Archivos que no debes eliminar:

jquery-3.1.1.min.js: necesario

jquery-migrate-3.0.0.min.js: necesario

survey.js: necesario

moment-with-locales.min.js: necesario para el tipo de pregunta de fecha (y algunas otras, creo)

em_javascript.js: necesario para todos los javascript de ExpressionScript

La sección de opciones

Esta sección es relativa a la opción de su tema. Se utilizará para alimentar las "opciones" archivadas de la tabla template_configuration como una matriz json.

Más información

Algunas notas

NOTA: si editas el archivo XML de un tema, debes desinstalar y reinstalar el tema para que se tenga en cuenta.

NOTA: para evitar eso, puede forzar el uso del XML en lugar de la base de datos. En config.php, active el modo de depuración y descomente:

'force_xmlsettings_for_survey_rendering' => true, // Descomentar si desea forzar el uso del archivo XML en lugar de la base de datos (para facilitar el desarrollo del tema)

Cuidado: todo se cargará desde el XML (opciones incluidas, etc)


NOTA: si edita manualmente los archivos CSS/JS (sin usar el Editor de temas) y si el modo de depuración está desactivado, ahora puede forzar la eliminación del activo. En "Configuración global", "Pestaña General", haga clic en el botón "Borrar caché de activos".

NOTA: si eliminas la sección

Retrieved from "http://manual.limesurvey.org/index.php?title=New_Template_System_in_LS3.x/es&oldid=228156"