Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

How to add custom css and js files

  • Kevin01
  • Kevin01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 5 months ago - 7 years 5 months ago #142380 by Kevin01
How to add custom css and js files was created by Kevin01
Is there a way to add these buttons?

www.w3schools.com/jquerymobile/tryit.asp...ryjqmob_button_input

I started by adding these three lines to the files below but the page did not display properly when I added the css file. I assume this happened because LimeSurvey has jquery-2.2.4.min.js in the header and we can't have both?

App()->getClientScript()->registerScriptFile(Yii::app()->getConfig('generalscripts')."jquery-1.11.3.min.js");
App()->getClientScript()->registerScriptFile(Yii::app()->getConfig('generalscripts')."jquery.mobile-1.4.5.min.js");
App()->getClientScript()->registerCssFile(Yii::app()->getConfig('publicstyleurl')."jquery.mobile-1.4.5.min.css" );

application/views/surveys/publicSurveyList.php
application/core/plugins/extendedStartPage/views/publicSurveyList_extended.php
application/controllers/survey/index.php
application/controllers/RegisterController.php
application/controllers/Statistics_userController.php

These lines to the 2 files below

$this->registerScriptFile( 'SCRIPT_PATH', 'jquery-1.11.3.min.js');
$this->registerScriptFile( 'SCRIPT_PATH', 'jquery.mobile-1.4.5.min.js');
$this->registerCssFile( 'PUBLIC', 'jquery.mobile-1.4.5.min.css' );

application/controllers/admin/templates.php
application/controllers/admin/expressions.php

Then I created a new template and edited startpage.pstpl but that did not work.
I think I need to add the new js and css files and remove some of the default files from the header.

I copied and renamed the radiolist directories and files and was going to edit that code.

Thanks,
Kevin
Last edit: 7 years 5 months ago by Kevin01.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
7 years 5 months ago #142389 by LouisGac
Replied by LouisGac on topic How to add custom css and js files
If you're speaking about template part:
github.com/LimeSurvey/LimeSurvey/blob/ma...t/config.xml#L23-L40

Best way to modify it is to create a new template via the template editor by copying the default template (it will be created in the upload directory), then register the new js/css files in the XML manifest.

Also, if you need to change the HTML of the questions, you can do it by overwriting the views. This feature is still not official nor documented, but already usable:
github.com/LimeSurvey/LimeSurvey/blob/ma.../config.xml#L98-L105
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 5 months ago - 7 years 5 months ago #142397 by tpartner
Replied by tpartner on topic How to add custom css and js files

...then register the new js/css files in the XML manifest.

Further to this - www.limesurvey.org/forum/can-i-do-this-w...in-admin-page#137666


Also, if you need to change the HTML of the questions, you can do it by overwriting the views.

Further to this - manual.limesurvey.org/The_template_edito...ws_.28version_2.5.29

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 5 months ago by tpartner.
The topic has been locked.
  • Kevin01
  • Kevin01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 5 months ago #142414 by Kevin01
Replied by Kevin01 on topic How to add custom css and js files
Thanks very much.
The topic has been locked.
  • Kevin01
  • Kevin01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 5 months ago #142426 by Kevin01
Replied by Kevin01 on topic How to add custom css and js files
<link rel="stylesheet" type="text/css" href="/survey/tmp/assets/7d1b24ec/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/survey/tmp/assets/9b433895/css/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" href="/survey/tmp/assets/9b433895/css/bootstrap-slider.css" />
<link rel="stylesheet" type="text/css" href="/survey/tmp/assets/9b433895/css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
<link rel="stylesheet" type="text/css" href="/survey/tmp/assets/9b433895/css/flat_and_modern.css" />
<link rel="stylesheet" type="text/css" href="/survey/tmp/assets/9b433895/css/template.css" />
<link rel="stylesheet" type="text/css" href="/survey/tmp/assets/9b433895/css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="/survey/styles-public/lime-progress.css" />
<link rel="stylesheet" type="text/css" href="/survey/styles-public/expressions.css" />
<script type="text/javascript" src="/survey/tmp/assets/ab44e9f/decimal.js"></script>
<script type="text/javascript" src="/survey/tmp/assets/acbb146a/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/survey/tmp/assets/f387db95/js/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="/survey/tmp/assets/be660c93/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="/survey/tmp/assets/9b433895/scripts/template.js"></script>
<script type="text/javascript" src="/survey/tmp/assets/9b433895/scripts/bootstrap-slider.js"></script>
<script type="text/javascript" src="/survey/tmp/assets/9b433895/scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/survey/tmp/assets/9b433895/scripts/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="/survey/scripts/survey_runtime.js"></script>
<script type="text/javascript" src="/survey/scripts/admin/expression.js"></script>
<script type="text/javascript" src="/survey/scripts/expressions/em_javascript.js"></script>
<script type="text/javascript">

