Custom Header/Footer

Use Custom Header/Footer tab to add content and styling rules to the header and footer so that they match your website. For instance, you can add a custom header to your Passle page (see example).

Passle grid view editing areas in Passle Content tab

HTML Section 1 (header)

Content added here is wrapped in <div class="client-content"></div> This is to ensure that any custom CSS added is targeted to the custom HTML and does not affect the Passle content styling.

HTML Section 1 (header) displays at the top of the page, above the passle-content element. Add content here to be displayed as a header.

HTML Section 2 (footer)

Content added here is wrapped in <div class="client-content"></div>

This is to ensure that any custom CSS added is targeted to the custom HTML and does not affect the Passle content styling.

HTML Section 2 (footer) displays at the bottom of the page, below the passle-content element. Add content here to be displayed as a footer.

The resulting markup is:
<div class="client-content">HTML Section 1 content</div>
<div class="passle-content">Passle content</div>
<div class="client-content">HTML Section 2 content</div>

Passle content is wrapped in <div class="passle-content"></div>. You can edit some aspects of this content in Passle Content tab.

LESS / CSS

Styling for the custom HTML content is added via the LESS/CSS codebox. Content may be raw CSS or use LESS syntax, which will be automatically processed into a CSS stylesheet. Selectors are automatically prepended with .client-content to target the custom HTML content, meaning you cannot add styling to any element outside of the custom HTML, for example the page body.

Errors in syntax in the LESS/CSS will prevent the stylesheet from compiling and being applied to the Passle. If this occurs we suggest using an online LESS compiler to troubleshoot and resolve errors e.g. www.freeformatter.com/less-compiler.html

JavaScript

Custom Javascript added via the Javascript codebox will be executed on page load. Jquery 2.2.0 is included in the page, meaning jQuery syntax and functions can also be used.

custom design tool iconcustom design tool icon