Add new comment

Just about every new version of LimeSurvey brings improvements to the templating system, which is great. But that often means having to make changes to your old templates if you are upgrading. In this article I look at the minimum template modifications required to upgrade a template from version 1.53 to 1.8 or higher.

In the gap between these particular versions some significant and important improvements were made to LimeSurvey templating, specifically by seperating the styles and javascript from the core template files into seperate css and js files. (Something that was long overdue).

Modifying Templates to transition from V 1.53 to V 1.87

<!-- The following line includes template.css and if an RTL-language is used template-rtl.css -->
        {TEMPLATECSS}
        
<!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_6.css" />
<![endif]-->
<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_7.css" />
<![endif]-->
<!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="{TEMPLATEURL}ie_fix_8.css" />
<![endif]-->

<!-- The following CSS hides visual elements of the progress bar from screen readers. -->

<style type="text/css" media="aural tty">
    progress-graph .zero, progress-graph .graph, progress-graph .cent { display: none; }
</style>
        
<script type="text/javascript" src="{TEMPLATEURL}template.js"></script>
<link rel="shortcut icon" href="{TEMPLATEURL}favicon.ico" />  

• Cut template specific CSS from the startpage.pstpl file, save startpage.pstpl
• Open template.css and paste your template specific CSS at the end of the template.css file (Steps 1, 2, 3 and 4 fix the progress bar issue, as well as set the system up properly for using the new external css and js scripts)
• Change the edit page to view the question.pstpl file, and add the following line at the very beginning of the file:

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

  Then close the div by adding

  </div>

  at the end of the question.pstpl file.

• Edit the template.css file and add

  td.questiontext ul { list-style:none; font-weight: normal; }

  to it

• Edit the question.pstpl file and ensure that the {ANSWER} is in a div or span using the “questiontext” class. (ie: if it is inside a td, add “class=’questiontext’” to the td. Otherwise, at least surround the {ANSWER} with <span class='questiontext'>

  Steps 5, 6 and 7 fix the bullet points that appear next to answer options in in the older templates)