Welcome to the LimeSurvey Community Forum

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

Issues trying to create a basic theme

  • domsson
  • domsson's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 3 months ago - 5 years 3 months ago #177776 by domsson
Issues trying to create a basic theme was created by domsson
I'm creating a theme that inherits from vanilla. The goal is to throw out as much of the optional stuff (both CSS and JS) as possible, so I have a clean slate to work with.

Now I'm facing two issues. First, there is a very large number of JavaScript and CSS files being included, plus there seems to be inline-CSS as well as script-Blocks in the templates as well. Second, I have no idea how everything is connected, and, more importantly, what CSS/JS is part of the core functionality (= required) and what is just for styling and other cosmetics (= optional).

Currently, this is what my config.xml (files section) looks like:
Code:
<files>
  <css>
    <remove>css/ajaxify.css</remove>
    <remove>bootstrap.css</remove>
    <remove>bootstrap.min.css</remove>
    <remove>template-core.css</remove>
    <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
    <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox-rtl.css</remove>
    <remove>noto.css</remove>
    <add>css/base.css</add>
    <add>css/theme.css</add>
    <add>css/custom.css</add>
  </css>
  <js>
    <remove>scripts/ajaxify.js</remove>
    <remove>pjax.js</remove>
    <add>scripts/theme.js</add>
    <add>scripts/custom.js</add>
  </js>
  <print_css>
    <add>css/print_theme.css</add>
  </print_css>
</files>

To illustrate the issue with the most obvious problem I'm seeing right now, this is what is still included at the moment:
Code:
<link rel="stylesheet" type="text/css" href="/tmp/assets/e9aa920f/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/3597de59/survey.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/880f5221/yiistrap.min.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/4903fc13/css/theme.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/4903fc13/css/base.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/4903fc13/./css/survey-list.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/2863dd51/css/custom.css" />
<script type='text/javascript'>window.debugState = {frontend : (0 === 1), backend : (0 === 1)};</script>
<script type="text/javascript" src="/tmp/assets/3e59ce7d/jquery-3.1.1.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/3e59ce7d/jquery-migrate-3.0.0.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/4c6da2f8/build/lslog.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/dead48be/moment-with-locales.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/3597de59/survey.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/7ae1ff/template-core.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/880f5221/bootstrap.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/880f5221/plugins/bootstrapconfirm/bootstrapconfirm.min.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/4903fc13/scripts/theme.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/4903fc13/scripts/custom.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/ce27514e/nojs.js" class="headScriptTag"></script>
<script type="text/javascript" src="/tmp/assets/b44c5003/em_javascript.js" class="headScriptTag"></script>

Which of those can I safely remove via config.xml? Which are essential?

Now, because I already removed a lot, everything looks very basic. That's okay. However, when I take a look at the survey list page, there is a huge amount of whitespace at the top. I was wondering why, then I saw this:
Code:
<body class="reb-2019 vanilla font-noto lang-de  brand-logo" style="padding-top: 692px;">

This is not in the templates, so I assume it comes from some JavaScript. Why? How do I remove this?

Also, the comments in the code suggest that everything AJAX-related is optional. So It should be safe to throw out all AJAX-related code as long as I'm fine with longer loading times, right? However, what about the PJAX-System? Is that also optional? For example, see this block in the templates:
Code:
{# This used for the pjax system #}
<div id="beginScripts">
    <###begin###>
</div>

I'm sure I will have many more questions like these, but they all come down to the fact that I'm looking at a huge amount of entangles CSS and JS and can't make heads or tails of it. I hope you can guide me through this jungle. It would be much appreciated. Thank you!
Last edit: 5 years 3 months ago by domsson.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 3 months ago #177794 by DenisChenu
Replied by DenisChenu on topic Issues trying to create a basic theme
Welcome to the hell of template developers for LimeSurvey…

Else :
1st : enable debug mode : you better find where each css/js come.
2nd : we need to improve css/js separation : need by core , need by basic template, need by distributed template.

Currently : need by core VS need by template seem OK, but there are some glitch.

The example you provide is one of this : it surely came from github.com/LimeSurvey/LimeSurvey/blob/b9...scripts/theme.js#L55

But since this function is in ThemeScripts class inside a js file where it's written DO NOT TOUCH … it's hard to remove/replace it …

You can make a bug report
See bugs.limesurvey.org/view.php?id=13719 for example … (but if we are more the 1 , maybe)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The following user(s) said Thank You: domsson
The topic has been locked.
  • domsson
  • domsson's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 3 months ago - 5 years 3 months ago #177805 by domsson
Replied by domsson on topic Issues trying to create a basic theme
Thanks for your quick reply, Denis. Sadly, I'm not quite sure what to make of it. Maybe we can try to make sense of this step by step. Do you think you could tell me which of the following I can safely remove and which are required for the correct functioning of LimeSurvey?

CSS:
  1. font-awesome.min.css
  2. survey.css
  3. yiistrap.min.css

JS:
  1. jquery-3.1.1.min.js
  2. jquery-migrate-3.0.0.min.js
  3. build/lslog.js
  4. moment-with-locales.min.js
  5. survey.js
  6. template-core.js
  7. bootstrap.min.js
  8. plugins/bootstrapconfirm/bootstrapconfirm.min.js
  9. nojs.js
  10. em_javascript.js

Again, thank you very much for your time. Hopefully, once I understand some of this, I might be able to file a proper bug report or even provide a pull request at some point.
Last edit: 5 years 3 months ago by domsson.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 3 months ago - 5 years 3 months ago #177812 by DenisChenu
Replied by DenisChenu on topic Issues trying to create a basic theme
Remind to put whole directory (debug : 2)
  • jquery-3.1.1.min.js : needed
  • jquery-migrate-3.0.0.min.js : needed
  • build/lslog.js : it's for log usage , can be replaced
  • moment-with-locales.min.js : needed for date question type (and some other i think)
  • survey.js : minimal action : github.com/LimeSurvey/LimeSurvey/blob/ma...limesurvey/survey.js any template must work withg this and only this (except jquery and some specific question), lot of function is disable in next js
  • template-core.js : function used by included template, personnaly : i disable it.
  • bootstrap.min.js : needed for tooltip, date question, maybe other
  • plugins/bootstrapconfirm/bootstrapconfirm.min.js : needed for bootstrapconfirm … buit if you disable usage : not needed
  • nojs.js : needed if you want to show an error to IE with "intrenal mode" : no-js system.
  • em_javascript.js : needed for all Expression Manager javascript

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Last edit: 5 years 3 months ago by DenisChenu.
The following user(s) said Thank You: domsson
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
5 years 3 months ago #177818 by LouisGac
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 3 months ago #177819 by DenisChenu
Replied by DenisChenu on topic Issues trying to create a basic theme
Not a big issue , but it can be great if remove work for package too :)