I think there is a conflict with jquery.mobile-1.4.5.min.js and jquery-2.2.4.min.js. I'm trying to figure out how to remove jquery-2.2.4.min.js to see if that helps or maybe it will mess something else up. I have not found where to remove it yet.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
7 years 5 months ago #142428 by LouisGac
Replied by LouisGac on topic How to add custom css and js files
did you try to remove the jquery package in the XML manifest?

github.com/LimeSurvey/LimeSurvey/blob/ma...config.xml#L110-L115
The topic has been locked.
  • Kevin01
  • Kevin01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 5 months ago #142431 by Kevin01
Replied by Kevin01 on topic How to add custom css and js files
<!-- <package>jqueryui</package> -->
no change. the radio button list will not load.

<!-- <package>jquery-touch-punch</package> -->
Nothing loads.

I'm copying the code from the radio button list to create the new custom list. then I'll see if the custom list will load. I was trying to get the css and js to load first.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
7 years 5 months ago #142432 by LouisGac
Replied by LouisGac on topic How to add custom css and js files
question view override is probably the best way to proceed for your goal.
The topic has been locked.
  • Kevin01
  • Kevin01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 5 months ago - 7 years 5 months ago #142433 by Kevin01
Replied by Kevin01 on topic How to add custom css and js files
Thanks. I'll read more about that process. The code brings back memories of me coding in perl 10 years ago. It might be a struggle at first because I have not done it for so long.

How can I do this and submit the code to you? Is there a repository... CVS or SVN? If I can remember how to use it.
Last edit: 7 years 5 months ago by Kevin01.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
7 years 5 months ago - 7 years 5 months ago #142434 by LouisGac
Replied by LouisGac on topic How to add custom css and js files
There is no documentation about it (just the few lines in the XML). So feel free to ask question about it in the forum.

But, quickly:

1. With template editor, copy the default template (or any other one)
2. Then, edit the XML files to add/remove the js/css files you want
3. Turn on the view override in the template XML and in the config file of your LimeSurvey installation
4. Then copy the view files from core to your template, and modify the HTML as you wish. So, for the radio button list, you should copy application/views/survey/questions/listradio to upload/templates/yourcopiedtemplate/views/survey/questions/listradio

If you want to use buttons, you'd rather use the Bootstrap radio button:
getbootstrap.com/javascript/#buttons-checkbox-radio
Last edit: 7 years 5 months ago by LouisGac.
The topic has been locked.
  • Kevin01
  • Kevin01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 5 months ago #142435 by Kevin01
Replied by Kevin01 on topic How to add custom css and js files
Thanks. I'm doing this now. I feel like an old man trying to remember how to code again. It made me laugh.

Do you want the code when I am done so it can be integrated and help someone else? I assume you work for Limesurvey.
The topic has been locked.
  • Kevin01
  • Kevin01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 5 months ago #142436 by Kevin01
Replied by Kevin01 on topic How to add custom css and js files
Thanks. I have seen bootstrap a lot but I have not figured out what it is yet. My experience is with backend coding and not web but I use to hear coworkers mention telerik and jquery. Thanks so much for your help. I'm attempting to create bigger buttons for a mobile device.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose