Page Header and Footers in Snippets

Liberty Create
1

Is it possible to add a page header and footer to a snippet.

We have a lot of email and letter templates in our system that are pulled together using 3 snippets that are added to a page using 3 info by template widgets; 1 for the customers contact details, 1 for the letter/email content and 1 for the users signature. These are then saved as a pdf into a field with a file data type using a bunch of rules. It’s a bit of a convoluted process to be honest.

Recently I was asked to add our company headers and footers to the templates but I haven’t been able to do this successfully. I can add the header to the top of a snippet and the footer to the bottom but they don’t repeat on multiple pages and the footer will only appear directly below the signature and not at the bottom of the page.

Is there a way to achieve this without using custom code?

2

Hi Paul

Yes, this is possible, assuming I’ve understood your intention. Usually, it requires a little HTML and CSS trickery in the wrapper to contain the dynamic elements, placing a header and footer in THEAD and TFOOT respectively.

The CSS in the file I am looking at includes:

thead {
display: table-header-group !important;
margin-top: 10% !important;
page-break-inside: avoid !important;
}

tfoot {
display: table-footer-group !important;
margin-bottom: 10% !important;
page-break-inside: avoid !important;
}

which looks like it might be some of the magic required. If you are interested we could try to debrand this file for you.

1 Like
3

Hi Paul,

Thanks for coming back to me. If you can send me something over it would be a big help.

Cheers,
Paul

4

Hi Paul :slight_smile:

I’ve found a file and debranded it. I’ve added some comments but I can’t test it at my end. You will have to replace the content in brackets with your dynamic pages. Do take a look at the source as there are options for putting an image and some overlaid text on a cover page commented out in it.

I think the best thing would be to have a play with it and see what happens. It might move you closer to what you are trying to do.

Some of the instructions below are a bit vague as I am not a builder.

  • In the build studio go to assets > templates and ‘Add Template’

  • Set Utilisation to ‘file content’ (probably)

  • Set Base object to [None]

  • Save.

  • In the content tab, select ‘Edit mode’ and ‘Source’ in the text editor below, then paste in this code and set ‘Include assets’ to none (probably)

  • Replace the things in brackets [HEADERTEXT] with your content.

  • Save.

Run it against your content selecting this new file as your template.

Paul


<!-- 

Front Page
If you want to place a front page image you need to uncomment this

<div class="frontpage" data-definition="{}" data-plugin="div">
	[PLACE IMAGE HERE]
</div>

 -->

<!--             
Subsequent pages contained in a table in order to include repeating header
Cannot include footer in tfoot here as would be placed at random height on the last page.
-->

<div class="float_right" style="display:none !important;">
	<h1>
		[TEXT HEADER]
	</h1>
</div>

<table class="mainpage">
    <thead id="header"><tr>
        <th class="header_content">
                <span class="header_logo">
                    [HEADER LOGO]
                </span>
                <span class="header_text">
                    [HEADER TEXT]
                </span>
			</th>
		</tr>
    </thead>
    <tbody>
        <tr>
            <td class="content_section">
				<div class="template">
					<!-- YOUR PAGE -->
                    [PAGE CONTENT]
                    <!-- YOUR PAGE -->
				</div>
			</td>
		</tr>
    </tbody>

<!-- I SUSPECT THIS FOOTER HAS TO BE HERE BUT INVISIBLE  -->

    <tfoot id="footer">
        <tr>
            <td>
                <span>
                    &nbsp;
                </span>
            </td>
        </tr>
    </tfoot>
</table>

<!-- 

Front Page
If you want to place text on your front page image you need to uncomment this

<div id="frontpage_overlay_text">
	<div>
		<h3>
			[MAIN HEADER]
		</h3>
	</div>

	<div>
		<h4>
			[SUB HEADER]
		</h4>
	</div>
</div>

-->

<!-- ACTUAL FOOTER -->

<div class="fixed_footer">
	[FOOTER]
</div>


<style type="text/css">

/* ADD YOUR OWN FONT IMPORT HERE */

@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
    
        html,
        body {
            width: 100%;
            height: 99%;
            font-size: 10px;
            background-color: #ffffff;
            font-family: 'Lato', sans-serif;
        }
    
        .float_right {
            float: right !important;
            right: 80px !important;
            top: 1150px !important;
            max-width: 60% !important;
            z-index: 3000 !important;
            position: absolute !important;
        }
    
        .center_title {
            margin-left: auto;
            margin-right: auto;
            text-align: left;
            width: 85%;
            margin-top: 0px !important;
            padding-top: 0px !important;
            page-break-after: avoid !important;
        }
    
        thead>tr>th {
            background-color: #ffffff !important;
        }
    
        .frontpage {
            width: 100%;
            height: 99%;
        }
    
        .frontpage img {
            top: 0;
            right: 0;
            margin-top: -0.5rem;
            position: absolute;
            width: 100%;
            height: auto;
        }
    
        .header_content {
            width: 100%;
        }
    
        .header_logo {
            margin-left: 60px;
            width: 80px;
            padding: 5px;
            margin-bottom: 20px !important;
            display: block;
            margin-top: 25px;
        }
    
        .header_text {
            margin-left: 5%;
            margin-right: auto;
            margin-bottom: 20px !important;
        }
    
        .fixed_footer {
            bottom: 3px;
            width: 85%;
            height: 1.1em;
            right: 0;
            position: fixed;
            margin-left: auto;
            margin-right: auto;
            font-size: 10px;
            text-align: right;
        }
    
        .fixed_footer span {
            margin-right: 50px;
            vertical-align: baseline;
            color: #333333;
        }
    
        .mainpage {
            width: 100% !important;
            height: 70% !important;
            align-self: center !important;
            margin-left: auto;
            margin-right: auto;
            border-collapse: collapse !important;
        }
    
        .template {
            width: 85% !important;
            margin-left: auto;
            margin-right: auto;
        }
    
        .mainpage thead {
            margin-top: 10%;
            border: none;
        }
    
        .mainpage tfoot {
            margin-bottom: 10%;
            border: none;
        }
    
        .mainpage th {
            text-align: left;
            vertical-align: baseline;
            letter-spacing: 0.2px;
        }
    
        .mainpage td {
            text-align: left;
            vertical-align: baseline;
            font-size: 10px !important;
            letter-spacing: 0.2px;
            color: #333333;
        }
    
        .content_section {
            width: 50%;
            padding: 3px;
            padding-bottom: 5% !important;
            padding-top: 3% !important;
            margin-bottom: 5% !important;
            vertical-align: middle;
        }
    
        .content_section h3.mb-4 {
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            margin: 0;
            padding: 1.5rem 0 0.5rem 0;
            color: black;
        }
    
        .content_section td[colspan="6"] h3 {
            border-top: 0;
        }
    
        table.table.listing.table-striped.nosort td,
        table.table.listing.table-striped.nosort th {
            padding: 0.5rem 0;
        }
    
        .content_section table {
            border-collapse: collapse;
        }
    
        .content_section table>tr,
        .content_section table>td {
            background-color: transparent !important;
        }
    
        .content_section h4 {
            border-top: none;
            margin-left: 0px;
            text-align: left;
            font-weight: bold !important;
            margin-top: 1%;
            font-size: 12px;
        }
        
        .politeannouncer,
        .sr-only {
            display: none;
        }
    
        th>div>a {
            text-decoration: none;
            color: #000000;
            font-size: 10px;
            font-weight: bold;
        }
    
        th>div>a:hover {
            cursor: text;
        }
    
        .table-striped {
            width: 670px;
            text-align: left;
        }
    
         td.page_embed table {
            width: 100%;
        }
    
        td.page_embed table td {
            width: 25%;
        }
    
        span.heading_label {
            font-size: 10px;
            font-family: 'Lato', sans-serif;
        }
    
        table.table tr th,
        table.table tr td {
            font-family: 'Lato', sans-serif;
            padding: 8px 10px;
        }
    
        thead>tr>th {
            background-color: transparent !important;
        }
    
        table.table.table-striped thead tr:nth-of-type(odd) {
            background-color: transparent;
        }
    
        .content_section td[colspan="6"] {
            background: white;
        }
    
        td.content_section {
            margin-bottom: 0px !important;
        }
    
        td.content_section:first-of-type {
            padding-bottom: 0px !important;
        }
    
        @media print {
    
            html,
            body {
                height: 90%;
            }
    
            #frontpage_overlay_text {
                position: absolute !important;
                right: 0 !important;
                top: 83% !important;
                text-align: right;
                margin-right: 50px;
            }
            #frontpage_overlay_text h3 {
                font-size: 2.5rem;
                border: 0px;
            }

            #frontpage_overlay_text h4 {
                font-size: 1.8rem;
                border: 0px;
            }
    
            .content_section h3 {
                page-break-after: avoid !important;
            }
    
            .frontpage {
                page-break-after: always !important;
            }
    
            #header {
                display: table-header-group !important;
                margin-top: 10% !important;
                page-break-inside: avoid !important;
            }
    
            #footer {
                display: table-footer-group !important;
                margin-bottom: 10% !important;
                page-break-inside: avoid !important;
            }

			.template tr {
                page-break-inside: avoid;
            }
    
            .template td {
                vertical-align: top;
            }
    
            .template td>label {
                vertical-align: top;
            }
      
            .allow_wrap {
                white-space: normal !important;
            }
        }
    
        @page {
            margin-top: 5px;
            margin-bottom: 35px;
        }
    
        @media only screen {
            .fixed_footer {
                display: none;
            }
    
            .frontpage {
                display: none;
            }
        }
    
        /* override */
        label[style],
        div[style],
        p[style],
        a[style],
        span[style],
        td[style] {
            font-size: 9px !important;
            line-height: 1.5 !important;
            width: unset !important;
        }

        table[style] {
            margin-bottom: 0 !important;
        }


table {
    width: 670px;
}

.content_section tr {
    border: 0;
}

.wrapper_hidden {
    display: none !important;
}

h3 {margin-bottom: 0 !important;}

</style>
1 Like
5

Thanks Paul I will give this a go