{"type":"doc","content":[{"type":"paragraph","content":[{"text":"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.","type":"text","marks":[{"type":"em"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Purpose","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This document provides the code to add the new ARI pagefooter element in order to add pagefooter content to webpages.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Procedure","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Add the lines of code in order for the new ARI pagefooter to update.","type":"text"}]},{"type":"paragraph","content":[{"text":"New Page Footer code:","type":"text"}]},{"type":"codeBlock","content":[{"text":"{{#Helpers.Path.GetKeyValuePairMatches Path.Parameters customDataModel.complex_lookups}}\n\n {{#Helpers.Object.Compare (Helpers.Object.GetLength this) 1 }}\n\n {{Helpers.Object.Lookup ../../customDataModel.ctas this.0.cta}}\n\n

\n\n

{{{h2}}}

\n\n

\n\n {{#if main_image_url}}\n\n

\n\n $\"{{main_image_url_alt}}\"$ \n\n

\n\n

{{{top_paragraph}}}

\n\n

\n\n {{else}}\n\n

\n\n

{{{top_paragraph}}}

\n\n

\n\n {{/if}}\n\n

\n\n {{#each anchor}}\n\n

\n\n {{#if this.h3_image}}\n\n

\n\n

\n\n $\"{{this.h3_image_alt}}\"$ \n\n

\n\n

{{{this.h3_text}}}

\n\n

\n\n {{else}}\n\n

\n\n

{{{this.h3_text}}}

\n\n

\n\n {{/if}}\n\n

\n\n {{/each}}\n\n

\n\n

\n\n {{/Helpers.Object.Lookup}}\n\n {{/Helpers.Object.Compare}}\n\n{{else}}\n\n {{#Helpers.Path.GetKeyValuePairMatches ../Path.Parameters ../customDataModel.single_lookups}}\n\n {{#Helpers.Object.Compare (Helpers.Object.GetLength this) 1 }}\n\n {{Helpers.Object.Lookup ../../customDataModel.ctas this.0.cta}}\n\n

\n\n

{{{h2}}}

\n\n

\n\n {{#if main_image_url}}\n\n

\n\n $\"{{main_image_url_alt}}\"$ \n\n

\n\n

{{{top_paragraph}}}

\n\n

\n\n {{else}}\n\n

\n\n

{{{top_paragraph}}}

\n\n

\n\n {{/if}}\n\n

\n\n {{#each anchor}}\n\n

\n\n {{#if this.h3_image}}\n\n

\n\n

\n\n $\"{{this.h3_image_alt}}\"$ \n\n

\n\n

{{{this.h3_text}}}

\n\n

\n\n {{else}}\n\n

\n\n

{{{this.h3_text}}}

\n\n

\n\n {{/if}}\n\n

\n\n {{/each}}\n\n

\n\n

\n\n {{/Helpers.Object.Lookup}}\n\n {{/Helpers.Object.Compare}}\n\n {{/Helpers.Path.GetKeyValuePairMatches}}\n\n{{/Helpers.Path.GetKeyValuePairMatches}}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"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. ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://htmlcolorcodes.com/color-picker/"}},{"text":" → YOU WANT TO GET THE “HEX” Value. Should always start with a “#”","type":"text"}]},{"type":"paragraph","content":[{"text":"Changeable Fields:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"H2 Text Color","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"H3 Text Color","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Paragraph Text Color","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Background Color","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Background Border (Top) - Color, Size, and Type (Also removable by removing that line)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Background Border (Bottom) - Color, Size, and Type (Also removable by removing that line)","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"/* ARI styles-master.css Template */\n\n/* Change the Color of the H2 text Below */\n\n.seofooter h2 {\n\n color: #000000;\n\n}\n\n/* Change the Color of the H3 text Below */\n\n.seofooter h3 {\n\n color: #000000;\n\n}\n\n/* Change the Color of the paragraph text Below */\n\n.seofooter p {\n\n color: #000000;\n\n}\n\n/* Change the Color of the the border-top, border-bottom, and background-color Below */\n\n.seofooter {\n\n border-top: 1px #000000 solid;\n\n border-bottom: 1px #000000 solid;\n\n background-color: #ffffff;\n\n padding: 0 15px 20px 15px;\n\n margin: 0 auto 0 auto;\n\n display: flex;\n\n}\n\n@media only screen and (max-width: 600px) {\n\n h1 { font-size: 1.5rem; }\n\n}\n\n@media only screen and (min-width: 600px) {\n\n h1 { font-size: 2.5rem; }\n\n}\n\n@media only screen and (min-width: 992px) {\n\n h1 { font-size: 3.5rem; }\n\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"All of this should be in a separate footer than the ACTUAL footer itself.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]}],"version":1}

{{{h2}}}

{{this.h3}}

{{this.h3}}

{{{h2}}}

{{this.h3}}

{{this.h3}}

Browser not supported