When you create a document in OpenProcess using the Document Template feature you may want to include a Council/Company logo/address/contact details etc in a header/footer.
OpenProcess has the ability to add as many Headers/Footer types as you like. These are created/maintained in the same way so let's show how to update a Header.
First navigate to Setup > Document Templates > Headers. By default there will be a header called IEG4 Header. Click on it to reveal the header.
Using the controls available within this area, it was very simple to create the following header:
It was simply a case of:
- Adding a 3x2 table using the 'Table' option in the rich text editor menu
- Add a logo using the Insert > Image option in the rich text editor menu
- Adding some HTML for the button like you would for OneVu FAQs
- Typing in the text for the address etc.
Then using the stylesheet option I made some style changes to format the table/button differently. You can copy this CSS (below).
In order to access the header styling simply click on the little edit icon to the right of where it says stylesheet and an editor will slide in from the right:
The process is identical for footers.
HTML present in the example header
<div class="header clearfix">
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
<td style="width: 33.3333%;"> </td>
</tr>
<tr>
<td style="width: 33.3333%;"><img class="header-logo" src="http://www.ieg4.com/media/1013/ieg4logo.png" width="145" height="95" /></td>
<td style="width: 33.3333%;"><button class="btn btn-primary" type="button">Access your Digital Account</button></td>
<td style="width: 33.3333%;">
<p>IEG4 Council</p>
<p>Queen's Court, Alderley Edge, SK9 7QD</p>
<p><a href="http://www.ieg4.com">www.ieg4.com</a></p>
<p><a href="https://twitter.com/IEG4">@IEG4</a></p>
</td>
</tr>
</tbody>
</table>
</div>
CSS shown in the example header
@import url("https://fonts.googleapis.com/css?family=Poppins:400,700,300");
body {
font-family: Poppins, sans-serif;
}
.clearfix:after {
visibility: hidden;display: block;font-size: 0;content: " ";
clear: both;height: 0;
}
tr:nth-child(1) {
background-color: #7a20a1;
color: white;
}
img.header-logo {
background-size: 150px !important;
}
table {
border: transparent;
font-family: Poppins, sans-serif;
}
button.btn.btn-primary {
padding: 10px;
font-size: 100%;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}