Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Customizing buttons in the End Message of a survey

More
2 years 9 months ago #235587 by Bharadwaj_Srikumar
Customizing buttons in the End Message of a survey was created by Bharadwaj_Srikumar
Hello Users, 
I would like to customize the buttons - "Print your answers" and "View the statistics for this survey" that appear at the end message of a survey.
By customization I mean not just the text, but also the style of the buttons.
How can I find the source file to do this and which part of the html/CSS should be changed? An explanation with pictures is highly appreciated.

Please Log in to join the conversation.

More
2 years 9 months ago #235590 by Joffm
Replied by Joffm on topic Customizing buttons in the End Message of a survey
Edit the "submit.twig" of your extended theme.
 
Add a class to the existing classes in the <a href....
Here it is called "btnStack" because I took it from a Stackoverflow thread
Add something like this to your "custom.css"
Code:
.btnStack {
  background-color: orange;
  color: #000;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
a.btnStack:hover {
  background-color: #000;
  color: #fff;
}

Adapt it to your needs.
 

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
2 years 9 months ago - 2 years 9 months ago #235690 by Bharadwaj_Srikumar
Replied by Bharadwaj_Srikumar on topic Customizing buttons in the End Message of a survey
Hello @Joffm. Thank you for your reply.
Could you please also explain, where I can find the "submit.twig" / extended theme? I am not able to find it in Limesurvey.
Last edit: 2 years 9 months ago by Bharadwaj_Srikumar.

Please Log in to join the conversation.

More
2 years 9 months ago #235703 by Bharadwaj_Srikumar
Replied by Bharadwaj_Srikumar on topic Customizing buttons in the End Message of a survey
I got it:) Thank you very much for your explanation.
But I would also want to customize the Next button only on the first page. Is there any way to do that?
I am not able to find the right .twig file to do that.

Please Log in to join the conversation.

More
2 years 9 months ago #235728 by Joffm
Replied by Joffm on topic Customizing buttons in the End Message of a survey
What is your "first üage"?
The welcome page or the first page of the survey itself?
Here you use the source code of the question.
Change the text with this script in the source code of the question
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
   $('#ls-button-submit').text("LET'S START");
});
</script>

and to customize the layout, use the webdevelopment tool of your browser (F12) and see which classes are affected and play around till it fits your wishes.
Place this <style>...</style> into the source code of the question.
Like this
Code:
<style type="text/css">#ls-button-submit {
    border: 3px solid yellow;
    border-radius: 50%;
    background-color: red;
}
</style>

 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
2 years 9 months ago #236032 by Bharadwaj_Srikumar
Replied by Bharadwaj_Srikumar on topic Customizing buttons in the End Message of a survey
Hello @Joffm, Thank you for your message. The customization of the Next-button on the welcome page worked.
However, I tried editing the "submit.twig" file in the theme editor to customize the buttons in the end page of the survey.
But even though the changes are getting correctly displayed in the preview inside the theme editor, they are not getting translated into the survey.
Why could this be?
Please find attached images.

Please Log in to join the conversation.

More
2 years 9 months ago #236104 by Joffm
Replied by Joffm on topic Customizing buttons in the End Message of a survey
And?
What exactly did you do?
On your "submit.twig" image I do not see where you changed / added something.
But I see that you did not add something to the "custom.css".
So where did you insert the css? Or didn't you? 

I do not see any issue
 

 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
2 years 9 months ago #236107 by Bharadwaj_Srikumar
Replied by Bharadwaj_Srikumar on topic Customizing buttons in the End Message of a survey
Hello @Joffm.
The code to customize the buttons was written inside the submit.twig itself.
And the image with the customized buttons that I have attached in the above picture are from the preview inside the Theme editor.
But the end message of the survey does not reflect these changes.

Please Log in to join the conversation.

More
2 years 9 months ago - 2 years 9 months ago #236109 by Joffm
Replied by Joffm on topic Customizing buttons in the End Message of a survey
I still do not see anything in this image, No added class, no css.

But anyway,
If you do not follow my instructions, I can't help.
I do not know what you do

At least. you should send the twig file. Copy it to a text editor and send.

Joffm

BTW: Did you try by clearing the asset cache?
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 years 9 months ago by Joffm.

Please Log in to join the conversation.

More
2 years 9 months ago #236256 by Bharadwaj_Srikumar
Replied by Bharadwaj_Srikumar on topic Customizing buttons in the End Message of a survey
Hello @Joffm,I have included the div- text-center in the submit.twig and changed the type of buttons to "btn btn-primary" from bootstrap. I have attached the twig file as a txt.document. I must also mention that bootstrap functions such as cards have no effect on the Limesurvey-front and end pages. Is bootstrap supported in the source files on Limesurvey?
And I tried clearing the asset cache, but the changes to the buttons on the last page have still not been translated into the survey.

Please Log in to join the conversation.

More
2 years 9 months ago - 2 years 9 months ago #236258 by Joffm
Replied by Joffm on topic Customizing buttons in the End Message of a survey
Yeah, I thought so, the bootstrap buttons.
But insert your class="btn" before the title=... and it is fine
 

But you should not change a text, that ius not translated.
In other languages you still see the translation of the "old" text"
 
And your other question
LimeSurvey 3.x. - 5.x is based on bootstrp 3.x.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 years 9 months ago by Joffm.

Please Log in to join the conversation.

More
2 years 9 months ago #236288 by Bharadwaj_Srikumar
Replied by Bharadwaj_Srikumar on topic Customizing buttons in the End Message of a survey
Hello @Joffm. I tried resetting the submit.twig file after a long time spent on debugging the code and the if-blocks.
But even a minor change in the twig file, for example changing the name of the button from "Print your answers" to "Download your results" does not get reflected in the survey. All the changes are visible in the preview inside the theme editor but not in the preview survey mode.
Should only the submit.twig file be edited to edit the buttons in the end message or does it have a log connection with some other twig-files too?
Thanks for your reply in advance.
I have attached images and .txt files for reference.

Please Log in to join the conversation.

More
2 years 9 months ago #236311 by Bharadwaj_Srikumar
Replied by Bharadwaj_Srikumar on topic Customizing buttons in the End Message of a survey
Hello @Joffm. It worked in the end. The theme must have been set to the edited theme not only in the general settings of the survey but also in the global survey settings. Thank you for your replies :)

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source