SkeletonQuest, RWD for LimeSurvey > Documentation

How to adapt Skeleton Quest for your need

You can a look at some demonstration :

Adapt the header

Since december 2014, the header are the survey title. You can use any HTML and add a logo picture in the header.

For more, you can adapt this line in the file startpage.pstpl:

  1.                 <div class="wrapper">
  2.                         <h1 class="pagetitle surveytitle">{if(is_empty(SURVEYNAME),SITENAME,SURVEYNAME)}</h1>
  3.                 </div>

Download

SkeletonQuest contain link on the footer, you can use this part to put a link to your own website for example.

Just update endpage.pstpl file:

  1.         <div id="footer">
  2.                 <ul id="credits">
  3.                 <li class="first">Powered by Libre Software</li>
  4.                 <li>Template &copy; <a href="http://www.sondages.pro" title="Sondages en ligne, enquêtes et recueil de données par Internet.">Denis Chenu, Sondages Pro</a>
  5.                 </li>
  6.                 <li class="last">This template is distributed under <a href="{TEMPLATEURL}Copyright.txt">MIT and GPL licence</a> </li>
  7.                 </ul>
  8.         </div>

Download

Adapt the color

You can quickly adapt color in template.css. All core css are moved into jquery-ui-custom.css since 2014, january the 30. You can easily update your own version, template.css is empty in master, template.css is used only in theme. Then before updating : backup template.css, update and replace all files, and replace your template.css.

A little example

  1. body{background:#ccc;color:#fff;}
  2. body{font-size:12px}
  3.  
  4. /* Head decoration*/
  5. #head{
  6.   border-bottom:4px solid #EEE;
  7.   border-top:0px solid #CCC;
  8.   color:#eee;
  9.   background:#000;
  10.   }
  11. /* Footer decoration */
  12. #footer{
  13.   border-top:2px solid #EEE;
  14.   background:#F95;
  15.   color:#eee;
  16. }
  17. #footer a{}
  18. #footer a:hover, #footer a:focus, #footer a:active {color: #444;}

Download

You can add more line after. Look at theme for inspiration : flablue template.css .

Use javascript option settings

In template.js file you have some settings at start of the file:

  1. useDefaultProgress=false; // Use the default progress-wrapper from LimeSurvey core
  2. replaceJavascriptAlert=true; // Replace common alert with jquery-ui dialog
  3. bMoveLanguageSelect=true // Move the language selector to the top
  4. bCloneNavigator=true // Clone the navigator in the header
  5. bMoveIndex=true // Move the index at rigth of the survey
  6. bHeaderFixed=true;

Download

useDefaultProgress
You can deactivate the big progress wrapper with the % view 10 by 10 and use the progress wrapper included in LimeSUrvey core
replaceJavascriptAlert
The default alert system are replaced by a jquery dialog. Set to false to use default javascript alert
bMoveLanguageSelect
By default the language select box is just after the survey title. If set to true, this setting move it to the header, and use jquery ui menu.
bCloneNavigator
Set it to true to clone the navigator (previous and next button) to the header.
bMoveIndex
Set to true to have a fixed index at rigth of the surcey (except for little screen). Set to false to have index after the navigator.
bHeaderFixed
Fix the header or not. Is set to false, header position is relative.