New PageFooter Information (ARI)

Owned by Kyle Sharrer
Sept 01, 2023
2 min read

This SOP is a work in progress. If you notice anything that is out of date, could be more clear or could be more efficient please update the SOP or add a comment to start a conversation.

Purpose

This document provides the code to add the new ARI pagefooter element in order to add pagefooter content to webpages.

Procedure

Add the lines of code in order for the new ARI pagefooter to update.

New Page Footer code:

{{#Helpers.Path.GetKeyValuePairMatches Path.Parameters customDataModel.complex_lookups}}   {{#Helpers.Object.Compare (Helpers.Object.GetLength this) 1 }}     {{Helpers.Object.Lookup ../../customDataModel.ctas this.0.cta}}       <div id="dynamic-footer-{{id}}" style="padding-top:10px;">         <div class="col-xs-12 col-sm-12 col-md-12">           <h2 style="text-align:center;">{{{h2}}}</h2>         </div>         {{#if main_image_url}}           <div class="col-xs-12 col-sm-3 col-md-3">             <img src="{{main_image_url}}" alt="{{main_image_url_alt}}" style="max-width:100%;height:auto;padding:0 0 0 10px;">           </div>           <div class="col-xs-12 col-sm-9 col-md-9">             <p>{{{top_paragraph}}}</p>           </div>         {{else}}           <div class="col-xs-12 col-sm-12 col-md-12">             <p>{{{top_paragraph}}}</p>           </div>         {{/if}}       <div name="ftr-spec-dynamic">             {{#each anchor}}               <div style="clear:both;">               {{#if this.h3_image}}                 <hr />                   <div class="col-xs-12 col-sm-3 col-md-3">                    <img src="{{this.h3_image}}" alt="{{this.h3_image_alt}}" style="max-width:100%;height:auto;">                   </div>                   <div class="col-xs-12 col-sm-9 col-md-9">                 <h3 style="text-decoration: underline;margin-top:0;">{{this.h3}}</h3><p>{{{this.h3_text}}}</p>                   </div>               {{else}}                 <hr />                 <div class="col-xs-12 col-sm-12 col-md-12">                   <div style="float:left;"><h3 style="text-decoration: underline;margin-top:0;">{{this.h3}}</h3><p>{{{this.h3_text}}}</p></div>                 </div>               {{/if}}           </div>             {{/each}}           </div>   </div>      {{/Helpers.Object.Lookup}}   {{/Helpers.Object.Compare}} {{else}}    {{#Helpers.Path.GetKeyValuePairMatches ../Path.Parameters ../customDataModel.single_lookups}}      {{#Helpers.Object.Compare (Helpers.Object.GetLength this) 1 }}       {{Helpers.Object.Lookup ../../customDataModel.ctas this.0.cta}}         <div id="dynamic-footer-{{id}}" style="padding-top:10px;">         <div class="col-xs-12 col-sm-12 col-md-12">           <h2 style="text-align:center;">{{{h2}}}</h2>         </div>         {{#if main_image_url}}           <div class="col-xs-12 col-sm-3 col-md-3">             <img src="{{main_image_url}}" alt="{{main_image_url_alt}}" style="max-width:100%;height:auto;padding:0 0 0 10px;">           </div>           <div class="col-xs-12 col-sm-9 col-md-9">             <p>{{{top_paragraph}}}</p>           </div>         {{else}}           <div class="col-xs-12 col-sm-12 col-md-12">             <p>{{{top_paragraph}}}</p>           </div>         {{/if}}       <div name="ftr-spec-dynamic">             {{#each anchor}}               <div style="clear:both;">               {{#if this.h3_image}}                   <hr />                   <div class="col-xs-12 col-sm-3 col-md-3">                    <img src="{{this.h3_image}}" alt="{{this.h3_image_alt}}" style="max-width:100%;height:auto;">                   </div>                   <div class="col-xs-12 col-sm-9 col-md-9">                 <h3 style="text-decoration: underline;margin-top:0;">{{this.h3}}</h3><p>{{{this.h3_text}}}</p>                   </div>               {{else}}                 <hr />                 <div class="col-xs-12 col-sm-12 col-md-12">                   <div style="float:left;"><h3 style="text-decoration: underline;margin-top:0;">{{this.h3}}</h3><p>{{{this.h3_text}}}</p></div>                 </div>               {{/if}}           </div>             {{/each}}           </div>   </div>         {{/Helpers.Object.Lookup}}     {{/Helpers.Object.Compare}}    {{/Helpers.Path.GetKeyValuePairMatches}} {{/Helpers.Path.GetKeyValuePairMatches}}

 

The New master-styles.css file to be included. The following can be changed with a new HTML code for color. Can find one here. https://htmlcolorcodes.com/color-picker/ → YOU WANT TO GET THE “HEX” Value. Should always start with a “#”

Changeable Fields:

  • H2 Text Color

  • H3 Text Color

  • Paragraph Text Color

  • Background Color

  • Background Border (Top) - Color, Size, and Type (Also removable by removing that line)

  • Background Border (Bottom) - Color, Size, and Type (Also removable by removing that line)

/* ARI styles-master.css Template */ /* Change the Color of the H2 text Below */ .seofooter h2 {    color: #000000; } /* Change the Color of the H3 text Below */ .seofooter h3 {    color: #000000; } /* Change the Color of the paragraph text Below */ .seofooter p {    color: #000000; } /* Change the Color of the the border-top, border-bottom, and background-color Below */ .seofooter {    border-top: 1px #000000 solid;    border-bottom: 1px #000000 solid;    background-color: #ffffff;    padding: 0 15px 20px 15px;    margin: 0 auto 0 auto;    display: flex; } @media only screen and (max-width: 600px) {     h1 { font-size: 1.5rem; } } @media only screen and (min-width: 600px) {     h1 { font-size: 2.5rem; } } @media only screen and (min-width: 992px) {     h1 { font-size: 3.5rem; } }

You also required to go to the Layouts/Rows area and add a new class to the footer structure. See image below to see the layout:

Make sure that you add the “seofooter” class as an addition to the “container-fluid” class. Also change the default column class to “container” for the component.

All of this should be in a separate footer than the ACTUAL footer itself.

For Layouts you will need to access the Row that contains the custom component. Click on the pencil icon to edit.  Rename this to PageFooter Row and add ‘contain-fluid’ in-front of ‘seofooter’ in classes, then save and publish.