Check out the LimeSurvey source code on GitHub!

Change css/style within a survey ?

More
5 years 4 months ago #66105 by muellers
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

Please Log in to join the conversation.

More
5 years 4 months ago - 5 years 4 months ago #66112 by tpartner
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: 5 years 4 months ago by tpartner.

Please Log in to join the conversation.

More
5 years 4 months ago #66117 by Mazi
...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)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 4 months ago #66133 by muellers
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!

Please Log in to join the conversation.

More
5 years 4 months ago #66134 by tpartner

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.

Please Log in to join the conversation.

More
5 years 4 months ago #66191 by muellers
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.

Please Log in to join the conversation.

More
5 years 4 months ago #66197 by Mazi
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)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 4 months ago #66224 by muellers
I need to do the Logo change for only ONE special question in a longer survey. All other questions follow the standard scheme.

Please Log in to join the conversation.

More
5 years 4 months ago #66226 by tpartner
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.

Please Log in to join the conversation.

More
5 years 4 months ago #66233 by muellers
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?

Please Log in to join the conversation.

More
5 years 4 months ago #66237 by tpartner
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.

Please Log in to join the conversation.

More
5 years 4 months ago - 5 years 4 months ago #66257 by muellers
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: 5 years 4 months ago by muellers.

Please Log in to join the conversation.

More
5 years 4 months ago #66281 by tpartner
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.

Please Log in to join the conversation.

More
5 years 4 months ago #66293 by muellers
Thank you very much! Works fine!

Please Log in to join the conversation.

More
5 years 4 months ago #66297 by Mazi
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)survey-consulting.com'"

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form