Passle Content

Use this tab to add styling rules to the content inside Passle page body, for instance, page content wrapper, or to add a fixed width to the passle-content element. For instance, you can add a background image behind Passle content, as in this example.

Passle grid view editing areas in Passle Content tab

Custom design page content is wrapped in a container element <div id”passle-page-wrapper”></div>to allow for fixed width designs.

The resulting markup is:
<div id"passle-page-wrapper">
<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>
</div>

In general you are advised to use caution when styling using this tab as changes here will apply to the whole page. You are strongly advised to avoid styling Passle content directly as this may cause unforeseen bugs, particularly should this content be updated in the future.

Body LESS/CSS

Use this box to add styling rules to the page body, for example font-family, line-height, or background-image. Content may be raw CSS or use LESS syntax, which will be automatically processed into a CSS stylesheet. Content added is automatically prepended with body.passle-body for targeting purposes.

Example:
font-size: 14px;
line-height: 1;
background-image: url('http://passle-net.s3.amazonaws.com/CustomDesign/55daf3633d94740a50a52b39/passle_logo_205x46px.png');
h1 {
font-size: 28px;
}

Would be output as:
body.passle-body {
font-size: 14px;
line-height: 1;
background-image: url('http://passle-net.s3.amazonaws.com/CustomDesign/55daf3633d94740a50a52b39/passle_logo_205x46px.png');
}
body.passle-body h1 {
font-size: 28px;
}

Content Container LESS/CSS

Use this box to add styling rules to #passle-page-wrapper. Content may be raw CSS or use LESS syntax, which will be automatically processed into a CSS stylesheet. Content added is automatically prepended with #passle-page-wrapper for targeting purposes.

Example:
width: 1000px;
margin: 0 auto;
h1 {
font-size: 28px;
}

Would be output as:
#passle-page-wrapper {
width: 1000px;
margin: 0 auto;
}
#passle-page-wrapper h1 {
font-size: 28px;
}

Passle content fixed width

Use this box to apply a fixed width value to the passle-content div element. It is important to specify both a value and a unit of measurement, for example 960px, 80%, or 40em. The value will be applied via inline styling, with margin: 0 auto added to ensure the element is centred on the page.

Example:
960px
Would output as:
<div class="passle-content" style="width:960px; margin: 0 auto;">Passle content</div>

custom design tool iconcustom design tool icon