Add a logo to a survey

Some surveys require branding and will instruct the programmer to include a company logo on every survey page. The following modification to a survey header.tx file inserts an image at the top of the page, above survey content.

Step 1: Format and upload image

Begin by formatting and uploading the logo. The final dimensions for the logo can be adjusted with the HTML in the template file, but excessively large images should be scaled down first in the name of efficiency. Images are best utilized in PNG or JPG formats. Once ready, upload the image to the target survey's /_s/ directory via Survey Files.

Step 2: Create and modify a local copy of header.tx

First, locate the header.tx file under theme > system > base folder. Create a local copy of header.tx by clicking on the header.tx file then selecting the Make Local Copy button at the top of the screen (). A pop-up will appear asking for confirmation to "Copy file(s) to the survey's theme directory?" This local copy of header.tx is the one the survey uses to render survey content.

The contents of the local copy should be replaced with the following. Note that the following code comes from the Base theme.

%%  cascade base::header;  # or use dd:header for dd and modern themes
%%  after content -> {
<div class="logo" name="logo" style="float: left; margin: 10px"><img style="width: 66%" src="/s/[% get_appid() %]/logo.png" /></div>
%%  }

If the logo is named something other than logo.png, update the path in the <img> tag to reflect the correct name. To modify the dimensions of the image, adjust the width CSS property in the <img> tag.

Result

Based on the theme you are attempting to use for the survey, you want the header.tx file from the same theme or the theme it is derived from; for example, since Modern theme is based off of Device Diverse, the following could be edited for use with Modern theme:

%%  cascade dd::header;
%%  after content -> {
<div name="logo" style="float: left; margin: 10px">
	<table><tr><td>
		<img style="width:150px" src="/s/[% get_appid() %]/logo_sm.png" />
		</td></tr>
	</table>
</div>
<div style="clear:both"></div>
%%  }

%%  after content -> {
<div name="logo" style="text-align: center; width: 250px; margin: 0 auto;">
        <img style="width:250px" src="/s/[% get_appid() %]/logo.png" />
</div>
<div style="clear:both"></div>
%%  }