Custom Footer in Backlight 1.2 (Pangolin)

Custom footer via phplugins

This is a fairly straightforward use of phplugins but it requires some html to provide the structure for the footer as well as some custom css to style the social media icons. These icons are links to my social media sites, but you can just as easily use code for social sharing.

One not so obvious thing that will also need to be done is to disable the bottom pallet. In your Backlight page template, go to Footer. Turn off the Bottom Pallet/Copyright.

Turn off Bottom Pallet

Here’s the code I used in my phplugins file. The html for the footer was taken directly from my Backlight 1.1.1 site. I just viewed the page source code and copied it. No coding magic here on my part, this is all Matt’s. I then needed to write some css to style things a bit. Be sure to use your own urls and your own beginning date for the copyright. If your not yet familiar with using phplugins, see the documentation here. To implement custom css, see the documentation here.

//Footer replacement

function ttg_footer_top( $style, $path) {

echo '
<div class="grid_12" id= "footer">

<div class= "col_8">
<p>All content &copy;1992-' . date("Y") . ' Your Name, all rights reserved.
</br>Powered by <a href="http://theturninggate.net">The Turning Gate</a>
</div>

 

<div class="social-media-profiles social-media col_4">

<ul class="clearfix">
<li class="social-bg rss"><a href="http://www.rodbarbee.com/blog/rss/" onclick="window.open(this.href); return false;" title="RSS"><i class="fa fa-rss aria-hidden="true"></i></a></li>
<li class="social-bg instagram"><a href="https://www.instagram.com/rodbarbee/" onclick="window.open(this.href); return false;" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li class="social-bg facebook"><a href="http://www.facebook.com/RodBarbeePhotography" onclick="window.open(this.href); return false;" title="Facebook"><i class="fa fa-facebook aria-hidden="true""></i></a></li>
<li class="social-bg twitter"><a href="http://twitter.com/RodBarbeePhoto" onclick="window.open(this.href); return false;" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>

</ul>

</div> <!-- #social-media-profiles -->

</div>
';
return false;
}



// END

And here’s the css I’m using to style the footer. Adjust colors, margins, and padding to your own needs:

/*Custom footer
==============================================*/
footer {
background-color: white;
border-top: 1px solid black;

}

.social-media-profiles ul {
float: right;
margin: 1.5rem auto;
max-width: 157px;
padding: 0;
position: relative;
}

.social-media-profiles ul li {
float: left;
list-style-type: none;
margin: 0 2px 4px;
padding: 0 4px
}

li.social-bg {
background-color: #008000;
border-radius: 5px;
}

li.social-bg a {
color: white;
}

li.social-bg a:hover {
text-decoration: none;
}

@media screen and ( max-width: 1023px ) {
#footer {
padding: 0 4px;
}
#footer p {
text-align: center;
}
.social-media-profiles ul {
float: none;
}
}

The css above gives all the social media icons the same colors. If you wish them to have individual background colors, for example, just remove the rule that controls the icon background-color and replace it with rules addressing the classes of each icon.

li.social-bg {
border-radius: 5px;
}
li.social-bg a {
color: white;
}

li.social-bg facebook{
background-color: #0000FF;
}

li.social-bg twitter {
background-color: #FDFFF4;
}


etc.....

You can do something similar for the icons themselves by individualizing the rules governing color.

Same thing, only with the new Pangolin code

Here’s the html for the phplugins file:

<div class="grid_12" id= "footer">

<div class= "col_8">
<p>All content &copy;1992-' . date("Y") . ' Your Name, all rights reserved.
</br>Powered by <a href="http://theturninggate.net">The Turning Gate</a>
</div>

<div class="social-media-profiles social-media col_4">
<ul>
<li><a target="_blank" href="http://www.yoursite.com/blog/rss/" class="social_media fa fa-rss"></a></li>
<li><a target="_blank" href="https://www.instagram.com/your-profile/" class="social_media fa fa-instagram"></a></li>
<li><a target="_blank" href="https://www.facebook.com/your-profile/" class="social_media fa fa-facebook"></a></li>
<li><a target="_blank" href="https://twitter.com/your-profile" class="social_media fa fa-twitter"></a></li>
</ul>

</div> <!-- #social-media-profiles -->

</div>

And here’s the custom css:

/*Custom footer with Pangolin social media code*/

.pages-template-id-64 footer {
background-color: white;
border-top: 1px solid black;

}

.social-media-profiles ul {
float: right;
margin: 1.5rem auto;
max-width: 157px;
padding: 0;
position: relative;
}

.social-media-profiles ul li {
float: left;
list-style-type: none;
margin: -8px 4px 4px;
padding: 0 4px;
background-color: #008000;
border-radius: 6px
}

.social-media-profiles a.social_media {
text-decoration: none;
color: white
}

@media screen and ( max-width: 1023px ) {
#footer {
padding: 0 4px 12px;

}
#footer p {
text-align: center;
}
.social-media-profiles ul {
float: none;
}
}

Adjust any widths, colors, etc. to your own needs.

2 thoughts on “Custom Footer in Backlight 1.2 (Pangolin)”

    1. Note that the social media profile code was taken from Backlight 1.1.1. I’ll probably be modifying this post with code that uses the new Pangolin-based code. I won’t remove the current code shown, but add the alternate code.
      ….and done! Pangolin code included at the end of original post.

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.3
Pages module 1.2.3
Cart Add-on 4.1.5
Client Response Add-on 7.1.2
Theater Add-on 1.2.4
WordPress Add-on 1.2.3
Publisher 3.2.2

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts