Welcome to the LimeSurvey Community Forum

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

How to add header and footer to the survey?

More
11 years 10 months ago - 11 years 10 months ago #106923 by mrli999
I want to add header and footer to the survey. I checked the manual, and found that

Basic CMS Integration support

Deprecated: This function is not available anymore in version 2.0 or later


Then how can I add header and footer to the survey?

Many many thanks.
Last edit: 11 years 10 months ago by mrli999.
The topic has been locked.
More
11 years 10 months ago #106928 by Ben_V
Hello,

You have to edit your template files (make a copy before) using the template editor.

Best places:
Header: in startpage.pstpl file
Footer: in endpage.pstpl

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The following user(s) said Thank You: mrli999
The topic has been locked.
More
11 years 10 months ago #106941 by mrli999

Ben_V wrote: Hello,

You have to edit your template files (make a copy before) using the template editor.

Best places:
Header: in startpage.pstpl file
Footer: in endpage.pstpl


Dear Ben_V,

Thank you very much. It works well.

By the way, I would like to add my own logo into startpage.pstpl. As you know the page size of the survey can be iphone, 640*480, 800*600, 1024*768, full. How to make the logo fit the page size automatically?

Thanks again.
The topic has been locked.
More
11 years 10 months ago #106942 by Ben_V
There's a lot of ressources about this topic on the web... the most of the time using css media queries and/or javascript.

The simpliest way, using only css media queries, is to set the dimensions of your image in the stylesheet and not inside the <img> element itself (however sometimes just using percents or em instead px do the job without more complications).

Example:
HTML:
Code:
<img src="logo.jpg" class="logo_img" />

CSS:
Code:
.logo_img {width: 100px; height: 100px}
 
@media screen and (max-width:768px){
.logo_img {width: 75px; height: 75px}
}
 
@media screen and (max-width:480px){
.logo_img {width: 50px; height: 50px}
}

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The topic has been locked.
More
11 years 10 months ago #106946 by DenisChenu
Hi,

And for img, always add max-with:100%;height:auto

github.com/Shnoulle/skeletonquest/blob/m...ry-ui-custom.css#L69
Code:
img,video,svg,iframe{max-width: 100%;height: auto;
*width:100%
}
Then you are sure you image fit the screen.

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.
The following user(s) said Thank You: mrli999
The topic has been locked.
More
11 years 10 months ago - 11 years 10 months ago #106989 by mrli999

DenisChenu wrote: Hi,

And for img, always add max-with:100%;height:auto

github.com/Shnoulle/skeletonquest/blob/m...ry-ui-custom.css#L69

Code:
img,video,svg,iframe{max-width: 100%;height: auto;
*width:100%
}
Then you are sure you image fit the screen.


Dear Denis,

thank you very much for your kindness. I tried and found the following html work for my web site:

<img src="{TEMPLATEURL}images/example.png" max-width="100%" width="75%" />

thanks again
Last edit: 11 years 10 months ago by mrli999.
The topic has been locked.
More
11 years 9 months ago #107972 by mrli999
<img src="{TEMPLATEURL}images/example.png" max-width="100%" width="75%" />

The above code works for all other pages, but the comppleted page. In the completed page, it is a little wide than all other content.

what should I do with it? thanks.
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose