Actions

Theme editor/zh-cn: Difference between revisions

From LimeSurvey Manual

(Created page with "==问题相关的全局类==")
(Updating to match new version of source page)
 
(207 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<languages />  
<languages />  
<div class="mw-translate-fuzzy">
=说明=
=说明=
</div>


LimeSurvey has an advanced theme and style system providing to developers an efficient way to customize the survey appearance. Since LS3, we're not speaking anymore about '''"templates"''' like in previous versions, but about '''"themes"'''. The '''themes''' allow control over the look and feel of pages during a survey. A survey administrator can select a default theme that will be used for each survey to further personalize it and improve its look and feel. '''Themes''' come with options that provide to admin without coding skill a simple way to add a logo on the welcome page, to change the background colors, to select a font, etc.
<div class="mw-translate-fuzzy">
LimeSurvey 为开发者提供了一个有效定制调查外观的主题和样式的系统。从LS3之后，我们不再称之为 '''"模板"''' 而以'''"主题"'''代之。 '''主题''' 控制的部分从外观到使用感受。调查管理员可以为每个调查选择默认的主题，并可进一步的个性化定制来改善主题的外观和用法。'''主题''' 用设置功能使管理更简单，无需掌握代码技巧就可以增加标识，变更背景色或着更新字体等等。
</div>




LimeSurvey comes with 3 themes right out of the box. These initial themes are defined by directories located in the LimeSurvey installation "themes/survey/" directory. Each theme has its own directory. Within the main directory of a theme you'll find a configuration file in XML, and numerous directories containing the views '''themes (.twig)''', '''cascading style sheets (.css)''', '''scripts''',  '''images''' ('''.jpg''' or '''.png'''), and maybe others.
<div class="mw-translate-fuzzy">
LimeSurvey 初始自带了3个默认主题。这些初始的主题可以在目录"themes/survey/" 中找到，分别存储在以各自的主题名称命名的目录中。每个主题的目录都有配置文件config.xml，另外还有数个目录用来存放视图 '''themes views (.twig)''', '''样式表 (.css)''', '''脚本（scripts）''',  '''图片（images）''' ('''.jpg''' 或者 '''.png''')和其他林林总总。
</div>




Since LimeSurvey 2.50, the theme engine use [http://getbootstrap.com/docs/3.3/ Bootstrap 3]  as CSS framework. Bootstrap 3 being a standard framework, developers will find a lot of documentation, tutorials and forum threads about it on Internet.
<div class="mw-translate-fuzzy">
自 LimeSurvey 2.50 起, 主题引擎使用[http://getbootstrap.com/docs/3.3/ Bootstrap 3]  作为样式表的框架。Bootstrap 3 作为标准的框架结构，开发者可以从互联网上找到大量的和其相关的学习资料。
</div>




Since LimeSurvey 3, the theme engine use [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 are now available inside the theme's views.
<div class="mw-translate-fuzzy">
从 LimeSurvey 3 开始, 主题引擎是使用[https://twig.symfony.com Twig], 开发者可以用简单可靠的方式来定义调查的逻辑。Twig 替换了旧系统中的替换关键字系统部分。原来用来创建HTML的逻辑关键字现在可以在主题的视图中使用。
</div>




Snippet from Vanilla Theme:
香草主题摘要：


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="twig" enclose="div">
<syntaxhighlight lang="twig" enclose="div">
<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 #}
     {# 备注: 如果你要定制问题的颜色使用问题主题 #}
     {{ aQuestion.answer | raw }}
     {{ aQuestion.answer | raw }}
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>
</div>


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 describe 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).
<div class="mw-translate-fuzzy">
主题, 用 HTML 和 Twig 编码, 定义了文本在结构类似的页面里显示的样子和位置。经常需要参考或引用其他文件，多数主题都要通过样式表来定义字型，字体颜色，字体大小，字体背景和其他在整个调查页面使用的通用参数。样式表引用和HTML代码中的对象相关的'''类''' 参数。这可以让样式表对如何显示出现在不同地方的每一个各式各样的文本或是其他对象进行描述。LimeSurvey中每个问题类型都有唯一的类，因此可以对每个问题的外观进行详细控制。 图片文件, 像徽标或是特别样式的进度条，也可以在主题中引用。最后，将花括号中的特殊关键字替换为调查中为每种语言翻译通讯员定义的文本（例如，针对每种定义的语言的“调查标题”或“问题文本”）。
</div>


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!
如果你有一个不错的主题，请考虑分享到 LimeSurvey 的论坛。在大家的帮助下，使LimeSurvey 变得更好！
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.
点击 [https://www.limesurvey.org/index.php?option=com_sobipro&sid=55:Templates&Itemid=729 LimeSurvey 模板库] 分享你的主题！


<div class="mw-translate-fuzzy">
=创建主题=
=创建主题=
</div>


To be able to create a new theme (or edit an existing theme), you need [[Manage users#Set global permissions for a user|Template Editing user permission]] in LimeSurvey as well as permission to manipulate the files in the underlying operating system hosting your LimeSurvey installation.
要创建或编辑现有的主题，你需要LimeSurvey的 [[Manage users#Set global permissions for a user|模板操作权限]]，同时还要有LimeSurvey所在主机的文件操作权限。


<div class="simplebox"><span style='color:red'>'''Note of Warning:'''</span> If you change themes, you could also affect all the pre-existing surveys from your LimeSurvey installation. Themes are an advanced feature that require experience and HTML knowledge in order to make them running smoothly.</div>
<div class="mw-translate-fuzzy">
<div class="simplebox"><span style='color:red'>'''警告:'''</span> 对主题的更改会影响到所有系统中的调查（现有的和之前创建的）。为使主题良好运作，需要具备HTML的使用经验和知识。</div>
</div>


The preferred way to create a new theme is through the '''Theme Editor''' (see below), which is located in the '''Configuration''' dialog. Some people may like 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.
<div class="mw-translate-fuzzy">
通过 '''配置'''下的'''主题编辑器''' (如下)创建主题。有些人喜欢用文本编辑软件直接操作主题的文件。那不妨先用主题编辑器创建一个新主题，文件都保存在 目录''LimeSurvey_web_root/upload/themes/survey/your_new_template'' 下，然后就可以用文本编辑软件来处理了。
</div>


<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 enough access to edit these files, When you save them, make sure they don't change ownership! In this way, you can still use the web Theme Editing interface if needed.</div><br />
<div class="mw-translate-fuzzy">
<div class="simplebox">'''权限提示：''' 在unix/linux 系统中，主题文件由网络服务器的用户和组所有 (有些系统叫"www")。 修改之前，请确保你有足够的权限来编辑这些文件，保存文件时候一定不要改变所有权！主题编辑器可以一直为你保驾护航。</div><br />
</div>


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.
一些 '公共' 元素被多个主题共用，下面就对这些模板做个简要介绍。


{{Note|Themes files may seem complex. Besides HTML, you might also need to understand CSS, Twig, and JavaScript.}}
<div class="mw-translate-fuzzy">
{{Note|主题看起来有点复杂。除了 HTML, 你还要知道 CSS, Twig 和 JavaScript.}}
</div>


=LimeSurvey 主题编辑器=
=LimeSurvey 主题编辑器=


To ease the understanding and quick update of a Theme, LimeSurvey provides a '''Theme Editor''' in the main '''administrative''' toolbar of the application. This Theme Editor is only available to users [[Manage users#Set global permissions for a user|with the Templates permission]] and to superadministrators.
<div class="mw-translate-fuzzy">
通过管理工具栏的主题编辑器来快速了解和更新主题。此编辑器只有 [[Manage users#Set global permissions for a user|拥有模板编辑权限]] 的用户超级管理员可以使用。
</div>
 
 
<div class="mw-translate-fuzzy">
{{Alert|title=注意|text=错误配置的主题会导致使用对应模板的调查无法操作。 }}
</div>


{{Alert|title=Attention|text=A theme that is not correctly constructed can make a survey (that uses the respective template) inoperable. }}


The LimeSurvey theme editor allows you to edit the contents of your themes online. To start the Theme Editor: click on '''Themes''' link in the '''Configuration''' menu, and then click on the "Theme editor" button next of the theme you want to edit or extend.
<div class="mw-translate-fuzzy">
主题编辑器可以编辑运行中的主题。通过'''配置'''下的'''主题'''按钮进入主题列表，再点击右边的 "主题编辑器" 来操作。
</div>
 


[[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|''Bootswatch 主题的编辑按钮'']]
 
 
可以在主题编辑器页面编辑/查看要处理的主题。


The template editor page allows you to select the template you would like to edit/view.


[[File:Template-editor-2013-7-10_11_38_16.png|置中]]
[[File:Template-editor-2013-7-10_11_38_16.png|置中]]


The following options are available:


*'''Create''': Allows you to create a new template. In order not to start from scratch, the template 'default' is copied.
以下是可用的操作：
*'''Import''': Allows you to import a template from a ZIP file.
 
*'''Export''': Allows you to export the current template to a ZIP file.
 
*'''Copy''': Allows you to make a new template by copying the current one.
<div class="mw-translate-fuzzy">
*'''Rename''': Allows you to change the name of the template. It is generally used after copying or importing a template.
*'''创建''': 创建一个新模板。为避免白手起家，会把默认模板复制过来。
*'''Template''': It is a drop-down list that shows all the available templates that are located in your LimeSurvey installation.
*'''导入''': 以ZIP文件导入一份模板。
*'''导出''': 导出当前模板为ZIP文件。
*'''复制''': 以当前模板为基础创建新模板。
*'''重命名''': 修改模板的命名，通常在导入和复制了新模板后使用。
*'''模板''': 所有可用的模板列表。
</div>


*'''Screen''': It is a drop-down list which allows you to choose which particular survey page of that template you want to look at.
<div class="mw-translate-fuzzy">
*'''Return to admin panel'''.
*'''界面''': 用列表列出调查在不同状态时的样子。
*'''返回管理面板'''.
</div>


<div class="mw-translate-fuzzy">
==导入/导出/复制 模板==
==导入/导出/复制 模板==
</div>


When you '''export '''a template, a ZIP-file archive with all the files your template consists of will be created (.pstpl files, images, css files, ...). You can simply '''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]].  
<div class="mw-translate-fuzzy">
一个包含所有模板文件的ZIP文件在 '''导出 '''操作后生成。你可以把模板  '''导入''' 到一个新建的LimeSurvey，也可以手动复制对应的文件到对应的目录  [[Theme editor#Template files location|模板文件目录]].
</div>


However, it is preferred to use the LimeSurvey template import/export/copy functions in the template editor.
<div class="mw-translate-fuzzy">
还是推荐使用模板编辑器的 导入/导出/复制 功能。
</div>


==Page Structure / Template Use==
<div class="mw-translate-fuzzy">
*'''The Welcome Page:''' startpage.pstpl, welcome.pstpl, privacy.pstpl,  navigator.pstpl, endpage.pstpl
==页面结构 / 使用模板==
*'''The Questions Pages:''' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
*'''欢迎页:''' startpage.pstpl, welcome.pstpl, privacy.pstpl,  navigator.pstpl, endpage.pstpl
*'''The Final Page:''' startpage.pstpl, assessment.pstpl, completed.pstpl, endpage.pstpl
*'''问题页:''' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
*'''结束页:''' startpage.pstpl, assessment.pstpl, completed.pstpl, endpage.pstpl
</div>


<div class="mw-translate-fuzzy">
==模板文件==
==模板文件==
</div>


The following template files are used to produce your public survey and must exist in any new template folder you create:
<div class="mw-translate-fuzzy">
*'''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 expected 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.
以下模板文件用来创建你的新调查:
*'''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).
*'''startpage.pstpl:''' 生成每一个网页的开始部分。从"<head>"标签开始，但不包含"<html>"标签。这是个由脚本生成的标准页面的'头'。请确保你的startpage.pstpl 文件包含 <body> 标签。尽管时下许多浏览器并不需要严格遵循W3 的HTML标准，但是LimeSurvey脚本需要通过<body>标签来定位并运行Javascript脚本。startpage.pstpl 文件里没有很多'关键字'。不过，你应该会想在标题里插入{调查名称}。 startpage.pstpl 文件可以和对应的 endpage.pstpl 文件包含一组代码。举例来说，你可以在这个文件里定义一个表格的开头，然后在 endpage.pstpl 文件中定义同一个表格的结尾。文件 startpage.pstpl 和 endpage.pstpl 可以将 LimeSurvey 使用的所有页面都包裹进来。
*'''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.
*'''survey.pstpl:''' 该模板是在大多数页面中使用的第二个模板，并且提供了放置调查名称和说明的位置。 本模板没有对应的 '收尾' 模板，你必须在这个模板里完成所有标签的配对。
*'''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.
*'''welcome.pstpl:''' 这个模板只在欢迎屏幕使用 ( '多合一' 调查的主页里). 你可以在这里写下欢迎的文字，还有其他用来说明的信息。和 'survey.pstpl' 文件一样，文档里所有的标签也需要在本文档里完成配对。
*'''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 on 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.
*'''startgroup.pstpl:''' 这个模板可以为一组相关的问题提供总结。对应的会有一个 'endgroup.pstpl' 模板，可以把没有配对的标签在这个文件里完成配对。
*'''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.
*'''groupdescription.pstpl:''' 这个模板用来显示对组的描述。请注意，在调查的设置中 (在'''演示'''下的''演示和导航''页 ) 可以设置是否显示组的说明。如果选择不显示，就无需考虑此文件。
*'''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.pstpl:''' 这个模板包含调查里的问题，答案和帮助。在 "group by group" 和 "多合一" 调查里, 该模板会被每个问题循环使用。
*'''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.
*'''question_start.pstpl:''' 本文件包含问题开头的各种元素。包含在 'question.pstpl' 文件的 {QUESTION} 关键字里。旨在允许模板设计人员更好地控制问题的布局。 该模板位于常规模板之外 ''' (从 LimeSurvey 1.87 开始已经弃用)'''。模板中的所有关键字都可以在 question.pstpl中直接调用。
*'''endgroup.pstpl:''' This file closes the group, and can be used to close off any tags opened in the startgroup.pstpl file
*'''completed.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.
*'''endgroup.pstpl:''' 本文件完成组的闭合，还可以对 startgroup.pstpl 文件中没有配对的标签完成配对。
*'''printanswers.pstpl:''' This file has the HTML wrapper necessary for the print version of the survey.
*'''navigator.pstpl:''' 本文件包含调查里使用的导航按钮。，"下一个"，"上一个"，"最后"，"提交"，"保存" 和 "清除所有l" 的链接。本文件在除完成页面外的页面都要使用。
*'''print_group.pstpl:''' This file is the same as startgroup.pstpl and endgroup.pstpl, but for the print version of the survey.
*'''printanswers.pstpl:''' 该文件具有调查表的打印版本所必需的HTML包装器。
*'''print_question.pstpl:''' This file is the same as question.pstpl, but for the print version of the survey.
*'''print_group.pstpl:''' 本文件和 startgroup.pstpl 和 endgroup.pstpl 一样, 但适用于调查的打印版本。
*'''print_survey.pstpl:''' This file is the same as survey.pstpl, but for the print version of the survey.
*'''print_question.pstpl:''' 本文件和 question.pstpl 一样, 但适用于调查的打印版本。
*'''print_survey.pstpl:''' 本文件和 survey.pstpl 一样, 但适用于调查的打印版本。
</div>


<div class="mw-translate-fuzzy">
== 样式表和 Javascript==
== 样式表和 Javascript==
</div>


Two files that are always used in a template are template.css (for CSS) and template.js (for Javascript).
模板经常要用到的两个文件 template.css (CSS) 和 template.js ( Javascript).
*'''{TEMPLATECSS}:''' Add lines for default css, template.css, and template-rtl.css for rtl language.
*'''{TEMPLATECSS}:''' 在默认样式表 (default css), 模板(template.css), 和 RTL语言样式表(template-rtl.css)以外增加效果的样式表文件。
*'''{TEMPLATEJS}:''' Add lines for default javascript files, template.js, and all js files needed for LimeSurvey.
*'''{TEMPLATEJS}:''' 在默认脚本(default javascript files), 模板(template.js), 和所有其他脚本以外的脚本文件。


=== Using Bootstrap===
=== 使用 Bootstrap===
LimeSurvey has Bootstrap 3 embedded, so you can style all your templates with the well documented Bootstrap classes.
LimeSurvey 已内置 Bootstrap 3 ，因此你可以使用现成的 Bootstrap 类来美化你的模板。
For more information please refer to the [https://getbootstrap.com Bootstrap documentation].
更多信息请访问[https://getbootstrap.com Bootstrap 文档].


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.
[https://github.com/flatlogic/awesome-bootstrap-checkbox 超棒的-Bootstrap-单选框] 插件也可以用了。这样，你就可以用后缀是"-checkbox" 或是 "-radio"的标准 Bootstrap 彩色-类 (提示，警告，危险，等等)来进行你想要的风格修饰多选框和单选框。


<div class="mw-translate-fuzzy">
=== 替换默认的样式表或 Javascript===
=== 替换默认的样式表或 Javascript===
</div>


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.
某些问题使用特别的 Javascript 或是 CSS。如果你要替换某个函数，请使用级联系统。对 javascript 函数来说，最后读取的函数是最终使用的函数。


<div class="mw-translate-fuzzy">
==其他模板文件==
==其他模板文件==
</div>


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.
'''privacy.pstpl''', '''invitationemail.pstpl''', '''reminderemail.pstpl''', 和 '''confirmationemail.pstpl''' 不在are no longer used by LimeSurvey 中继续使用。而是被应用语言文件所替代。邮件内容可以在每个调查的基础上编辑。


<div class="mw-translate-fuzzy">
==标准页面==
==标准页面==
</div>


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.
受访者在获取和访问LimeSurvey 应用的时候会看到10个标准页面。每个都由调查设置中指定的“模板”中的多个常见“模板”文件构成。下表指出了在构造这些页面中的每个页面时使用的模板文件。


{| class="wikitable"
{| class="wikitable"
!  '''Survey Pages/'''<br />'''Template Files'''!!Survey<br />List!!Welcome!!Question!!Completed!!Clear All!!Register!!Load!!Save!!Print<br />Answers!!Print<br />Survey
!  '''调查页面/'''<br />'''模板文件'''!!调查列表!!欢迎!!问题!!完成!!清除所有!!注册!!载入!!保存!!打印答案!!打印调查
|-
|-
|SurveyList||align="center" | [[File:check.gif]]|| || || || || || || || ||
|调查列表||align="center" | [[File:check.gif]]|| || || || || || || || ||
|-
|-
|Welcome|| ||align="center" | [[File:check.gif]]|| || || || || || || ||
|欢迎页|| ||align="center" | [[File:check.gif]]|| || || || || || || ||
|-
|-
|Privacy|| ||align="center" | [[File:check.gif]]|| || || || || || || ||
|隐私|| ||align="center" | [[File:check.gif]]|| || || || || || || ||
|-
|-
|Navigator|| ||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]|| || || || || || ||
|导航|| ||align="center" | [[File:check.gif]]||align="center" | [[File:check.gif]]|| || || || || || ||
|-
|-
|Survey|| || ||align="center" | [[File:check.gif]]|| || ||align="center" | [[File:check.gif]]|| || || ||
|调查|| || ||align="center" | [[File:check.gif]]|| || ||align="center" | [[File:check.gif]]|| || || ||
|-
|-
|StartGroup|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|开始组|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|-
|-
|GroupDescription|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|组说明|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|-
|-
|Question<span style='color:red'>'''*'''</span>|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|问题<span style='color:red'>'''*'''</span>|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|-
|-
|EndGroup|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|结束组|| || ||align="center" | [[File:check.gif]]|| || || || || || ||
|-
|-
|Assessment|| || || ||align="center" | [[File:check.gif]]|| || || || || ||
|评估|| || || ||align="center" | [[File:check.gif]]|| || || || || ||
|-
|-
|Completed|| || || ||align="center" | [[File:check.gif]]|| || || || || ||
|完成|| || || ||align="center" | [[File:check.gif]]|| || || || || ||
|-
|-
|ClearAll|| || || || ||align="center" | [[File:check.gif]]|| || || || ||
|清除所有|| || || || ||align="center" | [[File:check.gif]]|| || || || ||
|-
|-
|Register|| || || || || ||align="center" | [[File:check.gif]]|| || || ||
|注册|| || || || || ||align="center" | [[File:check.gif]]|| || || ||
|-
|-
|Load|| || || || || || ||align="center" | [[File:check.gif]]|| || ||
|载入|| || || || || || ||align="center" | [[File:check.gif]]|| || ||
|-
|-
|Save|| || || || || || || ||align="center" | [[File:check.gif]]|| ||
|保存|| || || || || || || ||align="center" | [[File:check.gif]]|| ||
|-
|-
|PrintAnswers|| || || || || || || || ||align="center" | [[File:check.gif]]||
|打印答案|| || || || || || || || ||align="center" | [[File:check.gif]]||
|-
|-
|Print Survey || || || || || || || || || ||align="center" | [[File:check.gif]]
|打印调查 || || || || || || || || || ||align="center" | [[File:check.gif]]
|-
|-
|Print Group || || || || || || || || || ||align="center" | [[File:check.gif]]
|打印组 || || || || || || || || || ||align="center" | [[File:check.gif]]
|-
|-
|Print Question || || || || || || || || || ||align="center" | [[File:check.gif]]
|打印问题 || || || || || || || || || ||align="center" | [[File: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]]||  
|开始页<br />结束页<br />模板样式表||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]]||  
|}
|}


<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>
<div class="mw-translate-fuzzy">
<span style='color:red'>'''*'''</span>注意: 1.90以上版本之后, 当前版本替换了 question.pstpl 和 question_start.pstpl 模板文件。如果你正在使用旧的定制模板，你需要在 question.pstpl 文件开头加入以下内容:<syntaxhighlight lang="php" enclose="div"><div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}"></syntaxhighlight> 并在  question.pstpl 文件的结尾加上对应的结束标签:<syntaxhighlight lang="php" enclose="div"></div></syntaxhighlight>
</div>


<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>注意：1.9版本1 和早期版本， LimeSurvey 脚本文件并不包含在模板中。 2.0 版本, '''你需要在模板文件中使用 {TEMPLATEJS} ''' 来添加Js文件。 可以在 startpage.pstpl 或 endpage.pstpl 文件中添加. 你可以移除 {TEMPLATEURL}/template.js 这一行，但你必须用 {TEMPLATEJS} 来更新个人模板。


<div class="mw-translate-fuzzy">
==文件控制部分==
==文件控制部分==
</div>


In the "file control" window on the left, you can click on 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.
<div class="mw-translate-fuzzy">
在左边的 "文件控制" 窗口，你可以点击要编译的模板文件。你能看到 ''屏幕部分''的 JavaScript 文件和 CSS 文件。 HTML 的编码会在出现在中间的 "正在编辑" 窗口。如果模板可编辑（视目录的权限决定），你可以做任何修改并稍后保存。
</div>


<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'''.


Instead of using a link for each picture, utilize the field string {TEMPLATEURL}. So, instead of:
"其他文件" 窗口显示了模板目录下的其他文件列表。你可以使用这个窗口的功能'''上传并选择图片文件（你的图片，徽标等），或是其他创建模板所需的文件'''。
 
 
使用文本串字段 {TEMPLATEURL} 来代替为每个图片使用链接。替换为：


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="html4strict" enclose="div">img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'</syntaxhighlight>  
<syntaxhighlight lang="html4strict" enclose="div">img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'</syntaxhighlight>  
You can use {{NewIn|2.50}}:
你可以使用 {{NewIn|2.50}}:
<syntaxhighlight lang="html4strict" enclose="div">img src='{TEMPLATEURL}files/mypicture.jpg'</syntaxhighlight>
<syntaxhighlight lang="html4strict" enclose="div">img src='{TEMPLATEURL}files/mypicture.jpg'</syntaxhighlight>
</div>


In LimeSurvey versions before 2.50 use:
<div class="mw-translate-fuzzy">
2.50 版本之前的 LimeSurvey 使用：
<syntaxhighlight lang="html4strict" enclose="div">img src='{TEMPLATEURL}mypicture.jpg'</syntaxhighlight>
<syntaxhighlight lang="html4strict" enclose="div">img src='{TEMPLATEURL}mypicture.jpg'</syntaxhighlight>
</div>


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.
屏幕下方可以看见一个正在编辑的模板的样例。 不能从模板编辑器中删除模板。只能从对应的目录里手动删除模板文件。还可以选择不同的屏幕分辨率，以便更好地评估模板的感觉和外观。


<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">'''注意：''' 附带的模板文件不能编辑，如果想修改的话建议修改副本。</div>


<div class="mw-translate-fuzzy">
==模板文件定位==
==模板文件定位==
</div>


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 将每个'标准' 模板存储在''/templates'' 目录下各自独立的目录下。定制的模板存储在 ''/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.
模板目录里 '''总是''' 要有一个"默认"目录 。如果一个模板的目录不存在或着找不到，这个模板作为备用的模板。默认已经安装。


You can use any image files that you upload into the template management area with the help of this syntax:
你可以对上传到模板管理区的任何要使用的图片文件使用下面的语法：


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="php" enclose="div">{TEMPLATEURL}filename.xyz</syntaxhighlight>
<syntaxhighlight lang="php" enclose="div">{TEMPLATEURL}filename.xyz</syntaxhighlight>
</div>


<div class="mw-translate-fuzzy">
=样式表的样式问题=
=样式表的样式问题=
</div>


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:
使用样式表修饰问题外观已经变得很容易。每个问题类型都有独一无二的类。必选问题有额外的必选类。例如：对一个非必选问题：


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="html4strict" enclose="div"><div id="question5" class="gender">
<syntaxhighlight lang="html4strict" enclose="div"><div id="question5" class="gender">
...
...
</div></syntaxhighlight>
</div></syntaxhighlight>
</div>


and if the question is mandatory:
如果是一个必选问题：


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


and if the question is mandatory, but the user didn't answer it or if there is validation on a question:
如果受访者没有回答必选题，或者问题有验证步骤：


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


and if the question has validation applied, but the user hasn't answered correctly:
如果问题有验证部分，但是受访者没有正确回答：


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


==问题相关的全局类==
==问题相关的全局类==


These classes are used for each question type. Some question types use only one or two classes, while others may use much more.
这些类适用各种问题类型。一些问题使用一种或两种类，有些其他的问题可能使用更多的类。


{| class="wikitable alternance"
{| class="wikitable alternance"
|+ Global classes
|+ 全局类
|-
|-
! scope="col" | Class name
! scope="col" | 类名
! scope="col" | Part
! scope="col" | 部分
! scope="col" | Question type
! scope="col" | 问题类型
! scope="col" | Examples
! scope="col" | 示例
! scope="col" | Note
! scope="col" | 备注
|-
|-
! scope="row" | .question {{ObsoleteIn|3.0}}
! scope="row" | .question {{ObsoleteIn|3.0}}
| All question block
| 所有问题型块
| All question type
| 所有问题类型
|&lt;p class="question">, &lt;ul class="question">, &lt;table class="question">
|&lt;p class="question">, &lt;ul class="question">, &lt;table class="question">
|  
|  
|-
|-
! scope="row" | .ls-answers {{NewIn|3.0}}
! scope="row" | .ls-answers {{NewIn|3.0}}
| All question block
| 所有问题型块
| All question type
| 所有问题类型
|&lt;div class="ls-answers ">, &lt;ul class="ls-answers ">, &lt;table class="ls-answers">
|&lt;div class="ls-answers ">, &lt;ul class="ls-answers ">, &lt;table class="ls-answers">
|  
|  
|-
|-
! scope="row" | .subquestions-list
! scope="row" | .subquestions-list
| List of subquestion
| 子问题列表
| Multi choice question, array question type
| 多选问题，阵列问题
| &lt;ul class="subquestions-list">, &lt;table class="subquestions-list">
| &lt;ul class="subquestions-list">, &lt;table class="subquestions-list">
| .questions-list is used too
| .questions-list 同样适用
|-
|-
! scope="row" | .answers-list
! scope="row" | .answers-list
| List of answers
| 问题列表
| Single choice question, array question type, Multi input text question
| 单选问题，阵列问题，多行输入文本问题
| &lt;ul class="answers-list">, &lt;table class="answers-list">
| &lt;ul class="answers-list">, &lt;table class="answers-list">
|  
|  
|-
|-
! scope="row" | .answer-item
! scope="row" | .answer-item
| The answer part: one answer
| 答案部分：单一答案
| Single choice question, array question type, Multi input text question
| 单选问题，阵列问题，多行输入文本问题
| &lt;li class="answer-item">, &lt;td class="answer-item">
| &lt;li class="answer-item">, &lt;td class="answer-item">
|
|
|-
|-
! scope="row" | .noanswer-item
! scope="row" | .noanswer-item
| The answer part for no answer
| 答案部分：无答案
| Single choice question, array question type
| 单选问题，阵列问题类型
| &lt;li class="noanswer-item">, &lt;td class="noanswer-item">
| &lt;li class="noanswer-item">, &lt;td class="noanswer-item">
| No answer is an answer too, then have double class noanswer-item and answer-item
| 没有答案也是一种答案，所以有无问题项和有问题项两种类
|-
|-
! scope="row" | .question-item
! scope="row" | .question-item
| The question part: one question
| 答案部分：单一答案
| Multi text question, array question type
| 阵列问题，多行输入文本问题
| &lt;li class="question-item">, &lt;tr class="question-item">
| &lt;li class="question-item">, &lt;tr class="question-item">
| Some answers are questions too. Then we have a lot of class="question-item answer-item"
| 一些答案同时也是问题。我们有很多 "问题项-答案项" 的类
|-
|-
! scope="row" | .button-list
! scope="row" | .button-list
| A list of button
| 按钮列表
| Yes no and Gender question
| 是否按钮和性别问题
| &lt;ul class="button-list">
| &lt;ul class="button-list">
|  
|  
|-
|-
! scope="row" | .button-item
! scope="row" | .button-item
| The answer part with a button
| 有一个按钮的答案
| Yes no and Gender question
| 是否按钮和性别问题
| &lt;li class="button-item">
| &lt;li class="button-item">
|
|
|-
|-
! scope="row" | .checkbox-list
! scope="row" | .checkbox-list
| A list of checkbox
| 复选框列表
| Multi choice question, array number (checkbox) question type
| 多选问题，数字阵列问题（复选框）
| &lt;ul class="checkbox-list">, &lt;tr class="checkbox-list">
| &lt;ul class="checkbox-list">, &lt;tr class="checkbox-list">
| Some question types use multi-list class, like checkbox with comment: class="checkbox-list text-list"
| 一些问题使用多列类，像有备注的多选框：class="checkbox-list text-list"
|-
|-
! scope="row" | .checkbox-array  {{NewIn|3.0}}
! scope="row" | .checkbox-array  {{NewIn|3.0}}
| A array of checkbox
| 复选框阵列
| Array (numbers) with checkbox option
| 有复选框的数字阵列选项
| &lt;table class="checkbox-list">
| &lt;table class="checkbox-list">
|  
|  
|-
|-
! scope="row" | .checkbox-item
! scope="row" | .checkbox-item
| The answer part with a checkbox
| 有复选框的答案部分
| Multi choice question, array number (checkbox) question type
| 多选问题，带复选框的数字阵列问题类型
| &lt;li class="checkbox-item">, &lt;td class="checkbox-item">
| &lt;li class="checkbox-item">, &lt;td class="checkbox-item">
|
|
|-
|-
! scope="row" | .radio-list
! scope="row" | .radio-list
| A list of radio item
| 单选项列表
| Single choice question, array question type (each row)
| 单选问题，阵列问题类型 (每行)
| &lt;ul class="radio-list">, &lt;tr class="radio-list">
| &lt;ul class="radio-list">, &lt;tr class="radio-list">
|
|
|-
|-
! scope="row" | .radio-array {{NewIn|3.0}}
! scope="row" | .radio-array {{NewIn|3.0}}
| A array of radio item
| 单选阵列项
| Array question type
| 阵列问题类型
| &lt;table class="radio-array">
| &lt;table class="radio-array">
|
|
|-
|-
! scope="row" | .radio-item
! scope="row" | .radio-item
| The answer part with a radio
| 有单选项的答案
| Single choice question, array question type
| 单选问题，阵列问题类型
| &lt;li class="radio-item">, <td class="radio-item">
| &lt;li class="radio-item">, <td class="radio-item">
|
|
|-
|-
! scope="row" | .text-list
! scope="row" | .text-list
| A list of text input
| 文本输入列表
| Multi text question type, array of text
| 多行文本问题类型，文本阵列
| &lt;ul class="text-list">, &lt;tr class="text-list">
| &lt;ul class="text-list">, &lt;tr class="text-list">
|
|
|-
|-
! scope="row" | .text-item
! scope="row" | .text-item
| The answer part of a text input
| 文本输入的答案部分
| Multi text question type, array of text
| 多行文本问题类型，文本阵列
| &lt;li class="text-item">, <td class="text-item">
| &lt;li class="text-item">, <td class="text-item">
|
|
|-
|-
! scope="row" | .numeric-list
! scope="row" | .numeric-list
| A list of text input with numeric only answer
| 仅数字答案的文本输入列表
| Multi numeric question type, array of number
| 多行数字问题类型，数字阵列
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
|
|
|-
|-
! scope="row" | .number-list
! scope="row" | .number-list
| A list of text input with numeric only answer (each row)
| 仅数字答案的文本输入列表（每行）
| Multi numeric question type, array of number
| 多行数字问题类型，数字阵列
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
| &lt;ul class="text-list numeric-list">, &lt;tr class="text-list numeric-list">
|
|
|-
|-
! scope="row" | .number-array  {{NewIn|3.0}}
! scope="row" | .number-array  {{NewIn|3.0}}
| The answer part of a numeric input
| 输入数字的答案部分
| Array of number
| 数字矩阵
| &lt;table class="number-array">
| &lt;table class="number-array">
|
|
|-
|-
! scope="row" | .select-list  {{ObsoleteIn|2.50}}
! scope="row" | .select-list  {{ObsoleteIn|2.50}}
| A list of select
| 选择列表
| Array numbers, Dual scale array (select)
| 数字阵列，双尺度阵列（选择）
| &lt;table class="select-list">
| &lt;table class="select-list">
|
|
|-
|-
! scope="row" | .dropdown-list  {{NewIn|2.50}}
! scope="row" | .dropdown-list  {{NewIn|2.50}}
| A list of select
| 选择列表
| Array numbers, Dual scale array (select) (each row)
| 数字阵列，双尺度阵列(选择)(每行)
| &lt;table class="dropdown-list">
| &lt;table class="dropdown-list">
|
|
|-
|-
! scope="row" | .dropdown-array  {{NewIn|3.0}}
! scope="row" | .dropdown-array  {{NewIn|3.0}}
| A array of dropdown
| 下拉列表阵列
| Array numbers, Dual scale array (select)
| 数字阵列，双尺度阵列(选择)
| &lt;table class="dropdown-array">
| &lt;table class="dropdown-array">
|
|
|-
|-
! scope="row" | .select-item  {{ObsoleteIn|2.50}}
! scope="row" | .select-item  {{ObsoleteIn|2.50}}
| The answer part of a select
| 选择的答案部分
| Array numbers, Dual scale array (select), single choice with select
| 数字阵列，双尺度阵列(选择), 选择类型的单选
| &lt;p class="select-item">, &lt;td class="select-item">
| &lt;p class="select-item">, &lt;td class="select-item">
|
|
|-
|-
! scope="row" | .dropdown-item  {{NewIn|2.50}}
! scope="row" | .dropdown-item  {{NewIn|2.50}}
| The answer part of a select
| 选择的答案部分
| Array numbers, Dual scale array (select), single choice with select
| 数字阵列，双尺度阵列(选择), 选择类型的单选
| &lt;p class="dropdown-item">, &lt;td class="dropdown-item">
| &lt;p class="dropdown-item">, &lt;td class="dropdown-item">
|
|
|-
|-
! scope="row" | .hide  {{ObsoleteIn|3.0}}
! scope="row" | .hide  {{ObsoleteIn|3.0}}
| Used for accessibility: hidden with css but read by screenreader, since 2.50 : you can use sr-only from bootstrap
| 用于辅助功能：用css隐藏但从屏幕读取，从 2.50 版本开始: 可以使用  bootstrap 的 sr-only
| Short text question
| 短文本问题
| &lt;label class="hide">
| &lt;label class="hide">
| Can be used for other purposes
| 能用作其他用途
|-
|-
! scope="row" | .ls-js-hidden {{NewIn|3.0}}
! scope="row" | .ls-js-hidden {{NewIn|3.0}}
| Used for part to be hidden if javascript is activated
| 用于javascript激活后的隐藏部件
| Button for example
| 示例按钮
| &lt;div class="ls-js-hidden">
| &lt;div class="ls-js-hidden">
| LimeSurvey core used it, but you can use it too in your template
| LimeSurvey 核心使用，你也可以在你的模板里使用
|-
|-
! scope="row" | .ls-js-hidden-sr {{NewIn|3.0}}
! scope="row" | .ls-js-hidden-sr {{NewIn|3.0}}
| Used for accessibility: hide it if js is activated, but always show if user use a screenreader
| 用于辅助功能: 如果 js 激活就隐藏, 但总在用户使用屏幕输入的时候显示
| Button for example
| 示例按钮
| &lt;a class="ls-js-hidden-sr">
| &lt;a class="ls-js-hidden-sr">
| Button
| 按钮
|-
|-
! scope="row" | .ls-no-js-hidden {{NewIn|3.0}}
! scope="row" | .ls-no-js-hidden {{NewIn|3.0}}
| Used for part to be hidden if javascript is not activated
| 用于在javascript没有激活后隐藏的部分
| Link
| 链接
| &lt;a class="ls-no-js-hidden">
| &lt;a class="ls-no-js-hidden">
| LimeSurvey core used it for inactive link if javascript is not activated
| 如果Javascript没有激活，LimeSurvey 核心用于无效链接
|-
|-
! scope="row" | .ls-label-xs-visibility {{NewIn|3.0}}
! scope="row" | .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
|  大屏幕里隐藏的标签，但在在屏幕阅读器和小屏幕显示
| label
| 标签
| &lt;label class="ls-no-js-hidden">
| &lt;label class="ls-no-js-hidden">
| Used for label inside table cell of array question type
| 用于标签在表格单元格内的阵列问题类型
|-
|-
! scope="row" | .ls-input-group-extra {{NewIn|3.0}}
! scope="row" | .ls-input-group-extra {{NewIn|3.0}}
| Same usage of boostrap input-group-addon, but without the border and the background.
| 和 boostrap 的 input-group-addon 用法一样, 但没有背景和边框。
| right suffix
| right suffix
| &lt;div class="ls-input-group-extra">
| &lt;div class="ls-input-group-extra">
| Used for right and left suffix (global)
| 适用与右和左后缀 (全局)
|-
|-
! scope="row" | .checkbox {{ObsoleteIn|3.0}}
! scope="row" | .checkbox {{ObsoleteIn|3.0}}
| input[type=checkbox]
| input[type=checkbox]
| Question with checkbox
| 多选框问题
| &lt;input type="checkbox" class="checkbox">
| &lt;input type="checkbox" class="checkbox">
| With modern browser: not needed, but some old browser need this
| 适用现代浏览器：不必要，但一些旧的浏览器需要
|-
|-
! scope="row" | .radio {{ObsoleteIn|3.0}}
! scope="row" | .radio {{ObsoleteIn|3.0}}
| input[type=radio]
| input[type=radio]
| Question with radio
| 单选框问题
| &lt;input type="radio" class="radio">
| &lt;input type="radio" class="radio">
| With modern browser: not needed, but some old browser need this
| 适用现代浏览器：不必要，但一些旧的浏览器需要
|-
|-
! scope="row" | .text
! scope="row" | .text
| input[type=text]
| input[type=text]
| Question with input text, or textarea
| 有输入文本或文本域的问题
| &lt;textarea class="text">
| &lt;textarea class="text">
|
|
|-
|-
! scope="row" | .answertext
! scope="row" | .answertext
| Array question type
| 阵列问题
| Answer part of array question type
| 阵列问题的答案部分
| &lt;th class="answertext">
| &lt;th class="answertext">
|
|
|-
|-
! scope="row" | .col-answers
! scope="row" | .col-answers
| Array question type
| 阵列问题
| Column of answers
| 答案的列
| &lt;col class="col-answers">
| &lt;col class="col-answers">
|
|
|-
|-
! scope="row" | .odd .even {{ObsoleteIn|2.50}}
! scope="row" | .odd .even {{ObsoleteIn|2.50}}
| Array question type
| 阵列问题
| Alternation for column
| 交替列
| &lt;col class="odd">
| &lt;col class="odd">
|
|
|-
|-
! scope="row" | .array1 .array2  {{ObsoleteIn|3.0}}
! scope="row" | .array1 .array2  {{ObsoleteIn|3.0}}
| Array question type
| 阵列问题
| Alternation for line
| 交替行
| &lt;tr class="array1">
| &lt;tr class="array1">
|
|
|-
|-
! scope="row" | .ls-odd .ls-even  {{NewIn|3.0}}
! scope="row" | .ls-odd .ls-even  {{NewIn|3.0}}
| Array question type
| 阵列问题
| Alternation for subquestion and Y axis
| 子问题和Y 轴交替
| &lt;tr class="ls-odd">
| &lt;tr class="ls-odd">
|
|
|}
|}


=== Some example of question part with classes===
<div class="mw-translate-fuzzy">
=== 问题相关的类的示例===
</div>


'''Text-short question type:'''<source lang="html4strict">
'''短文本问题类型：'''<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">
'''多行短文本'''<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 490: Line 579:
</ul>
</ul>
</source>
</source>
'''Array question type'''<source lang="html4strict">
'''阵列类型问题'''<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 521: Line 610:
</table>
</table>
</source>
</source>
==The full list of question classes==
<div class="mw-translate-fuzzy">
==问题类的完整列表==
</div>


{|
{|
|'''Question Type'''||'''Question Class'''||'''Question ID'''
|'''问题类型'''||'''问题类'''||'''问题编号'''
|-
|-
|5 point choice||.choice-5-pt-radio||5
|5分单选||.choice-5-pt-radio||5
|-
|-
|Array (10 point choice)||.array-10-pt||B
|阵列题 (10分量表)||.array-10-pt||B
|-
|-
|Array (5 point choice)||.array-5-pt||A
|阵列题 (5分量表)||.array-5-pt||A
|-
|-
|Array (Flexible Labels) dual scale||.array-flexible-duel-scale ||1
|双尺度阵列题 (灵活标签)||.array-flexible-duel-scale ||1
|-
|-
|Array (Increase, Same, Decrease)||.array-increase-same-decrease||E
|阵列题 (增加-持平-减少)||.array-increase-same-decrease||E
|-
|-
|Array (Multi Flexible) (Numbers)||.array-multi-flexi ||:
|阵列题 (数字)||.array-multi-flexi ||:
|-
|-
|Array (Multi Flexible) (Text)||.array-multi-flexi-text||;
|阵列题 (文本)||.array-multi-flexi-text||;
|-
|-
|Array (Yes/No/Uncertain)||.array-yes-uncertain-no||C
|阵列题 (是-否-不确定)||.array-yes-uncertain-no||C
|-
|-
|Array (flexible labels)||.array-flexible-row ||F
|阵列题 (灵活标签)||.array-flexible-row ||F
|-
|-
|Array (flexible labels) by column||.array-flexible-column||H
|列式阵列题 (灵活标签)||.array-flexible-column||H
|-
|-
|Boilerplate question||.boilerplate||X
|样板问题||.boilerplate||X
|-
|-
|Date||.date||D
|日期||.date||D
|-
|-
|Gender||.gender||G
|性别||.gender||G
|-
|-
|Huge free text||.text-huge||U
|文本输入(超长)||.text-huge||U
|-
|-
|Language switch||.language||I
|语言切换||.language||I
|-
|-
|List (dropdown)||.list-dropdown||!
|单选（下拉框）||.list-dropdown||!
|-
|-
|List (radio)||.list-radio||L
|单选（平铺）||.list-radio||L
|-
|-
|List with comment||.list-with-comment||O
|单选，可添加说明t||.list-with-comment||O
|-
|-
|Long free text||.text-long||T
|文本输入（长）||.text-long||T
|-
|-
|Multiple numerical input||.numeric-multi||K
|多重数字输入||.numeric-multi||K
|-
|-
|Multiple options||.multiple-opt||M
|多重选项||.multiple-opt||M
|-
|-
|Multiple options with comments||.multiple-opt-comments||P
|有说明得多重选项||.multiple-opt-comments||P
|-
|-
|Multiple short text||.multiple-short-txt||Q
|多重短文本输入||.multiple-short-txt||Q
|-
|-
|Numerical input||.numeric||N
|数字输入||.numeric||N
|-
|-
|Ranking||.ranking||R
|排序题||.ranking||R
|-
|-
|Short free text||.text-short||S
|文本输入（短）||.text-short||S
|-
|-
|Yes/No||.yes-no||Y
|是否题||.yes-no||Y
|-
|-
|
|
|}
|}


==The full list of validation classes==
<div class="mw-translate-fuzzy">
==验证类的完整列表==
</div>


<div class="simplebox">Note:  Prior to 1.92, only .mandatory and .input-error classes were available.</div>
<div class="simplebox">注意:  1.92 及以前的版本, 仅 .mandatory 和 .input-error 类可用。</div>


These apply to the help and/or validation tip messages so that each type can be individually styled.
这些应用到帮助 和/或 验证的提示信息使得每个类型都有各自的风格。


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.
.hide-tip 选项和 .input-error 选项默认相互作用，因此你可以隐藏验证提示。然而，提示信息会在验证失败的时候出现，当验证被纠正之后又会消失。


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.
所有这些设计都是为了避免弹出式警告信息窗口的需要。取而代之，提示信息可以按需出现和消失，并且可以用自定的彩色来表示答案是否达到了验证的标准。


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.
此外，当你首次访问一个验证标准不满足的页面，可以用令人愉悦的颜色对提示进行颜色编码，以显示尚未满足的验证条件； 然后如果该人提交的页面存在验证错误，则使用较粗糙的颜色重新显示该页面。


{|
{|
|'''Purpose'''||'''CSS Class'''||'''Description'''
|'''用途'''||'''CSS 类'''||'''描述'''
|-
|-
|Mandatory||.mandatory||the question is mandatory
|必填项||.mandatory||这是这个必填的问题
|-
|-
|User input error||.input-error||the question had at least one validation error
|用户输入错误||.input-error||此问题还有至少一个验证错误
|-
|-
|Hide Tip||.hide-tip||added if you use the hide_tip option
|隐藏提示||.hide-tip||如果你使用隐藏提示，请添加
|-
|-
|defrault type||.em_default||for default tip set ( numeric value etc …)
|默认类型||.em_default||默认提示设置 ( 数值等 …)
|-
|-
|Num answers||.em_num_answers||for for min_answers and max_answers
|数字答案||.em_num_answers||用于min_answers 和 max_answers
|-
|-
|Value range||.em_value_range||for min/max_num_value_n and multiflexible_min/max
|范围值||.em_value_range||用于min/max_num_value_n 和 multiflexible_min/max
|-
|-
|Sum range||.em_sum_range||for min/max/equals_num_value
|合计范围||.em_sum_range|| 用于min/max/equals_num_value
|-
|-
|Regex validation||.em_regex_validation||for regular-expression validation of the question
|正则表达式验证||.em_regex_validation|| 用于问题的正则表达式验证
|-
|-
|Question-level validation function||.em_q_fn_validation||for the em_validation_q option
|问题级别验证函数||.em_q_fn_validation|| 用于em_validation_q 选项
|-
|-
|Subquestion-level validation function||.em_sq_fn_validation||for the em_validation_sq option
|子问题级别验证函数||.em_sq_fn_validation|| 用于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.
|其他必填说明||.em_other_comment_mandatory||用于 other_comment_mandatory 选项 - 在"其他"已经选择但相关的说明没有填写的时候显示。
|-
|-
|
|
|}
|}


==Importing styles into your custom template==
<div class="mw-translate-fuzzy">
==在你的定制模板中导入样式==
</div>


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>
<div class="mw-translate-fuzzy">
定制问题的样式都是在每一个模板的CSS 文件的底部，并且用下面的注释开头：<syntaxhighlight lang="php" enclose="div">/* --------------------------- START: Question styles  ------------------------------ */</syntaxhighlight>
</div>


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.
如果你正在修饰你自己的模板，你应该在不影响你的样式的前台下复制 ''templates/default/template.css'' (基于表格布局) 或 ''/templates/limespired/template.css'' (基于样式表布局) 到你自己的样式表中。


==Internet Explorer conditional style sheets==
<div class="mw-translate-fuzzy">
==IE的条件式样式表==
</div>


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.
因为 IE6 ，IE7 和其他浏览器间的渲染存在明显差异，因此在每个模板中都有特殊的IE条件样式表。


<div class="mw-translate-fuzzy">
<source lang="html4strict" enclose="div">
<source lang="html4strict" enclose="div">
<!--[if IE]>
<!--[if IE]>
Line 644: Line 744:
<![endif]-->
<![endif]-->
</source>
</source>
</div>


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.
你应该在你的'''startpage.pstpl'''文件中添加上面的代码，并且复制 ''/templates/default/'' 或 ''/templates/limespired'' 的IE风格样式表用于基于表的布局和基于 CSS 的布局。


<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">'''注意:''' 如果你把上面的样式加入到了你的样式表里，那你几乎肯定要调整这样式表。</div>


===Alternative solution for Internet explorer===
<div class="mw-translate-fuzzy">
===IE的另类解决方案===
</div>


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.
你可以把主体的条件类放在 startpage.pstpl 文件里，并在你的模板中使用这个类。此方法在柠檬汽水(citronade) 模板中使用{{ObsoleteIn|2.06}}. 添加一个 js / no-js 类到有 javascript / 无 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 660: Line 763:
<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:
并在 template.css 中使用：


<source lang="css">.ie6{/*specific for internet explorer 6*/}
<source lang="css">.ie6{/*specific for internet explorer 6*/}
Line 666: Line 769:
.ie{/*specific for all internet explorer */}</source>
.ie{/*specific for all internet explorer */}</source>


== Right-to-Left (RTL) Languages and justify==
<div class="mw-translate-fuzzy">
== 反方向语言（RTL）和调整==
</div>


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


==Keywords==
<div class="mw-translate-fuzzy">
==关键字==
</div>


{{Deprecated|3.0}}  
{{Deprecated|3.0}}  
Line 785: Line 892:
|}
|}


==Input/Buttons==
<div class="mw-translate-fuzzy">
==导入/按钮==
</div>


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:
每个"输入" 类型在调查中都拥有自己的类名。因此你可以通过在 "startpage.pstpl" 文件添加样式表来控制按钮和输入的外观。 这些类的名字如下所示：
*'''submit''' (Submit Buttons)
*'''submit''' (提交按钮)
*'''text''' (Text Inputs - for short free text, date, and numerical type)
*'''text''' (文本输入 - 适用于短文本，日期和数字)
*'''answertext''' (Text of answers)
*'''answertext''' (答案的文本部分)
*'''radio''' (Radio Buttons)
*'''radio''' (单选按钮)
*'''checkbox''' (Check Boxes)
*'''checkbox''' (多选按钮)
*'''select''' (Select / List Boxes)
*'''select''' (选择/列表框)
*'''textarea''' (Large text inputs - for long free text)
*'''textarea''' (长文本输入)
*'''clearall''' (The "Exit and Clear Survey" link)
*'''clearall''' ("退出并清除调查"链接)
*'''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''' (排序类问题。没有为选择框或文本框设置颜色。但是允许改变其他的排序类问题的背景色，文本颜色，文本大小等。)
*'''graph''' (The "percentage completed" graph table)
*'''graph''' ("百分比完成度" 图表)
*'''innergraph''' (The table inside the graph table - this contains the 0% and 100% text. Use this for changing the size of this text)
*'''innergraph''' (图表中的表格 - 包含 0% 和 100% 的文本。使用这个类来改变文本大小。)
*'''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''' (呈现在表格中的问题的常规设置。通常，你需要通过这个来确认你使用的字体大小和颜色和在其他地方默认使用的相同。)
*'''mandatory'''  (Mandatory questions)
*'''mandatory'''  (必答题)
*'''input-error''' (User input error - for if a user has made a mistake with a mandatory question or question with validation)
*'''input-error''' (用户输入错误 - 如果用户答错了在调查中都拥有自己的类名。因此你可以通过在 "startpage.pstpl" 文件添加样式表来控制按钮和输入的外观。 )
*'''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)
*'''submit''' (提交按钮)
*'''errormandatory''' (Sets the color and style of the "This question is mandatory" error message)
*'''text''' (文本输入 - 适用于短文本，日期和数字)
*'''warningjs''' (Sets the color and style of the warning message displayed if the participant's browser has javascript disabled)
*'''answertext''' (答案的文本部分)
*'''radio''' (单选按钮)
*'''checkbox''' (多选按钮)
*'''select''' (选择/列表框)
*'''textarea''' (长文本输入)
*'''clearall''' ("退出并清除调查"链接)
*'''rank''' (排序类问题。没有为选择框或文本框设置颜色。但是允许改变其他的排序类问题的背景色，文本颜色，文本大小等。)
*'''graph''' ("百分比完成度" 图表)
*'''innergraph''' (图表中的表格 - 包含 0% 和 100% 的文本。使用这个类来改变文本大小。)
*'''question''' (呈现在表格中的问题的常规设置。通常，你需要通过这个来确认你使用的字体大小和颜色和在其他地方默认使用的相同。)
*'''mandatory''' (必答题)
*'''input-error''' (用户输入错误 - 如果用户答错了必答题或是验证题)
*'''array1''' and '''array2''' (当呈现一组阵列问题的答案时会循环使用这两种样式。允许为阵列问题设置交替颜色的背景色。'''Array1''' 还被用来在阵列问题中做列标题。)
*'''errormandatory''' (用来设置"这是个必填项" 错误信息的颜色和样式)
*'''warningjs''' (用来设置当受访者的浏览器没有打开Javascript支持时的错误信息的颜色和样式。)


There are also some elements that can be accessed using the ID of the element ('''#ID''' in CSS):
还有一些元素可以使用这些元素的ID来访问 ('''#ID''' in CSS):
*'''surveycontact''' (The contact message shown on the start page)
*'''surveycontact''' (首页上的联系信息)
*'''tokenmessage''' (used for messages inside the survey, e.g. the session expired error message)
*'''tokenmessage''' (调查内部使用的信息, 比如：会话过期这类的错误信息)


Because you can edit all the HTML aspects, there's no reason to surround your templates with a
<div class="mw-translate-fuzzy">
因为你可以编辑整个 HTML的方方面面, 就没有理由在你的模板外面加上
<syntaxhighlight lang="php" enclose="div"><div class='new_name'></div></syntaxhighlight>
<syntaxhighlight lang="php" enclose="div"><div class='new_name'></div></syntaxhighlight>
and then define a css for that new_name class.
，还给新命名的类定义一个新的样式表。
</div>


==Styling the progress bar==
==进度条的样式==


The progress bar appearance can be modified with CSS.
进度条的外观可以使用CSS进行修改。


To change the background color of the bar, add something like the following to the end of your template.css file:
<div class="mw-translate-fuzzy">
要改变进度条的背景色，要在 template.css 文件的末尾加上：
</div>


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-header {
<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-header {
 background-color: #3300FF;
 background-color: #3300FF;
}</syntaxhighlight>
}</syntaxhighlight>
</div>


To change the border color of the bar, add something like the following to the end of your template.css file:
<div class="mw-translate-fuzzy">
要改变进度条边框的颜色，要在 template.css 文件的末尾加上：
</div>


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-content,
<syntaxhighlight lang="php" enclose="div">#progress-wrapper .ui-widget-content,
#progress-wrapper .ui-widget-header {
#progress-wrapper .ui-widget-header {
 border: 1px solid #FF0000;
 border: 1px solid #FF0000;
}</syntaxhighlight>
}</syntaxhighlight>
</div>


==Advanced Features Available to Developers==
<div class="mw-translate-fuzzy">
==供开发者使用的高级功能==
</div>


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 整合了一些用户制作的补丁，用以完成一些特殊操作。这些非常高级的功能（通常）要求更改LimeSurvey的基础代码库，并且应谨慎进行，以免引入安全漏洞。


===Support for your own Javascript functions===
<div class="mw-translate-fuzzy">
===支持自定义的 Javascript 函数===
</div>


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.
一些用户可能需要在调查页面运行 Javascript，但在主体元素里调用 '''checkconditions()''' 是不允许的。这种调用已经被一个位于 HEAD 里的Javascript小函数替代，这个小函数用来在调用自制函数之前会嗅探'''checkconditions()''' 和 '''template_onload()''' 是否存在。使用这种方式，模板的作者就可以在HEAD里创建自己的 '''template_onload()''' 函数代替系统默认的函数。


*Disable XSS filter - in Global settings -> Security, set "Filter HTML for XSS" to No.
*禁用 XSS 过滤 - 全局设置 -> 安全, 设置 "Filter HTML for XSS" 为 No.
*Enter your script in the source of a question or group description.
*在问题或组的描述的来源中输入脚本。


{{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]].}}
{{Note|更多细节，请查看 [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey|解决方法]].}}


=Videos on Templates=


This video will demonstrate the basic and advanced template functions that are available to all LimeSurvey users. This includes changing the appearance of certain forms and inserting custom graphics. Additionally, it will thoroughly walk you through on how to edit and preview specific page templates, importing/exporting templates, modify appearance of questions in the CSS, and customizing survey description page.
<div class="mw-translate-fuzzy">
=提示与技巧=
</div>


Video - needed
<div class="mw-translate-fuzzy">
==特殊字符==
</div>


=Tips & Tricks=
<div class="mw-translate-fuzzy">
 
如果需要在调查中显示一些特定语言的句子。比如你在一个 .pstl 文件中添加一句话，并在其他的语言界面里隐藏起来。如果你在 template.css 里隐藏，我们可以使用一个假的选择器 :lang，但为了兼容性最好用一些类。
==Some language specific element==
</div>
 
If you want to have some language specific sentence in a survey, for example a help at the end of each page, you can add in a .pstl file a sentence and hidding it for 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.


Below, there are two help sentences, in French and English. Put this on endpage.pstpl:
下面就是加到 endpage.pstpl 文件里的用英语和法语写的帮助的短句。


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="php" enclose="div"><div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
<syntaxhighlight lang="php" enclose="div"><div class="fr" lang="fr">Pour de l'aide en direct appelez le 000000</div>
<div class="en" lang="en">For some help, please call 000000</div></syntaxhighlight>
<div class="en" lang="en">For some help, please call 000000</div></syntaxhighlight>
</div>


and in template.css:
还有在 template.css 里：


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


==Change the layout of the survey page==
<div class="mw-translate-fuzzy">
==改变布局==
</div>


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 now 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.
<div class="mw-translate-fuzzy">
编辑和保存了一份模板之后，只有在调查的设置里选定该模板之后，才能被应用到调查列表中。如果要把模板该为默认模板，在'''全局设置'''下的'''常规'''中选择想要的模板。 从此之后，所有使用 "默认" 选项的模板还有要新创建的模板，都会使用新选择的默认模板。
</div>


To use your current template for this page, you have to change the according 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>.
<div class="mw-translate-fuzzy">
要让当前页使用你自己的模板，需要在 '''全局设置'''中改变相应的设置。在旧版本中，可以在配置文件中编辑 $defaulttemplate 设置实现：从 config-defaults.php 中复制设置到 config.php，设置会覆盖 config-defaults.php ，再将设置改为 <code lang="html">$defaulttemplate = 'yourtemplatename';</code>.
</div>


==Import/Export of templates: Mac users==
<div class="mw-translate-fuzzy">
==在Mac上导入/导出模板==
</div>


<u>Mac users</u>, please note that the Mac OSX default archive utility may have problems with zip folders "generated on the fly".
<u>Mac users</u>, please note that the Mac OSX default archive utility may have problems with zip folders "generated on the fly".
Line 888: Line 1,038:
Another workaround is to use scripts in their mac-compiled counterparts.
Another workaround is to use scripts in their mac-compiled counterparts.


==Replacing the help icon {{ObsoleteIn|2.50}} ==
<div class="mw-translate-fuzzy">
 
==相同模板使用不同标识==
When a question help text is shown, then an help.gif image is used from the default template folder.
</div>
 
You can replace this image by uploading a new help.gif, help.png or help.jpg in your custom template folder. It will then be automatically used instead of the default help icon.
 
==Replacing an existing logo {{NewIn|2.50}} {{ObsoleteIn|3.0}}==
 
