Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: Change css/style within a survey ?

Change css/style within a survey ? 4 years 10 months ago #66105

  • muellers
  • muellers's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 18
  • Karma: 0
Hi,

I need to change the layout within a survey. One Question has an extraordinary status in the survey.
How can I change eg. background colour, or better the hole css?

Setting the html bgcolour attribute does not work. Running the survey sets all formatings accordig the css definition.

Any ideas?

Thanks in advance
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66112

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6140
  • Thank you received: 1363
  • Karma: 535
You can make CSS rules question-specific by prepending the selectors with "#questionqID".

So if you want to target a question with question ID 11, something like:
#question11 .questiontext{
	background-color: pink;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 4 years 10 months ago by tpartner.
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66117

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5974
  • Thank you received: 366
  • Karma: 260
...this code can be added at the main style file of your template which is caled template.css and is located at the /upload/templates/<yourtemplate> folder.

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.

Change css/style within a survey ? 4 years 10 months ago #66133

  • muellers
  • muellers's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 18
  • Karma: 0
Thanks for the hint.
I'll try that tomorrow.

Do I have to specify Sid and Gid when runnung more than one survey with the same css?

Is there a direct way to do the trick? Eg special command in the html code of the question itself? This would be easier for editing a plenty of surveys..

have a nice weekend!
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66134

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6140
  • Thank you received: 1363
  • Karma: 535
Do I have to specify Sid and Gid when runnung more than one survey with the same css?
No, just the question ID - they are unique.
Is there a direct way to do the trick? Eg special command in the html code of the question itself? This would be easier for editing a plenty of surveys..
If you want to do it in the question HTML you will need to use JavaScript. Something like:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		$('#question11 .questiontext').css({
			'background-color':'pink',
			'color':'blue'
		}); 
 
	});
 
</script>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66191

  • muellers
  • muellers's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 18
  • Karma: 0
well the script works after changing .questiontext in .be Don't know why somebody changed so many settings in our template.

But one needed feature is left:
On this special question (now with contrasting colour :-)
is it possible to change the logo (which is defind in the "survey.pstpl") the same way?

Have a nice day.
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66197

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5974
  • Thank you received: 366
  • Karma: 260
Sure you can change that. At the template editor delete the existing log (mostly called "logo.png") and replace it with your logo which has also be named "logo.png". You can upload your logo using the template editor.

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.

Change css/style within a survey ? 4 years 10 months ago #66224

  • muellers
  • muellers's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 18
  • Karma: 0
I need to do the Logo change for only ONE special question in a longer survey. All other questions follow the standard scheme.
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66226

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6140
  • Thank you received: 1363
  • Karma: 535
In that case, you will need to use JavaScripr to change the src attribute of the image. The script would depend on your template. Can you show us a sample survey.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66233

  • muellers
  • muellers's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 18
  • Karma: 0
the logo is set up in the survey.pstpl with standard <img> tag. the hole content of the file is in my office...
what do you need exactly?
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66237

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6140
  • Thank you received: 1363
  • Karma: 535
All templates are different. I will need to see the source of the page to find where thhe image is in the DOM.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66257

  • muellers
  • muellers's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 18
  • Karma: 0
the logo image in the running survey site is embedded as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
<link rel="stylesheet" type="text/css" media="all" href="http://server/limesurvey/scripts/jquery/css/start/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://server/limesurvey/scripts/jquery/css/start/lime-progress.css" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="http://server/limesurvey/scripts/jquery/jquery-ui.js"></script>
<link href="http://server/limesurvey/scripts/jquery/css/start/jquery-ui.css" media="all" type="text/css" rel="stylesheet" /><link href="http://server/limesurvey/scripts/jquery/css/start/lime-progress.css" media="all" type="text/css" rel="stylesheet" /><script type="text/javascript" src="http://server/limesurvey/scripts/jquery/jquery-ui.js"></script>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>Survey</title>
 
		<meta name="generator" content="LimeSurvey http://www.limesurvey.org" />
 
		<link rel="stylesheet" type="text/css" href="http://server/limesurvey/upload/templates/workload_neu/template.css" />
 
 
    <!-- The following CSS hides visual elements of the progress bar from screen readers. -->
    <style type="text/css" media="aural tty">
        progress-graph .zero, progress-graph .graph, progress-graph .cent { display: none; }
    </style>
 
 
	<script type="text/javascript" src="http://server/limesurvey/upload/templates/workload_neu/template.js"></script>
	<link rel="shortcut icon" href="http://server/limesurvey/upload/templates/workload_neu/favicon.ico" />
	<script type="text/javascript" src="http://server/limesurvey/scripts/survey_runtime.js"></script>
	</head>
	<body>
		<table width="80%" align="center" class="bf" cellpadding="0" cellspacing="11">
		<tr>
			<td>
 
<form method='post' action='http://server/limesurvey/index.php' id='limesurvey' name='limesurvey' autocomplete='off'>
      <!-- INPUT NAMES -->
      <input type='hidden' name='fieldnames' value='35951X2887X65570|35951X2887X65571|35951X2887X65572|35951X2887X65573|35951X2887X65574' id='fieldnames' />
	<table width="100%" cellpadding="2">
		<tr>
			<td width="30%"valign="middle" align="left"><img src="http://server/limesurvey/upload/templates/workload_neu/Workload_Logo_klein.png" alt="Logo Image" /></td>
			<td width="70%" valign="middle" align="right" class="survey-name">Title</td>
 
<td valign="bottom" align="center" width="100%">
 
				<table width="100%">
					</tr>
 
				</table>
			</td>
			<td valign="bottom" align="right" height="100%" width="100%"></td>
		</tr>
...
	</table>


content of survey.pstpl is:
	<table width="100%" cellpadding="2">
		<tr>
			<td width="30%"valign="middle" align="left"><img src="{TEMPLATEURL}Workload_Logo_klein.png" alt="Logo Image" /></td>
			<td width="70%" valign="middle" align="right" class="survey-name">{SURVEYNAME}</td>
 
<td valign="bottom" align="center" width="100%">
				<table width="100%">
					</tr>
 
				</table>
			</td>
			<td valign="bottom" align="right" height="100%" width="100%"></td>
		</tr>
	</table> 
Last Edit: 4 years 10 months ago by muellers.
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66281

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6140
  • Thank you received: 1363
  • Karma: 535
1) Set up your survey to use JavaScript.

2) In survey.pstpl, change:
<td width="30%"valign="middle" align="left"><img src="{TEMPLATEURL}Workload_Logo_klein.png" alt="Logo Image" /></td>
To:
<td class="logoImage" width="30%"valign="middle" align="left"><img src="{TEMPLATEURL}Workload_Logo_klein.png" alt="Logo Image" /></td>

3) Add the following script to the source of the special question. Modify it with the correct path to the new logo image.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		$('.logoImage img').attr('src', 'upload/templates/yourTemplate/new_logo.png');;
 
	});
 
</script>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66293

  • muellers
  • muellers's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 18
  • Karma: 0
Thank you very much! Works fine!
The administrator has disabled public write access.

Change css/style within a survey ? 4 years 10 months ago #66297

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5974
  • Thank you received: 366
  • Karma: 260
You're welcome!

If our hints have been helpful and you enjoy limesurvey please consider a donation to the team .
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.281 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form