, by Denis Chenu

How to adapt Skeleton Quest for your need

You can a look at some demonstration :

Adapt the header

To have a logo, you can just replace the logo.png fil by your own logo.

You can adapt to this line in the file startpage.pstpl:

  1. <h1 class="sitename"><a href="#" title="Made with LimeSurvey" class="link-logo"><img src="{TEMPLATEURL}logo.png" alt=" " class="logo"/></a>{SITENAME}</h1>

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

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.

  1. body{background:#fff;color:#444;}
  2. body{font-family:HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif}
  3. body{font-size:14px}
  4. h1,h2,h3,h4,h5,h6{color:#181818;font-family:Georgia, "Times New Roman", Helvetica, Arial, sans-serif;}
  5. a, a:visited { color: #333; text-decoration: underline;}
  6. a:hover, a:focus { color: #000; }
  7. /* Max width of survey */
  8. .wrapper,#content{max-width:960px;}
  9.         @media only screen and (max-width: 959px) {}
  10.         @media only screen and (min-width: 768px) and (max-width: 959px) {}
  11.         @media only screen and (max-width: 767px) {}
  12.         @media only screen and (min-width: 480px) and (max-width: 767px) {}
  13.         @media only screen and (max-width: 479px) {}
  14. /* Head decoration*/
  15. #head{
  16.   border-bottom:4px solid #EEE;
  17.   border-top:0px solid #CCC;
  18.   color:#000;
  19.   background:#fff;
  20.   }
  21. /* Footer decoration */
  22. #footer{
  23.   border-top:2px solid #EEE;
  24.   color:#666;
  25. }
  26. #footer a{}
  27. #footer a:hover, #footer a:focus, #footer a:active {color: #444;}

You can add more line after. Some comment are done to help you to start a new project.

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;
You can deactivate the big progress wrapper with the % view 10 by 10 and use the progress wrapper included in LimeSUrvey core
The default alert system are replaced by a jquery dialog. Set to false to use default javascript alert
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.
Set it to true to clone the navigator (previous and next button) to the header.
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.
Fix the header or not. Is set to false, header position is relative.