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:

1{{#Helpers.Path.GetKeyValuePairMatches Path.Parameters customDataModel.complex_lookups}} 2 3  {{#Helpers.Object.Compare (Helpers.Object.GetLength this) 1 }} 4 5    {{Helpers.Object.Lookup ../../customDataModel.ctas this.0.cta}} 6 7      <div id="dynamic-footer-{{id}}" style="padding-top:10px;"> 8 9        <div class="col-xs-12 col-sm-12 col-md-12"> 10 11          <h2 style="text-align:center;">{{{h2}}}</h2> 12 13        </div> 14 15        {{#if main_image_url}} 16 17          <div class="col-xs-12 col-sm-3 col-md-3"> 18 19            <img src="{{main_image_url}}" alt="{{main_image_url_alt}}" style="max-width:100%;height:auto;padding:0 0 0 10px;"> 20 21          </div> 22 23          <div class="col-xs-12 col-sm-9 col-md-9"> 24 25            <p>{{{top_paragraph}}}</p> 26 27          </div> 28 29        {{else}} 30 31          <div class="col-xs-12 col-sm-12 col-md-12"> 32 33            <p>{{{top_paragraph}}}</p> 34 35          </div> 36 37        {{/if}} 38 39      <div name="ftr-spec-dynamic"> 40 41            {{#each anchor}} 42 43              <div style="clear:both;"> 44 45              {{#if this.h3_image}} 46 47                <hr /> 48 49                  <div class="col-xs-12 col-sm-3 col-md-3"> 50 51                   <img src="{{this.h3_image}}" alt="{{this.h3_image_alt}}" style="max-width:100%;height:auto;"> 52 53                  </div> 54 55                  <div class="col-xs-12 col-sm-9 col-md-9"> 56 57                <h3 style="text-decoration: underline;margin-top:0;">{{this.h3}}</h3><p>{{{this.h3_text}}}</p> 58 59                  </div> 60 61              {{else}} 62 63                <hr /> 64 65                <div class="col-xs-12 col-sm-12 col-md-12"> 66 67                  <div style="float:left;"><h3 style="text-decoration: underline;margin-top:0;">{{this.h3}}</h3><p>{{{this.h3_text}}}</p></div> 68 69                </div> 70 71              {{/if}} 72 73          </div> 74 75            {{/each}} 76 77          </div> 78 79  </div> 80 81     {{/Helpers.Object.Lookup}} 82 83  {{/Helpers.Object.Compare}} 84 85{{else}} 86 87   {{#Helpers.Path.GetKeyValuePairMatches ../Path.Parameters ../customDataModel.single_lookups}} 88 89     {{#Helpers.Object.Compare (Helpers.Object.GetLength this) 1 }} 90 91      {{Helpers.Object.Lookup ../../customDataModel.ctas this.0.cta}} 92 93        <div id="dynamic-footer-{{id}}" style="padding-top:10px;"> 94 95        <div class="col-xs-12 col-sm-12 col-md-12"> 96 97          <h2 style="text-align:center;">{{{h2}}}</h2> 98 99        </div> 100 101        {{#if main_image_url}} 102 103          <div class="col-xs-12 col-sm-3 col-md-3"> 104 105            <img src="{{main_image_url}}" alt="{{main_image_url_alt}}" style="max-width:100%;height:auto;padding:0 0 0 10px;"> 106 107          </div> 108 109          <div class="col-xs-12 col-sm-9 col-md-9"> 110 111            <p>{{{top_paragraph}}}</p> 112 113          </div> 114 115        {{else}} 116 117          <div class="col-xs-12 col-sm-12 col-md-12"> 118 119            <p>{{{top_paragraph}}}</p> 120 121          </div> 122 123        {{/if}} 124 125      <div name="ftr-spec-dynamic"> 126 127            {{#each anchor}} 128 129              <div style="clear:both;"> 130 131              {{#if this.h3_image}} 132 133                  <hr /> 134 135                  <div class="col-xs-12 col-sm-3 col-md-3"> 136 137                   <img src="{{this.h3_image}}" alt="{{this.h3_image_alt}}" style="max-width:100%;height:auto;"> 138 139                  </div> 140 141                  <div class="col-xs-12 col-sm-9 col-md-9"> 142 143                <h3 style="text-decoration: underline;margin-top:0;">{{this.h3}}</h3><p>{{{this.h3_text}}}</p> 144 145                  </div> 146 147              {{else}} 148 149                <hr /> 150 151                <div class="col-xs-12 col-sm-12 col-md-12"> 152 153                  <div style="float:left;"><h3 style="text-decoration: underline;margin-top:0;">{{this.h3}}</h3><p>{{{this.h3_text}}}</p></div> 154 155                </div> 156 157              {{/if}} 158 159          </div> 160 161            {{/each}} 162 163          </div> 164 165  </div> 166 167        {{/Helpers.Object.Lookup}} 168 169    {{/Helpers.Object.Compare}} 170 171   {{/Helpers.Path.GetKeyValuePairMatches}} 172 173{{/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)

1/* ARI styles-master.css Template */ 2 3/* Change the Color of the H2 text Below */ 4 5.seofooter h2 { 6 7   color: #000000; 8 9} 10 11/* Change the Color of the H3 text Below */ 12 13.seofooter h3 { 14 15   color: #000000; 16 17} 18 19/* Change the Color of the paragraph text Below */ 20 21.seofooter p { 22 23   color: #000000; 24 25} 26 27/* Change the Color of the the border-top, border-bottom, and background-color Below */ 28 29.seofooter { 30 31   border-top: 1px #000000 solid; 32 33   border-bottom: 1px #000000 solid; 34 35   background-color: #ffffff; 36 37   padding: 0 15px 20px 15px; 38 39   margin: 0 auto 0 auto; 40 41   display: flex; 42 43} 44 45@media only screen and (max-width: 600px) { 46 47    h1 { font-size: 1.5rem; } 48 49} 50 51@media only screen and (min-width: 600px) { 52 53    h1 { font-size: 2.5rem; } 54 55} 56 57@media only screen and (min-width: 992px) { 58 59    h1 { font-size: 3.5rem; } 60 61}

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.