'''Note''': In the '''default''' Template of 2.50, there is no preembedded logo. Read further our [[#Adding_your_own_logo |wiki on how to add your own logo]].
 
1. To edit the logo go to the ''<u>template.css</u>'' file which you can find it here:
 
<center>[[File:t1.PNG|200px]]</center>
 
2. Click the search button to find occurrences of logo related styles and search for ''logo''
 
<center>[[File:2.png|200px]]</center>
 
3. Edit the main style file.
 
You will see something similar to:
 
<center>[[File:t4.PNG|500px]]</center>
 
If you want to change the image, just replace logo.gif with another image link. Example: (<u>logo.png</u> or <u>logo.jpg</u>).
 
If you want to change the image size, adjust width and height (in pixels) like this:
 
<syntaxhighlight lang="php" enclose="div">width:100px; height:100px;</syntaxhighlight>
 
==Adding your own logo {{ObsoleteIn|3.0}} ==
 
1. Find and open the '''startpage.pstpl''' template file.
 
<center>[[File:startpage.pstpl.png]]</center>
 
2. After this
<source lang="html4strict" ><div id="topContainer" class="jumbotron"></source>
add this line to '''startpage.pstpl''':
<source lang="html4strict">
<div class="container"><img id='page_logo' src='{TEMPLATEURL}/files/logo.png' class="clearfix pull-right" /></div>
</source>
 
3. To upload your own logo, go to the template editor and upload your logo.
 
<center>[[File:uploadyourlogo.png]]</center>
 
To position your logo, please use one of the following css classes:
 
*'''If you want the logo to be placed on the left side:'''
 
<source lang="html">clearfix pull-left</source>
 


*'''If you want the logo to be placed on the right side:'''
如果你想所有调查使用同样的模板，但又需要修改每个调查的徽标，你可以通过在template .pstpl 文件中使用 {SID} 定位符来使用不同的图片。
 
<source lang="html">clearfix pull-right</source>
 
 
*'''If you want to center the logo'''
 
<source lang="html">clearfix center-block</source>
 
==Use the same template with different logos==
 
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:


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


== Display custom favicon==
<div class="mw-translate-fuzzy">
== 显示自定义图标 ==
</div>


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:
<div class="mw-translate-fuzzy">
#Create a favicon - google will find you lots of free favicon generators.
网站图标就是那个小小的，你在浏览器的地址栏，收藏夹或是浏览器标签上看到的图标。你可以用下面的方法显示自己的网站图标：
#Name your new favicon "favicon.ico" and place it in your template /files directory.
#创建网站图标 - 谷歌会帮你找到大量的网站图标生成器。
#Add the following code to your '''startpage.pstpl''' before the </head> tag.
#将你的网站图标更名为 "favicon.ico" 并复制到你模板的 /files 目录下。
#在'''startpage.pstpl''' 文件的 </head> 标签前面加上下面的代码.
</div>


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="html4strict" enclose="div"><link rel="shortcut icon" href="{TEMPLATEURL}files/favicon.ico" type="image/x-icon">
<syntaxhighlight lang="html4strict" enclose="div"><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>
</div>


== Different appearance for survey-/question-pages==
<div class="mw-translate-fuzzy">
== 不同外观==
</div>


If you want LimeSurvey to change the appearance of every second page (i.e. of even and odd survey pages), you can use '''.page-odd''' class in your CSS file to change the appearance of odd pages.
<div class="mw-translate-fuzzy">
如果你想改变 LimeSurvey 的每个第二个页面外观 (比如 调查的奇偶页面), 你可以使用样式表文件中的 '''.page-odd''' 类来改变奇数页的外观。
</div>


An example from default template of LimeSurvey 1.91+:
LimeSurvey 1.91以上版本默认模板示例：


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="php" enclose="div">
<syntaxhighlight lang="php" enclose="div">
.page-odd table.question-group {
.page-odd table.question-group {
 background-color: #D2F2D3;
 background-color: #D2F2D3;
}</syntaxhighlight>
}</syntaxhighlight>
</div>


If you do '''not''' want differentiate even and odd pages, find all instances of ''.page-odd'' in template.css and remove those styles.
如果你确定 '''不''' 需要奇偶页使用不同的外观，找到 template.css 文件中''.page-odd''的所有实例，并删掉他们的样式。


==Create a vertical separator  border for dual scale array==
<div class="mw-translate-fuzzy">
==为双尺度阵列创建垂直分隔线边框==
</div>


To create a vertical separator border for a dual scale array, you can add the following lines to your '''template.css'''-file.
要为双尺度阵列创建垂直分隔线边框，在你的模板文件 '''template.css''' 里加入下列行：


<div class="mw-translate-fuzzy">
<syntaxhighlight lang="php" enclose="div">
<syntaxhighlight lang="php" enclose="div">
table.question thead td.header_separator,
table.question thead td.header_separator,
Line 991: Line 1,097:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


''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'' 用来指代标题分隔符 "td"。"dual_scale_separator" 用来指双尺度阵列中列的分隔符。


==Hide the survey contact message shown on the start page/survey list {{ObsoleteIn|3.0}} ==
<div class="mw-translate-fuzzy">
==添加标识 {{ NewIn|3.0}} ==
</div>


To hide the "Please contact ..." message on the start page (with the survey list), you can add the following to the '''$(document).ready''' function in the '''template.js''' of your used design template:
# 首先用主体编辑器打开你喜欢使用的主题。[[File:OpenThemeEditor.jpg]]
# 我们推荐使用清爽(fruity), 是我们当前最受欢迎的主题。
# 然后扩展这个主题，并给新的主题起个名字。[[File:ExtendTheme.jpg]]
# 如下图所示，你可以上传你自己的徽标。[[File:UploadFileTheme.jpg]]
# 从界面下拉列表里选择`调查列表´ 。[[File:OpenScreenSurveyList.jpg]]
# 然后从左边的菜单里选择 `layout_survey_list.twig´。[[File:EditLayoutSurveyListTwig.jpg]]
# 在编辑窗口里滚动到126行，并把图中标记的部分换成你前面上传的图片的文件名。[[File:ChangeSurveyListHeaderImageEditor.jpg]]
# 保存文件。[[File:ThemeEditorSaveChanges.jpg]]
# 把你的扩展主题设置成默认主题。[[File:ChangeDefaultTheme.jpg]]


<syntaxhighlight lang="php" enclose="div">
=== Align logo to the centre of the survey page===
This example is for the "extends_fruity" template. For other templates the required CSS may be different.
# Login to the LimeSurvey admin area
# Browse to the theme editor: Configuration > Themes
# Find "LimeSurvey Fruity Theme" in the list and click the "Theme Editor" button
# Click "custom.css" in the files list on the left at near the bottom of the page
# Copy the following CSS into that file and press "Save Changes"


$('#surveycontact').hide(); //Hides the survey contact message
<syntaxhighlight lang="css">
.navbar-fixed-top > div.navbar-header {
    width: 100% !important;
}


</syntaxhighlight>
.navbar-fixed-top > div.navbar-header > div {
 
    width: 100% !important;
==Remove the survey contact message shown on error messages {{ObsoleteIn|3.0}}==
}
 
If you want to remove the survey contact message from error messages, it'll be trickier. You can add the function from below. It calls the '''$(document).ready''' function in the '''template.css''' of your used design template:
 
<syntaxhighlight lang="php" enclose="div">
removeContactAdressFromMessage(); //Removes the survey contact message from error messages
</syntaxhighlight>
 
and add the following function to your *template.js* file


<syntaxhighlight lang="php" enclose="div">
.navbar-fixed-top > div.navbar-header > div > img {
function removeContactAdressFromMessage()
    margin: 0 auto 0 auto !important;
{
if ($('#tokenmessage').length > 0)
   {
   var oldMessage = $('#tokenmessage').html();
   var indexContact = oldMessage.indexOf('Bitte kontaktieren');
   var newMessage = oldMessage.substr(0, indexContact);
   $('#tokenmessage').html(newMessage);
   }
}
}
</syntaxhighlight>
</syntaxhighlight>


It will probably not work for a survey in English language and has to be extended when used for multilingual surveys. But it's an idea/tip on how to solve this.


==How to deal with multilingual question attributes {{ObsoleteIn|2.50}}==


If you have a multilingual survey and e. g. want to use a different string for the "other" field, this could only be done for the base language (until this feature was added at LimeSurvey 2.0). To work around this, paste in the field to change the label for "other":
<div class="mw-translate-fuzzy">
=定制问题视图 {{NewIn|3.0}}=
</div>


<syntaxhighlight lang="php" enclose="div"><span class="en">New label</span><span class="fr">Nouveau label</span></syntaxhighlight>
<div class="simplebox">'''注意:''' 这是一个会在将来被问题对象代替的临时功能 (把定制视图加入问题对象会很简单). 默认是禁用的。</div>


Add in the template.css of your template (at ''/limesurvey/upload/templates/<yourtemplatename>/template.css''):
自As of version 2.5版本起，你可以为问题或是问题的内嵌元素创建特殊模板的定制视图。这会对你想定制一个或多个调查的特殊问题类型的HTML布局很有用。


<syntaxhighlight lang="php" enclose="div">html:lang(en) .fr{display:none}
*在application/config/config.php 文件里找到 'config'=>array，并添加后面的代码：'allow_templates_to_overwrite_views'=>1
html:lang(fr) .en{display:none}</syntaxhighlight>
*在 /{your_template}/config.xml, 设置 "overwrite_question_views" 为( true)
*复制 application/views/survey/* 到 template/{your_view_directory}/survey/
*注意！你只需要复制你打算修改的文件，文件结构还是要和 application/views/survey/ 保持一致。


==Adding your own logo to the survey list {{ NewIn|3.0}} ==
<div class="mw-translate-fuzzy">
=向模板插入定制样式表或 JavaScript {{NewIn|2.50}}=
</div>


# First please open the theme editor for the theme you like to use. [[File:OpenThemeEditor.jpg]]
<div class="mw-translate-fuzzy">
# We recommend to use fruity, it is our best theme currently.
从2.50 版本开始，你可以使用 config.xml 文件自动载入插件。
# Then extend the theme and give it a name you will recognize. [[File:ExtendTheme.jpg]]
</div>
# 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}}=
 
<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>


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.
<div class="mw-translate-fuzzy">
 
*上传文件到模板的文件夹 /css 或 /scripts  
*In application/config/config.php, find 'config'=>array and add this line to the array : 'allow_templates_to_overwrite_views'=>1
*在 /{your_template}/config.xml文件的 <css> 或 <js> 块中添加文件路径，示例:<syntaxhighlight lang="xml" enclose="div"><css>
*In /{your_template}/config.xml, set "overwrite_question_views" to true
*Copy application/views/survey/* to 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/
 
=Insert Custom CSS or JavaScript files for template {{NewIn|2.50}}=
 
As of version 2.50, you can use the config.xml file to automatically load plugin files.
 
*Upload your files to the template /css or /scripts folder
*In /{your_template}/config.xml, add the file paths to the <css> or <js> blocks, something like this:<syntaxhighlight lang="xml" enclose="div"><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>
</div>


<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
Line 1,086: Line 1,181:
</js>
</js>
</syntaxhighlight>
</syntaxhighlight>
==Class definitions (for Developers)==
===answer-list===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
|arrays/5point || A || tr
|-
|arrays/10point|| B|| tr
|-
|arrays/array || F || tr
|-
|arrays/column || H || tr and col
|-
|arrays/dualscale || 1 || tr
|-
|arrays/increasesamedecrease || E || tr
|-
|arrays/yesnouncertain || C || tr
|-
|gender || G || div and ul
|-
|list_with_comment || O || div
|-
|ranking || R || ul and div
|-
|yesno || Y || ul and div
|-
|ranking_advanced || R || ul and div
|-
|listradio || L || div
|-
|5pointchoice || 5 || ul
|-
|multiplechoice || M || div
|-
|}
===radio-list===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
| yesno || Y || ul
|-
|gender || G || ul
|-
|arrays/yesnouncertain || C || tr
|-
|arrays/increasesamedecrease || E || tr
|-
|arrays/dualscale || 1 || tr
|-
|arrays/5point || A || table and tr
|-
|arrays/10point || B || tr
|-
|arrays/array || F || tr
|-
|arrays/column || H || col
|-
|listradio || L || div
|-
|list_with_comment || O || div followed by ul
|-
|}
===radio-item===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
|arrays/yesnouncertain || C || td
|-
|5pointchoice || 5 || li
|-
|arrays/10point || B || td
|-
|arrays/5point || A || td
|-
|arrays/array || F || td
|-
|arrays/column || H || td
|-
|arrays/dualscale || 1 || td
|-
|arrays/increasesamedecrease || E || td
|-
|gender || G || li
|-
|listradio || L || li
|-
|yesno || Y || li
|-
|listradio || L || li and div
|-
|image_select-listradio || L || li and div
|-
|list_with_comment || 0 || li
|-
|}
===list-group===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
|yesno || Y || ul
|-
|5pointchoice || 5 || ul
|-
|gender || G || ul
|-
|ranking || R || ul
|-
|ranking_advanced || R || ul and div
|-
|question_index_group_buttons ||  || div
|-
|question_index_questions_buttons ||  || div
|-
|}
===list-group-horizontal===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
|yesno || Y || ul
|-
|5pointchoice || 5 || ul
|-
|gender || G || ul
|-
|}
===list-unstyled===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
|list_with_comment || 0 || ul
|-
|listradio|| L || ul
|-
|multiplechoice|| M || ul
|-
|multiplechoice_with_comments|| P || ul
|-
|multiplenumeric|| K || ul
|-
|multipleshorttext|| Q || ul
|-
|ranking|| 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
|-
|load||  || ul
|-
|save||  || ul
|-
|captcha||  || ul
|-
|}
===select-list===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
|ranking|| R || ul
|-
|ranking_advanced|| R || ul
|-
|}
===checkbox-item===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
|multiflexi (Array numbers)|| : || td
|-
|multiplechoice|| M || li
|-
|multiplechoice_with_comments|| P || div
|-
|image_select-listradio|| L || li
|-
|image_select-multiplechoice|| M || li and div
|-
|navigator||  || span
|-
|}
===checkbox-text-item===
{|class=wikitable
!'''Question'''!!'''Question Type'''!!'''elements'''
|-
|multiplechoice_with_comments|| P || li
|-
|multiplechoice|| M || li
|-
|image_select-multiplechoice|| M || li
|-
|}


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

Latest revision as of 09:59, 7 May 2023

Other languages:

说明

LimeSurvey 为开发者提供了一个有效定制调查外观的主题和样式的系统。从LS3之后，我们不再称之为 "模板" 而以"主题"代之。 主题 控制的部分从外观到使用感受。调查管理员可以为每个调查选择默认的主题，并可进一步的个性化定制来改善主题的外观和用法。主题 用设置功能使管理更简单，无需掌握代码技巧就可以增加标识，变更背景色或着更新字体等等。


LimeSurvey 初始自带了3个默认主题。这些初始的主题可以在目录"themes/survey/" 中找到，分别存储在以各自的主题名称命名的目录中。每个主题的目录都有配置文件config.xml，另外还有数个目录用来存放视图 themes views (.twig), 样式表 (.css), 脚本（scripts）, 图片（images） (.jpg 或者 .png)和其他林林总总。


自 LimeSurvey 2.50 起, 主题引擎使用Bootstrap 3 作为样式表的框架。Bootstrap 3 作为标准的框架结构，开发者可以从互联网上找到大量的和其相关的学习资料。


从 LimeSurvey 3 开始, 主题引擎是使用Twig, 开发者可以用简单可靠的方式来定义调查的逻辑。Twig 替换了旧系统中的替换关键字系统部分。原来用来创建HTML的逻辑关键字现在可以在主题的视图中使用。


香草主题摘要： 

<div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}>
    {# 备注: 如果你要定制问题的颜色使用问题主题 #}
    {{ aQuestion.answer | raw }}
</div>

主题, 用 HTML 和 Twig 编码, 定义了文本在结构类似的页面里显示的样子和位置。经常需要参考或引用其他文件，多数主题都要通过样式表来定义字型，字体颜色，字体大小，字体背景和其他在整个调查页面使用的通用参数。样式表引用和HTML代码中的对象相关的类 参数。这可以让样式表对如何显示出现在不同地方的每一个各式各样的文本或是其他对象进行描述。LimeSurvey中每个问题类型都有唯一的类，因此可以对每个问题的外观进行详细控制。 图片文件, 像徽标或是特别样式的进度条，也可以在主题中引用。最后，将花括号中的特殊关键字替换为调查中为每种语言翻译通讯员定义的文本（例如，针对每种定义的语言的“调查标题”或“问题文本”）。

如果你有一个不错的主题，请考虑分享到 LimeSurvey 的论坛。在大家的帮助下，使LimeSurvey 变得更好！ 点击 LimeSurvey 模板库 分享你的主题！

创建主题

要创建或编辑现有的主题，你需要LimeSurvey的 模板操作权限，同时还要有LimeSurvey所在主机的文件操作权限。

警告: 对主题的更改会影响到所有系统中的调查（现有的和之前创建的）。为使主题良好运作，需要具备HTML的使用经验和知识。

通过 配置下的主题编辑器 (如下)创建主题。有些人喜欢用文本编辑软件直接操作主题的文件。那不妨先用主题编辑器创建一个新主题，文件都保存在 目录LimeSurvey_web_root/upload/themes/survey/your_new_template 下，然后就可以用文本编辑软件来处理了。

权限提示： 在unix/linux 系统中，主题文件由网络服务器的用户和组所有 (有些系统叫"www")。 修改之前，请确保你有足够的权限来编辑这些文件，保存文件时候一定不要改变所有权！主题编辑器可以一直为你保驾护航。

一些 '公共' 元素被多个主题共用，下面就对这些模板做个简要介绍。

主题看起来有点复杂。除了 HTML, 你还要知道 CSS, Twig 和 JavaScript.

LimeSurvey 主题编辑器

通过管理工具栏的主题编辑器来快速了解和更新主题。此编辑器只有 拥有模板编辑权限 的用户超级管理员可以使用。


  注意 : 错误配置的主题会导致使用对应模板的调查无法操作。



主题编辑器可以编辑运行中的主题。通过配置下的主题按钮进入主题列表，再点击右边的 "主题编辑器" 来操作。


Bootswatch 主题的编辑按钮


可以在主题编辑器页面编辑/查看要处理的主题。


置中


以下是可用的操作：


  • 创建: 创建一个新模板。为避免白手起家，会把默认模板复制过来。
  • 导入: 以ZIP文件导入一份模板。
  • 导出: 导出当前模板为ZIP文件。
  • 复制: 以当前模板为基础创建新模板。
  • 重命名: 修改模板的命名，通常在导入和复制了新模板后使用。
  • 模板: 所有可用的模板列表。
  • 界面: 用列表列出调查在不同状态时的样子。
  • 返回管理面板.

导入/导出/复制 模板

一个包含所有模板文件的ZIP文件在 导出 操作后生成。你可以把模板 导入 到一个新建的LimeSurvey，也可以手动复制对应的文件到对应的目录 模板文件目录.

还是推荐使用模板编辑器的 导入/导出/复制 功能。

页面结构 / 使用模板

  • 欢迎页: startpage.pstpl, welcome.pstpl, privacy.pstpl, navigator.pstpl, endpage.pstpl
  • 问题页: startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
  • 结束页: startpage.pstpl, assessment.pstpl, completed.pstpl, endpage.pstpl

模板文件

以下模板文件用来创建你的新调查:

  • startpage.pstpl: 生成每一个网页的开始部分。从"<head>"标签开始，但不包含"<html>"标签。这是个由脚本生成的标准页面的'头'。请确保你的startpage.pstpl 文件包含 <body> 标签。尽管时下许多浏览器并不需要严格遵循W3 的HTML标准，但是LimeSurvey脚本需要通过<body>标签来定位并运行Javascript脚本。startpage.pstpl 文件里没有很多'关键字'。不过，你应该会想在标题里插入{调查名称}。 startpage.pstpl 文件可以和对应的 endpage.pstpl 文件包含一组代码。举例来说，你可以在这个文件里定义一个表格的开头，然后在 endpage.pstpl 文件中定义同一个表格的结尾。文件 startpage.pstpl 和 endpage.pstpl 可以将 LimeSurvey 使用的所有页面都包裹进来。
  • survey.pstpl: 该模板是在大多数页面中使用的第二个模板，并且提供了放置调查名称和说明的位置。 本模板没有对应的 '收尾' 模板，你必须在这个模板里完成所有标签的配对。
  • welcome.pstpl: 这个模板只在欢迎屏幕使用 ( '多合一' 调查的主页里). 你可以在这里写下欢迎的文字，还有其他用来说明的信息。和 'survey.pstpl' 文件一样，文档里所有的标签也需要在本文档里完成配对。
  • startgroup.pstpl: 这个模板可以为一组相关的问题提供总结。对应的会有一个 'endgroup.pstpl' 模板，可以把没有配对的标签在这个文件里完成配对。
  • groupdescription.pstpl: 这个模板用来显示对组的描述。请注意，在调查的设置中 (在演示下的演示和导航页 ) 可以设置是否显示组的说明。如果选择不显示，就无需考虑此文件。
  • question.pstpl: 这个模板包含调查里的问题，答案和帮助。在 "group by group" 和 "多合一" 调查里, 该模板会被每个问题循环使用。
  • question_start.pstpl: 本文件包含问题开头的各种元素。包含在 'question.pstpl' 文件的 {QUESTION} 关键字里。旨在允许模板设计人员更好地控制问题的布局。 该模板位于常规模板之外 (从 LimeSurvey 1.87 开始已经弃用)。模板中的所有关键字都可以在 question.pstpl中直接调用。
  • completed.pstpl: 本页面在完成调查反馈并保存的时候显示。本页可以调用在调查设置里的"转发链接"。
  • endgroup.pstpl: 本文件完成组的闭合，还可以对 startgroup.pstpl 文件中没有配对的标签完成配对。
  • navigator.pstpl: 本文件包含调查里使用的导航按钮。，"下一个"，"上一个"，"最后"，"提交"，"保存" 和 "清除所有l" 的链接。本文件在除完成页面外的页面都要使用。
  • printanswers.pstpl: 该文件具有调查表的打印版本所必需的HTML包装器。
  • print_group.pstpl: 本文件和 startgroup.pstpl 和 endgroup.pstpl 一样, 但适用于调查的打印版本。
  • print_question.pstpl: 本文件和 question.pstpl 一样, 但适用于调查的打印版本。
  • print_survey.pstpl: 本文件和 survey.pstpl 一样, 但适用于调查的打印版本。

样式表和 Javascript

模板经常要用到的两个文件 template.css (CSS) 和 template.js ( Javascript).

  • {TEMPLATECSS}: 在默认样式表 (default css), 模板(template.css), 和 RTL语言样式表(template-rtl.css)以外增加效果的样式表文件。
  • {TEMPLATEJS}: 在默认脚本(default javascript files), 模板(template.js), 和所有其他脚本以外的脚本文件。

使用 Bootstrap

LimeSurvey 已内置 Bootstrap 3 ，因此你可以使用现成的 Bootstrap 类来美化你的模板。 更多信息请访问Bootstrap 文档.

超棒的-Bootstrap-单选框 插件也可以用了。这样，你就可以用后缀是"-checkbox" 或是 "-radio"的标准 Bootstrap 彩色-类 (提示，警告，危险，等等)来进行你想要的风格修饰多选框和单选框。

替换默认的样式表或 Javascript

某些问题使用特别的 Javascript 或是 CSS。如果你要替换某个函数，请使用级联系统。对 javascript 函数来说，最后读取的函数是最终使用的函数。

其他模板文件

privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl, 和 confirmationemail.pstpl 不在are no longer used by LimeSurvey 中继续使用。而是被应用语言文件所替代。邮件内容可以在每个调查的基础上编辑。

标准页面

受访者在获取和访问LimeSurvey 应用的时候会看到10个标准页面。每个都由调查设置中指定的“模板”中的多个常见“模板”文件构成。下表指出了在构造这些页面中的每个页面时使用的模板文件。

调查页面/
模板文件		 调查列表 欢迎 问题 完成 清除所有 注册 载入 保存 打印答案 打印调查
调查列表
欢迎页
隐私
导航
调查
开始组
组说明
问题*
结束组
评估
完成
清除所有
注册
载入
保存
打印答案
打印调查
打印组
打印问题
开始页
结束页
模板样式表
*注意: 1.90以上版本之后, 当前版本替换了 question.pstpl 和 question_start.pstpl 模板文件。如果你正在使用旧的定制模板，你需要在 question.pstpl 文件开头加入以下内容:
<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">
并在 question.pstpl 文件的结尾加上对应的结束标签:
</div>

*注意：1.9版本1 和早期版本， LimeSurvey 脚本文件并不包含在模板中。 2.0 版本, 你需要在模板文件中使用 {TEMPLATEJS} 来添加Js文件。 可以在 startpage.pstpl 或 endpage.pstpl 文件中添加. 你可以移除 {TEMPLATEURL}/template.js 这一行，但你必须用 {TEMPLATEJS} 来更新个人模板。

文件控制部分

在左边的 "文件控制" 窗口，你可以点击要编译的模板文件。你能看到 屏幕部分的 JavaScript 文件和 CSS 文件。 HTML 的编码会在出现在中间的 "正在编辑" 窗口。如果模板可编辑（视目录的权限决定），你可以做任何修改并稍后保存。


"其他文件" 窗口显示了模板目录下的其他文件列表。你可以使用这个窗口的功能上传并选择图片文件（你的图片，徽标等），或是其他创建模板所需的文件。


使用文本串字段 {TEMPLATEURL} 来代替为每个图片使用链接。替换为： 

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

你可以使用 (New in 2.50 ): 

img src='{TEMPLATEURL}files/mypicture.jpg'

2.50 版本之前的 LimeSurvey 使用： 

img src='{TEMPLATEURL}mypicture.jpg'

屏幕下方可以看见一个正在编辑的模板的样例。 不能从模板编辑器中删除模板。只能从对应的目录里手动删除模板文件。还可以选择不同的屏幕分辨率，以便更好地评估模板的感觉和外观。

注意： 附带的模板文件不能编辑，如果想修改的话建议修改副本。

模板文件定位

LimeSurvey 将每个'标准' 模板存储在/templates 目录下各自独立的目录下。定制的模板存储在 /upload/templates 目录下。

模板目录里 总是 要有一个"默认"目录 。如果一个模板的目录不存在或着找不到，这个模板作为备用的模板。默认已经安装。

你可以对上传到模板管理区的任何要使用的图片文件使用下面的语法： 

{TEMPLATEURL}filename.xyz

样式表的样式问题

使用样式表修饰问题外观已经变得很容易。每个问题类型都有独一无二的类。必选问题有额外的必选类。例如：对一个非必选问题： 

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

如果是一个必选问题： 

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

如果受访者没有回答必选题，或者问题有验证步骤： 

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

如果问题有验证部分，但是受访者没有正确回答： 

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

问题相关的全局类

这些类适用各种问题类型。一些问题使用一种或两种类，有些其他的问题可能使用更多的类。

全局类
类名 部分 问题类型 示例 备注
.question (Obsolete since 3.0) 所有问题型块 所有问题类型 <p class="question">, <ul class="question">, <table class="question">
.ls-answers (New in 3.0 ) 所有问题型块 所有问题类型 <div class="ls-answers ">, <ul class="ls-answers ">, <table class="ls-answers">
.subquestions-list 子问题列表 多选问题，阵列问题 <ul class="subquestions-list">, <table class="subquestions-list"> .questions-list 同样适用
.answers-list 问题列表 单选问题，阵列问题，多行输入文本问题 <ul class="answers-list">, <table class="answers-list">
.answer-item 答案部分：单一答案 单选问题，阵列问题，多行输入文本问题 <li class="answer-item">, <td class="answer-item">
.noanswer-item 答案部分：无答案 单选问题，阵列问题类型 <li class="noanswer-item">, <td class="noanswer-item"> 没有答案也是一种答案，所以有无问题项和有问题项两种类
.question-item 答案部分：单一答案 阵列问题，多行输入文本问题 <li class="question-item">, <tr class="question-item"> 一些答案同时也是问题。我们有很多 "问题项-答案项" 的类
.button-list 按钮列表 是否按钮和性别问题 <ul class="button-list">
.button-item 有一个按钮的答案 是否按钮和性别问题 <li class="button-item">
.checkbox-list 复选框列表 多选问题，数字阵列问题（复选框） <ul class="checkbox-list">, <tr class="checkbox-list"> 一些问题使用多列类，像有备注的多选框：class="checkbox-list text-list"
.checkbox-array (New in 3.0 ) 复选框阵列 有复选框的数字阵列选项 <table class="checkbox-list">
.checkbox-item 有复选框的答案部分 多选问题，带复选框的数字阵列问题类型 <li class="checkbox-item">, <td class="checkbox-item">
.radio-list 单选项列表 单选问题，阵列问题类型 (每行) <ul class="radio-list">, <tr class="radio-list">
.radio-array (New in 3.0 ) 单选阵列项 阵列问题类型 <table class="radio-array">
.radio-item 有单选项的答案 单选问题，阵列问题类型 <li class="radio-item">,
.text-list 文本输入列表 多行文本问题类型，文本阵列 <ul class="text-list">, <tr class="text-list">
.text-item 文本输入的答案部分 多行文本问题类型，文本阵列 <li class="text-item">,
.numeric-list 仅数字答案的文本输入列表 多行数字问题类型，数字阵列 <ul class="text-list numeric-list">, <tr class="text-list numeric-list">
.number-list 仅数字答案的文本输入列表（每行） 多行数字问题类型，数字阵列 <ul class="text-list numeric-list">, <tr class="text-list numeric-list">
.number-array (New in 3.0 ) 输入数字的答案部分 数字矩阵 <table class="number-array">
.select-list (Obsolete since 2.50) 选择列表 数字阵列，双尺度阵列（选择） <table class="select-list">
.dropdown-list (New in 2.50 ) 选择列表 数字阵列，双尺度阵列(选择)(每行) <table class="dropdown-list">
.dropdown-array (New in 3.0 ) 下拉列表阵列 数字阵列，双尺度阵列(选择) <table class="dropdown-array">
.select-item (Obsolete since 2.50) 选择的答案部分 数字阵列，双尺度阵列(选择), 选择类型的单选 <p class="select-item">, <td class="select-item">
.dropdown-item (New in 2.50 ) 选择的答案部分 数字阵列，双尺度阵列(选择), 选择类型的单选 <p class="dropdown-item">, <td class="dropdown-item">
.hide (Obsolete since 3.0) 用于辅助功能：用css隐藏但从屏幕读取，从 2.50 版本开始: 可以使用 bootstrap 的 sr-only 短文本问题 <label class="hide"> 能用作其他用途
.ls-js-hidden (New in 3.0 ) 用于javascript激活后的隐藏部件 示例按钮 <div class="ls-js-hidden"> LimeSurvey 核心使用，你也可以在你的模板里使用
.ls-js-hidden-sr (New in 3.0 ) 用于辅助功能: 如果 js 激活就隐藏, 但总在用户使用屏幕输入的时候显示 示例按钮 <a class="ls-js-hidden-sr"> 按钮
.ls-no-js-hidden (New in 3.0 ) 用于在javascript没有激活后隐藏的部分 链接 <a class="ls-no-js-hidden"> 如果Javascript没有激活，LimeSurvey 核心用于无效链接
.ls-label-xs-visibility (New in 3.0 ) 大屏幕里隐藏的标签，但在在屏幕阅读器和小屏幕显示 标签 <label class="ls-no-js-hidden"> 用于标签在表格单元格内的阵列问题类型
.ls-input-group-extra (New in 3.0 ) 和 boostrap 的 input-group-addon 用法一样, 但没有背景和边框。 right suffix <div class="ls-input-group-extra"> 适用与右和左后缀 (全局)
.checkbox (Obsolete since 3.0) input[type=checkbox] 多选框问题 <input type="checkbox" class="checkbox"> 适用现代浏览器：不必要，但一些旧的浏览器需要
.radio (Obsolete since 3.0) input[type=radio] 单选框问题 <input type="radio" class="radio"> 适用现代浏览器：不必要，但一些旧的浏览器需要
.text input[type=text] 有输入文本或文本域的问题 <textarea class="text">
.answertext 阵列问题 阵列问题的答案部分 <th class="answertext">
.col-answers 阵列问题 答案的列 <col class="col-answers">
.odd .even (Obsolete since 2.50) 阵列问题 交替列 <col class="odd">
.array1 .array2 (Obsolete since 3.0) 阵列问题 交替行 <tr class="array1">
.ls-odd .ls-even (New in 3.0 ) 阵列问题 子问题和Y 轴交替 <tr class="ls-odd">

问题相关的类的示例

短文本问题类型：

<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>

多行短文本

<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>

阵列类型问题

<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>

问题类的完整列表

问题类型 问题类 问题编号
5分单选 .choice-5-pt-radio 5
阵列题 (10分量表) .array-10-pt B
阵列题 (5分量表) .array-5-pt A
双尺度阵列题 (灵活标签) .array-flexible-duel-scale 1
阵列题 (增加-持平-减少) .array-increase-same-decrease E
阵列题 (数字) .array-multi-flexi :
阵列题 (文本) .array-multi-flexi-text ;
阵列题 (是-否-不确定) .array-yes-uncertain-no C
阵列题 (灵活标签) .array-flexible-row F
列式阵列题 (灵活标签) .array-flexible-column H
样板问题 .boilerplate X
日期 .date D
性别 .gender G
文本输入(超长) .text-huge U
语言切换 .language I
单选（下拉框） .list-dropdown !
单选（平铺） .list-radio L
单选，可添加说明t .list-with-comment O
文本输入（长） .text-long T
多重数字输入 .numeric-multi K
多重选项 .multiple-opt M
有说明得多重选项 .multiple-opt-comments P
多重短文本输入 .multiple-short-txt Q
数字输入 .numeric N
排序题 .ranking R
文本输入（短） .text-short S
是否题 .yes-no Y

验证类的完整列表

注意:  1.92 及以前的版本, 仅 .mandatory 和 .input-error 类可用。

这些应用到帮助 和/或 验证的提示信息使得每个类型都有各自的风格。

.hide-tip 选项和 .input-error 选项默认相互作用，因此你可以隐藏验证提示。然而，提示信息会在验证失败的时候出现，当验证被纠正之后又会消失。

所有这些设计都是为了避免弹出式警告信息窗口的需要。取而代之，提示信息可以按需出现和消失，并且可以用自定的彩色来表示答案是否达到了验证的标准。

此外，当你首次访问一个验证标准不满足的页面，可以用令人愉悦的颜色对提示进行颜色编码，以显示尚未满足的验证条件； 然后如果该人提交的页面存在验证错误，则使用较粗糙的颜色重新显示该页面。

用途 CSS 类 描述
必填项 .mandatory 这是这个必填的问题
用户输入错误 .input-error 此问题还有至少一个验证错误
隐藏提示 .hide-tip 如果你使用隐藏提示，请添加
默认类型 .em_default 默认提示设置 ( 数值等 …)
数字答案 .em_num_answers 用于min_answers 和 max_answers
范围值 .em_value_range 用于min/max_num_value_n 和 multiflexible_min/max
合计范围 .em_sum_range 用于min/max/equals_num_value
正则表达式验证 .em_regex_validation 用于问题的正则表达式验证
问题级别验证函数 .em_q_fn_validation 用于em_validation_q 选项
子问题级别验证函数 .em_sq_fn_validation 用于em_validation_sq 选项
其他必填说明 .em_other_comment_mandatory 用于 other_comment_mandatory 选项 - 在"其他"已经选择但相关的说明没有填写的时候显示。

在你的定制模板中导入样式

定制问题的样式都是在每一个模板的CSS 文件的底部，并且用下面的注释开头：
/* --------------------------- START: Question styles  ------------------------------ */

如果你正在修饰你自己的模板，你应该在不影响你的样式的前台下复制 templates/default/template.css (基于表格布局) 或 /templates/limespired/template.css (基于样式表布局) 到你自己的样式表中。

IE的条件式样式表

因为 IE6 ，IE7 和其他浏览器间的渲染存在明显差异，因此在每个模板中都有特殊的IE条件样式表。 

<!--[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]-->

你应该在你的startpage.pstpl文件中添加上面的代码，并且复制 /templates/default/ 或 /templates/limespired 的IE风格样式表用于基于表的布局和基于 CSS 的布局。

注意: 如果你把上面的样式加入到了你的样式表里，那你几乎肯定要调整这样式表。

IE的另类解决方案

你可以把主体的条件类放在 startpage.pstpl 文件里，并在你的模板中使用这个类。此方法在柠檬汽水(citronade) 模板中使用 (Obsolete since 2.06). 添加一个 js / no-js 类到有 javascript / 无 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>

并在 template.css 中使用： 

.ie6{/*specific for internet explorer 6*/}
.ielt8{/*specific for internet explorer 6 and 7*/}
.ie{/*specific for all internet explorer */}

反方向语言（RTL）和调整

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.

关键字

  Deprecated : This features is deprecated in version 3.0.


Keywords within a template file get replaced by the current survey information. They are surrounded by curly brackets, for example: {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.)

Keyword Template files Description
{SURVEYNAME} All Files The survey title
{SURVEYDESCRIPTION} All Files The survey description
{WELCOME} All files (mainly for welcome.pstpl) The survey 'welcome' text
{PERCENTCOMPLETE} survey.pstpl A small graph showing the percentage of the survey completed
{GROUPNAME} startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl Displays the current group name
{GROUPDESCRIPTION} startgroup.pstpl, groupdescription.pstpl, endgroup.pstpl Displays the current group description
{NUMBEROFQUESTIONS} welcome.pstpl Displays the total number of questions in the survey (just the number)
{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".
{CHECKJAVASCRIPT} All files (mainly for welcome.pstpl) Warning message when end-user browser have javascript disabled
{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}
{ANSWER} question.pstpl, print_question.pstpl presents the answer form for the current question
{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)
{QUESTIONHELP} question.pstpl, print_question.pstpl Displays help text (predefined tip for question type) for the current question
{QUESTION_CLASS} question.pstpl, print_question.pstpl unique class for each question type. (To be included in the question's wrapping tag.)
{QUESTION_CODE} question.pstpl, print_question.pstpl Displays the current question code
{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_HELP} question.pstp, question_start.pstpl Displays the user defined help text for the current question
{QUESTION_TYPE_HELP} print_question.pstp Displays the user defined help text for the current question
{QUESTION_INPUT_ERROR_CLASS} question.pstp, question_start.pstpl Provides a class if there was user input error
{QUESTION_ID} print_question.pstp Provides a unique ID for each question to allow styling for specific questions
{QUESTION_TEXT} question.pstp, print_question.pstp, question_start.pstpl Displays the text for the current question
{QUESTION_MANDATORY} question.pstp, print_question.pstp, question_start.pstpl Displays the translated 'Mandatory' text for the current question
{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_MESSAGE} question.pstp, print_question.pstp, question_start.pstpl Displays the translated 'Mandatory' help message text for the current question
{QUESTION_NUMBER} print_question.pstpl Incremental count of questions.
{QUESTION_VALID_MESSAGE} question.pstp, print_question.pstp, question_start.pstpl Displays the translated valid help message text for the current question
{QUESTION_SCENARIO} print_question.pstp Prints out the 'scenario' text for conditional questions.
{NAVIGATOR} navigator.pstpl Displays navigation buttons (next, prev, last)
{CLEARALL} All files (but intended for navigator.pstpl) Displays the "Exit and Clear Results" link
{COMPLETED} completed.pstpl Displays the 'completed' message for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
{URL} completed.pstpl Displays the survey 'url' and 'url text'
{PRIVACYMESSAGE} privacy.pstpl The privacy message is shown if you set your survey to be anonymous. 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.
{TEMPLATEURL} All Files The URL to the current template location (useful for referencing image files in your template)
{SURVEYRESOURCESURL} All Files The URL to the current uploaded files for this survey location (useful for referencing image files in your question, group, ....)
{SUBMITCOMPLETE} endpage.pstpl The statement (from the language files) that tells the user they have completed the survey, and to press the "Submit" button
{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"
{SAVEDID} All Files Displays 'Response ID' of user
{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.
{TOKEN:FIRSTNAME} All Files ***If survey answers are NOT ANONYMOUS - gets replaced with the users first name from the tokens table
{TOKEN:LASTNAME} All Files ***If survey answers are NOT ANONYMOUS - gets replaced with the users last name from the tokens table***
{TOKEN:EMAIL} All Files ***If survey answers are NOT ANONYMOUS - gets replaced with the users email from the tokens table***
{TOKEN:ATTRIBUTE_1} All Files ***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_1 from the tokens table***
{TOKEN:ATTRIBUTE_2} All Files ***If survey answers are NOT ANONYMOUS - gets replaced with the users attribute_2 from the tokens table***
{ANSWERSCLEARED} Preferably in navigator.pstpl The "Answers Cleared" statement from the language files
{RESTART} clearall.pstpl URL to restart the survey
{REGISTERERROR} register.pstpl Shows any error messages in the register page (ie: "You must include an email address")
{REGISTERMESSAGE1} register.pstpl The statement "You must be registered to complete this survey" from the language files
{REGISTERMESSAGE2} register.pstpl Details about registering from the language files
{REGISTERFORM} register.pstpl The actual form for registering, will change depending on whether the attribute_1 and attribute_2 fields are set.
{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.
{LANGUAGECHANGER} survey.pstpl Displays a switch in multilingual surveys to change the question.

导入/按钮

每个"输入" 类型在调查中都拥有自己的类名。因此你可以通过在 "startpage.pstpl" 文件添加样式表来控制按钮和输入的外观。 这些类的名字如下所示：

  • submit (提交按钮)
  • text (文本输入 - 适用于短文本，日期和数字)
  • answertext (答案的文本部分)
  • radio (单选按钮)
  • checkbox (多选按钮)
  • select (选择/列表框)
  • textarea (长文本输入)
  • clearall ("退出并清除调查"链接)
  • rank (排序类问题。没有为选择框或文本框设置颜色。但是允许改变其他的排序类问题的背景色，文本颜色，文本大小等。)
  • graph ("百分比完成度" 图表)
  • innergraph (图表中的表格 - 包含 0% 和 100% 的文本。使用这个类来改变文本大小。)
  • question (呈现在表格中的问题的常规设置。通常，你需要通过这个来确认你使用的字体大小和颜色和在其他地方默认使用的相同。)
  • mandatory  (必答题)
  • input-error (用户输入错误 - 如果用户答错了在调查中都拥有自己的类名。因此你可以通过在 "startpage.pstpl" 文件添加样式表来控制按钮和输入的外观。 )
  • submit (提交按钮)
  • text (文本输入 - 适用于短文本，日期和数字)
  • answertext (答案的文本部分)
  • radio (单选按钮)
  • checkbox (多选按钮)
  • select (选择/列表框)
  • textarea (长文本输入)
  • clearall ("退出并清除调查"链接)
  • rank (排序类问题。没有为选择框或文本框设置颜色。但是允许改变其他的排序类问题的背景色，文本颜色，文本大小等。)
  • graph ("百分比完成度" 图表)
  • innergraph (图表中的表格 - 包含 0% 和 100% 的文本。使用这个类来改变文本大小。)
  • question (呈现在表格中的问题的常规设置。通常，你需要通过这个来确认你使用的字体大小和颜色和在其他地方默认使用的相同。)
  • mandatory (必答题)
  • input-error (用户输入错误 - 如果用户答错了必答题或是验证题)
  • array1 and array2 (当呈现一组阵列问题的答案时会循环使用这两种样式。允许为阵列问题设置交替颜色的背景色。Array1 还被用来在阵列问题中做列标题。)
  • errormandatory (用来设置"这是个必填项" 错误信息的颜色和样式)
  • warningjs (用来设置当受访者的浏览器没有打开Javascript支持时的错误信息的颜色和样式。)

还有一些元素可以使用这些元素的ID来访问 (#ID in CSS):

  • surveycontact (首页上的联系信息)
  • tokenmessage (调查内部使用的信息, 比如：会话过期这类的错误信息)

因为你可以编辑整个 HTML的方方面面, 就没有理由在你的模板外面加上 

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

，还给新命名的类定义一个新的样式表。

进度条的样式

进度条的外观可以使用CSS进行修改。

要改变进度条的背景色，要在 template.css 文件的末尾加上： 

#progress-wrapper .ui-widget-header {
 background-color: #3300FF;
}

要改变进度条边框的颜色，要在 template.css 文件的末尾加上： 

#progress-wrapper .ui-widget-content,
#progress-wrapper .ui-widget-header {
 border: 1px solid #FF0000;
}

供开发者使用的高级功能

LimeSurvey 整合了一些用户制作的补丁，用以完成一些特殊操作。这些非常高级的功能（通常）要求更改LimeSurvey的基础代码库，并且应谨慎进行，以免引入安全漏洞。

支持自定义的 Javascript 函数

一些用户可能需要在调查页面运行 Javascript，但在主体元素里调用 checkconditions() 是不允许的。这种调用已经被一个位于 HEAD 里的Javascript小函数替代，这个小函数用来在调用自制函数之前会嗅探checkconditions() 和 template_onload() 是否存在。使用这种方式，模板的作者就可以在HEAD里创建自己的 template_onload() 函数代替系统默认的函数。

  • 禁用 XSS 过滤 - 全局设置 -> 安全, 设置 "Filter HTML for XSS" 为 No.
  • 在问题或组的描述的来源中输入脚本。
更多细节，请查看 解决方法.


提示与技巧

特殊字符

如果需要在调查中显示一些特定语言的句子。比如你在一个 .pstl 文件中添加一句话，并在其他的语言界面里隐藏起来。如果你在 template.css 里隐藏，我们可以使用一个假的选择器 :lang，但为了兼容性最好用一些类。

下面就是加到 endpage.pstpl 文件里的用英语和法语写的帮助的短句。 

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

还有在 template.css 里： 

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

改变布局

编辑和保存了一份模板之后，只有在调查的设置里选定该模板之后，才能被应用到调查列表中。如果要把模板该为默认模板，在全局设置下的常规中选择想要的模板。 从此之后，所有使用 "默认" 选项的模板还有要新创建的模板，都会使用新选择的默认模板。

要让当前页使用你自己的模板，需要在 全局设置中改变相应的设置。在旧版本中，可以在配置文件中编辑 $defaulttemplate 设置实现：从 config-defaults.php 中复制设置到 config.php，设置会覆盖 config-defaults.php ，再将设置改为 $defaulttemplate = 'yourtemplatename';.

在Mac上导入/导出模板

Mac users, please note that the Mac OSX default archive utility may have problems with zip folders "generated on the fly".

A workaround is to unix'es unzip from the command line:

$ unzip template.zip -d template

Archive: template.zip

 inflating: template/startpage

 inflating: ...

Another workaround is to use scripts in their mac-compiled counterparts.

相同模板使用不同标识

如果你想所有调查使用同样的模板，但又需要修改每个调查的徽标，你可以通过在template .pstpl 文件中使用 {SID} 定位符来使用不同的图片。 

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

显示自定义图标

网站图标就是那个小小的，你在浏览器的地址栏，收藏夹或是浏览器标签上看到的图标。你可以用下面的方法显示自己的网站图标：

  1. 创建网站图标 - 谷歌会帮你找到大量的网站图标生成器。
  2. 将你的网站图标更名为 "favicon.ico" 并复制到你模板的 /files 目录下。
  3. 在startpage.pstpl 文件的 </head> 标签前面加上下面的代码.
<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">

不同外观

如果你想改变 LimeSurvey 的每个第二个页面外观 (比如 调查的奇偶页面), 你可以使用样式表文件中的 .page-odd 类来改变奇数页的外观。

LimeSurvey 1.91以上版本默认模板示例： 

.page-odd table.question-group {
 background-color: #D2F2D3;
}

如果你确定 不 需要奇偶页使用不同的外观，找到 template.css 文件中.page-odd的所有实例，并删掉他们的样式。

为双尺度阵列创建垂直分隔线边框

要为双尺度阵列创建垂直分隔线边框，在你的模板文件 template.css 里加入下列行： 

table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
   border-right:solid 1px #00A8E1;
}

header_separator 用来指代标题分隔符 "td"。"dual_scale_separator" 用来指双尺度阵列中列的分隔符。

添加标识 (New in 3.0 )

  1. 首先用主体编辑器打开你喜欢使用的主题。
  2. 我们推荐使用清爽(fruity), 是我们当前最受欢迎的主题。
  3. 然后扩展这个主题，并给新的主题起个名字。
  4. 如下图所示，你可以上传你自己的徽标。
  5. 从界面下拉列表里选择`调查列表´ 。
  6. 然后从左边的菜单里选择 `layout_survey_list.twig´。
  7. 在编辑窗口里滚动到126行，并把图中标记的部分换成你前面上传的图片的文件名。
  8. 保存文件。
  9. 把你的扩展主题设置成默认主题。

Align logo to the centre of the survey page

This example is for the "extends_fruity" template. For other templates the required CSS may be different.

  1. Login to the LimeSurvey admin area
  2. Browse to the theme editor: Configuration > Themes
  3. Find "LimeSurvey Fruity Theme" in the list and click the "Theme Editor" button
  4. Click "custom.css" in the files list on the left at near the bottom of the page
  5. Copy the following CSS into that file and press "Save Changes"
.navbar-fixed-top > div.navbar-header {
    width: 100% !important;
}

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

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


定制问题视图 (New in 3.0 )

注意: 这是一个会在将来被问题对象代替的临时功能 (把定制视图加入问题对象会很简单). 默认是禁用的。

自As of version 2.5版本起，你可以为问题或是问题的内嵌元素创建特殊模板的定制视图。这会对你想定制一个或多个调查的特殊问题类型的HTML布局很有用。

  • 在application/config/config.php 文件里找到 'config'=>array，并添加后面的代码：'allow_templates_to_overwrite_views'=>1
  • 在 /{your_template}/config.xml, 设置 "overwrite_question_views" 为( true)
  • 复制 application/views/survey/* 到 template/{your_view_directory}/survey/
  • 注意！你只需要复制你打算修改的文件，文件结构还是要和 application/views/survey/ 保持一致。

向模板插入定制样式表或 JavaScript (New in 2.50 )

从2.50 版本开始，你可以使用 config.xml 文件自动载入插件。

  • 上传文件到模板的文件夹 /css 或 /scripts
  • 在 /{your_template}/config.xml文件的 <css> 或 <js> 块中添加文件路径，示例:
    <css>
	<filename>css/jquery-ui-custom.css</filename>
	<filename>css/bootstrap-slider.css</filename>
</div>

	<filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
	<filename>css/flat_and_modern.css</filename>

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

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

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

Class definitions (for Developers)

answer-list

Question Question Type elements
arrays/5point A tr
arrays/10point B tr
arrays/array F tr
arrays/column H tr and col
arrays/dualscale 1 tr
arrays/increasesamedecrease E tr
arrays/yesnouncertain C tr
gender G div and ul
list_with_comment O div
ranking R ul and div
yesno Y ul and div
ranking_advanced R ul and div
listradio L div
5pointchoice 5 ul
multiplechoice M div


radio-list

Question Question Type elements
yesno Y ul
gender G ul
arrays/yesnouncertain C tr
arrays/increasesamedecrease E tr
arrays/dualscale 1 tr
arrays/5point A table and tr
arrays/10point B tr
arrays/array F tr
arrays/column H col
listradio L div
list_with_comment O div followed by ul

radio-item

Question Question Type elements
arrays/yesnouncertain C td
5pointchoice 5 li
arrays/10point B td
arrays/5point A td
arrays/array F td
arrays/column H td
arrays/dualscale 1 td
arrays/increasesamedecrease E td
gender G li
listradio L li
yesno Y li
listradio L li and div
image_select-listradio L li and div
list_with_comment 0 li

list-group

Question Question Type elements
yesno Y ul
5pointchoice 5 ul
gender G ul
ranking R ul
ranking_advanced R ul and div
question_index_group_buttons div
question_index_questions_buttons div

list-group-horizontal

Question Question Type elements
yesno Y ul
5pointchoice 5 ul
gender G ul

list-unstyled

Question Question Type elements
list_with_comment 0 ul
listradio L ul
multiplechoice M ul
multiplechoice_with_comments P ul
multiplenumeric K ul
multipleshorttext Q ul
ranking 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
load ul
save ul
captcha ul

select-list

Question Question Type elements
ranking R ul
ranking_advanced R ul

checkbox-item

Question Question Type elements
multiflexi (Array numbers) : td
multiplechoice M li
multiplechoice_with_comments P div
image_select-listradio L li
image_select-multiplechoice M li and div
navigator span

checkbox-text-item

Question Question Type elements
multiplechoice_with_comments P li
multiplechoice M li
image_select-multiplechoice M li
Retrieved from "http://manual.limesurvey.org/index.php?title=Theme_editor/zh-cn&oldid=176443"