Actions

Theme editor/fr: Difference between revisions

From LimeSurvey Manual

(Updating to match new version of source page)
(Created page with "===checkbox-text-item=== {|class=wikitable !'''Question'''!!'''Type de question'''!!'''éléments''' |- |choix_multiples_avec_comments|| P || li |- |choix multiple|| M || li...")
 
(140 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<languages />  
<languages />  
<div class="mw-translate-fuzzy">
==Présentation==
=Introduction=
</div>


<div class="mw-translate-fuzzy">
LimeSurvey dispose d'un système avancé de thèmes et de styles offrant aux développeurs un moyen efficace de personnaliser l'apparence de l'enquête. Depuis LS3, le terme '''"modèles"''' a été remplacé par le terme '''"thèmes"'''. Les '''Thèmes''' permettent de contrôler le style des pages d'une enquête. Un administrateur d'enquête peut sélectionner un thème par défaut qui sera utilisé pour chaque enquête afin de la personnaliser davantage. '''Thèmes''' est livré avec des options qui fournissent à un administrateur sans compétence en codage un moyen simple d'ajouter un logo sur la page d'accueil, de modifier les couleurs d'arrière-plan, de sélectionner une police, etc.
LimeSurvey dispose d'un moteur de rendu de modèles que l'on peut trouver dans beaucoup d'applications web. On appellera ceci "Modèles" dans cette documentation. Les Modèles permettent de contrôler l'affichage et le rendu des pages lors de la navigation dans le questionnaire. Un administrateur de questionnaire peut choisir le modèle à utiliser pour chacun de ses questionnaires. Les changements dans un Modèle vont du simple ajout d'un logo sur la page d'accueil, au fait de modifier les couleurs d'arrière-plan, ou pourquoi pas des couleurs spécifiques pour certains types de questions.
</div>




<div class="mw-translate-fuzzy">
LimeSurvey est livré avec 3 thèmes. Ces thèmes initiaux sont définis par des répertoires situés dans le répertoire "themes/survey/" de l'installation de LimeSurvey. Chaque thème possède son propre répertoire. Au sein du répertoire principal d'un thème vous trouverez un fichier de configuration en XML, et de nombreux répertoires contenant les vues '''themes (.twig)''', '''feuilles de style en cascade (.css)''', '' 'scripts''', '''images''' ('''.jpg''' ou '''.png'''), et peut-être d'autres.  
LimeSurvey dispose dès l'installation d'un ensemble de modèles. Ces modèles de base sont placés dans des répertoires distincts à l'intérieur du répertoire "templates" dans une installation de LimeSurvey. A la racine d'un répertoire de modèle, on trouve de nombreux fichiers tels que : '''fichiers de templates (.pstpl)''', '''fichiers de style (.css)''', '''fichiers images (.jpg ou .png)''' et d'autres encore.
</div>




Since LimeSurvey 2.50, the theme engine uses [http://getbootstrap.com/docs/3.3/ Bootstrap 3] as CSS framework. Since Bootstrap 3 is a standard framework, developers will find a lot of documentation, tutorials and forum threads about it on the internet.  
Depuis LimeSurvey 2.50, le moteur de thème utilise [http://getbootstrap.com/docs/3.3/ Bootstrap 3] comme framework CSS. Étant donné que Bootstrap 3 est un framework standard, les développeurs trouveront de nombreuses documentations, tutoriels et fils de discussion à ce sujet sur Internet.  




Since LimeSurvey 3, the theme engine uses [https://twig.symfony.com Twig], so the theme developers can change the logic of the survey rendering in a safe and easy way. Twig replace the old system of replacement keywords that was used in the previous versions. The logic that was used to generate the HTML of the keywords is now available inside the theme's views.  
Depuis LimeSurvey 3, le moteur de thème utilise [https://twig.symfony.com Twig], afin que les développeurs de thèmes puissent modifier la logique du rendu de l'enquête de manière sûre et simple. Twig remplace l'ancien système de mots-clés de remplacement utilisé dans les versions précédentes. La logique utilisée pour générer le HTML des mots-clés est désormais disponible dans les vues du thème.  




Snippet from Vanilla Theme:
Extrait du thème Vanilla :


<syntaxhighlight lang="twig" enclose="div">
<syntaxhighlight lang="twig">
<div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}>
<div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}>  
    {# NOTE: If you want to customize the question rendering, use a question theme #}
{# REMARQUE : Si vous souhaitez personnaliser le rendu des questions, utilisez un thème de question #}!N ! {{ uneQuestion.réponse | brut }}
    {{ aQuestion.answer | raw }}
</div>  
</div>
</syntaxhighlight>
</syntaxhighlight>


Themes, being HTML and Twig code, tend to define the positioning and type of text to be displayed and similar structural features of the page. They often reference or include other files. Most of them reference a common cascading style sheets (CSS) file that defines the font style, color, size, background, and similar parameters common to all pages in the survey. Style sheets reference HTML '''class''' parameters that are associated with the various types of objects in the HTML code. This allows the style sheet to define how to display each of the many types of text or other objects that may appear in multiple places. There are unique classes for each question type in LimeSurvey and thus giving detailed control over the appearance of each. Image files, like logos or special progress-bar constructors, may be referenced as well in the Theme file. Finally, special keywords in curly braces are replaced with text defined in the survey for each language translation correspondent (for example, the 'Survey Title' or 'Question Text' for each language defined).
Les thèmes, à savoir le code HTML et Twig, ont tendance à définir le positionnement et le type de texte à afficher ainsi que les caractéristiques structurelles similaires de la page. Ils font souvent référence ou incluent d’autres fichiers. La plupart d'entre eux font référence à un fichier CSS (feuilles de style en cascade) commun qui définit le style de police, la couleur, la taille, l'arrière-plan et des paramètres similaires communs à toutes les pages de l'enquête. Les feuilles de style font référence aux paramètres HTML '''class''' associés aux différents types d'objets dans le code HTML. Cela permet à la feuille de style de définir comment afficher chacun des nombreux types de texte ou autres objets pouvant apparaître à plusieurs endroits. Il existe des classes uniques pour chaque type de question dans LimeSurvey, ce qui permet un contrôle détaillé de l'apparence de chacune. Les fichiers image, comme les logos ou les constructeurs spéciaux de barre de progression, peuvent également être référencés dans le fichier Thème. Enfin, les mots-clés spéciaux entre accolades sont remplacés par le texte défini dans l'enquête pour chaque langue de traduction correspondante (par exemple, le « Titre de l'enquête » ou le « Texte de la question » pour chaque langue définie).


If you create a new custom theme, please consider contributing it back to the LimeSurvey community and make it available to others. With your help, we can grow our repository of themes, surveys, and other add-ons to make LimeSurvey even better!  
Si vous créez un nouveau thème personnalisé, pensez à le contribuer à la communauté LimeSurvey et à le mettre à la disposition des autres. Avec votre aide, nous pouvons développer notre référentiel de thèmes, d'enquêtes et d'autres modules complémentaires pour rendre LimeSurvey encore meilleur !  
See our [https://www.limesurvey.org/index.php?option=com_sobipro&sid=55:Templates&Itemid=729 LimeSurvey template repository] where you can share your templates.
Consultez notre [https://www.limesurvey.org/index.php?option=com_sobipro&sid=55:Templates&Itemid=729 Dépôt de modèles LimeSurvey] où vous pouvez partager vos modèles.


<div class="mw-translate-fuzzy">
==Création d'un nouveau thème==
=Créer un nouveau modèle=
</div>


Afin de pouvoir créer un nouveau modèle (ou éditer un modèle existant), vous devez disposer de la permission d'édition de modèles dans LimeSurvey, ainsi que des droits adéquats sur le système de fichiers sur le serveur qui héberge votre installation de LimeSurvey.
Afin de pouvoir créer un nouveau modèle (ou éditer un modèle existant), vous devez disposer de la permission d'édition de modèles dans LimeSurvey, ainsi que des droits adéquats sur le système de fichiers sur le serveur qui héberge votre installation de LimeSurvey.


<div class="mw-translate-fuzzy">
<div class="simplebox"><span style='color:red'>'''Note d'avertissement :'''</span> Si vous changez de thème, vous pourriez également affecter toutes les enquêtes préexistantes de votre installation LimeSurvey. Les thèmes sont une fonctionnalité avancée qui nécessite de l’expérience et des connaissances HTML.</div>
<div class="simplebox">'''Point d'attention:''' Les modifications sur les modèles peuvent affecter tous les questionnaires d'une installation. C'est une fonctionnalité avancée qui peut demander quelques essais avant d'avoir un résultat correct si vous n'êtes pas familier avec le code HTML et ses méthodes.</div>
</div>


The preferred way to create a new theme is through the '''Theme Editor''' (see below), which is located under '''Configuration''' on the top toolbar. Some users prefer to work directly with theme files so that they can use their favorite text editor instead of the web interface. In this case, still use the Theme Editor to first create your new theme. This will create a new base theme with all the files you need in the ''LimeSurvey_web_root/upload/themes/survey/your_new_template'' directory. From there you can use your text editor to manually adjust the template files.
La meilleure façon de créer un nouveau thème consiste à utiliser l'éditeur de thème (voir ci-dessous), qui se trouve sous « Configuration » dans la barre d'outils supérieure. Certains utilisateurs préfèrent travailler directement avec les fichiers de thème afin de pouvoir utiliser leur éditeur de texte préféré au lieu de l'interface Web. Dans ce cas, utilisez toujours l’éditeur de thème pour créer d’abord votre nouveau thème. Cela créera un nouveau thème de base avec tous les fichiers dont vous avez besoin dans le répertoire ''LimeSurvey_web_root/upload/themes/survey/your_new_template''. À partir de là, vous pouvez utiliser votre éditeur de texte pour ajuster manuellement les fichiers modèles.


<div class="simplebox">'''Permissions Note:''' on unix/linux systems, these theme files will be owned by the group and user where the web server is running (may be "www" for some systems). So, make sure you have the proper permisisons to edit these files, When you save them, make sure they don't change ownership! This way, you can still use the web Theme Editing interface if needed.</div><br />
<div class="simplebox">'''Remarque sur les autorisations :''' sur les systèmes Unix/Linux, ces fichiers de thème appartiendront au groupe et à l'utilisateur sur lesquels le serveur Web est exécuté (peut être « www » pour certains systèmes). Assurez-vous donc que vous disposez des autorisations appropriées pour modifier ces fichiers. Lorsque vous les enregistrez, assurez-vous qu'ils ne changent pas de propriétaire ! De cette façon, vous pouvez toujours utiliser l'interface d'édition de thème Web si nécessaire.</div><br />


A number of 'public' elements of LimeSurvey can be adjusted by a series of themes. The next section provides a very brief explanation of these templates.
Un certain nombre d'éléments « publics » de LimeSurvey peuvent être ajustés par une série de thèmes. La section suivante fournit une très brève explication de ces modèles.


{{Note|Themes files are a complex feature. Besides HTML, you should also be familiar with CSS, Twig, and JavaScript.}}
{{Remarque|Les fichiers de thèmes sont une fonctionnalité complexe. Outre HTML, vous devez également être familier avec CSS, Twig et JavaScript.}}


=The LimeSurvey theme editor=
=L'éditeur de thème LimeSurvey=


'''Theme Editor''': '''Configuration''' > '''Themes'''> '''Theme Editor'''
'''Éditeur de thème''' : '''Configuration''' > '''Thèmes'''> '''Éditeur de thème'''
The Theme Editor is only available to users [[Manage users#Set global permissions for a user|with the Templates permission]] and to superadministrators.  
L'éditeur de thème est uniquement disponible pour les utilisateurs [[Gérer les utilisateurs#Définir autorisations globales pour un utilisateur|avec l'autorisation Modèles]] et pour les superadministrateurs.  




{{Alert|title=Attention|text=A theme that is not correctly constructed can cause a survey (that uses the respective template) to become inoperable. }}
{{Alert|title=Attention|text=Un thème qui n'est pas correctement construit peut rendre inutilisable une enquête (qui utilise le modèle correspondant). }}




The LimeSurvey theme editor allows you to edit the contents of your themes online. To start the Theme Editor: click '''Themes''' in the '''Configuration''' menu, and then click the '''Theme editor''' button next of the theme you want to edit or extend.  
L'éditeur de thèmes LimeSurvey vous permet d'éditer le contenu de vos thèmes en ligne. Pour démarrer l'éditeur de thème : cliquez sur '''Thèmes''' dans le menu '''Configuration''', puis cliquez sur le bouton '''Éditeur de thème''' à côté du thème que vous souhaitez modifier ou étendre.  




[[File:Themes menu.png]]
[[File:Themes menu.png]]
[[File:Theme editor button.png|''The button to access the theme editor for Bootswatch theme'']]
[[File:Theme editor button.png|''Le bouton pour accéder à l'éditeur de thème pour le thème Bootswatch'']]




The template editor page allows you to select the template you would like to edit/view.  
La page de l'éditeur de modèles vous permet de sélectionner le modèle que vous souhaitez modifier/afficher.  




Line 74: Line 63:




The following options are available:
Les options suivantes sont disponibles :




*'''Create''': Allows you to create a new template. In order not to start from scratch, the template 'default' is copied.
*'''Créer''' : Permet de créer un nouveau modèle. Afin de ne pas repartir de zéro, le modèle 'par défaut' est copié.
*'''Import''': Allows you to import a template from a ZIP file.
*'''Importer''' : Permet d'importer un modèle à partir d'un fichier ZIP.
*'''Export''': Allows you to export the current template to a ZIP file.
*'''Exporter''' : Vous permet d'exporter le modèle actuel vers un fichier ZIP.
*'''Copy''': Allows you to make a new template by copying the current one.
*'''Copier''' : Vous permet de créer un nouveau modèle en copiant celui actuel.
*'''Rename''': Allows you to change the name of the template. It is generally used after copying or importing a template.
*'''Renommer''' : Vous permet de changer le nom du modèle. Il est généralement utilisé après avoir copié ou importé un modèle.
*'''Template''': A drop-down list that shows all the available templates that are located in your LimeSurvey installation.
*'''Template''' : Une liste déroulante qui affiche tous les modèles disponibles qui se trouvent dans votre installation LimeSurvey.


*'''Screen''': A drop-down list which allows you to choose which particular survey page of that template you want to view.
*'''Écran''' : Une liste déroulante qui vous permet de choisir la page d'enquête particulière de ce modèle que vous souhaitez afficher.
*'''Return to admin panel'''.
*'''Retour au panneau d'administration'''.


===Import/Export/Copy a template===
===Importer/Exporter/Copier un modèle===


When you '''export '''a template, a ZIP-file archive with all template files your will be created (.pstpl files, images, css files, ...). You can '''import''' the exported zip-file into another LimeSurvey installation by using the import feature or you can manually copy the archive into another LimeSurvey installation and extract it into the corresponding [[Theme editor#Template files location|template directory there]].  
Lorsque vous '''exportez '''un modèle, une archive de fichier ZIP avec tous les fichiers de modèle sera créée (fichiers .pstpl, images, fichiers css, ...). Vous pouvez '''importer''' le fichier zip exporté dans une autre installation de LimeSurvey en utilisant la fonction d'importation ou vous pouvez copier manuellement l'archive dans une autre installation de LimeSurvey et l'extraire dans l'[[Éditeur de thème#Emplacement des fichiers modèles|modèle correspondant répertoire là]].  


However, it is best to use the LimeSurvey template import/export/copy functions in the template editor.
Cependant, il est préférable d'utiliser les fonctions d'importation/exportation/copie de modèle LimeSurvey dans l'éditeur de modèle.


===Page structure / Template use===
===Structure de la page / Utilisation du modèle===
*'''The Welcome Page:''' startpage.pstpl, welcome.pstpl, privacy.pstpl, navigator.pstpl, endpage.pstpl
*'''La page de bienvenue :''' startpage.pstpl, bienvenue.pstpl, private.pstpl, navigator.pstpl, endpage.pstpl
*'''The Questions Pages:''' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
*'' 'Les pages de questions :''' startpage.pstpl, Survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
*'''The Final Page:''' startpage.pstpl, assessment.pstpl, completed.pstpl, endpage.pstpl
*'''La page finale :''' page de démarrage .pstpl, évaluation.pstpl, terminé.pstpl, page de fin.pstpl


<div class="mw-translate-fuzzy">
===Fichiers modèles===
==Les fichiers de templates==
</div>


The following template files are used to produce your public survey and must exist in any new template folder you create:
Les fichiers modèles suivants sont utilisés pour produire votre enquête publique et doivent exister dans tout nouveau dossier de modèles que vous créez :
*'''startpage.pstpl:''' Produces the start of each html page. It starts at the "<head>" tag, and should not contain the "<html>" tag. This 'very beginning' of a standard html page is written by the scripts. Please ensure that your startpage.pstpl files contains a <body> tag. Even though many browsers do not require strict adherence to the W3 HTML standards, the LimeSurvey script needs to find a <body> tag to run certain javascript elements. It is not common to see many 'keywords' used in the startpage.pstpl file. However, you may wish to put the {SURVEYNAME} into the title. The startpage.pstpl file can contain code that ends in the corresponding endpage.pstpl file. For example, you can start a table in this file and close the table in the endpage.pstpl file. The startpage.pstpl and endpage.pstpl files wrap around every possible page used by LimeSurvey.
*'''startpage.pstpl:''' Produit le début de chaque page HTML. Cela commence au "<head> ", et ne doit pas contenir le "<html> ". Ce "tout début" d'une page HTML standard est écrit par les scripts. Veuillez vous assurer que vos fichiers startpage.pstpl contiennent un<body> étiqueter. Même si de nombreux navigateurs n'exigent pas le strict respect des normes HTML W3, le script LimeSurvey doit trouver une balise pour exécuter certains éléments javascript. Il n'est pas courant de voir de nombreux « mots-clés » utilisés dans le fichier startpage.pstpl. Cependant, vous souhaiterez peut-être mettre le {SURVEYNAME} dans le titre. Le fichier startpage.pstpl peut contenir du code qui se termine par le fichier endpage.pstpl correspondant. Par exemple, vous pouvez démarrer une table dans ce fichier et fermer la table dans le fichier endpage.pstpl. Les fichiers startpage.pstpl et endpage.pstpl entourent toutes les pages possibles utilisées par LimeSurvey.
*'''survey.pstpl:''' This template is the second used on most pages and provides a space to put the survey name and description. This template does not have a corresponding 'closing' template, and subsequently you should close all tags opened in this template file (i.e.: don't leave a table open here because there is nowhere else to close it).
*'''survey.pstpl:''' Ce modèle est le deuxième utilisé sur la plupart des pages et fournit un espace pour mettre le nom de l'enquête. et description. Ce modèle n'a pas de modèle de « fermeture » correspondant, et par la suite vous devez fermer toutes les balises ouvertes dans ce fichier modèle (c'est-à-dire : ne laissez pas de table ouverte ici car il n'y a nulle part où la fermer).
*'''welcome.pstpl:''' This template is only used in the welcome screen (which is also on the main page for 'all in one' surveys). You can use this to print out the welcome text, and other information that should be provided in the introduction. Like the 'survey.pstpl' file, there is no corresponding 'closing' template, so all tags opened in this template file should be closed as well.
*' ''welcome.pstpl:''' Ce modèle n'est utilisé que dans l'écran d'accueil (qui se trouve également sur la page principale pour les enquêtes « tout-en-un »). Vous pouvez l'utiliser pour imprimer le texte de bienvenue et d'autres informations qui doivent être fournies dans l'introduction. Comme le fichier 'survey.pstpl', il n'y a pas de modèle de 'fermeture' correspondant, donc toutes les balises ouvertes dans ce fichier modèle doivent également être fermées.
*'''startgroup.pstpl:''' This template can provide a 'summary' wrap around for questions within a group. It has a matching 'endgroup.pstpl' template that can be used to close any opened tags in this file, so you can open a table within this.
*'''startgroup.pstpl:''' Ce modèle peut fournir un « résumé » pour les questions au sein d'un groupe. Il dispose d'un modèle 'endgroup.pstpl' correspondant qui peut être utilisé pour fermer toutes les balises ouvertes dans ce fichier, afin que vous puissiez ouvrir une table à l'intérieur de celui-ci.
*'''groupdescription.pstpl:''' This template file is used to display a description of a group. Please note that in the survey settings (access the ''Presentation & navigation settings'' by clicking the '''Presentation''' tab) you can set if the group description should be shown or not. If not, then this file is not included at all.
*'''groupdescription.pstpl:''' Ce fichier modèle est utilisé pour afficher une description d'un groupe. Veuillez noter que dans les paramètres de l'enquête (accédez aux « Paramètres de présentation et de navigation » en cliquant sur l'onglet « Présentation ») vous pouvez définir si la description du groupe doit être affichée ou non. Si ce n'est pas le cas, ce fichier n'est pas inclus du tout.
*'''question.pstpl:''' This file contains the question, answer, and help text sections of your survey. In the "group by group" and "all in one" surveys, this template is cycled repeatedly with each question. There is no corresponding closing file for this and all tags should be closed.
*'''question.pstpl:''' Ce fichier contient les sections de question, de réponse et de texte d'aide de votre enquête. Dans les enquêtes « groupe par groupe » et « tout-en-un », ce modèle est répété de manière répétée avec chaque question. Il n'existe pas de fichier de fermeture correspondant et toutes les balises doivent être fermées.
*'''question_start.pstpl:''' This file contains the individual elements found at the start of a question. It is included within 'question.pstpl' via the {QUESTION} keyword. It is intended to allow template designers more control over the layout of a question. This template sits outside the normal templating system and '''was superseeded (as of LimeSurvey 1.87)'''. All keywords from this template are now available directly in question.pstpl.  
*'''question_start.pstpl:''' Ce fichier contient les éléments individuels trouvés au début d'une question. Il est inclus dans « question.pstpl » via le mot-clé {QUESTION}. Il est destiné à permettre aux concepteurs de modèles de mieux contrôler la présentation d'une question. Ce modèle se situe en dehors du système de modèles normal et '''a été remplacé (à partir de LimeSurvey 1.87)'''. Tous les mots-clés de ce modèle sont désormais disponibles directement dans question.pstpl.  
*'''completed.pstpl:''' This page is displayed as the final page when the survey responses have been saved and the survey is over. It can be used to display a "forwarding link" as set in the survey setup.
*'''completed.pstpl:''' Cette page s'affiche comme page finale lorsque les réponses à l'enquête ont été enregistrées et que l'enquête est terminée. Il peut être utilisé pour afficher un "lien de transfert" tel que défini dans la configuration de l'enquête.
*'''endgroup.pstpl:''' This file closes the group, and can be used to close off any tags opened in the startgroup.pstpl file
*'''endgroup.pstpl:''' Ce fichier ferme le groupe et peut être utilisé pour fermer toutes les balises ouvertes dans le Fichier startgroup.pstpl
*'''navigator.pstpl:''' This file contains the buttons that navigate through the survey, "next", "prev", "last", "submit", "save so far"  and the "clear all" link. It is used in all pages except the completed page.
*'''navigator.pstpl:''' Ce fichier contient les boutons qui permettent de naviguer dans l'enquête, "suivant", "précédent", "dernier", "soumettre", "enregistrer jusqu'à présent". et le lien "Tout effacer". Il est utilisé dans toutes les pages sauf la page complétée.
*'''printanswers.pstpl:''' This file has the HTML wrapper necessary for the print version of the survey.
*'''printanswers.pstpl:''' Ce fichier contient le wrapper HTML nécessaire à la version imprimée de l'enquête.
*'''print_group.pstpl:''' This file is the same as startgroup.pstpl and endgroup.pstpl, but for the print version of the survey.
*'''print_group.pstpl :''' Ce fichier est le même que startgroup.pstpl et endgroup.pstpl, mais pour la version imprimée de l'enquête.
*'''print_question.pstpl:''' This file is the same as question.pstpl, but for the print version of the survey.
*'''print_question.pstpl:''' Ce fichier est le même que question.pstpl , mais pour la version imprimée de l'enquête.
*'''print_survey.pstpl:''' This file is the same as survey.pstpl, but for the print version of the survey.
*'''print_survey.pstpl:''' Ce fichier est le même que Survey.pstpl, mais pour la version imprimée de l'enquête.


<div class="mw-translate-fuzzy">
=== CSS et Javascript ===
== CSS et Javascript ==
</div>


Two files that are always used in a template are template.css (for CSS) and template.js (for Javascript).
Deux fichiers qui sont toujours utilisés dans un modèle sont template.css (pour CSS) et template.js (pour Javascript).
*'''{TEMPLATECSS}:''' Add lines for default css, template.css, and template-rtl.css for rtl language.
*'''{TEMPLATECSS}:''' Ajoutez des lignes pour le CSS par défaut, template.css, et template-rtl.css pour le langage rtl.
*'''{TEMPLATEJS}:''' Add lines for default javascript files, template.js, and all js files needed for LimeSurvey.
*'''{TEMPLATEJS}:''' Ajoutez des lignes pour les fichiers javascript par défaut, template.js et tous les fichiers js nécessaires pour LimeSurvey.


=== Using Bootstrap===
=== Utilisation de Bootstrap===
LimeSurvey has Bootstrap 3 embedded, so you can style all your templates with the well documented Bootstrap classes.
LimeSurvey intègre Bootstrap 3, vous pouvez donc styliser tous vos modèles avec les classes Bootstrap bien documentées.
For more information please refer to the [https://getbootstrap.com Bootstrap documentation].
Pour plus d'informations, veuillez vous référer au [https://getbootstrap.com Bootstrap Documentation].


The [https://github.com/flatlogic/awesome-bootstrap-checkbox Awesome-Bootstrap-Checkbox] plugin is also included. With it, you can use the typical Bootstrap color-classes (info,warning,danger,etc.) also with the suffix "-checkbox" or "-radio", though styling checkboxes and radios as you prefer.
Le plugin [https://github.com/flatlogic/awesome-bootstrap-checkbox Awesome-Bootstrap-Checkbox] est également inclus. Avec lui, vous pouvez utiliser les classes de couleurs Bootstrap typiques (informations, avertissement, danger, etc.) également avec le suffixe "-checkbox" ou "-radio", tout en stylisant les cases à cocher et les radios comme vous préférez.


==== Replacing default CSS or Javascript====
==== Remplacement du CSS ou du Javascript par défaut====


Some questions use specific files for Javascript or CSS. If you need to replace a function, use a cascading system. For javascript function, the last function read is the function used.
Certaines questions utilisent des fichiers spécifiques pour Javascript ou CSS. Si vous devez remplacer une fonction, utilisez un système en cascade. Pour la fonction javascript, la dernière fonction lue est la fonction utilisée.


===Other template files===
===Autres fichiers de modèles===


The '''privacy.pstpl''', '''invitationemail.pstpl''', '''reminderemail.pstpl''', and '''confirmationemail.pstpl''' are no longer used by LimeSurvey and defaults are instead set in the applicable language files. The email messages can now be edited on a survey by survey basis.
Les fichiers '''privacy.pstpl''', '''invitationemail.pstpl''', '''reminderemail.pstpl''' et '''confirmationemail.pstpl''' ne sont plus utilisés par LimeSurvey et les valeurs par défaut sont à la place, défini dans les fichiers de langue applicables. Les messages électroniques peuvent désormais être modifiés enquête par enquête.


===Standard pages===
===Pages standards===


There are ten standard pages that a survey participant may see in the course of taking or accessing the LimeSurvey application. Each is constructed from a number of common '''Template''' files from the '''Template''' specified in the settings of the survey. The table below indicates which template files are used in constructing each of these pages.
Il existe dix pages standard qu'un participant à l'enquête peut voir au cours de l'utilisation ou de l'accès à l'application LimeSurvey. Chacun est construit à partir d'un certain nombre de fichiers '''Modèle''' communs issus du '''Modèle''' spécifié dans les paramètres de l'enquête. Le tableau ci-dessous indique quels fichiers modèles sont utilisés dans la construction de chacune de ces pages.


{| class="wikitable"
{| classe="wikitable"
! '''Survey Pages/'''<br />'''Template Files'''!!Survey<br />List!!Welcome!!Question!!Completed!!Clear All!!Register!!Load!!Save!!Print<br />Answers!!Print<br />Survey
! '''Pages d'enquête/'''<br /> '''Fichiers modèles'''!!Enquête<br /> Liste!!Bienvenue!!Question!!Terminé!!Tout effacer!!S'inscrire!!Charger!!Enregistrer!!Imprimer<br /> Réponses!!Imprimer<br /> Enquête
|-
|-
|SurveyList||align="center" | [[File:check.gif]]|| || || || || || || || ||
|SurveyList||align="center" | [[Fichier:check.gif]]|| || || || || || || || ||
|-
|-
|Welcome|| ||align="center" | [[File:check.gif]]|| || || || || || || ||
|Bienvenue|| ||align="centre" | [[Fichier:check.gif]]|| || || || || || || ||
|-
|-
|Privacy|| ||align="center" | [[File:check.gif]]|| || || || || || || ||
|Confidentialité|| ||align="centre" | [[Fichier:check.gif]]|| || || || || || || ||
|-
|-
|Navigator|| ||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]|| || || || || || ||
|Navigateur|| ||align="centre" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]|| || || || || || ||
|-
|-
|Survey|| || ||align="center" | [[File:check.gif]]|| || ||align="center" | [[File:check.gif]]|| || || ||
|Enquête|| || ||align="centre" | [[Fichier:check.gif]]|| || ||align="centre" | [[Fichier:check.gif]]|| || || ||
|-
|-
|StartGroup|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|StartGroup|| || ||align="centre" | [[Fichier:check.gif]]|| || || || || || ||
|-
|-
|GroupDescription|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|GroupDescription|| || ||align="centre" | [[Fichier:check.gif]]|| || || || || || ||
|-
|-
|Question<span style='color:red'>'''*'''</span>|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|Question <span style='color:red'>'''*'''</span> || || ||align="centre" | [[Fichier:check.gif]]|| || || || || || ||
|-
|-
|EndGroup|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|EndGroup|| || ||align="centre" | [[Fichier:check.gif]]|| || || || || || ||
|-
|-
|Assessment|| || || ||align="center" | [[File:check.gif]]|| || || || || ||
|Évaluation|| || || ||align="centre" | [[Fichier:check.gif]]|| || || || || ||
|-
|-
|Completed|| || || ||align="center" | [[File:check.gif]]|| || || || || ||
|Terminé|| || || ||align="centre" | [[Fichier:check.gif]]|| || || || || ||
|-
|-
|ClearAll|| || || || ||align="center" | [[File:check.gif]]|| || || || ||
|EffacerTout|| || || || ||align="centre" | [[Fichier:check.gif]]|| || || || ||
|-
|-
|Register|| || || || || ||align="center" | [[File:check.gif]]|| || || ||
|S'inscrire|| || || || || ||align="centre" | [[Fichier:check.gif]]|| || || ||
|-
|-
|Load|| || || || || || ||align="center" | [[File:check.gif]]|| || ||
|Charger|| || || || || || ||align="centre" | [[Fichier:check.gif]]|| || ||
|-
|-
|Save|| || || || || || || ||align="center" | [[File:check.gif]]|| ||
|Enregistrer|| || || || || || || ||align="centre" | [[Fichier:check.gif]]|| ||
|-
|-
|PrintAnswers|| || || || || || || || ||align="center" | [[File:check.gif]]||
|ImprimerRéponses|| || || || || || || || ||align="centre" | [[File:check.gif]]||
|-
|-
|Print Survey || || || || || || || || || ||align="center" | [[File:check.gif]]
|Imprimer l'enquête || || || || || || || || || ||align="centre" | [[File:check.gif]]
|-
|-
|Print Group || || || || || || || || || ||align="center" | [[File:check.gif]]
|Groupe d'impression || || || || || || || || || ||align="centre" | [[Fichier:check.gif]]
|-
|-
|Print Question || || || || || || || || || ||align="center" | [[File:check.gif]]
|Imprimer la question || || || || || || || || || ||align="centre" | [[Fichier:check.gif]]
|-
|-
|StartPage<br />EndPage<br />Template.css||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]||  
|Page de démarrage<br /> Page de fin<br /> Modèle.css||align="center" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]||align="center" | [[Fichier:check.gif]]||  
|}
|}


<span style='color:red'>'''*'''</span>NOTE: In version 1.90+, this replaces question.pstpl AND question_start.pstpl. If you are using an old custom template, you need to add the following line to the beginning of question.pstpl:<syntaxhighlight lang="php" enclose="div"><div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}"></syntaxhighlight>And then add the corresponding closing tag to the end of question.pstpl:<syntaxhighlight lang="php" enclose="div"></div></syntaxhighlight>
<span style='color:red'>'''*'''</span> REMARQUE : Dans la version 1.90+, cela remplace question.pstpl ET question_start.pstpl. Si vous utilisez un ancien modèle personnalisé, vous devez ajouter la ligne suivante au début de question.pstpl : <syntaxhighlight lang="php"><div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}"></syntaxhighlight> Et puis ajoutez la balise de fermeture correspondante à la fin de question.pstpl :<syntaxhighlight lang="php"></div></syntaxhighlight>


<span style='color:red'>'''*'''</span>NOTE: In version 1.91 and earlier, LimeSurvey js files are not included in the template. In version 2, '''you have to use {TEMPLATEJS} in one of your template file''' to add the link to the js file. You can add it in startpage.pstpl or in endpage.pstpl. You can remove the {TEMPLATEURL}/template.js line and you have to replace with {TEMPLATEJS} to update a personal template.
<span style='color:red'>'''*'''</span> REMARQUE : Dans les versions 1.91 et antérieures, les fichiers LimeSurvey js ne sont pas inclus dans le modèle. Dans la version 2, '''vous devez utiliser {TEMPLATEJS} dans l'un de vos fichiers modèles''' pour ajouter le lien vers le fichier js. Vous pouvez l'ajouter dans startpage.pstpl ou dans endpage.pstpl. Vous pouvez supprimer la ligne {TEMPLATEURL}/template.js et vous devez la remplacer par {TEMPLATEJS} pour mettre à jour un modèle personnel.


===The file control section===
===La section de contrôle des fichiers===


In the "file control" window on the left, you can click one of the template files that is used to compile the page. You can see the ''Screen part'', JavaScript, and CSS files. The HTML code for that file will then appear in the "Now editing" window in the center. If the template is editable (determined by directory permissions) you can then make any changes and save them.
Dans la fenêtre "Contrôle des fichiers" à gauche, vous pouvez cliquer sur l'un des fichiers modèles utilisés pour compiler la page. Vous pouvez voir la « Partie écran », les fichiers JavaScript et CSS. Le code HTML de ce fichier apparaîtra alors dans la fenêtre « Modification en cours » au centre. Si le modèle est modifiable (déterminé par les autorisations du répertoire), vous pouvez alors apporter des modifications et les enregistrer.


<center>[[File:File Control Section.png|center]]</center>
<center>[[File:File Control Section.png|center]]</center>




The "Other files" window shows a list of all other files from the template directory. You can use the right side to '''upload and select image files (your pics, logos,...) or other files needed to create your template'''.  
La fenêtre "Autres fichiers" affiche une liste de tous les autres fichiers du répertoire de modèles. Vous pouvez utiliser le côté droit pour '''télécharger et sélectionner des fichiers image (vos photos, logos,...) ou d'autres fichiers nécessaires à la création de votre modèle'''.  




Instead of using a link for each picture, utilize the field string {TEMPLATEURL}. So, instead of:
Au lieu d'utiliser un lien pour chaque image, utilisez la chaîne de champ {TEMPLATEURL}. Donc au lieu de :


<syntaxhighlight lang="html4strict" enclose="div">img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'</syntaxhighlight>  
<syntaxhighlight lang="html4strict">img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'</syntaxhighlight>  
You can use {{NewIn|2.50}}:
Vous pouvez utiliser {{NewIn|2.50}}:
<syntaxhighlight lang="html4strict" enclose="div">img src='{TEMPLATEURL}files/mypicture.jpg'</syntaxhighlight>
<syntaxhighlight lang="html4strict"> img src='{TEMPLATEURL}fichiers/monimage.jpg'</syntaxhighlight>


In LimeSurvey versions before 2.50 use:
Dans les versions de LimeSurvey antérieures à 2.50, utilisez :
<syntaxhighlight lang="html4strict" enclose="div">img src='{TEMPLATEURL}mypicture.jpg'</syntaxhighlight>
<syntaxhighlight lang="html4strict"> img src='{TEMPLATEURL}monimage.jpg'</syntaxhighlight>


A "sample" of the template page you are editing will be visible in the bottom of the screen. There is no way to delete a template from the template editor. This must be done by accessing the underlying directory and deleting manually the files from there. You also have the possibility to select different screen resolutions in order to better evaluate the feel and look of the template.
Un « échantillon » du modèle de page que vous modifiez sera visible en bas de l'écran. Il n'existe aucun moyen de supprimer un modèle de l'éditeur de modèles. Cela doit être fait en accédant au répertoire sous-jacent et en supprimant manuellement les fichiers à partir de là. Vous avez également la possibilité de sélectionner différentes résolutions d'écran afin de mieux évaluer la convivialité et l'apparence du modèle.


<div class="simplebox">'''Note:''' The shipped templates cannot be edited using the template editor. If you want to modify them, create a copy first and edit the copy.</div>
<div class="simplebox">'''Remarque :''' Les modèles livrés ne peuvent pas être modifiés à l'aide de l'éditeur de modèles. Si vous souhaitez les modifier, créez d'abord une copie et modifiez la copie.</div>


===Template files location===
===Emplacement des fichiers modèles===


LimeSurvey stores each of the 'standard' templates in their own distinct sub-directory within the ''/templates'' directory that is kept in the public directory with the other LimeSurvey public files. Customized user templates are stored in the ''/upload/templates'' directory.
LimeSurvey stocke chacun des modèles « standard » dans son propre sous-répertoire distinct au sein du répertoire « /templates » qui est conservé dans le répertoire public avec les autres fichiers publics LimeSurvey. Les modèles utilisateur personnalisés sont stockés dans le répertoire ''/upload/templates''.


There should '''ALWAYS''' be a "default" directory in the templates directory. This template is used by default and as a fall-back if a template folder doesn't exist, or can't be found. It comes installed by default.
Il devrait TOUJOURS y avoir un répertoire "par défaut" dans le répertoire des modèles. Ce modèle est utilisé par défaut et comme solution de secours si un dossier de modèles n'existe pas ou est introuvable. Il est installé par défaut.


You can use any image files that you upload into the template management area with the help of this syntax:
Vous pouvez utiliser n'importe quel fichier image que vous téléchargez dans la zone de gestion des modèles à l'aide de cette syntaxe :


<syntaxhighlight lang="php" enclose="div">{TEMPLATEURL}filename.xyz</syntaxhighlight>
<syntaxhighlight lang="php">{TEMPLATEURL}nomfichier.xyz</syntaxhighlight>


==Styling questions with CSS==
==Questions de style avec CSS==


Styling of questions in CSS has become much easier. Each question type has now a unique class. The mandatory questions have an additional mandatory class. For example, for a non-mandatory question:
Le style des questions en CSS est devenu beaucoup plus simple. Chaque type de question possède désormais une classe unique. Les questions obligatoires ont une classe obligatoire supplémentaire. Par exemple, pour une question non obligatoire :


<syntaxhighlight lang="html4strict" enclose="div"><div id="question5" class="gender">
<syntaxhighlight lang="html4strict"><div id="question5" class="gender">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question is mandatory:
et si la question est obligatoire :


<syntaxhighlight lang="html4strict" enclose="div"><div id="question5" class="gender mandatory">
<syntaxhighlight lang="html4strict"><div id="question5" class="gender mandatory">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question is mandatory, but the user didn't answer it or if there is validation on a question:
et si la question est obligatoire, mais que l'utilisateur n'y a pas répondu ou s'il y a validation sur une question :


<syntaxhighlight lang="html4strict" enclose="div"><div id="question5" class="gender mandatory input-error">
<syntaxhighlight lang="html4strict"><div id="question5" class="gender mandatory input-error">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


and if the question has validation applied, but the user hasn't answered correctly:
et si la question a une validation appliquée, mais que l'utilisateur n'a pas répondu correctement :


<syntaxhighlight lang="html4strict" enclose="div"><div id="question6" class="text-short input-error">
<syntaxhighlight lang="html4strict"><div id="question6" class="text-short input-error">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>


==Global classes for question part==
==Classes globales pour la partie question==


These classes are used for each question type. Some question types use only one or two classes, while others may use much more.
Ces classes sont utilisées pour chaque type de question. Certains types de questions n’utilisent qu’une ou deux classes, tandis que d’autres peuvent en utiliser beaucoup plus.


{| class="wikitable alternance"
{| class="alternance wikitable"
|+ Global classes
|+ Classes globales
|-
|-
! scope="col" | Class name
! scope="col" | Nom de la classe
! scope="col" | Part
! scope="col" | Partie
! scope="col" | Question type
! scope="col" | Type de question
! scope="col" | Examples
! scope="col" | Exemples
! scope="col" | Note
! scope="col" | Remarque
|-
|-
! scope="row" | .question {{ObsoleteIn|3.0}}
! scope="ligne" | .question {{ObsoleteIn|3.0}}
| All question block
| Tous les blocs de questions
| All question type
| Toutes les questions sont de type 
|&lt;p class="question">, &lt;ul class="question">, &lt;table class="question">
|<p class="question">, <ul class="question">, <table class="question">
|  
|  
|-
|-
! scope="row" | .ls-answers {{NewIn|3.0}}
! scope="ligne" | .ls-answers {{NewIn|3.0}}
| All question block
| Tous les blocs de questions
| All question type
| Toutes les questions sont de type 
|&lt;div class="ls-answers ">, &lt;ul class="ls-answers ">, &lt;table class="ls-answers">
|<div class="ls-answers ">, <ul class="ls-answers ">, <table class="ls-answers">
|  
|  
|-
|-
! scope="row" | .subquestions-list
! scope="ligne" | .subquestions-list
| List of subquestion
| Liste des sous-questions
| Multi choice question, array question type
| Question à choix multiples, type de question matricielle 
| &lt;ul class="subquestions-list">, &lt;table class="subquestions-list">
| <ul class="subquestions-list">, <table class="subquestions-list">
| .questions-list is used too
| .questions-list est également utilisé
|-
|-
! scope="row" | .answers-list
! scope="ligne" | .liste-de-réponses
| List of answers
| Liste des réponses
| Single choice question, array question type, Multi input text question
| Question à choix unique, type de question matricielle, question de texte à entrées multiples 
| &lt;ul class="answers-list">, &lt;table class="answers-list">
| <ul class="answers-list">, <table class="answers-list">
|  
|  
|-
|-
! scope="row" | .answer-item
! scope="ligne" | .élément de réponse
| The answer part: one answer
| La partie réponse : une réponse 
| Single choice question, array question type, Multi input text question
| Question à choix unique, type de question matricielle, question de texte à entrées multiples 
| &lt;li class="answer-item">, &lt;td class="answer-item">
| <li class="answer-item">, <td class="answer-item">
|
|
|-
|-
! scope="row" | .noanswer-item
! scope="ligne" | .noanswer-item
| The answer part for no answer
| La partie réponse pour non-réponse 
| Single choice question, array question type
| Question à choix unique, type de question matricielle 
| &lt;li class="noanswer-item">, &lt;td class="noanswer-item">
| <li class="noanswer-item">, <td class="noanswer-item">
| No answer is an answer too, then have double class noanswer-item and answer-item
| Aucune réponse n'est également une réponse, alors ayez une double classe noanswer-item et Answer-item
|-
|-
! scope="row" | .question-item
! scope="ligne" | .question-item
| The question part: one question
| La partie question : une question 
| Multi text question, array question type
| Question multi-texte, type de question matricielle 
| &lt;li class="question-item">, &lt;tr class="question-item">
| <li class="question-item">, <tr class="question-item">
| Some answers are questions too. Then we have a lot of class="question-item answer-item"
| Certaines réponses sont aussi des questions. Ensuite, nous avons beaucoup de class="question-itemanswer-item"
|-
|-
! scope="row" | .button-list
! scope="ligne" | .liste-de-boutons
| A list of button
| Une liste de boutons
| Yes no and Gender question
| Oui non et question genre
| &lt;ul class="button-list">
| <ul class="button-list">
|  
|  
|-
|-
! scope="row" | .button-item
! scope="ligne" | .bouton-article
| The answer part with a button
| La partie réponse avec un bouton
| Yes no and Gender question
| Oui non et question genre
| &lt;li class="button-item">
| <li class="button-item">
|
|
|-
|-
! scope="row" | .checkbox-list
! scope="ligne" | .checkbox-list
| A list of checkbox
| Une liste de cases à cocher 
| Multi choice question, array number (checkbox) question type
| Question à choix multiples, type de question à numéro de tableau (case à cocher)  
| &lt;ul class="checkbox-list">, &lt;tr class="checkbox-list">
| <ul class="checkbox-list">, <tr class="checkbox-list">
| Some question types use multi-list class, like checkbox with comment: class="checkbox-list text-list"
| Certains types de questions utilisent une classe multi-liste, comme une case à cocher avec commentaire : class="checkbox-list text-list"
|-
|-
! scope="row" | .checkbox-array {{NewIn|3.0}}
! scope="ligne" | .checkbox-array {{NewIn|3.0}}
| A array of checkbox
| Un tableau de cases à cocher
| Array (numbers) with checkbox option
| Tableau (nombres) avec option de case à cocher 
| &lt;table class="checkbox-list">
| <table class="checkbox-list">
|  
|  
|-
|-
! scope="row" | .checkbox-item
! scope="ligne" | .checkbox-item
| The answer part with a checkbox
| La partie réponse avec une case à cocher 
| Multi choice question, array number (checkbox) question type
| Question à choix multiples, type de question à numéro de tableau (case à cocher)  
| &lt;li class="checkbox-item">, &lt;td class="checkbox-item">
| <li class="checkbox-item">, <td class="checkbox-item">
|
|
|-
|-
! scope="row" | .radio-list
! scope="ligne" | .radio-list
| A list of radio item
| Une liste d'éléments radio 
| Single choice question, array question type (each row)
| Question à choix unique, type de question matricielle (chaque ligne)
| &lt;ul class="radio-list">, &lt;tr class="radio-list">
| <ul class="radio-list">, <tr class="radio-list">
|
|
|-
|-
! scope="row" | .radio-array {{NewIn|3.0}}
! scope="ligne" | .radio-array {{NewIn|3.0}}
| A array of radio item
| Une gamme d'articles radio
| Array question type
| Type de question tableau
| &lt;table class="radio-array">
| <table class="radio-array">
|
|
|-
|-
! scope="row" | .radio-item
! scope="ligne" | .radio-item
| The answer part with a radio
| La partie réponse avec une radio
| Single choice question, array question type
| Question à choix unique, type de question matricielle 
| &lt;li class="radio-item">, <td class="radio-item">
| <li class="radio-item">,<td class="radio-item">  
|
|
|-
|-
! scope="row" | .text-list
! scope="ligne" | .text-list
| A list of text input
| Une liste de saisie de texte 
| Multi text question type, array of text
| Type de question multi-texte, tableau de texte 
| &lt;ul class="text-list">, &lt;tr class="text-list">
| <ul class="text-list">, <tr class="text-list">
|
|
|-
|-
! scope="row" | .text-item
! scope="ligne" | .text-item
| The answer part of a text input
| La partie réponse d'une saisie de texte
| Multi text question type, array of text
| Type de question multi-texte, tableau de texte 
| &lt;li class="text-item">, <td class="text-item">
| <li class="text-item">,<td class="text-item">  
|
|
|-
|-
! scope="row" | .numeric-list
! scope="ligne" | .liste-numérique
| A list of text input with numeric only answer
| Une liste de saisie de texte avec une réponse numérique uniquement 
| Multi numeric question type, array of number
| Type de question multinumérique, tableau de nombres 
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
| <ul class="text-list numeric-list">, <tr class="text-list numeric-list">
|
|
|-
|-
! scope="row" | .number-list
! scope="ligne" | .liste-numéros
| A list of text input with numeric only answer (each row)
| Une liste de saisie de texte avec une réponse numérique uniquement (chaque ligne)
| Multi numeric question type, array of number
| Type de question multinumérique, tableau de nombres 
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
| <ul class="text-list numeric-list">, <tr class="text-list numeric-list">
|
|
|-
|-
! scope="row" | .number-array {{NewIn|3.0}}
! scope="ligne" | .number-array {{NewIn|3.0}}
| The answer part of a numeric input
| La partie réponse d'une entrée numérique
| Array of number
| Tableau de nombres
| &lt;table class="number-array">
| <table class="number-array">
|
|
|-
|-
! scope="row" | .select-list {{ObsoleteIn|2.50}}
! scope="ligne" | .select-list {{ObsoleteIn|2.50}}
| A list of select
| Une liste de select
| Array numbers, Dual scale array (select)
| Numéros de tableau, tableau à double échelle (sélectionner)
| &lt;table class="select-list">
| <table class="select-list">
|
|
|-
|-
! scope="row" | .dropdown-list {{NewIn|2.50}}
! scope="ligne" | .dropdown-list {{NewIn|2.50}}
| A list of select
| Une liste de select
| Array numbers, Dual scale array (select) (each row)
| Numéros de tableau, tableau à double échelle (sélectionner) (chaque ligne) 
| &lt;table class="dropdown-list">
| <table class="dropdown-list">
|
|
|-
|-
! scope="row" | .dropdown-array {{NewIn|3.0}}
! scope="ligne" | .dropdown-array {{NewIn|3.0}}
| A array of dropdown
| Un tableau de listes déroulantes
| Array numbers, Dual scale array (select)
| Numéros de tableau, tableau à double échelle (sélectionner)
| &lt;table class="dropdown-array">
| <table class="dropdown-array">
|
|
|-
|-
! scope="row" | .select-item {{ObsoleteIn|2.50}}
! scope="ligne" | .select-item {{ObsoleteIn|2.50}}
| The answer part of a select
| La partie réponse d’un select
| Array numbers, Dual scale array (select), single choice with select
| Numéros de tableau, tableau à double échelle (sélectionner), choix unique avec select
| &lt;p class="select-item">, &lt;td class="select-item">
| <p class="select-item">, <td class="select-item">
|
|
|-
|-
! scope="row" | .dropdown-item {{NewIn|2.50}}
! scope="ligne" | .dropdown-item {{NewIn|2.50}}
| The answer part of a select
| La partie réponse d’un select
| Array numbers, Dual scale array (select), single choice with select
| Numéros de tableau, tableau à double échelle (sélectionner), choix unique avec select
| &lt;p class="dropdown-item">, &lt;td class="dropdown-item">
| <p class="dropdown-item">, <td class="dropdown-item">
|
|
|-
|-
! scope="row" | .hide {{ObsoleteIn|3.0}}
! scope="ligne" | .hide {{ObsoleteIn|3.0}}
| Used for accessibility: hidden with css but read by screenreader, since 2.50 : you can use sr-only from bootstrap
| Utilisé pour l'accessibilité : caché avec css mais lu par lecteur d'écran, depuis 2.50 : vous pouvez utiliser sr-only depuis bootstrap
| Short text question
| Question textuelle courte
| &lt;label class="hide">
| <label class="hide">
| Can be used for other purposes
| Peut être utilisé à d’autres fins
|-
|-
! scope="row" | .ls-js-hidden {{NewIn|3.0}}
! scope="ligne" | .ls-js-hidden {{NewIn|3.0}}
| Used for part to be hidden if javascript is activated
| Utilisé pour qu'une partie soit masquée si javascript est activé
| Button for example
| Bouton par exemple 
| &lt;div class="ls-js-hidden">
| <div class="ls-js-hidden">
| LimeSurvey core used it, but you can use it too in your template
| Le noyau de LimeSurvey l'a utilisé, mais vous pouvez également l'utiliser dans votre modèle
|-
|-
! scope="row" | .ls-js-hidden-sr {{NewIn|3.0}}
! scope="ligne" | .ls-js-hidden-sr {{NewIn|3.0}}
| Used for accessibility: hide it if js is activated, but always show if user use a screenreader
| Utilisé pour l'accessibilité : masquez-le si js est activé, mais affichez-le toujours si l'utilisateur utilise un lecteur d'écran 
| Button for example
| Bouton par exemple 
| &lt;a class="ls-js-hidden-sr">
| <a class="ls-js-hidden-sr">
| Button
| Bouton
|-
|-
! scope="row" | .ls-no-js-hidden {{NewIn|3.0}}
! scope="ligne" | .ls-no-js-hidden {{NewIn|3.0}}
| Used for part to be hidden if javascript is not activated
| Utilisé pour qu'une partie soit masquée si javascript n'est pas activé
| Link
| Lien
| &lt;a class="ls-no-js-hidden">
| <a class="ls-no-js-hidden">
| LimeSurvey core used it for inactive link if javascript is not activated
| Le noyau de LimeSurvey l'a utilisé pour le lien inactif si javascript n'est pas activé
|-
|-
! scope="row" | .ls-label-xs-visibility {{NewIn|3.0}}
! scope="ligne" | .ls-label-xs-visibility {{NewIn|3.0}}
| Label to be hidden in big screen, but show with little screen (with no more table) and to screenreader
| Étiquette à masquer sur grand écran, mais à afficher avec un petit écran (sans plus de tableau) et au lecteur d'écran
| label
| étiquette
| &lt;label class="ls-no-js-hidden">
| <label class="ls-no-js-hidden">
| Used for label inside table cell of array question type
| Utilisé pour l'étiquette à l'intérieur d'une cellule de tableau du type de question de tableau 
|-
|-
! scope="row" | .ls-input-group-extra {{NewIn|3.0}}
! scope="ligne" | .ls-input-group-extra {{NewIn|3.0}}
| Same usage of boostrap input-group-addon, but without the border and the background.
| Même utilisation du module complémentaire boostrap input-group-addon, mais sans la bordure et l'arrière-plan.
| right suffix
| suffixe droit
| &lt;div class="ls-input-group-extra">
| <div class="ls-input-group-extra">
| Used for right and left suffix (global)
| Utilisé pour les suffixes droit et gauche (global)
|-
|-
! scope="row" | .checkbox {{ObsoleteIn|3.0}}
! scope="ligne" | .checkbox {{ObsoleteIn|3.0}}
| input[type=checkbox]
| entrée[type=checkbox]
| Question with checkbox
| Question avec case à cocher 
| &lt;input type="checkbox" class="checkbox">
| <input type="checkbox" class="checkbox">
| With modern browser: not needed, but some old browser need this
| Avec un navigateur moderne : pas nécessaire, mais certains anciens navigateurs en ont besoin 
|-
|-
! scope="row" | .radio {{ObsoleteIn|3.0}}
! scope="ligne" | .radio {{ObsoleteIn|3.0}}
| input[type=radio]
| entrée[type=radio]
| Question with radio
| Question à la radio
| &lt;input type="radio" class="radio">
| <input type="radio" class="radio">
| With modern browser: not needed, but some old browser need this
| Avec un navigateur moderne : pas nécessaire, mais certains anciens navigateurs en ont besoin 
|-
|-
! scope="row" | .text
! scope="ligne" | .text
| input[type=text]
| entrée[type=texte]
| Question with input text, or textarea
| Question avec texte de saisie, ou textarea
| &lt;textarea class="text">
| <textarea class="text">
|
|
|-
|-
! scope="row" | .answertext
! scope="ligne" | .answertext
| Array question type
| Type de question tableau
| Answer part of array question type
| Répondez à une partie du type de question du tableau 
| &lt;th class="answertext">
| <th class="answertext">
|
|
|-
|-
! scope="row" | .col-answers
! scope="ligne" | .col-réponses
| Array question type
| Type de question tableau
| Column of answers
| Colonne de réponses
| &lt;col class="col-answers">
| <col class="col-answers">
|
|
|-
|-
! scope="row" | .odd .even {{ObsoleteIn|2.50}}
! scope="ligne" | .impair .pair {{ObsoleteIn|2.50}}
| Array question type
| Type de question tableau
| Alternation for column
| Alternance pour la colonne
| &lt;col class="odd">
| <col class="odd">
|
|
|-
|-
! scope="row" | .array1 .array2 {{ObsoleteIn|3.0}}
! scope="ligne" | .array1 .array2 {{ObsoleteIn|3.0}}
| Array question type
| Type de question tableau
| Alternation for line
| Alternance pour la ligne
| &lt;tr class="array1">
| <tr class="array1">
|
|
|-
|-
! scope="row" | .ls-odd .ls-even {{NewIn|3.0}}
! scope="ligne" | .ls-impair .ls-even {{NewIn|3.0}}
| Array question type
| Type de question tableau
| Alternation for subquestion and Y axis
| Alternance pour la sous-question et l'axe Y  
| &lt;tr class="ls-odd">
| <tr class="ls-odd">
|
|
|}
|}


==== Some examples of question part with classes====
==== Quelques exemples de partie question avec des classes====


'''Text-short question type:'''<source lang="html4strict">
'''Type de question textuelle courte :'''<source lang="html4strict">
<p class="question answer-item text-item ">
<p class="question answer-item text-item ">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
</p>
</p>
</source>
</source>
'''Multiple short text'''<source lang="html4strict">
'''Plusieurs textes courts'''<source lang="html4strict">
<ul class="subquestions-list questions-list text-list">
<ul class="subquestions-list questions-list text-list">
   <li class="question-item answer-item text-item" id="javatbdSGQA">
   <li class="question-item answer-item text-item" id="javatbdSGQA">
Line 514: Line 499:
</ul>
</ul>
</source>
</source>
'''Array question type'''<source lang="html4strict">
'''Type de question tableau'''<source lang="html4strict">
<table class="question subquestion-list questions-list ">
<table class="question subquestion-list questions-list ">
<caption class="hide read">Some explanation for accessibility.</caption>
<caption class="hide read">Some explanation for accessibility.</caption>
Line 545: Line 530:
</table>
</table>
</source>
</source>
===The full list of question classes===
===La liste complète des classes de questions===


{|
{|
|'''Question Type'''||'''Question Class'''||'''Question ID'''
|'''Type de question'''||'''Classe de question'''||'''ID de question'''
|-
|5 point choice||.choice-5-pt-radio||5
|-
|-
|Array (10 point choice)||.array-10-pt||B
|Choix en 5 points||.choix -5-pt-radio||5
|-
|-
|Array (5 point choice)||.array-5-pt||A
|Array (choix de 10 points)||.array-10-pt||B
|-
|-
|Array (Flexible Labels) dual scale||.array-flexible-duel-scale ||1
|Array (choix de 5 points) ||.array-5-pt||A
|-
|-
|Array (Increase, Same, Decrease)||.array-increase-same-decrease||E
|Array (étiquettes flexibles) double échelle||.array-flexible-duel-scale ||1
|-
|-
|Array (Multi Flexible) (Numbers)||.array-multi-flexi ||:
|Array (Augmenter, Idem, Diminuer)||.array-increase-same-diminution||E
|-
|-
|Array (Multi Flexible) (Text)||.array-multi-flexi-text||;
|Array (Multi Flexible) (Nombres)||.array-multi-flexi ||:!N !|-
|Array (Multi Flexible) (Texte)||.array-multi-flexi-text||;
|-
|-
|Array (Yes/No/Uncertain)||.array-yes-uncertain-no||C
|Array (Oui/Non/Incertain)||.array- oui-incertain-non||C
|-
|-
|Array (flexible labels)||.array-flexible-row ||F
|Array (étiquettes flexibles)||.array-flexible-row ||F
|-
|-
|Array (flexible labels) by column||.array-flexible-column||H
|Array (étiquettes flexibles) par colonne| |.array-flexible-column||H
|-
|-
|Boilerplate question||.boilerplate||X
|Question passe-partout||.boilerplate||X
|-
|-
|Date||.date||D
|Date||.date||D
|-
|-  
|Equation||.equation||*
|Équation||.equation||*
|-
|-
|Gender||.gender||G
|Gender||.gender||G
|-
|-
|Huge free text||.text-huge||U
|Énorme texte libre||.text-huge||U  
|-
|Language switch||.language||I
|-
|List (dropdown)||.list-dropdown||!
|-
|-
|List (radio)||.list-radio||L
|Changement de langue||.langue||I
|-
|-
|List with comment||.list-with-comment||O
|Liste (liste déroulante)||.list-dropdown||!
|-
|-
|Long free text||.text-long||T
|Liste (radio)||.list-radio||L
|-
|-
|Multiple numerical input||.numeric-multi||K
|Liste avec commentaire||.list-with-comment||O
|-
|-
|Multiple options||.multiple-opt||M
|Texte libre long||. text-long||T
|-
|-
|Multiple options with comments||.multiple-opt-comments||P
|Saisie numérique multiple||.numeric-multi||K
|-
|-
|Multiple short text||.multiple-short-txt||Q
|Options multiples||.multiple-opt||M
|-
|Plusieurs options avec commentaires||.multiple-opt-comments||P
|-
|-
|Numerical input||.numeric||N
|Plusieurs textes courts||.multiple-short-txt||Q
|-! N!|Saisie numérique||.numérique||N
|-
|-
|Ranking||.ranking||R
|Classement||.ranking||R
|-
|-
|Short free text||.text-short||S
|Texte libre court||.text-short||S  
|-
|-
|Yes/No||.yes-no||Y
|Oui/Non||.oui-non||Y
|-
|-
|
|
|}
|}


===The full list of validation classes===
===La liste complète des classes de validation===


<div class="simplebox">Note:  Prior to 1.92, only .mandatory and .input-error classes were available.</div>
<div class="simplebox">Remarque : Avant la version 1.92, seules les classes .mandatory et .input-error étaient disponibles.</div>


These apply to the help and/or validation tip messages so that each type can be individually styled.
Ceux-ci s’appliquent aux messages d’aide et/ou de conseils de validation afin que chaque type puisse être stylisé individuellement.


The .hide-tip option and .input-error options interact by default so that you can have validation tips hidden. However, they do appear when there are validation errors and disappear again when those errors are rectified.
Les options .hide-tip et .input-error interagissent par défaut afin que vous puissiez masquer les astuces de validation. Cependant, ils apparaissent en cas d'erreurs de validation et disparaissent à nouveau lorsque ces erreurs sont rectifiées.


All of these are designed to eliminate the need for pop-up alert messages. Instead, tips can appear/disappear as needed and are color-coded to indicate whether the answers pass the validation criteria.
Tous ces éléments sont conçus pour éliminer le besoin de messages d’alerte contextuels. Au lieu de cela, les astuces peuvent apparaître/disparaître selon les besoins et sont codées par couleur pour indiquer si les réponses satisfont aux critères de validation.


Furthermore, when you first visit a page that has unmet validation criteria, you can color-code the tips in a pleasing color to show which validation criteria have not been met yet; then re-display the page using a harsher color if the person submits the page with lingering validation errors.
De plus, lorsque vous visitez pour la première fois une page dont les critères de validation ne sont pas encore satisfaits, vous pouvez coder les conseils dans une couleur agréable pour indiquer quels critères de validation n'ont pas encore été remplis ; puis réaffichez la page en utilisant une couleur plus dure si la personne soumet la page avec des erreurs de validation persistantes.


{|
{|
|'''Purpose'''||'''CSS Class'''||'''Description'''
|'''Objectif'''||'''Classe CSS'''||'''Description'''
|-
|-
|Mandatory||.mandatory||the question is mandatory
|Obligatoire||.obligatoire||la question est obligatoire
|-
|-
|User input error||.input-error||the question had at least one validation error
|Erreur de saisie utilisateur||.input-error||la question avait au moins une erreur de validation
|-
|-
|Hide Tip||.hide-tip||added if you use the hide_tip option
|Masquer l'astuce||.hide-tip||ajouté si vous utilisez l'option hide_tip
|-
|-
|defrault type||.em_default||for default tip set ( numeric value etc …)
|defrault type||.em_default||pour le jeu de pourboires par défaut (valeur numérique, etc …)
|-
|-
|Num answers||.em_num_answers||for for min_answers and max_answers
|Num réponses||.em_num_answers|| pour pour min_answers et max_answers
|-
|-
|Value range||.em_value_range||for min/max_num_value_n and multiflexible_min/max
|Plage de valeurs||.em_value_range||pour min/max_num_value_n et multiflexible_min/max
|-
|-
|Sum range||.em_sum_range||for min/max/equals_num_value
|Plage de somme||.em_sum_range||pour min/ max/equals_num_value
|-
|-
|Regex validation||.em_regex_validation||for regular-expression validation of the question
|Validation Regex||.em_regex_validation||pour la validation par expression régulière de la question
|-
|-
|Question-level validation function||.em_q_fn_validation||for the em_validation_q option
|Fonction de validation au niveau de la question||.em_q_fn_validation||pour la option em_validation_q
|-
|-
|Subquestion-level validation function||.em_sq_fn_validation||for the em_validation_sq option
|Fonction de validation au niveau de la sous-question||.em_sq_fn_validation||pour l'option em_validation_sq
|-
|-
|Other comment mandatory||.em_other_comment_mandatory||for other_comment_mandatory option - shows when "other" is selected but associated comment is missing.
|Autre commentaire obligatoire||.em_other_comment_mandatory||pour l'option other_comment_mandatory - indique quand "autre" est sélectionné mais le commentaire associé est manquant.
|-
|-
|
|
|}
|}


===Importing styles into your custom template===
===Importation de styles dans votre modèle personnalisé===


The custom question styles are near the bottom of each template's CSS file and start with:<syntaxhighlight lang="php" enclose="div">/* --------------------------- START: Question styles  ------------------------------ */</syntaxhighlight>
Les styles de questions personnalisés se trouvent au bas du fichier CSS de chaque modèle et commencent par :<syntaxhighlight lang="php"> /* -------------------------------- DÉBUT : Styles de questions ----------------- ------------- */</syntaxhighlight>


If you're styling your own custom template, you should be able to copy everything after the above one from ''templates/default/template.css'' (for table-based layouts) or ''/templates/limespired/template.css'' (for CSS-based layouts) into your own style sheet without any impact on your other styles.
Si vous créez votre propre modèle personnalisé, vous devriez pouvoir copier tout ce qui suit celui ci-dessus à partir de ''templates/default/template.css'' (pour les mises en page basées sur des tableaux) ou ''/templates/limespired/template. css'' (pour les mises en page basées sur CSS) dans votre propre feuille de style sans aucun impact sur vos autres styles.


===Internet Explorer Conditional Style Sheets===
===Feuilles de style conditionnelles d'Internet Explorer===


Because of the marked discrepancies in rendering between IE6 & IE7 and the other browsers, there are special IE conditional style sheets included for each template.
En raison des différences marquées dans le rendu entre IE6 et IE7 et les autres navigateurs, des feuilles de style conditionnelles IE spéciales sont incluses pour chaque modèle.


<source lang="html4strict" enclose="div">
<source lang="html4strict">
<!--[if IE]>
<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
<![endif]-->
<![endif]-->  
<!--[if lt IE 7]>
<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
   <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
<![endif]-->
<![endif]-->  
<!--[if IE 8]>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<![endif]-->
<![endif]-->  
</source>
</source>


You should include the above code within your '''startpage.pstpl''' and copies of both the IE style sheets from either ''/templates/default/'' or ''/templates/limespired'' for Tables base layout and CSS based layout respectively.
Vous devez inclure le code ci-dessus dans votre '''startpage.pstpl''' et des copies des feuilles de style IE de ''/templates/default/'' ou ''/templates/limespired'' pour la disposition de base des tableaux et Mise en page basée sur CSS respectivement.


<div class="simplebox">'''Note:''' If you copy the styles into your own style sheet you will almost certainly need to tweak them.</div>
<div class="simplebox">'''Remarque :''' Si vous copiez les styles dans votre propre feuille de style, vous devrez certainement les modifier.</div>


====Alternative solution for internet explorer====
====Solution alternative pour Internet Explorer====


You can put a conditional class for body in startpage.pstpl and use this class in your template.css. This method is used in the citronade template{{ObsoleteIn|2.06}}. Adding a js / no-js class to have javascript / no javascript system.
Vous pouvez mettre une classe conditionnelle pour le corps dans startpage.pstpl et utiliser cette classe dans votre template.css. Cette méthode est utilisée dans le modèle citronnade{{ObsoleteIn|2.06}}. Ajout d'une classe js/no-js pour avoir un système javascript/no javascript.


<source lang="html4strict"><!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
<source lang="html4strict"><!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
Line 683: Line 666:
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9  no-js"> <![endif]-->
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9  no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
<!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]-->
<!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]-->  
<script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script></source>
<script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script></source>


And in template.css use:
Et dans template.css, utilisez :


<source lang="css">.ie6{/*specific for internet explorer 6*/}
<source lang="css">.ie6{/*spécifique à Internet Explorer 6*/}
.ielt8{/*specific for internet explorer 6 and 7*/}
.ielt8{/*spécifique à Internet Explorer 6 et 7*/}
.ie{/*specific for all internet explorer */}</source>
.ie{/*spécifique à tous Internet Explorer */}</source>


=== Right-to-Left (RTL) languages and justify===
=== Langues de droite à gauche (RTL) et justifier===


The text editor within LimeSurvey is able to format RTL text. However, the editor itself shows the RTL language in a left to right format when justified. This is just an editor display issue. The RTL and justified question or text will display correctly from right to left, even when justified, in your survey or on preview.
L'éditeur de texte de LimeSurvey est capable de formater le texte RTL. Cependant, l'éditeur lui-même affiche le langage RTL dans un format de gauche à droite lorsqu'il est justifié. Il s'agit simplement d'un problème d'affichage de l'éditeur. Le RTL et la question ou le texte justifié s'afficheront correctement de droite à gauche, même justifiés, dans votre enquête ou en aperçu.


===Keywords===
===Mots clés===


{{Deprecated|3.0}}  
{{Obsolète|3.0}}  


Keywords within a template file get replaced by the current survey information. They are surrounded by curly brackets, for example: {SURVEYNAME}.
Les mots clés d'un fichier modèle sont remplacés par les informations d'enquête actuelles. Ils sont entourés d'accolades, par exemple : {SURVEYNAME}.


The following strings will be replaced by LimeSurvey when parsing the template file and presenting it to survey users. These field strings will work on almost every template except for the 'Completed Page'. (Most of these strings can be found in the common.php file. If it's not there, look in the index.php file.)
Les chaînes suivantes seront remplacées par LimeSurvey lors de l'analyse du fichier modèle et de sa présentation aux utilisateurs de l'enquête. Ces chaînes de champs fonctionneront sur presque tous les modèles, à l'exception de la « Page terminée ». (La plupart de ces chaînes se trouvent dans le fichier common.php. Si ce n'est pas le cas, regardez dans le fichier index.php.)


{|class=wikitable
{|class=wikitable
!'''Keyword'''!!'''Template files'''!!'''Description'''
!'''Mot-clé'''!!'''Fichiers modèles'''!!'''Description'''
|-
|{SURVEYNAME}||All Files||The survey title
|-
|-
|{SURVEYDESCRIPTION}||All Files||The survey description
|{SURVEYNAME}||Tous Fichiers||Le titre de l'enquête
|-
|-
|{WELCOME}||All files (mainly for welcome.pstpl)||The survey 'welcome' text
|{SURVEYDESCRIPTION}||Tous les fichiers||La description de l'enquête
|-
|-
|{PERCENTCOMPLETE}||survey.pstpl||A small graph showing the percentage of the survey completed
|{WELCOME}||Tous les fichiers (principalement pour Welcome.pstpl) ||Le texte de bienvenue de l'enquête 
|-
|-
|{GROUPNAME}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||Displays the current group name
|{PERCENTCOMPLETE}||survey.pstpl||Un petit graphique montrant le pourcentage de l'enquête terminée
|-
|-
|{GROUPDESCRIPTION}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||Displays the current group description
|{GROUPNAME}| |startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||Affiche le nom du groupe actuel
|-
|-
|{NUMBEROFQUESTIONS}||welcome.pstpl||Displays the total number of questions in the survey (just the number)
|{GROUPDESCRIPTION}||startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl||Affiche le groupe actuel description
|-
|-
|{THEREAREXQUESTIONS}||welcome.pstpl||Displays the sentence "There are X questions in this survey" - from the relevant language file. The X is replaced with the number of questions. Note that this will also work appropriately for singular or plural. If there is only 1 question, it will print "There is 1 question in this survey".
|{NUMBEROFQUESTIONS}||welcome.pstpl||Affiche le nombre total de questions de l'enquête (juste le nombre)
|-
|-
|{CHECKJAVASCRIPT}||All files (mainly for welcome.pstpl)||Warning message when end-user browser have javascript disabled
|{THEREAREXQUESTIONS}||welcome. pstpl||Affiche la phrase « Il y a X questions dans cette enquête » - à partir du fichier de langue concerné. Le X est remplacé par le nombre de questions. Notez que cela fonctionnera également de manière appropriée pour le singulier ou le pluriel. S'il n'y a qu'une seule question, il affichera "Il y a 1 question dans cette enquête".
|-
|-
|{QUESTION}||Question.pstpl||('''Has been superseeded as of LS1.87''') Displays the current question text (The format of {QUESTION} can customised by editing 'question_start.pstpl') Use the following: {QUESTION_TEXT}, {QUESTION_MANDATORY}, {QUESTION_HELP}, {QUESTION_MAN_MESSAGE}, {QUESTION_VALID_MESSAGE}, {QUESTION_INPUT_ERROR_CLASS}, and appropriate wrapping HTML instead of {QUESTION}
|{CHECKJAVASCRIPT}||Tous les fichiers (principalement pour Welcome.pstpl)||Message d'avertissement à la fin- le navigateur de l'utilisateur a désactivé javascript
|-
|-
|{ANSWER}||question.pstpl, print_question.pstpl||presents the answer form for the current question
|{QUESTION}||Question.pstpl||('''A été remplacé à partir de LS1.87''') Affiche le texte de la question actuelle (le format de { QUESTION} peut être personnalisé en modifiant 'question_start.pstpl'). Utilisez les éléments suivants : {QUESTION_TEXT}, {QUESTION_MANDATORY}, {QUESTION_HELP}, {QUESTION_MAN_MESSAGE}, {QUESTION_VALID_MESSAGE}, {QUESTION_INPUT_ERROR_CLASS} et un emballage HTML approprié au lieu de {QUESTION} ! N!|-
|{ANSWER}||question.pstpl, print_question.pstpl||présente le formulaire de réponse pour la question actuelle
|-
|-
|{SGQ}||question.pstpl, question text||Can be used in the question text itself to reference the input field of the question dynamically by displaying the Survey-Group-Question id for the current question. (as of svn build 9755)
|{SGQ}||question.pstpl, texte de la question ||Peut être utilisé dans le texte de la question lui-même pour référencer dynamiquement le champ de saisie de la question en affichant l'identifiant de la question du groupe d'enquête pour la question actuelle. (à partir de la version svn 9755)
|-
|-
|{QUESTIONHELP}||question.pstpl, print_question.pstpl||Displays help text (predefined tip for question type) for the current question
|{QUESTIONHELP}||question.pstpl, print_question.pstpl||Affiche le texte d'aide (astuce prédéfinie pour le type de question) pour la question actuelle
|-
|-
|{QUESTION_CLASS}||question.pstpl, print_question.pstpl||unique class for each question type. (To be included in the question's wrapping tag.)
|{QUESTION_CLASS}||question.pstpl, print_question.pstpl||classe unique pour chaque type de question. (À inclure dans la balise d'habillage de la question.)
|-
|-
|{QUESTION_CODE}||question.pstpl, print_question.pstpl||Displays the current question code
|{QUESTION_CODE}||question.pstpl, print_question.pstpl||Affiche le code de la question actuelle
|-
|-
|{QUESTION_ESSENTIALS}||question.pstpl||the question ID and (if a question is conditional), 'style="display:none;"'. (To be included in the question's wrapping tag.)
|{QUESTION_ESSENTIALS }||question.pstpl||l'ID de la question et (si une question est conditionnelle), 'style="display:none;"'. (À inclure dans la balise d'habillage de la question.)
|-
|-
|{QUESTION_HELP}||question.pstp, question_start.pstpl||Displays the user defined help text for the current question
|{QUESTION_HELP}||question.pstp, question_start.pstpl||Affiche le texte d'aide défini par l'utilisateur pour la question actuelle
|-
|-
|{QUESTION_TYPE_HELP}||print_question.pstp||Displays the user defined help text for the current question
|{QUESTION_TYPE_HELP}||print_question.pstp||Affiche le texte d'aide défini par l'utilisateur pour la question actuelle
|-
|-
|{QUESTION_INPUT_ERROR_CLASS}||question.pstp, question_start.pstpl||Provides a class if there was user input error
|{QUESTION_INPUT_ERROR_CLASS}||question.pstp, question_start.pstpl||Fournit une classe si une erreur de saisie utilisateur s'est produite 
|-
|-
|{QUESTION_ID}||print_question.pstp||Provides a unique ID for each question to allow styling for specific questions
|{QUESTION_ID}||print_question.pstp||Fournit un identifiant unique pour chaque question afin de permettre le style de questions spécifiques
|-
|-
|{QUESTION_TEXT}||question.pstp, print_question.pstp, question_start.pstpl||Displays the text for the current question
|{QUESTION_TEXT}| |question.pstp, print_question.pstp, question_start.pstpl||Affiche le texte de la question actuelle
|-
|-
|{QUESTION_MANDATORY}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated 'Mandatory' text for the current question
|{QUESTION_MANDATORY}||question.pstp, print_question.pstp, question_start.pstpl||Affiche le Texte « obligatoire » traduit pour la question actuelle 
|-
|-
|{QUESTION_MAN_CLASS}||question.pstpl, print_question.pstpl||class if a question is mandatory. (To be included in the question's wrapping tag.)
|{QUESTION_MAN_CLASS}||question.pstpl, print_question.pstpl||class si une question est obligatoire. (À inclure dans la balise d'habillage de la question.)
|-
|-
|{QUESTION_MAN_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated 'Mandatory' help message text for the current question
|{QUESTION_MAN_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||Affiche le texte du message d'aide « obligatoire » traduit pour le question
|-
|-
|{QUESTION_NUMBER}||print_question.pstpl||Incremental count of questions.
|{QUESTION_NUMBER}||print_question.pstpl||Nombre incrémentiel de questions.
|-
|-
|{QUESTION_VALID_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl||Displays the translated valid help message text for the current question
|{QUESTION_VALID_MESSAGE}||question.pstp, print_question.pstp, question_start.pstpl ||Affiche le texte traduit du message d'aide valide pour la question actuelle
|-
|-
|{QUESTION_SCENARIO}||print_question.pstp||Prints out the 'scenario' text for conditional questions.
|{QUESTION_SCENARIO}||print_question.pstp||Imprime le texte du « scénario » pour les questions conditionnelles.
|-
|-
|{NAVIGATOR}||navigator.pstpl||Displays navigation buttons (next, prev, last)
|{NAVIGATOR}||navigator.pstpl||Affiche les boutons de navigation (suivant, précédent, dernier)
|-
|-
|{CLEARALL}||All files (but intended for navigator.pstpl)||Displays the "Exit and Clear Results" link
|{CLEARALL}||Tous les fichiers (sauf destinés à navigator.pstpl)||Affiche le Lien « Quitter et effacer les résultats » 
|-
|-
|{COMPLETED}||completed.pstpl||Displays the 'completed' message for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
|{COMPLETED}||completed.pstpl||Affiche le message « terminé » pour l'enregistrement, changera selon que les champs attribut_1 et attribut_2 sont définis.
|-
|-
|{URL}||completed.pstpl||Displays the survey 'url' and 'url text'
|{URL}||completed.pstpl||Affiche l'url et le texte de l'enquête
|-
|-
|{PRIVACYMESSAGE}||privacy.pstpl||The privacy message is shown if you set your survey to be anonymous. [[Translating LimeSurvey|The text can be edited/translated]] in the language files. This can also be changed manually by editing the privacy.pstpl template you wish to use.
|{PRIVACYMESSAGE}||privacy.pstpl||Le message de confidentialité s'affiche si vous définissez votre enquête comme étant anonyme. [[Traduction de LimeSurvey|Le texte peut être modifié/traduit]] dans les fichiers de langue. Cela peut également être modifié manuellement en modifiant le modèle Privacy.pstpl que vous souhaitez utiliser.
|-
|-
|{TEMPLATEURL}||All Files||The URL to the current template location (useful for referencing image files in your template)
|{TEMPLATEURL}||Tous les fichiers||L'URL de l'emplacement actuel du modèle (utile pour référencer les fichiers image dans votre modèle)
|-
|-
|{SURVEYRESOURCESURL}||All Files||The URL to the current uploaded files for this survey location (useful for referencing image files in your question, group, ....)
|{SURVEYRESOURCESURL}||Tous les fichiers||L'URL des fichiers actuellement téléchargés pour cet emplacement d'enquête (utile pour référencer les fichiers image dans votre question, groupe, ....)
|-
|-
|{SUBMITCOMPLETE}||endpage.pstpl||The statement (from the language files) that tells the user they have completed the survey, and to press the "Submit" button
|{SUBMITCOMPLETE}||endpage.pstpl||La déclaration (à partir des fichiers de langue) qui indique à l'utilisateur qu'il a terminé l'enquête et qu'il doit appuyer sur le bouton « Soumettre »
|-
|-
|{SUBMITREVIEW}||survey.pstpl||The statement (from the language files) that tells the user they can review/change the answers they have made by clicking "<< prev"
|{SUBMITREVIEW}||survey.pstpl||La déclaration (à partir des fichiers de langue) qui indique à l'utilisateur qu'il peut réviser/modifier les réponses qu'il a données en cliquant sur "<< prev"
|-
|-
|{SAVEDID}||All Files||Displays 'Response ID' of user
|{SAVEDID}||Tous les fichiers||Affiche l'ID de réponse de l'utilisateur
|-
|-
|-
|-
|{QUEXMLPDF}||All Files||Displays button to export the queXML PDF of questionnaire including answers entered up until the point that has been completed in the survey.
|{QUEXMLPDF}||Tous les fichiers||Affiche le bouton pour exporter le PDF queXML du questionnaire, y compris réponses saisies jusqu'au point qui a été complété dans l'enquête.
|-
|-
|{TOKEN:FIRSTNAME}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users first name from the tokens table
|{TOKEN:FIRSTNAME}||Tous les fichiers||***Si les réponses à l'enquête ne sont PAS ANONYMES - sont remplacées par les utilisateurs en premier nom de la table des jetons 
|-
|-
|{TOKEN:LASTNAME}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users last name from the tokens table***
|{TOKEN:LASTNAME}||Tous les fichiers||***Si les réponses à l'enquête ne sont PAS ANONYMES - est remplacé par le nom de famille de l'utilisateur de la table des jetons*** 
|-
|-
|{TOKEN:EMAIL}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users email from the tokens table***
|{TOKEN:EMAIL}||Tous les fichiers||***Si les réponses à l'enquête ne sont PAS ANONYMES - est remplacée par l'e-mail de l'utilisateur à partir de la table des jetons***
|-
|-
|{TOKEN:ATTRIBUTE_1}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_1 from the tokens table***
|{TOKEN:ATTRIBUTE_1}||Tous les fichiers||***Si les réponses à l'enquête ne sont PAS ANONYMES - sont remplacées par l'attribut_1 des utilisateurs de la table des jetons***
|-
|-
|{TOKEN:ATTRIBUTE_2}||All Files||***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_2 from the tokens table***
|{TOKEN:ATTRIBUTE_2}| |Tous les fichiers||***Si les réponses à l'enquête ne sont PAS ANONYMES - sont remplacées par l'attribut utilisateur_2 de la table des jetons***
|-
|-
|{ANSWERSCLEARED}||Preferably in navigator.pstpl||The "Answers Cleared" statement from the language files
|{ANSWERSCLEARED}||De préférence dans navigator.pstpl||Le Instruction "Réponses effacées" des fichiers de langue
|-
|-
|{RESTART}||clearall.pstpl||URL to restart the survey
|{RESTART}||clearall.pstpl||URL pour redémarrer l'enquête
|-
|-
|{REGISTERERROR}||register.pstpl||Shows any error messages in the register page (ie: "You must include an email address")
|{REGISTERERROR}||register.pstpl ||Affiche tous les messages d'erreur sur la page d'inscription (c'est-à-dire : "Vous devez inclure une adresse e-mail")
|-
|-
|{REGISTERMESSAGE1}||register.pstpl||The statement "You must be registered to complete this survey" from the language files
|{REGISTERMESSAGE1}||register.pstpl||La déclaration "Vous devez être inscrit pour compléter cette enquête" à partir des fichiers de langue
|-
|-
|{REGISTERMESSAGE2}||register.pstpl||Details about registering from the language files
|{REGISTERMESSAGE2}||register.pstpl||Détails sur l'enregistrement à partir des fichiers de langue
|-
|-
|{REGISTERFORM}||register.pstpl||The actual form for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
|{REGISTERFORM}||register.pstpl ||Le formulaire d'inscription réel changera selon que les champs attribut_1 et attribut_2 sont définis.
|-
|-
|{SAVE}||Works suitable on navigator.pstpl||Displays the 'Save your responses so far' button to offer the user to save and come back later to continue the survey. If the Save option is deactivated in the survey properties the tag will not be shown and ignored.
|{SAVE}||Fonctionne sur navigator.pstpl||Affiche le message « Enregistrez vos réponses afin loin' pour proposer à l'utilisateur de sauvegarder et de revenir plus tard pour continuer l'enquête. Si l'option Enregistrer est désactivée dans les propriétés de l'enquête, la balise ne sera pas affichée et ignorée.
|-
|-
|{LANGUAGECHANGER}||survey.pstpl||Displays a switch in multilingual surveys to change the question.
|{LANGUAGECHANGER}||survey.pstpl||Affiche un commutateur dans les enquêtes multilingues pour modifier la question.
|}
|}


===Input/Buttons===
===Entrée/Boutons===


Each "input" type in a survey has been given its own class name, so that you can add CSS to your "startpage.pstpl" file and have some control over the appearance of form buttons and inputs. These class names are as follows:
Chaque type « d'entrée » dans une enquête a reçu son propre nom de classe, afin que vous puissiez ajouter du CSS à votre fichier « startpage.pstpl » et avoir un certain contrôle sur l'apparence des boutons et des entrées du formulaire. Ces noms de classe sont les suivants :
*'''submit''' (Submit Buttons)
*'''submit''' (boutons de soumission)
*'''text''' (Text Inputs - for short free text, date, and numerical type)
*'''text''' (entrées de texte - pour un texte libre court, une date et un type numérique)
*'''answertext''' (Text of answers)
*'''answertext''' (Texte des réponses)
*'''radio''' (Radio Buttons)
*'''radio''' (Boutons radio)
*'''checkbox''' (Check Boxes)
*'''checkbox''' (cases à cocher)
*'''select''' (Select / List Boxes)
*'' 'select''' (Sélectionner / Zones de liste)
*'''textarea''' (Large text inputs - for long free text)
*'''textarea''' (Saisies de texte de grande taille - pour un texte libre et long)
*'''clearall''' (The "Exit and Clear Survey" link)
*'''clearall''' (La fonction "Quitter et effacer l'enquête " lien)
*'''rank''' (The rank style question. Doesn't set the colour of the select box or the text boxes, but it does allow the changing of background colour, text colour, size etc., for the rest of the ranking question)
*'''rank''' (La question de style de classement. Ne définit pas la couleur de la zone de sélection ou des zones de texte, mais elle permet de changer la couleur d'arrière-plan, la couleur du texte, la taille, etc. ., pour le reste de la question de classement)
*'''graph''' (The "percentage completed" graph table)
*'''graph''' (Le tableau graphique "Pourcentage complété")
*'''innergraph''' (The table inside the graph table - this contains the 0% and 100% text. Use this for changing the size of this text)
*'''innergraph''' (Le tableau à l'intérieur du tableau graphique - ce contient le texte 0% et 100%. Utilisez ceci pour modifier la taille de ce texte)
*'''question''' (General settings for any question that is displayed within a table. Generally, you should use this to make sure that their font size and color is the same as you have used elsewhere as a default)
*'''question''' (Paramètres généraux pour toute question affichée dans un tableau. En général, vous devez utiliser ceci pour assurez-vous que la taille et la couleur de leur police sont les mêmes que celles que vous avez utilisées ailleurs par défaut)
*'''mandatory'''  (Mandatory questions)
*'''obligatoire''' (Questions obligatoires)
*'''input-error''' (User input error - for if a user has made a mistake with a mandatory question or question with validation)
*'''erreur d'entrée''' (Utilisateur erreur de saisie - pour si un utilisateur a fait une erreur avec une question obligatoire ou une question avec validation)
*'''array1''' and '''array2''' (These two styles are cycled when presenting the range of answers for an array type question. This allows you to set an alternating background color for these question types. '''Array1''' is also used for the column headings in these question types)
*'''array1''' et '''array2''' (Ces deux styles sont cyclés lors de la présentation de la plage de réponses à une question de type tableau. Cela vous permet de définir une couleur d'arrière-plan alternée pour ces types de questions. '''Array1''' est également utilisé pour les en-têtes de colonnes dans ces types de questions)
*'''errormandatory''' (Sets the color and style of the "This question is mandatory" error message)
*'''errormandatory''' (Définit la couleur et le style du message d'erreur "Cette question est obligatoire")
*'''warningjs''' (Sets the color and style of the warning message displayed if the participant's browser has javascript disabled)
*'''warningjs''' (Définit la couleur et le style du message d'avertissement affiché si le navigateur du participant a désactivé javascript)


There are also some elements that can be accessed using the ID of the element ('''#ID''' in CSS):
Certains éléments sont également accessibles en utilisant l'ID de l'élément ("#ID" en CSS) :
*'''surveycontact''' (The contact message shown on the start page)
*'''surveycontact''' (Le message de contact affiché sur la page d'accueil)
*'''tokenmessage''' (used for messages inside the survey, e.g. the session expired error message)
*'''tokenmessage''' (utilisé pour les messages à l'intérieur de l'enquête, par exemple le message d'erreur de session expirée)


Because you can edit all the HTML aspects, there's no reason to surround your templates with a  
Parce que vous pouvez modifier tous les aspects HTML, il n'y a aucune raison d'entourer vos modèles d'un
<syntaxhighlight lang="php" enclose="div"><div class='new_name'></div></syntaxhighlight>
<syntaxhighlight lang="php"><div class='new_name'></div></syntaxhighlight>  
and then define a css for that new_name class.
puis définissez un CSS pour cette classe new_name.


==Styling the progress bar==
==Style de la barre de progression==


The progress bar appearance can be modified with CSS.
L'apparence de la barre de progression peut être modifiée avec CSS.


To change the background color of the bar, add something like the following to the end of your template.css file:
Pour changer la couleur d'arrière-plan de la barre, ajoutez quelque chose comme ce qui suit à la fin de votre fichier custom.css (exemple pour le thème fruité) :


<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-header {
<syntaxhighlight lang="php">.fruity .progress-bar {
 background-color: #3300FF;
couleur d'arrière-plan : #3300FF;
}</syntaxhighlight>
}</syntaxhighlight>


To change the border color of the bar, add something like the following to the end of your template.css file:
Pour changer la couleur de la bordure de la barre, ajoutez quelque chose comme ce qui suit à la fin de votre fichier custom.css (exemple pour le thème fruité) :


<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-content,
<syntaxhighlight lang="php">.fruity .progress-bar {
#progress-wrapper .ui-widget-header {
bordure : 1px solide #FF0000;
 border: 1px solid #FF0000;
}</syntaxhighlight>
}</syntaxhighlight>


==Advanced features available to developers==
==Fonctionnalités avancées disponibles pour les développeurs==


LimeSurvey has integrated some user-made patches that permits some special changes. These very advanced features (generally) require changes to the underlying code base of LimeSurvey and should be done carefully in order not to introduce security holes.
LimeSurvey a intégré certains correctifs créés par les utilisateurs qui permettent des modifications spéciales. Ces fonctionnalités très avancées nécessitent (généralement) des modifications de la base de code sous-jacente de LimeSurvey et doivent être effectuées avec soin afin de ne pas introduire de failles de sécurité.


====Support for your own Javascript functions====
====Prise en charge de vos propres fonctions Javascript====


Some users may need to run Javascript on the survey pages, but calling '''checkconditions()''' in the BODY element made it impossible to do so. This call has been replaced with a small JavaScript function in the HEAD that sniffs for the existence of '''checkconditions()''' and '''template_onload()''' before calling them. In this way, a template author can create his or her own '''template_onload()''' function in the HEAD that replaces the default one.
Certains utilisateurs peuvent avoir besoin d'exécuter Javascript sur les pages d'enquête, mais l'appel de '''checkconditions()''' dans l'élément BODY a rendu cela impossible. Cet appel a été remplacé par une petite fonction JavaScript dans le HEAD qui détecte l'existence de '''checkconditions()''' et '''template_onload()''' avant de les appeler. De cette façon, un auteur de modèle peut créer sa propre fonction '''template_onload()''' dans le HEAD qui remplace celle par défaut.


*Disable XSS filter - in Global settings -> Security, set "Filter HTML for XSS" to No.
*Désactivez le filtre XSS - dans Paramètres globaux -> Sécurité, définissez "Filtre HTML pour XSS" sur Non.
*Enter your script in the source of a question or group description.
*Entrez votre script dans la source d'une question ou d'une description de groupe.


{{Note|For further details, see the [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey|workaround section]].}}
{{Remarque|Pour plus de détails, consultez la [[Solutions de contournement : manipulation d'une enquête au moment de l'exécution à l'aide de Javascript#Comment utiliser le script (par exemple, JavaScript, etc.) dans LimeSurvey|section de solution de contournement]].}}




==Tips & tricks==
==Trucs et astuces==


===Language specific element===
===Élément spécifique à la langue===


If you want to have a language specific sentence in a survey, for example help at the end of each page, you can add a .pstl file a sentence and hide it for the other language. If we hide it in the template.css, we can use the pseudo selector :lang, but we use some class for better compatibility.
Si vous souhaitez avoir une phrase spécifique à une langue dans une enquête, par exemple une aide à la fin de chaque page, vous pouvez ajouter un fichier .pstl à une phrase et la masquer pour l'autre langue. Si nous le cachons dans le template.css, nous pouvons utiliser le pseudo sélecteur :lang, mais nous utilisons une classe pour une meilleure compatibilité.


Below, there are two help sentences, in French and English. Put this on endpage.pstpl:
Ci-dessous, vous trouverez deux phrases d'aide, en français et en anglais. Mettez ceci sur endpage.pstpl :


<syntaxhighlight lang="php" enclose="div"><div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
<syntaxhighlight lang="php"><div class="fr" lang="fr">Pour de l'aide en appelez directement le 000000</div>  
<div class="en" lang="en">For some help, please call 000000</div></syntaxhighlight>
<div class="en" lang="en"> Pour obtenir de l'aide, veuillez appeler le 000000</div></syntaxhighlight>


and in template.css:
et dans template.css :


<syntaxhighlight lang="php" enclose="div">.lang-fr .en{display:none}
<syntaxhighlight lang="php">.lang-fr .en{display:none}
.lang-en .fr{display:none}</syntaxhighlight>
.lang-fr .fr{display:none}</syntaxhighlight>


===Change the layout of the survey page===
===Modifier la mise en page de la page d'enquête===


After editing and saving a template, it applies to a survey list page only if it is selected from the settings of the survey. To make it the default template, go under the '''General tab''' located in the '''Global settings''' of your LimeSurvey installation and choose the desired template. From this point on, all the templates that use the "default" option as template, plus the ones that are going to be newly created, will use the newly selected default template.
Après avoir modifié et enregistré un modèle, celui-ci s'applique à une page de liste d'enquête uniquement s'il est sélectionné dans les paramètres de l'enquête. Pour en faire le modèle par défaut, rendez-vous sous l'onglet '''Général''' situé dans les '''Paramètres globaux''' de votre installation LimeSurvey et choisissez le modèle souhaité. À partir de ce moment, tous les modèles qui utilisent l'option "par défaut" comme modèle, ainsi que ceux qui vont être nouvellement créés, utiliseront le modèle par défaut nouvellement sélectionné.


To use your current template for this page, you must change the appropriate setting from '''Global settings'''. In older versions, this change can be done by editing the $defaulttemplate setting from the config file: copy this setting from config-defaults.php to config.php which overrides config-defaults.php and edit this setting to <code lang="html">$defaulttemplate = 'yourtemplatename';</code>.
Pour utiliser votre modèle actuel pour cette page, vous devez modifier le paramètre approprié dans '''Paramètres globaux'''. Dans les anciennes versions, cette modification peut être effectuée en modifiant le paramètre $defaulttemplate à partir du fichier de configuration : copiez ce paramètre de config-defaults.php vers config.php qui remplace config-defaults.php et modifiez ce paramètre en <code lang="html">$defaulttemplate = 'yourtemplatename';</code> .


===Import/Export of templates: Mac users===
===Import/Export de modèles : utilisateurs Mac===


<u>Mac users</u>, please note that the Mac OSX default archive utility may have problems with zip folders "generated on the fly".
<u>Utilisateurs Mac</u> , veuillez noter que l'utilitaire d'archivage par défaut de Mac OSX peut rencontrer des problèmes avec les dossiers zip « générés à la volée ».


A workaround is to unix'es unzip from the command line:
Une solution de contournement consiste à décompresser les Unix à partir de la ligne de commande :


$ unzip template.zip -d template
$ décompresser template.zip -d modèle


Archive: template.zip
Archive : template.zip


 inflating: template/startpage
gonfler : modèle/page de démarrage


 inflating: ...
gonfler: ...


Another workaround is to use scripts in their mac-compiled counterparts.
Une autre solution consiste à utiliser des scripts dans leurs homologues compilés sur Mac.


===Use the same template with different logos===
===Utilisez le même modèle avec des logos différents===


If you want to use the same template for all surveys and just want to change the logo for each survey, you can use the {SID} placeholder in the template .pstpl file and thereby refer to different images:
Si vous souhaitez utiliser le même modèle pour toutes les enquêtes et souhaitez simplement modifier le logo de chaque enquête, vous pouvez utiliser l'espace réservé {SID} dans le fichier .pstpl du modèle et ainsi faire référence à différentes images :


<syntaxhighlight lang="php" enclose="div"><img src="{TEMPLATEURL}files/logoImage-{SID}.png"></syntaxhighlight>
<syntaxhighlight lang="php"><img src="{TEMPLATEURL}files/logoImage-{SID}.png"></syntaxhighlight>


=== Display custom favicon===
=== Afficher le favicon personnalisé ===


A favicon is the little icon you see in the browser's address bar, list of bookmarks or tab. You can display your own icon as follows:
Un favicon est la petite icône que vous voyez dans la barre d'adresse, la liste des favoris ou l'onglet du navigateur. Vous pouvez afficher votre propre icône comme suit :
#Create a favicon - You can use Google to find lots of free favicon generators.
#Créer un favicon - Vous pouvez utiliser Google pour trouver de nombreux générateurs de favicon gratuits.
#Name your new favicon "favicon.ico" and place it in your template /files directory.
#Nommez votre nouveau favicon "favicon.ico" et placez-le dans votre modèle/fichiers répertoire.
#Add the following code to your '''startpage.pstpl''' before the </head> tag.
#Ajoutez le code suivant à votre '''startpage.pstpl''' avant le</head> étiqueter.


<syntaxhighlight lang="html4strict" enclose="div"><link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">
<syntaxhighlight lang="html4strict"><link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">  
<link rel="icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon"></syntaxhighlight>
<link rel="icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon"></syntaxhighlight>


=== Different appearance for survey-/question-pages===
=== Apparence différente pour les pages d'enquête/de questions ===


If you want LimeSurvey to change the appearance of every second page (i.e., even and odd survey pages), you can use '''.page-odd''' class in your CSS file to change the appearance of odd pages.
Si vous souhaitez que LimeSurvey change l'apparence d'une page sur deux (c'est-à-dire les pages d'enquête paires et impaires), vous pouvez utiliser la classe '''.page-odd''' dans votre fichier CSS pour modifier l'apparence des pages impaires.


An example from default template of LimeSurvey 1.91+:
Un exemple du modèle par défaut de LimeSurvey 1.91+ :


<syntaxhighlight lang="php" enclose="div">
<syntaxhighlight lang="php">
.page-odd table.question-group {
.page-odd table.question-group {
 background-color: #D2F2D3;
couleur d'arrière-plan : #D2F2D3;
}</syntaxhighlight>
}</syntaxhighlight>


If you do '''not''' want differentiate even and odd pages, find all instances of ''.page-odd'' in template.css and remove those styles.
Si vous ne souhaitez pas différencier les pages paires et impaires, recherchez toutes les instances de « .page-odd » dans template.css et supprimez ces styles.


===Create a vertical separator border for dual scale array===
===Créer une bordure de séparation verticale pour un réseau à double échelle===


To create a vertical separator border for a dual scale array, you can add the following lines to your '''template.css'''-file.
Pour créer une bordure de séparation verticale pour un tableau à double échelle, vous pouvez ajouter les lignes suivantes à votre fichier '''template.css'''.


<syntaxhighlight lang="php" enclose="div">
<syntaxhighlight lang="php">
table.question thead td.header_separator,
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
table.question tbody td.dual_scale_separator
{
{
   border-right:solid 1px #00A8E1;
bordure droite :solide 1px #00A8E1;
}
}
</syntaxhighlight>
</syntaxhighlight>


''header_separator'' is used to adress the separator for the header "td". The "dual_scale_separator" is used to address the separator column in the dual scale array.
''header_separator'' est utilisé pour adresser le séparateur de l'en-tête "td". Le "dual_scale_separator" est utilisé pour adresser la colonne de séparation dans le tableau à double échelle.
 
===Ajout de votre propre logo à la liste des enquêtes===
 
# Veuillez d'abord ouvrir l'éditeur de thème pour le thème que vous souhaitez utiliser. [[File:OpenThemeEditor.jpg]]
# Nous vous recommandons d'utiliser fruity, c'est notre meilleur thème actuellement.
# Ensuite, étendez le thème et donnez-lui un nom que vous reconnaîtrez. [[File:ExtendTheme.jpg]]
# Dans la vue suivante, vous pouvez télécharger le logo que vous souhaitez utiliser. [[File:UploadFileTheme.jpg]]
# Sélectionnez l'écran de l'éditeur « Survey List » dans la liste déroulante Écran dans le coin supérieur droit. [[File:OpenScreenSurveyList.jpg]]
# Sélectionnez ensuite `layout_survey_list.twig´ dans le menu de gauche. [[File:EditLayoutSurveyListTwig.jpg]]
# Dans l'éditeur, faites défiler jusqu'à la ligne 126 et remplacez la partie marquée par le nom de fichier de l'image que vous avez téléchargée auparavant sur le thème. [[File:ChangeSurveyListHeaderImageEditor.jpg]]
# Enregistrez votre fichier. [[File:ThemeEditorSaveChanges.jpg]]
# Remplacez le thème par défaut par votre thème étendu. [[Fichier : ChangeDefaultTheme.jpg]]
 
=== Aligner le logo au centre de la page d'enquête ===
Cet exemple concerne le modèle "extends_fruity". Pour les autres modèles, le CSS requis peut être différent.
# Connectez-vous à la zone d'administration de LimeSurvey
# Accédez à l'éditeur de thème : Configuration > Thèmes
# Recherchez "LimeSurvey Fruity Theme" dans la liste et cliquez sur " Bouton "Éditeur de thème" 
# Cliquez sur "custom.css" dans la liste des fichiers à gauche en bas de la page 
# Copiez le CSS suivant dans ce fichier et appuyez sur "Enregistrer les modifications".
 
<syntaxhighlight lang="css">
.navbar-fixed-top > div.navbar-header {
largeur : 100 % !important;
}
 
.navbar-fixed-top > div.navbar-header > div {
largeur : 100 % !important;
}
 
.navbar-fixed-top > div.navbar-header > div > img {
margin: 0 auto 0 auto !important;
}
</syntaxhighlight>


===Adding your own logo to the survey list===


# First please open the theme editor for the theme you like to use. [[File:OpenThemeEditor.jpg]]
# We recommend to use fruity, it is our best theme currently.
# Then extend the theme and give it a name you will recognize. [[File:ExtendTheme.jpg]]
# In the following view you may upload the logo you want to use. [[File:UploadFileTheme.jpg]]
# Select the editor screen `Survey List´ in the Screen dropdown in the top right corner. [[File:OpenScreenSurveyList.jpg]]
# Then select `layout_survey_list.twig´ in the left side menu. [[File:EditLayoutSurveyListTwig.jpg]]
# In the editor scroll to line 126 and change the marked part to the filename of the image you uploaded to the theme before. [[File:ChangeSurveyListHeaderImageEditor.jpg]]
# Save your file. [[File:ThemeEditorSaveChanges.jpg]]
# Change default theme to your extended theme. [[File:ChangeDefaultTheme.jpg]]


==Custom question views {{NewIn|3.0}}==  
==Vues de questions personnalisées {{NewIn|3.0}}==  


<div class="simplebox">'''Note:''' This is a temporary feature to be replaced in the future by question object (it will be very easy to move custom views to question object). It is disabled by default.</div>
<div class="simplebox">'''Remarque :''' Il s'agit d'une fonctionnalité temporaire qui sera remplacée à l'avenir par un objet question (il sera très facile de déplacer des vues personnalisées vers un objet question). Il est désactivé par défaut.</div>


As of version 2.5, you can create template-specific custom views for questions and some of their incorporated elements. This is useful if you want to modify the HTML layout of a particular question type for one or more surveys.
Depuis la version 2.5, vous pouvez créer des vues personnalisées spécifiques à un modèle pour les questions et certains de leurs éléments incorporés. Ceci est utile si vous souhaitez modifier la présentation HTML d'un type de question particulier pour une ou plusieurs enquêtes.


*In application/config/config.php, find 'config'=>array and add this line to the array : 'allow_templates_to_overwrite_views'=>1
*Dans application/config/config.php, recherchez 'config'=>array et ajoutez cette ligne au tableau : 'allow_templates_to_overwrite_views'=>1
*In /{your_template}/config.xml, set "overwrite_question_views" to true
*Dans /{your_template}/config.xml, définissez "overwrite_question_views" sur true
*Copy application/views/survey/* to template/{your_view_directory}/survey/
*Copiez application/views/survey/* dans template/{your_view_directory}/survey/
*Note that you only need to copy the files that you intend to modify but the file structure must remain the same as in application/views/survey/
*Notez que vous devez uniquement copier les fichiers que vous avez l'intention de modifier, mais la structure des fichiers doit rester la même que dans application/vues/enquête/


==Insert custom CSS or JavaScript files for template==  
==Insérer des fichiers CSS ou JavaScript personnalisés pour le modèle==  


As of version 2.50, you can use the config.xml File to Automatically Load Plugin Files.
À partir de la version 2.50, vous pouvez utiliser le fichier config.xml pour charger automatiquement les fichiers de plug-in.


*Upload your files to the template /css or /scripts folder
*Téléchargez vos fichiers dans le dossier modèle /css ou /scripts 
*In /{your_template}/config.xml, add the file paths to the <css> or <js> blocks, something like this:<syntaxhighlight lang="xml" enclose="div"><css>
*Dans /{your_template}/config.xml, ajoutez les chemins de fichiers au<css> ou<js> blocs, quelque chose comme ceci :<syntaxhighlight lang="xml"><css>  
<filename>css/jquery-ui-custom.css</filename>
<filename> css/jquery-ui-custom.css</filename>  
<filename>css/bootstrap-slider.css</filename>
<filename> css/bootstrap-slider.css</filename>


<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
<filename>css/génial-bootstrap-checkbox/génial-bootstrap-checkbox.css</filename>  
<filename>css/flat_and_modern.css</filename>
<filename> css/flat_and_modern.css</filename>


<filename>css/template.css</filename>
<filename>css/template.css</filename>


<filename>css/myCustomPlugin.css</filename>
<filename>css/monPluginPersonnalisé.css</filename>  
</css>
</css>  
<js>
<js>  
<filename>scripts/template.js</filename>
<filename> scripts/template.js</filename>  
<filename>scripts/bootstrap-slider.js</filename>
<filename> scripts/bootstrap-slider.js</filename>


<filename>scripts/myCustomPlugin.js</filename>
<filename>scripts/myCustomPlugin.js</filename>  
</js>
</js>  
</syntaxhighlight>
</syntaxhighlight>
==Définitions de classe (pour les développeurs)==
===answer-list===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
|tableaux/5points || Un || tr
|-
|tableaux/10point|| B|| tr
|-
|tableaux/tableau || F || tr
|-
|tableaux/colonnes || H || tr et col
|-
|arrays/dualscale || 1 || tr
|-
|tableaux/augmentationsamediminution || E || tr
|-
|tableaux/ouiuncertain || C || tr
|-
|genre || G || div et ul
|-
|list_with_comment || À || div
|-
|classement || R || ul et div
|-
|ouinon || O || ul et div
|-
|ranking_advanced || R || ul et div
|-
|listradio || L || div
|-
|5pointchoix || 5 || ul
|-
|choix multiple || M || div
|-
|}
===radio-list===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
| ouinon || O || ul
|-
|genre || G || ul
|-
|arrays/yesnouncertain || C || tr
|-
|tableaux/augmentationsamediminution || E || tr
|-
|tableaux/double échelle || 1 || tr
|-
|tableaux/5points || Un || table et tr
|-
|arrays/10point || B || tr
|-
|tableaux/tableau || F || tr
|-
|tableaux/colonnes || H || col
|-
|listradio || L || div
|-
|list_with_comment || À || div suivi de ul
|-
|}
===radio-item===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
|tableaux/ouinonincertain || C || td
|-
|5pointchoix || 5 || li
|-
|tableaux/10points || B || td
|-
|tableaux/5points || Un || td
|-
|tableaux/tableau || F || td
|-
|tableaux/colonnes || H || td
|-
|arrays/double échelle || 1 || td
|-
|tableaux/augmentationsamediminution || E || td
|-
|genre || G || li
|-
|listradio || L || li
|-
|ouinon || O || li
|-
|listradio || L || li et div
|-
|image_select-listradio || L || li et div
|-
|list_with_comment || 0 || li
|-
|}
===list-group===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
|ouinon || O || ul
|-
|5pointchoix || 5 || ul
|-
|genre || G || ul
|-
|classement || R || ul
|-
|ranking_advanced || R || ul et div
|-
|question_index_group_buttons || || div
|-
|question_index_questions_buttons || || div
|-
|}
===list-group-horizontal===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
|ouinon || O || ul
|-
|5pointchoix || 5 || ul
|-
|genre || G || ul
|-
|}
===list-unstyled===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
|list_with_comment || 0 || ul
|-
|listradio|| L || ul
|-
|choix multiple|| M || ul
|-
|multiplechoice_with_comments|| P || ul
|-
|multiplenumérique|| K || ul
|-
|multipleshorttext|| Q || ul
|-
|classement|| R || ul
|-
|ranking_advanced|| R || ul
|-
|bootstrap_buttons_multi|| M || ul
|-
|image_select-multiplechoice|| M || ul
|-
|inputondemand/multipleshorttext || Q || ul
|-
|register_error|| || ul
|-
|register_message|| || ul
|-
|layout_survey_list || || ul
|-
|charger|| || ul
|-
|enregistrer|| || ul
|-
|captcha|| || ul
|-
|}
===select-list===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
|classement|| R || ul
|-
|ranking_advanced|| R || ul
|-
|}
===checkbox-item===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
|multiflexi (Numéros de tableau)|| : || td
|-
|choix multiple|| M || li
|-
|multiplechoice_with_comments|| P || div
|-
|image_select-listradio|| L || li
|-
|image_select-multiplechoice|| M || li et div
|-
|navigateur|| || durée
|-
|}
===checkbox-text-item===
{|class=wikitable
!'''Question'''!!'''Type de question'''!!'''éléments'''
|-
|choix_multiples_avec_comments|| P || li
|-
|choix multiple|| M || li
|-
|image_select-multiplechoice|| M || li
|-
|}


[[Category:Theme]]
[[Category:Theme]]
[[Category:Twig]]
[[Category:Twig]]

Latest revision as of 16:32, 4 October 2023

Other languages:

Présentation

LimeSurvey dispose d'un système avancé de thèmes et de styles offrant aux développeurs un moyen efficace de personnaliser l'apparence de l'enquête. Depuis LS3, le terme "modèles" a été remplacé par le terme "thèmes". Les Thèmes permettent de contrôler le style des pages d'une enquête. Un administrateur d'enquête peut sélectionner un thème par défaut qui sera utilisé pour chaque enquête afin de la personnaliser davantage. Thèmes est livré avec des options qui fournissent à un administrateur sans compétence en codage un moyen simple d'ajouter un logo sur la page d'accueil, de modifier les couleurs d'arrière-plan, de sélectionner une police, etc.


LimeSurvey est livré avec 3 thèmes. Ces thèmes initiaux sont définis par des répertoires situés dans le répertoire "themes/survey/" de l'installation de LimeSurvey. Chaque thème possède son propre répertoire. Au sein du répertoire principal d'un thème vous trouverez un fichier de configuration en XML, et de nombreux répertoires contenant les vues themes (.twig), feuilles de style en cascade (.css), 'scripts, images ('.jpg ou .png), et peut-être d'autres.


Depuis LimeSurvey 2.50, le moteur de thème utilise Bootstrap 3 comme framework CSS. Étant donné que Bootstrap 3 est un framework standard, les développeurs trouveront de nombreuses documentations, tutoriels et fils de discussion à ce sujet sur Internet.


Depuis LimeSurvey 3, le moteur de thème utilise Twig, afin que les développeurs de thèmes puissent modifier la logique du rendu de l'enquête de manière sûre et simple. Twig remplace l'ancien système de mots-clés de remplacement utilisé dans les versions précédentes. La logique utilisée pour générer le HTML des mots-clés est désormais disponible dans les vues du thème.


Extrait du thème Vanilla : 

 <div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}> 
 {# REMARQUE : Si vous souhaitez personnaliser le rendu des questions, utilisez un thème de question #}!N ! {{ uneQuestion.réponse | brut }}
</div>

Les thèmes, à savoir le code HTML et Twig, ont tendance à définir le positionnement et le type de texte à afficher ainsi que les caractéristiques structurelles similaires de la page. Ils font souvent référence ou incluent d’autres fichiers. La plupart d'entre eux font référence à un fichier CSS (feuilles de style en cascade) commun qui définit le style de police, la couleur, la taille, l'arrière-plan et des paramètres similaires communs à toutes les pages de l'enquête. Les feuilles de style font référence aux paramètres HTML class associés aux différents types d'objets dans le code HTML. Cela permet à la feuille de style de définir comment afficher chacun des nombreux types de texte ou autres objets pouvant apparaître à plusieurs endroits. Il existe des classes uniques pour chaque type de question dans LimeSurvey, ce qui permet un contrôle détaillé de l'apparence de chacune. Les fichiers image, comme les logos ou les constructeurs spéciaux de barre de progression, peuvent également être référencés dans le fichier Thème. Enfin, les mots-clés spéciaux entre accolades sont remplacés par le texte défini dans l'enquête pour chaque langue de traduction correspondante (par exemple, le « Titre de l'enquête » ou le « Texte de la question » pour chaque langue définie).

Si vous créez un nouveau thème personnalisé, pensez à le contribuer à la communauté LimeSurvey et à le mettre à la disposition des autres. Avec votre aide, nous pouvons développer notre référentiel de thèmes, d'enquêtes et d'autres modules complémentaires pour rendre LimeSurvey encore meilleur ! Consultez notre Dépôt de modèles LimeSurvey où vous pouvez partager vos modèles.

Création d'un nouveau thème

Afin de pouvoir créer un nouveau modèle (ou éditer un modèle existant), vous devez disposer de la permission d'édition de modèles dans LimeSurvey, ainsi que des droits adéquats sur le système de fichiers sur le serveur qui héberge votre installation de LimeSurvey.

Note d'avertissement : Si vous changez de thème, vous pourriez également affecter toutes les enquêtes préexistantes de votre installation LimeSurvey. Les thèmes sont une fonctionnalité avancée qui nécessite de l’expérience et des connaissances HTML.

La meilleure façon de créer un nouveau thème consiste à utiliser l'éditeur de thème (voir ci-dessous), qui se trouve sous « Configuration » dans la barre d'outils supérieure. Certains utilisateurs préfèrent travailler directement avec les fichiers de thème afin de pouvoir utiliser leur éditeur de texte préféré au lieu de l'interface Web. Dans ce cas, utilisez toujours l’éditeur de thème pour créer d’abord votre nouveau thème. Cela créera un nouveau thème de base avec tous les fichiers dont vous avez besoin dans le répertoire LimeSurvey_web_root/upload/themes/survey/your_new_template. À partir de là, vous pouvez utiliser votre éditeur de texte pour ajuster manuellement les fichiers modèles.

Remarque sur les autorisations : sur les systèmes Unix/Linux, ces fichiers de thème appartiendront au groupe et à l'utilisateur sur lesquels le serveur Web est exécuté (peut être « www » pour certains systèmes). Assurez-vous donc que vous disposez des autorisations appropriées pour modifier ces fichiers. Lorsque vous les enregistrez, assurez-vous qu'ils ne changent pas de propriétaire ! De cette façon, vous pouvez toujours utiliser l'interface d'édition de thème Web si nécessaire.


Un certain nombre d'éléments « publics » de LimeSurvey peuvent être ajustés par une série de thèmes. La section suivante fournit une très brève explication de ces modèles.

Template:Remarque

L'éditeur de thème LimeSurvey

Éditeur de thème : Configuration > Thèmes> Éditeur de thème L'éditeur de thème est uniquement disponible pour les utilisateurs avec l'autorisation Modèles et pour les superadministrateurs.


  Attention : Un thème qui n'est pas correctement construit peut rendre inutilisable une enquête (qui utilise le modèle correspondant).



L'éditeur de thèmes LimeSurvey vous permet d'éditer le contenu de vos thèmes en ligne. Pour démarrer l'éditeur de thème : cliquez sur Thèmes dans le menu Configuration, puis cliquez sur le bouton Éditeur de thème à côté du thème que vous souhaitez modifier ou étendre.


Le bouton pour accéder à l'éditeur de thème pour le thème Bootswatch


La page de l'éditeur de modèles vous permet de sélectionner le modèle que vous souhaitez modifier/afficher.



Les options suivantes sont disponibles :


  • Créer : Permet de créer un nouveau modèle. Afin de ne pas repartir de zéro, le modèle 'par défaut' est copié.
  • Importer : Permet d'importer un modèle à partir d'un fichier ZIP.
  • Exporter : Vous permet d'exporter le modèle actuel vers un fichier ZIP.
  • Copier : Vous permet de créer un nouveau modèle en copiant celui actuel.
  • Renommer : Vous permet de changer le nom du modèle. Il est généralement utilisé après avoir copié ou importé un modèle.
  • Template : Une liste déroulante qui affiche tous les modèles disponibles qui se trouvent dans votre installation LimeSurvey.
  • Écran : Une liste déroulante qui vous permet de choisir la page d'enquête particulière de ce modèle que vous souhaitez afficher.
  • Retour au panneau d'administration.

Importer/Exporter/Copier un modèle

Lorsque vous exportez un modèle, une archive de fichier ZIP avec tous les fichiers de modèle sera créée (fichiers .pstpl, images, fichiers css, ...). Vous pouvez importer le fichier zip exporté dans une autre installation de LimeSurvey en utilisant la fonction d'importation ou vous pouvez copier manuellement l'archive dans une autre installation de LimeSurvey et l'extraire dans l'modèle correspondant répertoire là.

Cependant, il est préférable d'utiliser les fonctions d'importation/exportation/copie de modèle LimeSurvey dans l'éditeur de modèle.

Structure de la page / Utilisation du modèle

  • La page de bienvenue : startpage.pstpl, bienvenue.pstpl, private.pstpl, navigator.pstpl, endpage.pstpl
  • 'Les pages de questions :' startpage.pstpl, Survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
  • La page finale : page de démarrage .pstpl, évaluation.pstpl, terminé.pstpl, page de fin.pstpl

Fichiers modèles

Les fichiers modèles suivants sont utilisés pour produire votre enquête publique et doivent exister dans tout nouveau dossier de modèles que vous créez :

  • startpage.pstpl: Produit le début de chaque page HTML. Cela commence au "<head> ", et ne doit pas contenir le "<html> ". Ce "tout début" d'une page HTML standard est écrit par les scripts. Veuillez vous assurer que vos fichiers startpage.pstpl contiennent un<body> étiqueter. Même si de nombreux navigateurs n'exigent pas le strict respect des normes HTML W3, le script LimeSurvey doit trouver une balise pour exécuter certains éléments javascript. Il n'est pas courant de voir de nombreux « mots-clés » utilisés dans le fichier startpage.pstpl. Cependant, vous souhaiterez peut-être mettre le {SURVEYNAME} dans le titre. Le fichier startpage.pstpl peut contenir du code qui se termine par le fichier endpage.pstpl correspondant. Par exemple, vous pouvez démarrer une table dans ce fichier et fermer la table dans le fichier endpage.pstpl. Les fichiers startpage.pstpl et endpage.pstpl entourent toutes les pages possibles utilisées par LimeSurvey.
  • survey.pstpl: Ce modèle est le deuxième utilisé sur la plupart des pages et fournit un espace pour mettre le nom de l'enquête. et description. Ce modèle n'a pas de modèle de « fermeture » correspondant, et par la suite vous devez fermer toutes les balises ouvertes dans ce fichier modèle (c'est-à-dire : ne laissez pas de table ouverte ici car il n'y a nulle part où la fermer).
  • ' welcome.pstpl:' Ce modèle n'est utilisé que dans l'écran d'accueil (qui se trouve également sur la page principale pour les enquêtes « tout-en-un »). Vous pouvez l'utiliser pour imprimer le texte de bienvenue et d'autres informations qui doivent être fournies dans l'introduction. Comme le fichier 'survey.pstpl', il n'y a pas de modèle de 'fermeture' correspondant, donc toutes les balises ouvertes dans ce fichier modèle doivent également être fermées.
  • startgroup.pstpl: Ce modèle peut fournir un « résumé » pour les questions au sein d'un groupe. Il dispose d'un modèle 'endgroup.pstpl' correspondant qui peut être utilisé pour fermer toutes les balises ouvertes dans ce fichier, afin que vous puissiez ouvrir une table à l'intérieur de celui-ci.
  • groupdescription.pstpl: Ce fichier modèle est utilisé pour afficher une description d'un groupe. Veuillez noter que dans les paramètres de l'enquête (accédez aux « Paramètres de présentation et de navigation » en cliquant sur l'onglet « Présentation ») vous pouvez définir si la description du groupe doit être affichée ou non. Si ce n'est pas le cas, ce fichier n'est pas inclus du tout.
  • question.pstpl: Ce fichier contient les sections de question, de réponse et de texte d'aide de votre enquête. Dans les enquêtes « groupe par groupe » et « tout-en-un », ce modèle est répété de manière répétée avec chaque question. Il n'existe pas de fichier de fermeture correspondant et toutes les balises doivent être fermées.
  • question_start.pstpl: Ce fichier contient les éléments individuels trouvés au début d'une question. Il est inclus dans « question.pstpl » via le mot-clé {QUESTION}. Il est destiné à permettre aux concepteurs de modèles de mieux contrôler la présentation d'une question. Ce modèle se situe en dehors du système de modèles normal et a été remplacé (à partir de LimeSurvey 1.87). Tous les mots-clés de ce modèle sont désormais disponibles directement dans question.pstpl.
  • completed.pstpl: Cette page s'affiche comme page finale lorsque les réponses à l'enquête ont été enregistrées et que l'enquête est terminée. Il peut être utilisé pour afficher un "lien de transfert" tel que défini dans la configuration de l'enquête.
  • endgroup.pstpl: Ce fichier ferme le groupe et peut être utilisé pour fermer toutes les balises ouvertes dans le Fichier startgroup.pstpl
  • navigator.pstpl: Ce fichier contient les boutons qui permettent de naviguer dans l'enquête, "suivant", "précédent", "dernier", "soumettre", "enregistrer jusqu'à présent". et le lien "Tout effacer". Il est utilisé dans toutes les pages sauf la page complétée.
  • printanswers.pstpl: Ce fichier contient le wrapper HTML nécessaire à la version imprimée de l'enquête.
  • print_group.pstpl : Ce fichier est le même que startgroup.pstpl et endgroup.pstpl, mais pour la version imprimée de l'enquête.
  • print_question.pstpl: Ce fichier est le même que question.pstpl , mais pour la version imprimée de l'enquête.
  • print_survey.pstpl: Ce fichier est le même que Survey.pstpl, mais pour la version imprimée de l'enquête.

CSS et Javascript

Deux fichiers qui sont toujours utilisés dans un modèle sont template.css (pour CSS) et template.js (pour Javascript).

  • {TEMPLATECSS}: Ajoutez des lignes pour le CSS par défaut, template.css, et template-rtl.css pour le langage rtl.
  • {TEMPLATEJS}: Ajoutez des lignes pour les fichiers javascript par défaut, template.js et tous les fichiers js nécessaires pour LimeSurvey.

Utilisation de Bootstrap

LimeSurvey intègre Bootstrap 3, vous pouvez donc styliser tous vos modèles avec les classes Bootstrap bien documentées. Pour plus d'informations, veuillez vous référer au Bootstrap Documentation.

Le plugin Awesome-Bootstrap-Checkbox est également inclus. Avec lui, vous pouvez utiliser les classes de couleurs Bootstrap typiques (informations, avertissement, danger, etc.) également avec le suffixe "-checkbox" ou "-radio", tout en stylisant les cases à cocher et les radios comme vous préférez.

Remplacement du CSS ou du Javascript par défaut

Certaines questions utilisent des fichiers spécifiques pour Javascript ou CSS. Si vous devez remplacer une fonction, utilisez un système en cascade. Pour la fonction javascript, la dernière fonction lue est la fonction utilisée.

Autres fichiers de modèles

Les fichiers privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl et confirmationemail.pstpl ne sont plus utilisés par LimeSurvey et les valeurs par défaut sont à la place, défini dans les fichiers de langue applicables. Les messages électroniques peuvent désormais être modifiés enquête par enquête.

Pages standards

Il existe dix pages standard qu'un participant à l'enquête peut voir au cours de l'utilisation ou de l'accès à l'application LimeSurvey. Chacun est construit à partir d'un certain nombre de fichiers Modèle communs issus du Modèle spécifié dans les paramètres de l'enquête. Le tableau ci-dessous indique quels fichiers modèles sont utilisés dans la construction de chacune de ces pages.

Pages d'enquête/
Fichiers modèles		 Enquête
Liste		 Bienvenue Question Terminé Tout effacer S'inscrire Charger Enregistrer Imprimer
Réponses		 Imprimer
Enquête
SurveyList Fichier:check.gif
Bienvenue Fichier:check.gif
Confidentialité Fichier:check.gif
Navigateur Fichier:check.gif Fichier:check.gif
Enquête Fichier:check.gif Fichier:check.gif
StartGroup Fichier:check.gif
GroupDescription Fichier:check.gif
Question * Fichier:check.gif
EndGroup Fichier:check.gif
Évaluation Fichier:check.gif
Terminé Fichier:check.gif
EffacerTout Fichier:check.gif
S'inscrire Fichier:check.gif
Charger Fichier:check.gif
Enregistrer Fichier:check.gif
ImprimerRéponses
Imprimer l'enquête
Groupe d'impression Fichier:check.gif
Imprimer la question Fichier:check.gif
Page de démarrage
Page de fin
Modèle.css		 Fichier:check.gif Fichier:check.gif Fichier:check.gif Fichier:check.gif Fichier:check.gif Fichier:check.gif Fichier:check.gif Fichier:check.gif Fichier:check.gif

* REMARQUE : Dans la version 1.90+, cela remplace question.pstpl ET question_start.pstpl. Si vous utilisez un ancien modèle personnalisé, vous devez ajouter la ligne suivante au début de question.pstpl : 

<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">

Et puis ajoutez la balise de fermeture correspondante à la fin de question.pstpl :

</div>

* REMARQUE : Dans les versions 1.91 et antérieures, les fichiers LimeSurvey js ne sont pas inclus dans le modèle. Dans la version 2, vous devez utiliser {TEMPLATEJS} dans l'un de vos fichiers modèles pour ajouter le lien vers le fichier js. Vous pouvez l'ajouter dans startpage.pstpl ou dans endpage.pstpl. Vous pouvez supprimer la ligne {TEMPLATEURL}/template.js et vous devez la remplacer par {TEMPLATEJS} pour mettre à jour un modèle personnel.

La section de contrôle des fichiers

Dans la fenêtre "Contrôle des fichiers" à gauche, vous pouvez cliquer sur l'un des fichiers modèles utilisés pour compiler la page. Vous pouvez voir la « Partie écran », les fichiers JavaScript et CSS. Le code HTML de ce fichier apparaîtra alors dans la fenêtre « Modification en cours » au centre. Si le modèle est modifiable (déterminé par les autorisations du répertoire), vous pouvez alors apporter des modifications et les enregistrer.


La fenêtre "Autres fichiers" affiche une liste de tous les autres fichiers du répertoire de modèles. Vous pouvez utiliser le côté droit pour télécharger et sélectionner des fichiers image (vos photos, logos,...) ou d'autres fichiers nécessaires à la création de votre modèle.


Au lieu d'utiliser un lien pour chaque image, utilisez la chaîne de champ {TEMPLATEURL}. Donc au lieu de : 

img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'

Vous pouvez utiliser (New in 2.50 ): 

 img src='{TEMPLATEURL}fichiers/monimage.jpg'

Dans les versions de LimeSurvey antérieures à 2.50, utilisez : 

 img src='{TEMPLATEURL}monimage.jpg'

Un « échantillon » du modèle de page que vous modifiez sera visible en bas de l'écran. Il n'existe aucun moyen de supprimer un modèle de l'éditeur de modèles. Cela doit être fait en accédant au répertoire sous-jacent et en supprimant manuellement les fichiers à partir de là. Vous avez également la possibilité de sélectionner différentes résolutions d'écran afin de mieux évaluer la convivialité et l'apparence du modèle.

Remarque : Les modèles livrés ne peuvent pas être modifiés à l'aide de l'éditeur de modèles. Si vous souhaitez les modifier, créez d'abord une copie et modifiez la copie.

Emplacement des fichiers modèles

LimeSurvey stocke chacun des modèles « standard » dans son propre sous-répertoire distinct au sein du répertoire « /templates » qui est conservé dans le répertoire public avec les autres fichiers publics LimeSurvey. Les modèles utilisateur personnalisés sont stockés dans le répertoire /upload/templates.

Il devrait TOUJOURS y avoir un répertoire "par défaut" dans le répertoire des modèles. Ce modèle est utilisé par défaut et comme solution de secours si un dossier de modèles n'existe pas ou est introuvable. Il est installé par défaut.

Vous pouvez utiliser n'importe quel fichier image que vous téléchargez dans la zone de gestion des modèles à l'aide de cette syntaxe : 

{TEMPLATEURL}nomfichier.xyz

Questions de style avec CSS

Le style des questions en CSS est devenu beaucoup plus simple. Chaque type de question possède désormais une classe unique. Les questions obligatoires ont une classe obligatoire supplémentaire. Par exemple, pour une question non obligatoire : 

<div id="question5" class="gender">
...
</div>

et si la question est obligatoire : 

<div id="question5" class="gender mandatory">
...
</div>

et si la question est obligatoire, mais que l'utilisateur n'y a pas répondu ou s'il y a validation sur une question : 

<div id="question5" class="gender mandatory input-error">
...
</div>

et si la question a une validation appliquée, mais que l'utilisateur n'a pas répondu correctement : 

<div id="question6" class="text-short input-error">
...
</div>

Classes globales pour la partie question

Ces classes sont utilisées pour chaque type de question. Certains types de questions n’utilisent qu’une ou deux classes, tandis que d’autres peuvent en utiliser beaucoup plus.

Classes globales
Nom de la classe Partie Type de question Exemples Remarque
.question (Obsolete since 3.0) Tous les blocs de questions Toutes les questions sont de type 

,

    ,
    .ls-answers (New in 3.0 ) Tous les blocs de questions Toutes les questions sont de type 
    ,
      ,
      .subquestions-list Liste des sous-questions Question à choix multiples, type de question matricielle 
        ,
        .questions-list est également utilisé
        .liste-de-réponses Liste des réponses Question à choix unique, type de question matricielle, question de texte à entrées multiples 
          ,
          .élément de réponse La partie réponse : une réponse  Question à choix unique, type de question matricielle, question de texte à entrées multiples 
        • ,
          • .noanswer-item La partie réponse pour non-réponse  Question à choix unique, type de question matricielle 
        • ,
          		• Aucune réponse n'est également une réponse, alors ayez une double classe noanswer-item et Answer-item
          .question-item La partie question : une question  Question multi-texte, type de question matricielle 
        • ,
          • Certaines réponses sont aussi des questions. Ensuite, nous avons beaucoup de class="question-itemanswer-item"
          .liste-de-boutons Une liste de boutons Oui non et question genre
          .bouton-article La partie réponse avec un bouton Oui non et question genre
          • .checkbox-list Une liste de cases à cocher  Question à choix multiples, type de question à numéro de tableau (case à cocher)
            ,
          Certains types de questions utilisent une classe multi-liste, comme une case à cocher avec commentaire : class="checkbox-list text-list"
          .checkbox-array (New in 3.0 ) Un tableau de cases à cocher Tableau (nombres) avec option de case à cocher 
          .checkbox-item La partie réponse avec une case à cocher  Question à choix multiples, type de question à numéro de tableau (case à cocher)
        • ,
          • .radio-list Une liste d'éléments radio  Question à choix unique, type de question matricielle (chaque ligne)
            ,
          .radio-array (New in 3.0 ) Une gamme d'articles radio Type de question tableau
          .radio-item La partie réponse avec une radio Question à choix unique, type de question matricielle 
        • ,
          		•
          .text-list Une liste de saisie de texte  Type de question multi-texte, tableau de texte 
            ,
          .text-item La partie réponse d'une saisie de texte Type de question multi-texte, tableau de texte 
        • ,
          		•
          .liste-numérique Une liste de saisie de texte avec une réponse numérique uniquement  Type de question multinumérique, tableau de nombres 
            ,
          .liste-numéros Une liste de saisie de texte avec une réponse numérique uniquement (chaque ligne) Type de question multinumérique, tableau de nombres 
            ,
          .number-array (New in 3.0 ) La partie réponse d'une entrée numérique Tableau de nombres
          .select-list (Obsolete since 2.50) Une liste de select Numéros de tableau, tableau à double échelle (sélectionner)
          .dropdown-list (New in 2.50 ) Une liste de select Numéros de tableau, tableau à double échelle (sélectionner) (chaque ligne) 
          .dropdown-array (New in 3.0 ) Un tableau de listes déroulantes Numéros de tableau, tableau à double échelle (sélectionner)
          .select-item (Obsolete since 2.50) La partie réponse d’un select Numéros de tableau, tableau à double échelle (sélectionner), choix unique avec select

          ,

          .dropdown-item (New in 2.50 ) La partie réponse d’un select Numéros de tableau, tableau à double échelle (sélectionner), choix unique avec select

          ,

          .hide (Obsolete since 3.0) Utilisé pour l'accessibilité : caché avec css mais lu par lecteur d'écran, depuis 2.50 : vous pouvez utiliser sr-only depuis bootstrap Question textuelle courte <label class="hide"> Peut être utilisé à d’autres fins
          .ls-js-hidden (New in 3.0 ) Utilisé pour qu'une partie soit masquée si javascript est activé Bouton par exemple 
          		Le noyau de LimeSurvey l'a utilisé, mais vous pouvez également l'utiliser dans votre modèle
          .ls-js-hidden-sr (New in 3.0 ) Utilisé pour l'accessibilité : masquez-le si js est activé, mais affichez-le toujours si l'utilisateur utilise un lecteur d'écran  Bouton par exemple  <a class="ls-js-hidden-sr"> Bouton
          .ls-no-js-hidden (New in 3.0 ) Utilisé pour qu'une partie soit masquée si javascript n'est pas activé Lien <a class="ls-no-js-hidden"> Le noyau de LimeSurvey l'a utilisé pour le lien inactif si javascript n'est pas activé
          .ls-label-xs-visibility (New in 3.0 ) Étiquette à masquer sur grand écran, mais à afficher avec un petit écran (sans plus de tableau) et au lecteur d'écran étiquette <label class="ls-no-js-hidden"> Utilisé pour l'étiquette à l'intérieur d'une cellule de tableau du type de question de tableau 
          .ls-input-group-extra (New in 3.0 ) Même utilisation du module complémentaire boostrap input-group-addon, mais sans la bordure et l'arrière-plan. suffixe droit
          		Utilisé pour les suffixes droit et gauche (global)
          .checkbox (Obsolete since 3.0) entrée[type=checkbox] Question avec case à cocher  <input type="checkbox" class="checkbox"> Avec un navigateur moderne : pas nécessaire, mais certains anciens navigateurs en ont besoin 
          .radio (Obsolete since 3.0) entrée[type=radio] Question à la radio <input type="radio" class="radio"> Avec un navigateur moderne : pas nécessaire, mais certains anciens navigateurs en ont besoin 
          .text entrée[type=texte] Question avec texte de saisie, ou textarea <textarea class="text">
          .answertext Type de question tableau Répondez à une partie du type de question du tableau 
          .col-réponses Type de question tableau Colonne de réponses <col class="col-answers">
          .impair .pair (Obsolete since 2.50) Type de question tableau Alternance pour la colonne <col class="odd">
          .array1 .array2 (Obsolete since 3.0) Type de question tableau Alternance pour la ligne
          .ls-impair .ls-even (New in 3.0 ) Type de question tableau Alternance pour la sous-question et l'axe Y

          Quelques exemples de partie question avec des classes

          Type de question textuelle courte :
          <p class="question answer-item text-item ">
<label class="hide label" for="answerSGQA">Answer</label><input type="text" value="" id="answerSGQA" name="SGQA" size="50" class="text  empty">
</p>
          Plusieurs textes courts
          <ul class="subquestions-list questions-list text-list">
  <li class="question-item answer-item text-item" id="javatbdSGQA">
    <label for="answerSGQA">Some example subquestion</label>
     <span><input type="text" value="" id="answerSGQA" name="SGQA" size="20" class="text empty"></span>
  </li>
</ul>
          Type de question tableau
          <table class="question subquestion-list questions-list ">
	<caption class="hide read">Some explanation for accessibility.</caption>
	<colgroup class="col-responses">
		<col width="50%" class="col-answers">
		<col width="25%" class="odd">
		<col width="13.3%" class="col-no-answer even">
	</colgroup>
	<thead>
		<tr class="array1 dontread">
			<td>&nbsp;</td>
			<th>1</th>
			<th>No answer</th>
		</tr>
	</thead>
	<tbody>
		<tr class="array2 answers-list radio-list" id="javatbdSGQ">
			<th width="20%" class="answertext">Some example subquestion
			</th>
			<td class="answer_cell_001 answer-item radio-item">
				<label for="answerSGQA" class="hide read">1</label>
				<input type="radio" value="1" id="answerSGQA" name="SGQA" class="radio">
			</td>
			<td class="answer-item radio-item noanswer-item">
				<label for="answerSGQA" class="hide read">No answer</label>
				<input type="radio" value="" id="answerSGQA" name="SGQA" class="radio">
			</td>
		</tr>
	</tbody>
</table>

          La liste complète des classes de questions

          Type de question Classe de question ID de question
          Choix en 5 points .choix -5-pt-radio 5
          Array (choix de 10 points) .array-10-pt B
          Array (choix de 5 points) .array-5-pt A
          Array (étiquettes flexibles) double échelle .array-flexible-duel-scale 1
          Array (Augmenter, Idem, Diminuer) .array-increase-same-diminution E
          Array (Multi Flexible) (Nombres) .array-multi-flexi - Array (Multi Flexible) (Texte) .array-multi-flexi-text ;
          Array (Oui/Non/Incertain) .array- oui-incertain-non C
          Array (étiquettes flexibles) .array-flexible-row F
          |.array-flexible-column H
          Question passe-partout .boilerplate X
          Date .date D
          Équation .equation *
          Gender .gender G
          Énorme texte libre .text-huge U
          Changement de langue .langue I
          Liste (liste déroulante) .list-dropdown !
          Liste (radio) .list-radio L
          Liste avec commentaire .list-with-comment O
          Texte libre long . text-long T
          Saisie numérique multiple .numeric-multi K
          Options multiples .multiple-opt M
          Plusieurs options avec commentaires .multiple-opt-comments P
          Plusieurs textes courts .multiple-short-txt Q
          Classement .ranking R
          Texte libre court .text-short S
          Oui/Non .oui-non Y

          La liste complète des classes de validation

          Remarque : Avant la version 1.92, seules les classes .mandatory et .input-error étaient disponibles.

          Ceux-ci s’appliquent aux messages d’aide et/ou de conseils de validation afin que chaque type puisse être stylisé individuellement.

          Les options .hide-tip et .input-error interagissent par défaut afin que vous puissiez masquer les astuces de validation. Cependant, ils apparaissent en cas d'erreurs de validation et disparaissent à nouveau lorsque ces erreurs sont rectifiées.

          Tous ces éléments sont conçus pour éliminer le besoin de messages d’alerte contextuels. Au lieu de cela, les astuces peuvent apparaître/disparaître selon les besoins et sont codées par couleur pour indiquer si les réponses satisfont aux critères de validation.

          De plus, lorsque vous visitez pour la première fois une page dont les critères de validation ne sont pas encore satisfaits, vous pouvez coder les conseils dans une couleur agréable pour indiquer quels critères de validation n'ont pas encore été remplis ; puis réaffichez la page en utilisant une couleur plus dure si la personne soumet la page avec des erreurs de validation persistantes.

          Objectif Classe CSS Description
          Obligatoire .obligatoire la question est obligatoire
          Erreur de saisie utilisateur .input-error la question avait au moins une erreur de validation
          Masquer l'astuce .hide-tip ajouté si vous utilisez l'option hide_tip
          defrault type .em_default pour le jeu de pourboires par défaut (valeur numérique, etc …)
          Num réponses .em_num_answers pour pour min_answers et max_answers
          Plage de valeurs .em_value_range pour min/max_num_value_n et multiflexible_min/max
          Plage de somme .em_sum_range pour min/ max/equals_num_value
          Validation Regex .em_regex_validation pour la validation par expression régulière de la question
          Fonction de validation au niveau de la question .em_q_fn_validation pour la option em_validation_q
          Fonction de validation au niveau de la sous-question .em_sq_fn_validation pour l'option em_validation_sq
          Autre commentaire obligatoire .em_other_comment_mandatory pour l'option other_comment_mandatory - indique quand "autre" est sélectionné mais le commentaire associé est manquant.

          Importation de styles dans votre modèle personnalisé

          Les styles de questions personnalisés se trouvent au bas du fichier CSS de chaque modèle et commencent par :
           /* -------------------------------- DÉBUT : Styles de questions ----------------- ------------- */

          Si vous créez votre propre modèle personnalisé, vous devriez pouvoir copier tout ce qui suit celui ci-dessus à partir de templates/default/template.css (pour les mises en page basées sur des tableaux) ou /templates/limespired/template. css (pour les mises en page basées sur CSS) dans votre propre feuille de style sans aucun impact sur vos autres styles.

          Feuilles de style conditionnelles d'Internet Explorer

          En raison des différences marquées dans le rendu entre IE6 et IE7 et les autres navigateurs, des feuilles de style conditionnelles IE spéciales sont incluses pour chaque modèle. 

           <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_all-versions.css" />
<![endif]--> 
 <!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}IE_fix_older-than-7.css" />
<![endif]--> 
 <!--[if IE 8]>
		<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<![endif]-->

          Vous devez inclure le code ci-dessus dans votre startpage.pstpl et des copies des feuilles de style IE de /templates/default/ ou /templates/limespired pour la disposition de base des tableaux et Mise en page basée sur CSS respectivement.

          Remarque : Si vous copiez les styles dans votre propre feuille de style, vous devrez certainement les modifier.

          Solution alternative pour Internet Explorer

          Vous pouvez mettre une classe conditionnelle pour le corps dans startpage.pstpl et utiliser cette classe dans votre template.css. Cette méthode est utilisée dans le modèle citronnade (Obsolete since 2.06). Ajout d'une classe js/no-js pour avoir un système javascript/no javascript. 

          <!--[if lt IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie6 ielt7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 7 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie7 ielt8 ielt9 no-js"> <![endif]-->
<!--[if IE 8 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie8 ielt9  no-js"> <![endif]-->
<!--[if IE 9 ]> <body class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} ie ie9 no-js"> <![endif]-->
 <!--[if gt IE 9]><!--><body id="body" class="lang-{SURVEYLANGUAGE} {SURVEYFORMAT} no-js"><!--<![endif]--> 
 <script type='text/javascript'>/*<![CDATA[*/(function(H){ H.className=H.className.replace(/\bno-js\b/,'js') })(document.getElementsByTagName('body')[0]);/*]]>*/</script>

          Et dans template.css, utilisez : 

          .ie6{/*spécifique à Internet Explorer 6*/}
.ielt8{/*spécifique à Internet Explorer 6 et 7*/}
.ie{/*spécifique à tous Internet Explorer */}

          Langues de droite à gauche (RTL) et justifier

          L'éditeur de texte de LimeSurvey est capable de formater le texte RTL. Cependant, l'éditeur lui-même affiche le langage RTL dans un format de gauche à droite lorsqu'il est justifié. Il s'agit simplement d'un problème d'affichage de l'éditeur. Le RTL et la question ou le texte justifié s'afficheront correctement de droite à gauche, même justifiés, dans votre enquête ou en aperçu.

          Mots clés

          Template:Obsolète

          Les mots clés d'un fichier modèle sont remplacés par les informations d'enquête actuelles. Ils sont entourés d'accolades, par exemple : {SURVEYNAME}.

          Les chaînes suivantes seront remplacées par LimeSurvey lors de l'analyse du fichier modèle et de sa présentation aux utilisateurs de l'enquête. Ces chaînes de champs fonctionneront sur presque tous les modèles, à l'exception de la « Page terminée ». (La plupart de ces chaînes se trouvent dans le fichier common.php. Si ce n'est pas le cas, regardez dans le fichier index.php.)

          Mot-clé Fichiers modèles Description
          {SURVEYNAME} Tous Fichiers Le titre de l'enquête
          {SURVEYDESCRIPTION} Tous les fichiers La description de l'enquête
          {WELCOME} Tous les fichiers (principalement pour Welcome.pstpl) Le texte de bienvenue de l'enquête 
          {PERCENTCOMPLETE} survey.pstpl Un petit graphique montrant le pourcentage de l'enquête terminée
          |startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl Affiche le nom du groupe actuel
          {GROUPDESCRIPTION} startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl Affiche le groupe actuel description
          {NUMBEROFQUESTIONS} welcome.pstpl Affiche le nombre total de questions de l'enquête (juste le nombre)
          {THEREAREXQUESTIONS} welcome. pstpl Affiche la phrase « Il y a X questions dans cette enquête » - à partir du fichier de langue concerné. Le X est remplacé par le nombre de questions. Notez que cela fonctionnera également de manière appropriée pour le singulier ou le pluriel. S'il n'y a qu'une seule question, il affichera "Il y a 1 question dans cette enquête".
          {CHECKJAVASCRIPT} Tous les fichiers (principalement pour Welcome.pstpl) Message d'avertissement à la fin- le navigateur de l'utilisateur a désactivé javascript
          {QUESTION} Question.pstpl - {ANSWER} question.pstpl, print_question.pstpl présente le formulaire de réponse pour la question actuelle
          {SGQ} question.pstpl, texte de la question Peut être utilisé dans le texte de la question lui-même pour référencer dynamiquement le champ de saisie de la question en affichant l'identifiant de la question du groupe d'enquête pour la question actuelle. (à partir de la version svn 9755)
          {QUESTIONHELP} question.pstpl, print_question.pstpl Affiche le texte d'aide (astuce prédéfinie pour le type de question) pour la question actuelle
          {QUESTION_CLASS} question.pstpl, print_question.pstpl classe unique pour chaque type de question. (À inclure dans la balise d'habillage de la question.)
          {QUESTION_CODE} question.pstpl, print_question.pstpl Affiche le code de la question actuelle
          {QUESTION_ESSENTIALS } question.pstpl l'ID de la question et (si une question est conditionnelle), 'style="display:none;"'. (À inclure dans la balise d'habillage de la question.)
          {QUESTION_HELP} question.pstp, question_start.pstpl Affiche le texte d'aide défini par l'utilisateur pour la question actuelle
          {QUESTION_TYPE_HELP} print_question.pstp Affiche le texte d'aide défini par l'utilisateur pour la question actuelle
          {QUESTION_INPUT_ERROR_CLASS} question.pstp, question_start.pstpl Fournit une classe si une erreur de saisie utilisateur s'est produite 
          {QUESTION_ID} print_question.pstp Fournit un identifiant unique pour chaque question afin de permettre le style de questions spécifiques
          |question.pstp, print_question.pstp, question_start.pstpl Affiche le texte de la question actuelle
          {QUESTION_MANDATORY} question.pstp, print_question.pstp, question_start.pstpl Affiche le Texte « obligatoire » traduit pour la question actuelle 
          {QUESTION_MAN_CLASS} question.pstpl, print_question.pstpl class si une question est obligatoire. (À inclure dans la balise d'habillage de la question.)
          {QUESTION_MAN_MESSAGE} question.pstp, print_question.pstp, question_start.pstpl Affiche le texte du message d'aide « obligatoire » traduit pour le question
          {QUESTION_NUMBER} print_question.pstpl Nombre incrémentiel de questions.
          {QUESTION_VALID_MESSAGE} question.pstp, print_question.pstp, question_start.pstpl Affiche le texte traduit du message d'aide valide pour la question actuelle
          {QUESTION_SCENARIO} print_question.pstp Imprime le texte du « scénario » pour les questions conditionnelles.
          {NAVIGATOR} navigator.pstpl Affiche les boutons de navigation (suivant, précédent, dernier)
          {CLEARALL} Tous les fichiers (sauf destinés à navigator.pstpl) Affiche le Lien « Quitter et effacer les résultats » 
          {COMPLETED} completed.pstpl Affiche le message « terminé » pour l'enregistrement, changera selon que les champs attribut_1 et attribut_2 sont définis.
          {URL} completed.pstpl Affiche l'url et le texte de l'enquête
          {PRIVACYMESSAGE} privacy.pstpl Le message de confidentialité s'affiche si vous définissez votre enquête comme étant anonyme. Le texte peut être modifié/traduit dans les fichiers de langue. Cela peut également être modifié manuellement en modifiant le modèle Privacy.pstpl que vous souhaitez utiliser.
          {TEMPLATEURL} Tous les fichiers L'URL de l'emplacement actuel du modèle (utile pour référencer les fichiers image dans votre modèle)
          {SURVEYRESOURCESURL} Tous les fichiers L'URL des fichiers actuellement téléchargés pour cet emplacement d'enquête (utile pour référencer les fichiers image dans votre question, groupe, ....)
          {SUBMITCOMPLETE} endpage.pstpl La déclaration (à partir des fichiers de langue) qui indique à l'utilisateur qu'il a terminé l'enquête et qu'il doit appuyer sur le bouton « Soumettre »
          {SUBMITREVIEW} survey.pstpl La déclaration (à partir des fichiers de langue) qui indique à l'utilisateur qu'il peut réviser/modifier les réponses qu'il a données en cliquant sur "<< prev"
          {SAVEDID} Tous les fichiers Affiche l'ID de réponse de l'utilisateur
          {QUEXMLPDF} Tous les fichiers Affiche le bouton pour exporter le PDF queXML du questionnaire, y compris réponses saisies jusqu'au point qui a été complété dans l'enquête.
          {TOKEN:FIRSTNAME} Tous les fichiers ***Si les réponses à l'enquête ne sont PAS ANONYMES - sont remplacées par les utilisateurs en premier nom de la table des jetons 
          {TOKEN:LASTNAME} Tous les fichiers ***Si les réponses à l'enquête ne sont PAS ANONYMES - est remplacé par le nom de famille de l'utilisateur de la table des jetons*** 
          {TOKEN:EMAIL} Tous les fichiers ***Si les réponses à l'enquête ne sont PAS ANONYMES - est remplacée par l'e-mail de l'utilisateur à partir de la table des jetons***
          {TOKEN:ATTRIBUTE_1} Tous les fichiers ***Si les réponses à l'enquête ne sont PAS ANONYMES - sont remplacées par l'attribut_1 des utilisateurs de la table des jetons***
          |Tous les fichiers ***Si les réponses à l'enquête ne sont PAS ANONYMES - sont remplacées par l'attribut utilisateur_2 de la table des jetons***
          {ANSWERSCLEARED} De préférence dans navigator.pstpl Le Instruction "Réponses effacées" des fichiers de langue
          {RESTART} clearall.pstpl URL pour redémarrer l'enquête
          {REGISTERERROR} register.pstpl Affiche tous les messages d'erreur sur la page d'inscription (c'est-à-dire : "Vous devez inclure une adresse e-mail")
          {REGISTERMESSAGE1} register.pstpl La déclaration "Vous devez être inscrit pour compléter cette enquête" à partir des fichiers de langue
          {REGISTERMESSAGE2} register.pstpl Détails sur l'enregistrement à partir des fichiers de langue
          {REGISTERFORM} register.pstpl Le formulaire d'inscription réel changera selon que les champs attribut_1 et attribut_2 sont définis.
          {SAVE} Fonctionne sur navigator.pstpl Affiche le message « Enregistrez vos réponses afin loin' pour proposer à l'utilisateur de sauvegarder et de revenir plus tard pour continuer l'enquête. Si l'option Enregistrer est désactivée dans les propriétés de l'enquête, la balise ne sera pas affichée et ignorée.
          {LANGUAGECHANGER} survey.pstpl Affiche un commutateur dans les enquêtes multilingues pour modifier la question.

          Entrée/Boutons

          Chaque type « d'entrée » dans une enquête a reçu son propre nom de classe, afin que vous puissiez ajouter du CSS à votre fichier « startpage.pstpl » et avoir un certain contrôle sur l'apparence des boutons et des entrées du formulaire. Ces noms de classe sont les suivants :

          • submit (boutons de soumission)
          • text (entrées de texte - pour un texte libre court, une date et un type numérique)
          • answertext (Texte des réponses)
          • radio (Boutons radio)
          • checkbox (cases à cocher)
          • 'select' (Sélectionner / Zones de liste)
          • textarea (Saisies de texte de grande taille - pour un texte libre et long)
          • clearall (La fonction "Quitter et effacer l'enquête " lien)
          • rank (La question de style de classement. Ne définit pas la couleur de la zone de sélection ou des zones de texte, mais elle permet de changer la couleur d'arrière-plan, la couleur du texte, la taille, etc. ., pour le reste de la question de classement)
          • graph (Le tableau graphique "Pourcentage complété")
          • innergraph (Le tableau à l'intérieur du tableau graphique - ce contient le texte 0% et 100%. Utilisez ceci pour modifier la taille de ce texte)
          • question (Paramètres généraux pour toute question affichée dans un tableau. En général, vous devez utiliser ceci pour assurez-vous que la taille et la couleur de leur police sont les mêmes que celles que vous avez utilisées ailleurs par défaut)
          • obligatoire (Questions obligatoires)
          • erreur d'entrée (Utilisateur erreur de saisie - pour si un utilisateur a fait une erreur avec une question obligatoire ou une question avec validation)
          • array1 et array2 (Ces deux styles sont cyclés lors de la présentation de la plage de réponses à une question de type tableau. Cela vous permet de définir une couleur d'arrière-plan alternée pour ces types de questions. Array1 est également utilisé pour les en-têtes de colonnes dans ces types de questions)
          • errormandatory (Définit la couleur et le style du message d'erreur "Cette question est obligatoire")
          *warningjs (Définit la couleur et le style du message d'avertissement affiché si le navigateur du participant a désactivé javascript)

          Certains éléments sont également accessibles en utilisant l'ID de l'élément ("#ID" en CSS) :

          • surveycontact (Le message de contact affiché sur la page d'accueil)
          • tokenmessage (utilisé pour les messages à l'intérieur de l'enquête, par exemple le message d'erreur de session expirée)

          Parce que vous pouvez modifier tous les aspects HTML, il n'y a aucune raison d'entourer vos modèles d'un 

          <div class='new_name'></div>

          puis définissez un CSS pour cette classe new_name.

          Style de la barre de progression

          L'apparence de la barre de progression peut être modifiée avec CSS.

          Pour changer la couleur d'arrière-plan de la barre, ajoutez quelque chose comme ce qui suit à la fin de votre fichier custom.css (exemple pour le thème fruité) : 

          .fruity .progress-bar {
 couleur d'arrière-plan : #3300FF;
}

          Pour changer la couleur de la bordure de la barre, ajoutez quelque chose comme ce qui suit à la fin de votre fichier custom.css (exemple pour le thème fruité) : 

          .fruity .progress-bar {
 bordure : 1px solide #FF0000;
}

          Fonctionnalités avancées disponibles pour les développeurs

          LimeSurvey a intégré certains correctifs créés par les utilisateurs qui permettent des modifications spéciales. Ces fonctionnalités très avancées nécessitent (généralement) des modifications de la base de code sous-jacente de LimeSurvey et doivent être effectuées avec soin afin de ne pas introduire de failles de sécurité.

          Prise en charge de vos propres fonctions Javascript

          Certains utilisateurs peuvent avoir besoin d'exécuter Javascript sur les pages d'enquête, mais l'appel de checkconditions() dans l'élément BODY a rendu cela impossible. Cet appel a été remplacé par une petite fonction JavaScript dans le HEAD qui détecte l'existence de checkconditions() et template_onload() avant de les appeler. De cette façon, un auteur de modèle peut créer sa propre fonction template_onload() dans le HEAD qui remplace celle par défaut.

          • Désactivez le filtre XSS - dans Paramètres globaux -> Sécurité, définissez "Filtre HTML pour XSS" sur Non.
          • Entrez votre script dans la source d'une question ou d'une description de groupe.

          Template:Remarque


          Trucs et astuces

          Élément spécifique à la langue

          Si vous souhaitez avoir une phrase spécifique à une langue dans une enquête, par exemple une aide à la fin de chaque page, vous pouvez ajouter un fichier .pstl à une phrase et la masquer pour l'autre langue. Si nous le cachons dans le template.css, nous pouvons utiliser le pseudo sélecteur :lang, mais nous utilisons une classe pour une meilleure compatibilité.

          Ci-dessous, vous trouverez deux phrases d'aide, en français et en anglais. Mettez ceci sur endpage.pstpl : 

          <div class="fr" lang="fr">Pour de l'aide en appelez directement le 000000</div> 
<div class="en" lang="en"> Pour obtenir de l'aide, veuillez appeler le 000000</div>

          et dans template.css : 

          .lang-fr .en{display:none}
.lang-fr .fr{display:none}

          Modifier la mise en page de la page d'enquête

          Après avoir modifié et enregistré un modèle, celui-ci s'applique à une page de liste d'enquête uniquement s'il est sélectionné dans les paramètres de l'enquête. Pour en faire le modèle par défaut, rendez-vous sous l'onglet Général situé dans les Paramètres globaux de votre installation LimeSurvey et choisissez le modèle souhaité. À partir de ce moment, tous les modèles qui utilisent l'option "par défaut" comme modèle, ainsi que ceux qui vont être nouvellement créés, utiliseront le modèle par défaut nouvellement sélectionné.

          Pour utiliser votre modèle actuel pour cette page, vous devez modifier le paramètre approprié dans Paramètres globaux. Dans les anciennes versions, cette modification peut être effectuée en modifiant le paramètre $defaulttemplate à partir du fichier de configuration : copiez ce paramètre de config-defaults.php vers config.php qui remplace config-defaults.php et modifiez ce paramètre en $defaulttemplate = 'yourtemplatename'; .

          Import/Export de modèles : utilisateurs Mac

          Utilisateurs Mac , veuillez noter que l'utilitaire d'archivage par défaut de Mac OSX peut rencontrer des problèmes avec les dossiers zip « générés à la volée ».

          Une solution de contournement consiste à décompresser les Unix à partir de la ligne de commande :

          $ décompresser template.zip -d modèle

          Archive : template.zip

          gonfler : modèle/page de démarrage

          gonfler: ...

          Une autre solution consiste à utiliser des scripts dans leurs homologues compilés sur Mac.

          Utilisez le même modèle avec des logos différents

          Si vous souhaitez utiliser le même modèle pour toutes les enquêtes et souhaitez simplement modifier le logo de chaque enquête, vous pouvez utiliser l'espace réservé {SID} dans le fichier .pstpl du modèle et ainsi faire référence à différentes images : 

          <img src="{TEMPLATEURL}files/logoImage-{SID}.png">

          Afficher le favicon personnalisé

          Un favicon est la petite icône que vous voyez dans la barre d'adresse, la liste des favoris ou l'onglet du navigateur. Vous pouvez afficher votre propre icône comme suit :

          1. Créer un favicon - Vous pouvez utiliser Google pour trouver de nombreux générateurs de favicon gratuits.
          2. Nommez votre nouveau favicon "favicon.ico" et placez-le dans votre modèle/fichiers répertoire.
          3. Ajoutez le code suivant à votre startpage.pstpl avant le</head> étiqueter.
          <link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon"> 
<link rel="icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">

          Apparence différente pour les pages d'enquête/de questions

          Si vous souhaitez que LimeSurvey change l'apparence d'une page sur deux (c'est-à-dire les pages d'enquête paires et impaires), vous pouvez utiliser la classe .page-odd dans votre fichier CSS pour modifier l'apparence des pages impaires.

          Un exemple du modèle par défaut de LimeSurvey 1.91+ : 

          .page-odd table.question-group {
 couleur d'arrière-plan : #D2F2D3;
}

          Si vous ne souhaitez pas différencier les pages paires et impaires, recherchez toutes les instances de « .page-odd » dans template.css et supprimez ces styles.

          Créer une bordure de séparation verticale pour un réseau à double échelle

          Pour créer une bordure de séparation verticale pour un tableau à double échelle, vous pouvez ajouter les lignes suivantes à votre fichier template.css. 

          table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
 bordure droite :solide 1px #00A8E1;
}

          header_separator est utilisé pour adresser le séparateur de l'en-tête "td". Le "dual_scale_separator" est utilisé pour adresser la colonne de séparation dans le tableau à double échelle.

          Ajout de votre propre logo à la liste des enquêtes

          1. Veuillez d'abord ouvrir l'éditeur de thème pour le thème que vous souhaitez utiliser.
          2. Nous vous recommandons d'utiliser fruity, c'est notre meilleur thème actuellement.
          3. Ensuite, étendez le thème et donnez-lui un nom que vous reconnaîtrez.
          4. Dans la vue suivante, vous pouvez télécharger le logo que vous souhaitez utiliser.
          5. Sélectionnez l'écran de l'éditeur « Survey List » dans la liste déroulante Écran dans le coin supérieur droit.
          6. Sélectionnez ensuite `layout_survey_list.twig´ dans le menu de gauche.
          7. Dans l'éditeur, faites défiler jusqu'à la ligne 126 et remplacez la partie marquée par le nom de fichier de l'image que vous avez téléchargée auparavant sur le thème.
          8. Enregistrez votre fichier.
          9. Remplacez le thème par défaut par votre thème étendu. Fichier : ChangeDefaultTheme.jpg

          Aligner le logo au centre de la page d'enquête

          Cet exemple concerne le modèle "extends_fruity". Pour les autres modèles, le CSS requis peut être différent.

          1. Connectez-vous à la zone d'administration de LimeSurvey
          2. Accédez à l'éditeur de thème : Configuration > Thèmes
          3. Recherchez "LimeSurvey Fruity Theme" dans la liste et cliquez sur " Bouton "Éditeur de thème" 
          4. Cliquez sur "custom.css" dans la liste des fichiers à gauche en bas de la page 
          5. Copiez le CSS suivant dans ce fichier et appuyez sur "Enregistrer les modifications".
          .navbar-fixed-top > div.navbar-header {
 largeur : 100 % !important;
}

.navbar-fixed-top > div.navbar-header > div {
 largeur : 100 % !important;
}

.navbar-fixed-top > div.navbar-header > div > img {
 margin: 0 auto 0 auto !important;
}


          Vues de questions personnalisées (New in 3.0 )

          Remarque : Il s'agit d'une fonctionnalité temporaire qui sera remplacée à l'avenir par un objet question (il sera très facile de déplacer des vues personnalisées vers un objet question). Il est désactivé par défaut.

          Depuis la version 2.5, vous pouvez créer des vues personnalisées spécifiques à un modèle pour les questions et certains de leurs éléments incorporés. Ceci est utile si vous souhaitez modifier la présentation HTML d'un type de question particulier pour une ou plusieurs enquêtes.

          • Dans application/config/config.php, recherchez 'config'=>array et ajoutez cette ligne au tableau : 'allow_templates_to_overwrite_views'=>1
          • Dans /{your_template}/config.xml, définissez "overwrite_question_views" sur true
          • Copiez application/views/survey/* dans template/{your_view_directory}/survey/
          • Notez que vous devez uniquement copier les fichiers que vous avez l'intention de modifier, mais la structure des fichiers doit rester la même que dans application/vues/enquête/

          Insérer des fichiers CSS ou JavaScript personnalisés pour le modèle

          À partir de la version 2.50, vous pouvez utiliser le fichier config.xml pour charger automatiquement les fichiers de plug-in.

          • Téléchargez vos fichiers dans le dossier modèle /css ou /scripts 
          • Dans /{your_template}/config.xml, ajoutez les chemins de fichiers au<css> ou<js> blocs, quelque chose comme ceci :
            <css> 
<filename> css/jquery-ui-custom.css</filename> 
<filename> css/bootstrap-slider.css</filename>

	<filename>css/génial-bootstrap-checkbox/génial-bootstrap-checkbox.css</filename> 
<filename> css/flat_and_modern.css</filename>

	<filename>css/template.css</filename>

	<filename>css/monPluginPersonnalisé.css</filename> 
</css> 
<js> 
<filename> scripts/template.js</filename> 
<filename> scripts/bootstrap-slider.js</filename>

	<filename>scripts/myCustomPlugin.js</filename> 
</js>

          Définitions de classe (pour les développeurs)

          answer-list

          Question Type de question éléments
          tableaux/5points Un tr
          tableaux/10point B tr
          tableaux/tableau F tr
          tableaux/colonnes H tr et col
          arrays/dualscale 1 tr
          tableaux/augmentationsamediminution E tr
          tableaux/ouiuncertain C tr
          genre G div et ul
          list_with_comment À div
          classement R ul et div
          ouinon O ul et div
          ranking_advanced R ul et div
          listradio L div
          5pointchoix 5 ul
          choix multiple M div


          radio-list

          Question Type de question éléments
          ouinon O ul
          genre G ul
          arrays/yesnouncertain C tr
          tableaux/augmentationsamediminution E tr
          tableaux/double échelle 1 tr
          tableaux/5points Un table et tr
          arrays/10point B tr
          tableaux/tableau F tr
          tableaux/colonnes H col
          listradio L div
          list_with_comment À div suivi de ul

          radio-item

          Question Type de question éléments
          tableaux/ouinonincertain C td
          5pointchoix 5 li
          tableaux/10points B td
          tableaux/5points Un td
          tableaux/tableau F td
          tableaux/colonnes H td
          arrays/double échelle 1 td
          tableaux/augmentationsamediminution E td
          genre G li
          listradio L li
          ouinon O li
          listradio L li et div
          image_select-listradio L li et div
          list_with_comment 0 li

          list-group

          Question Type de question éléments
          ouinon O ul
          5pointchoix 5 ul
          genre G ul
          classement R ul
          ranking_advanced R ul et div
          question_index_group_buttons div
          question_index_questions_buttons div

          list-group-horizontal

          Question Type de question éléments
          ouinon O ul
          5pointchoix 5 ul
          genre G ul

          list-unstyled

          Question Type de question éléments
          list_with_comment 0 ul
          listradio L ul
          choix multiple M ul
          multiplechoice_with_comments P ul
          multiplenumérique K ul
          multipleshorttext Q ul
          classement R ul
          ranking_advanced R ul
          bootstrap_buttons_multi M ul
          image_select-multiplechoice M ul
          inputondemand/multipleshorttext Q ul
          register_error ul
          register_message ul
          layout_survey_list ul
          charger ul
          enregistrer ul
          captcha ul

          select-list

          Question Type de question éléments
          classement R ul
          ranking_advanced R ul

          checkbox-item

          Question Type de question éléments
          multiflexi (Numéros de tableau) : td
          choix multiple M li
          multiplechoice_with_comments P div
          image_select-listradio L li
          image_select-multiplechoice M li et div
          navigateur durée

          checkbox-text-item

          Question Type de question éléments
          choix_multiples_avec_comments P li
          choix multiple M li
          image_select-multiplechoice M li
Retrieved from "http://manual.limesurvey.org/index.php?title=Theme_editor/fr&oldid=256724"