Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:
  • Page:
  • 1
  • 2

TOPIC: template.css

template.css 5 years 6 months ago #54797

  • chupanibre
  • chupanibre's Avatar
  • Offline
  • Junior Lime
  • Posts: 29
  • Karma: 0
Dear Community

I am currently making my first experiences with limesurvey. I think it is a great tool which offers a lot of possibilities. The thing is that I want to perform a number of changes to the basic template included in limesurvey. Unfortunately, I have near to zero knowledge about html or css. I am slowly working my way around all of this, and I am wondering if there is any documentation available for the template.css file included in limesurvey? Having some kind of a list explaining which elements of the .css file correspond to which elements of the survey (or where they are used) would be extremely helpful.

Thanks a lot,
Chupa
The administrator has disabled public write access.

template.css 5 years 6 months ago #54802

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1362
  • Karma: 535
Unfortunately there is no such documentation because every template is built differently so template.css files are totally different.
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.

template.css 5 years 6 months ago #54803

  • chupanibre
  • chupanibre's Avatar
  • Offline
  • Junior Lime
  • Posts: 29
  • Karma: 0
Ok, thanks for the info.
Another question; where can I find specific elements of each template? I made a custum template, but now I want to use certain elements out of other templates. I cannot find anything in the template.css file, are there additional, hidden files where these elements are stored?
The administrator has disabled public write access.

template.css 5 years 6 months ago #54805

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1362
  • Karma: 535
All of the template elements are in the .pstpl files. When you select a page in the template editor you will see a list of all relevant files.

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.

template.css 5 years 6 months ago #54808

  • chupanibre
  • chupanibre's Avatar
  • Offline
  • Junior Lime
  • Posts: 29
  • Karma: 0
I created a very simple template, but now I want to add certain effects.
I want to get from version 1 to version 2 (or something like this), but was not able to find anything in the .css or .pstpl files which allowed me to change this.


Last Edit: 5 years 6 months ago by chupanibre.
The administrator has disabled public write access.

template.css 5 years 6 months ago #54811

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1362
  • Karma: 535
Version 2 appears to be the default template. Maybe you should copy that template and start there.

All of those effects are accomplished with CSS but I'm afraid it would be too involved to try to explain them all in this forum. You will need to aquire some knowledge of CSS and experiment - Google is your freind.
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.

template.css 5 years 6 months ago #54822

  • chupanibre
  • chupanibre's Avatar
  • Offline
  • Junior Lime
  • Posts: 29
  • Karma: 0
I understand, I replaced my custom template.css file with the default-version, but this did not change anything....
The administrator has disabled public write access.

template.css 5 years 6 months ago #54827

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1362
  • Karma: 535
Simply replacing the template.css file will not work because rules in that file may apply to HTML elements that don't exist in your template.

Copy the complete default template (or any other that you prefer) and start modifying that copy.
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.

template.css 5 years 6 months ago #54830

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5974
  • Thank you received: 366
  • Karma: 260
Please also post a link to a test survey so we can have a look at the survey itself. That makes it much easier to help.

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.

template.css 5 years 6 months ago #54833

  • chupanibre
  • chupanibre's Avatar
  • Offline
  • Junior Lime
  • Posts: 29
  • Karma: 0
@tpartner: Ok, that makes sense. The thing is that I received a template from a collegue, and now I am working and modifying that one. Therefore I do not want to use the default template, as I would then need to start from scratch. I understand that it is necessary to have some basic knowledge about html&css and to take some time to learn how to use limesurvey properly. I do have some very basic knowledge about html&css, but I have to work under serious time constraints and therefore am happy whenever I can take a "shortcut". You mentioned "html" elements, where can I find those?

@Mazi: Is there another option to implement a test-survey than to activate the aurvey?

Thanks again to both of you for your help!
The administrator has disabled public write access.

template.css 5 years 6 months ago #54839

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5974
  • Thank you received: 366
  • Karma: 260
chupanibre wrote:
@Mazi: Is there another option to implement a test-survey than to activate the aurvey?
At global settings -> securtiy -> enable preview for non-admin users
This way we can view a survey even if it's not activated yet.

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.

template.css 5 years 6 months ago #54844

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1362
  • Karma: 535
By "HTML elements" I mean the basic structure of the page - banner, group description, questions, footer, navigation, etc. These elements are defined in the .pstpl files.

Some templates use tables to lay these out and some use divisions. Regardless, they all have different IDs and classes in different templates. This means that style sheets are template specific.

As Mazi says, if you could let us see a sample survey we would be able to help more. Otherwise there is no way for us to guess what the HTML source of your page is and how to apply styles to it.
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.

template.css 5 years 6 months ago #54848

  • chupanibre
  • chupanibre's Avatar
  • Offline
  • Junior Lime
  • Posts: 29
  • Karma: 0
The administrator has disabled public write access.

template.css 5 years 6 months ago #54859

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1362
  • Karma: 535
Well, your template doesn't have classes assigned to too may elements but this should get you started. Add the following to the end of template.css::
div#layout {
	border: 1px solid #BBC6CC;
	margin: 10px auto;
}
 
#header {
	padding: 0 7px;
}
 
form#limesurvey {
	background-color: #D2E0F2;
	padding: 0 20px;
	margin-bottom: 7px;
}
 
.survey-survey-percent {
	left: 537px;
	position: absolute;
	text-align: center;
	top: 15px;
	width: 174px;
}
 
div.survey-question-text {
	background-color: #EEF6FF;
	padding: 0 10px;
}
 
div.survey-question-text p {
	margin-bottom: 0;
}
 
div.survey-question-text .asterisk {
	color: #CC0000;
}
 
.survey-question-answer {
	background-color: #FFFFFF;
	margin: 0;
	padding: 5px 20px;
}
 
table.question {
	width: 100%;
}
 
table.question td,
table.question th {
	border: 2px solid #FFFFFF;
}
 
.array2 {
	background-color: #EEEEEE;
}
Cheers,
Tony Partner

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

Aw: template.css 5 years 6 months ago #55475

  • chupanibre
  • chupanibre's Avatar
  • Offline
  • Junior Lime
  • Posts: 29
  • Karma: 0
I added your code to the end of my template.css and tried to manipulate some of the classes and selectory, but without any success. It seems that there are some predefined values which override any modifcations I make. I tried everything I could think of, without any success.

I am working on the question-page, here is my question.pstpl:
<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">
<div class="survey-question-text"> {QUESTION}</div>
<div class="survey-question-answer">{ANSWER}</div>
<div class="survey-question-space"></div>
</div>

I want to modify the display of the "answer" keyword. I attached my current template.css. Thanks in advance for your help!


File Attachment:

File Name: template.txt
File Size:7 KB
Last Edit: 5 years 6 months ago by chupanibre. Reason: attachment is missing
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.292 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form