I don't really understand difference between add (if exist) and replace , maybe there are not.

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • domsson
  • domsson's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 3 months ago #177820 by domsson
Replied by domsson on topic Issues trying to create a basic theme
Thank you so much Denis, that is tremendously helpful. I'll ask some more questions, but don't feel obliged to help me out, obviously.

1. Towards the top and bottom of each main template we can find these snippets:
Code:
{# This used for the pjax system #}
<div id="beginScripts">
    <###begin###>
</div>
<!-- ... -->
<div id="bottomScripts">
    <###end###>
</div>

Since PJAX seems to be optional (is that right?), these are probably also optional? What does the PJAX system do?

2. We can find some JS that call upon the ThemeScripts() object. There is this snippet at the beginning, which comes from /views/subviews/header/head.twig:
Code:
if(window.basicThemeScripts === undefined){ 
    window.basicThemeScripts = new ThemeScripts(); 
} 

...and then there are these two snippets, towards the end, which come from the main layout files:
Code:
if(window.basicThemeScripts === undefined) { window.basicThemeScripts = new ThemeScripts(); } basicThemeScripts.initGlobal();
/* ... */
window.basicThemeScripts.init();

What is that for? Is it required? And why do we create an instance of the ThemeScripts objects twice?

3. On top of that, the /views/subviews/header/head.twig also contains this Twig/JS code:
Code:
{% if(aSurveyInfo.jYesNo) %}
    {{ registerScript('activateConfirmLanguage',"$.extend(LSvar.lang," ~ aSurveyInfo.jYesNo ~ ")", "POS_BEGIN") }}
{% endif %}
{{ registerScript('activateActionLink',"activateActionLink();", "POS_POSTSCRIPT") }}
{{ registerScript('activateConfirmButton',"activateConfirmButton();", "POS_POSTSCRIPT") }}

What does that for? It reads like this might be required for the "Next" buttons at the bottom to work?

Again, thank you for your time and effort, Denis.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 3 months ago #177837 by tpartner
Replied by tpartner on topic Issues trying to create a basic theme

I don't really understand difference between add (if exist) and replace...

Nor do I.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 3 months ago #177844 by DenisChenu
Replied by DenisChenu on topic Issues trying to create a basic theme

domsson wrote: Again, thank you for your time and effort, Denis.

Hue …

Yes, but i'm not here to offer a complete LimeSurvey template developper formation …

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • domsson
  • domsson's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 3 months ago - 5 years 3 months ago #177849 by domsson
Replied by domsson on topic Issues trying to create a basic theme

DenisChenu wrote: Yes, but i'm not here to offer a complete LimeSurvey template developper formation …


Of course not! I am grateful for any information you (or the other devs) provide and will take what I can get, then try to figure things out from there. As it stands, things are just very hard to figure out without inside knowledge, hence my many questions. Let's hope the documentation will benefit from this - apparently, it already has! :-)
Last edit: 5 years 3 months ago by domsson.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 3 months ago #177853 by DenisChenu
Replied by DenisChenu on topic Issues trying to create a basic theme
Else : my work in progress template : gitlab.com/SondagesPro/SurveyThemes/skelvanilla (no pjax because it broke a lot for example, default theme for a11y (more contrast))

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The following user(s) said Thank You: LouisGac
The topic has been locked.
  • domsson
  • domsson's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 3 months ago #177854 by domsson
Replied by domsson on topic Issues trying to create a basic theme
@DenisChenu: Yep, you linked that in the other thread. That's where I got the "remove" syntax for the config.xml from! :-)

So PJAX is optional then? I'm not sure what PJAX does in LimeSurvey.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose