Picture of Cormac O'Keeffe
Re: Footer across all pages
by Cormac O'Keeffe - Thursday, 13 October 2016, 1:28 PM
 

Hi, 

I added a footer to appear across all pages by adding the HTML to: 

page.hbs

<!--added footer and font awesome icons-->
<div class="page-footer">
<div class="left">
<a href="http://www.instagram.com" style="text-decoration:none" target="_blank">
<i class="fa fa-paper-plane"></i>
</a> <a href="http://www.instagram.com" target="_blank"> Get in touch!
</a>
</div>

<div class="right">
<a href="http://www.linkedin.com/company/4986164" style="text-decoration:none" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="http://www.linkedin.com/company/4986164" style="text-decoration:none" target="_blank">
<i class="fa fa fa-youtube" aria-hidden="true"></i>
</a>
<a href="http://www.linkedin.com/company/4986164" style="text-decoration:none" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>

and styling here: 

page.less

 

/* added page footer styling */

.page-footer {
padding: 75px 7% 100px 7%;
color: @primary-color-inverted;
background-color: @primary-color;
text-color: @primary-color-inverted;

/* visited link */
a:visited {
color: white;
text-decoration: none;
}

/* mouse over link */
a:hover {
color: hotpink;
text-decoration: underline;
}

/* selected link */
a:active {
color: blue;
}
img {
padding: 0px 8px;
height: 20px;
&.xl {
height: 35px;
}
}
.left { float: left; }
.right { float: right; }
}

}

 

These files are both found in the theme folder. I got the idea (and most of the code) from Tom Taylor's theme here: 

https://github.com/taylortom/adapt-theme-community

You'll have noticed the font awesome CSS but that's a whole other story. The above theme uses images and this is less complex to add.