Welcome, Guest
Username: Password: Remember me

TOPIC: Change submit buttons text and background image on welcome page only

Change submit buttons text and background image on welcome page only 9 months 2 days ago #105478

Hi,

I've been asked to change the text of the 'Next' submit button (movenextbtn) on the welcome page to display the text 'Start', but, obviously, only on the welcome page. Is this possible? I understand I could change it using the .po translation which I'm using for other elements, but that would be for the whole survey.

If it is possible to change the text for just the welcome page, is it also possible to replace the text of the button with a background image, but, again, just on the welcome page. I'm embedding the survey in an iFrame and ideally would just like to have two buttons visible (using custom background images) on the welcome page: one for 'Start' and the other 'Load unfinished'. The 'Start' button would link through to Question 1 and from there the 'Next' button would appear and function as normal.

Thank you for your help.
The administrator has disabled public write access.

Change submit buttons text and background image on welcome page only 9 months 2 days ago #105480

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5425
  • Thank you received: 307
  • Karma: 252
You can try adding some Javascript to the welcome text in source code mode:
<script>
$(document).ready(function()
 
  {
 
     $('.ui-button-text').text('TEST');
 
  });
</script>

Don't forget to disable the XSS filter at global settings -> security before that.

The same approach can be used to add a background image, see api.jquery.com/css/#css2

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
Last Edit: 9 months 2 days ago by Mazi.
The administrator has disabled public write access.
The following user(s) said Thank You: philnicholl

Change submit buttons text and background image on welcome page only 9 months 2 days ago #105488

Thanks for getting back to me so quickly. Unfortunately, I understand HTML and CSS but little of Javascript. Where is the 'welcome text'? Editing my custom template I can see the HTML in welcome.pstpl has a span
<span class='surveywelcome'>{WELCOME}</span><br /> in which I presume the {WELCOME} is what I need to edit but I have no idea where to start looking.

Thanks again.
The administrator has disabled public write access.

Change submit buttons text and background image on welcome page only 9 months 2 days ago #105491

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5425
  • Thank you received: 307
  • Karma: 252
This doesn't need to be added at the template but at the welcome text of the survey which can be added via the integrated editor at survey settings -> texts.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.
The following user(s) said Thank You: philnicholl

Change submit buttons text and background image on welcome page only 9 months 2 days ago #105511

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4369
  • Thank you received: 828
  • Karma: 381
You can simply add the script to the end of welcome.pstpl but I would add a test in case the jQuery UI button functionality has been disabled (like in citronade):
<script>
	$(document).ready(function() {	 
		var newButtonText = 'TEST';
 
		if($('#movenextbtn .ui-button-text').length > 0) {
			$('#movenextbtn .ui-button-text').text(newButtonText);
		}
		else {
			$('#movenextbtn').text(newButtonText);
		}
	});
</script>

You could also add a class to the button on that page like this:
<script>
	$(document).ready(function() {	 
		$('#movenextbtn').addClass('welcome');
	});
</script>

This would then allow you to add the background image in template.css something like this:
#movenextbtn.welcome {
	font-size: 0px;
	background: transparent url(yourImage.png) 0 0 no-repeat;
}


.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: philnicholl

Change submit buttons text and background image on welcome page only 9 months 1 day ago #105545

Thank you both, Tony and Mazi. I implemented Mazi's suggestion before receiving Tony's and it works very well. Realising that you can add a class using a script has confirmed that I need to move on to learn at least the basics of Javascript. Thanks again for your help.
The administrator has disabled public write access.

Change submit buttons text and background image on welcome page only 9 months 1 day ago #105547

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5425
  • Thank you received: 307
  • Karma: 252
You're welcome :-)

If our hints have been helpful and you enjoy limesurvey please consider a donation to give LimeSurvey a future .

We do all this in our free time and you don't have to pay a penny for this software.

Without your help we can't keep this project alive.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.125 seconds
Donation Image