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

More
8 years 10 months ago - 8 years 10 months ago #142380 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: 8 years 10 months ago by Kevin01.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • New Member
  • New Member
More
8 years 10 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.
More
8 years 10 months ago - 8 years 10 months ago #142397 by tpartner

...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 - www.limesurvey.org/manual/The_template_e...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: 8 years 10 months ago by tpartner.
The topic has been locked.
More
8 years 10 months ago #142414 by Kevin01
Thanks very much.
The topic has been locked.
More
8 years 10 months ago #142426 by Kevin01
<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
  • New Member
  • New Member
More
8 years 10 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.
More
8 years 10 months ago #142431 by Kevin01
<!-- <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
  • New Member
  • New Member
More
8 years 10 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.
More
8 years 10 months ago - 8 years 10 months ago #142433 by Kevin01
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: 8 years 10 months ago by Kevin01.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • New Member
  • New Member
More
8 years 10 months ago - 8 years 10 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: 8 years 10 months ago by LouisGac.
The topic has been locked.
More
8 years 10 months ago #142435 by Kevin01
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.
More
8 years 10 months ago #142436 by Kevin01
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.
  • LouisGac
  • LouisGac's Avatar
  • New Member
  • New Member
More
8 years 10 months ago #142438 by LouisGac
Replied by LouisGac on topic How to add custom css and js files
Yep I'm in the LS Team, and I'm the one who exported all the HTML into views and added the view override system.

At the beginning, I wanted to add the button layout as an alternative for the radio/checkbox for each concerned question type. But finally, I did it for gender only: I had other priorities.

So, yes, if you do it fine, we could integrate your code into core, and we could add a "button layout" option in the radio list's advanced options.

As soon as we rewrite the question views with a templating language (probably twig), the view override system will be official, documented, and we'll offer you a place to share your experiments. That could happen before the end of the year.

In a further future, when we'll have question object, it will be easy to transform your custom views in new question types (that could be share/sold and uploaded in any LimeSurvey installation).
The topic has been locked.
More
8 years 10 months ago #142439 by Kevin01
Great.. A boss once told me, "Kevin, I take care of you because you take care of me." So, I'll help you because you've helped me. So, for production, should I do it as an override or copy the function "do_list_radio" in qandra_helper.php.

And copy survey/questions/radiolist to / survey/questions/list_custom/ and edit the code?

I'm placing // Kevin on every line I change so it will be easy to find the changes.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • New Member
  • New Member
More
8 years 10 months ago - 8 years 10 months ago #142440 by LouisGac
Replied by LouisGac on topic How to add custom css and js files
No you don't need to touch anymore qanda_helper now.
Here how it works now:
github.com/LimeSurvey/LimeSurvey/blob/ma...lper.php#L6266-L6295

Quick explanation:
if overwrite_question_views is true in template the lime survey config allow_templates_to_overwrite_views, then it will look if the template have its own view file to render it (if not, it render the core view file).
Last edit: 8 years 10 months ago by LouisGac.
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose