Go to full article

Overview

This article explains how to customise the static header and footer within the Sign Up Portal.


The static header and footers in the sign up portal are persistent across the portal, meaning that regardless of the page the site visitor sees, they will not change. 

Service providers typically use the header space for corporate branding and the footer section to tell their visitors how to get help if they have trouble with the sign up process.

The static header and footer areas as marked in red on the right.

The logo must be uploaded first in order to use it in the static header.

Within the static header, use the following class to reference the logo.

Emersion uses the Smarty Template Engine for PHP, facilitating the separation of presentation (HTML/CSS) from application logic. This implies that PHP code is application logic, and is separated from the presentation. Therefore, designers are limited by Smarty's features and functions.

To customise the static header and footer, go to

Admin > Settings > Sign Up Settings > Static Header and Footer

Click the Edit button to put the page into EDIT mode.

In the Header field, insert/enter your HTML/CSS code.

In the Footer field, insert/enter your HTML/CSS code.



HTML and CSS Code Examples


Header Example

Use this example as a template for your own header design.

Sign Up Footer HTML and CSS example code 
<div class="right">
    <h1 class='signup_logo'></h1>
    <div id="Loading"></div>
</div>
<div class="left">
    <h1></h1>
</div>

<style>
.box001 {
-moz-border-bottom-colors: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;
background: none repeat scroll 0 0;border-color: currentcolor #ccc #ccc;border-image: none;
border-radius: 10px 10px 10px 10px;border-style: none solid solid;border-width: medium 1px 1px;
box-sizing: border-box;margin: 4px 4px 4px 4px;min-height: 38px;padding: 5px 10px;
}

#Header {
background: none;
}

#Footer {
background: none;
}
</style>

Footer Example

Use this example as a template for your own footer design.

Sign Up Footer HTML and CSS example code 
<div class="box001">
<span style="font-size:16px;">For assistance with using this portal, please call the customer service team on 1300 xxx xxx</span>
<br/>
<span style="font-size:10px;"><em>(c) 2017 Emersion Software Systems</em></span>
</div>


Related Pages