LimeSurvey forums :: Topic: template.css (2/2)

Welcome, Guest

TOPIC: template.css

Re: template.css 2 years 4 months ago #54839

Mazi OFFLINE LimeSurvey Team Posts: 5116 Thank you received: 260 Karma: 240	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.

Re: template.css 2 years 4 months ago #54844

tpartner
NOW ONLINE
LimeSurvey Team
Posts: 2856
Thank you received: 424
Karma: 244

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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.

The administrator has disabled public write access.

Re: template.css 2 years 4 months ago #54848

chupanibre OFFLINE Junior Lime Posts: 29 Karma: 0	Ok, here you go: cape42heidelberg.limequery.org/index.php...84&newtest=Y&lang=de
	The administrator has disabled public write access.

Re: template.css 2 years 4 months ago #54859

tpartner
NOW ONLINE
LimeSurvey Team
Posts: 2856
Thank you received: 424
Karma: 244

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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.

Last Edit: 2 years 4 months ago by tpartner.

The administrator has disabled public write access.

Aw: template.css 2 years 4 months ago #55475

chupanibre
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: 2 years 4 months ago by chupanibre. Reason: attachment is missing

The administrator has disabled public write access.

Re: Aw: template.css 2 years 4 months ago #55478

tpartner NOW ONLINE LimeSurvey Team Posts: 2856 Thank you received: 424 Karma: 244	I don't see any inline style in your template that would override the stylsheets. I think it's just a matter of selecting the correct element to style and placing the styles in the proper position in the cascade. Try using Firebug for Firefox to explore the elements of your pages. There are lots of helpful CSS tips tutorials available online - eg. www.w3schools.com/css/default.asp
	Cheers, Tony LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project. The administrator has disabled public write access.

Aw: Re: Aw: template.css 2 years 3 months ago #55650

chupanibre
OFFLINE
Junior Lime
Posts: 29
Karma: 0

Thanks for the firebug-tip.
I was able to narrow down my problem; using firebug I was able to retrieve the css-class dealing with the format of my question:
.survey-question-answer {
display:block;
font-weight:400;
margin:0 64px 0 54px;
}

The thing is that I am unable to modify this entry. I changed this class in the template.css using the template editor from limesurvey, but it seems to stays the same. The format of the question does not change, as well as the entry in the .css file displayed in firebug...

That is the reason why I first asked about this; I changed some values in template.css which did not lead to any change in the final version of my questionnaire.

Last Edit: 2 years 3 months ago by chupanibre.

The administrator has disabled public write access.

Re: Aw: Re: Aw: template.css 2 years 3 months ago #55656

tpartner NOW ONLINE LimeSurvey Team Posts: 2856 Thank you received: 424 Karma: 244	I don't understand why making changes in the template editor don't change the file. Try adding the following to the end of template.css as a test: .survey-question-answer { color: red; }
	Cheers, Tony 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: chupanibre

Re: Aw: Re: Aw: template.css 2 years 3 months ago #55661

Mazi
OFFLINE
LimeSurvey Team
Posts: 5116
Thank you received: 260
Karma: 240

chupanibre wrote:

That is the reason why I first asked about this; I changed some values in template.css which did not lead to any change in the final version of my questionnaire.

Usually CSS files are cached by the browser. You have to reload the complete survey page so that the updated CSS file is loaded by the browser. Pressing (CTRL) + F5 should do the trick.
Using firebug you can then also check if the changes were saved at 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.

The following user(s) said Thank You: chupanibre

Aw: Re: Aw: Re: Aw: template.css 2 years 3 months ago #55701

chupanibre OFFLINE Junior Lime Posts: 29 Karma: 0	@Mazi: Thanks again for your help, (CTRL) + F5 was the problem
	Last Edit: 2 years 3 months ago by chupanibre. The administrator has disabled public write access.

Forum

English support forums

Design issues

template.css