Edit - DigMS - Digital Marketing Services

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.