Welcome to the LimeSurvey Community Forum

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

Background image only in "welcome message" and "end message"

  • Payek
  • Payek's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 5 months ago #159527 by Payek
Hi,
Is it possible to add image background only to "welcome message"? I found solution for the whole template here:

Ben_V wrote: :unsure:

Code:
body {
background-image:url('http://yourinstall.com/..../ei.png');
background-repeat:no-repeat;
background-position:center center;
}


and it's (after small adaptation) working form me, but I try to add exclusive (different) image background for a "welcome" and "end" messages. It is also important to me, that the solution will look good on mobile devices because I expect the most of the Respondents will complete the survey on mobile phones.

I will be grateful for the tips on how to achieve this.

Payek


My Lime is Version 2.70.0+170921
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 5 months ago - 6 years 5 months ago #159538 by tpartner
Adding something like this to the end of template.js will give the <body> element in those pages a specific class:

Code:
$(document).on('ready pjax:complete',function() {
  if($('#welcome-container').length > 0) {
    $('body').addClass('welcome-page');
  }
  if($('.completed-table').length > 0) {
    $('body').addClass('end-page');
  }
});

Then you can target those classes in template.css something like this:

Code:
.welcome-page {
  background-image: url(http://example.com/..../welcome-page.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
 
.end-page {
  background-image: url(http://example.com/..../end-page.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 5 months ago by DenisChenu. Reason: Usage of example.com
The following user(s) said Thank You: DenisChenu, Payek
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose