[GUIDE] Social Buttons in Footer 3.9.1

Social buttons in the footer

Well, it’s very easy and you are done within a few steps. However, I recommend using this with the split front-page. It will look more natural.

Let’s begin

– Locate the folder custom_hooks (normal path for this is “/app/themes/Peafowl/custom_hooks/”
– Open the file “footer.sample.php” with notepad++

Now in this file this is where the action happens. We need to insert some code here for it to work as we want. If you delete all the content in this file and replace it with this code:

<?php if(!defined('access') or !access) die('This file cannot be directly accessed.'); ?>
<?php /* Add your custom PHP/HTML code in this file */ ?>

    <ul class="mendi-social-networks">
        <li class="facebook">
            <a href="https://www.facebook.com/photolandio/" title="Photoland on Facebook">
                <i class="fa fa-facebook"> </i>
                <p>JOIN US ON FACEBOOK</p>
                <span class="followers">and share your photos</span>
            </a>
        </li>
        <li class="twitter">
            <a href="https://twitter.com/photolandio" title="Photoland on Twitter">
                <i class="fa fa-twitter"> </i>
                <p>FOLLOW US ON TWITTER</p>
                <span class="followers">Monthly photo award</span>
            </a>
        </li>
    </ul>
<div id="powered-by" class="footer">Social Buttons by <a href="https://photoland.io" rel="generator">Photoland</a> image hosting</div>


<script src="https://use.fontawesome.com/5a9643cca3.js"></script>

</body>
</html>

Now you save this file as “footer.php” in your “custom_hooks” folder. The system will now call this file next time you hit refresh.

– Next step is to insert some custom CSS. This can be done from your admin panel.
– Go to “settings” tab and “theme”
– Scroll down to where you can add custom CSS and add this code:

.mendi-social-networks {
    width: 100%;
    margin: 0;
}
.mendi-social-networks li {
    float: left;
    display: inline;
    width: 50%;
    color: #ffffff;
    position: relative;
}
.mendi-social-networks li i {
    font-size: 50px;
    float: left;
    width: 60px;
}
.mendi-social-networks li a {
    color: #ffffff;
    padding: 25px 65px 25px 40px;
    float: left;
    width: 100%;
    box-sizing: border-box;

}
.mendi-social-networks li a:hover {
     text-decoration:none;
}
.mendi-social-networks li p {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 2px 0 0px;
}
.mendi-social-networks li .followers {
    text-transform: uppercase;
}
.mendi-social-networks li:before {
    position: absolute;
    content: "\f105";
    right: 30px;
    top: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
    border: 1px solid #ffffff;
    border-radius: 30px;
    margin: auto;
    font-size: 18px;
    font-family: FontAwesome;
    color: #ffffff;
    text-align: center;
    line-height: 26px;
}
.mendi-social-networks li:hover:before {
    background-color: #ffffff;
    color: #999999;
}
.mendi-social-networks li.facebook {
    background-color: #4d6bab;
}
.mendi-social-networks li.twitter {
    background-color: #4ec6f8;
}
.mendi-social-networks li.googleplus {
    background-color: #d34836;
}
.mendi-social-networks li.linkedin {
    background-color: #248cc9;
}

– If you want to add Google+ and Linkedin add this code instead of the first one in “footer.php”

<?php if(!defined('access') or !access) die('This file cannot be directly accessed.'); ?>
<?php /* Add your custom PHP/HTML code in this file */ ?>

    <ul class="mendi-social-networks">
        <li class="facebook">
            <a href="https://www.facebook.com/photolandio/" title="Photoland on Facebook">
                <i class="fa fa-facebook"> </i>
                <p>JOIN US ON FACEBOOK</p>
                <span class="followers">and share your photos</span>
            </a>
        </li>
        <li class="twitter">
            <a href="https://twitter.com/photolandio" title="Photoland on Twitter">
                <i class="fa fa-twitter"> </i>
                <p>FOLLOW US ON TWITTER</p>
                <span class="followers">Monthly best photo award</span>
            </a>
        </li>
    </ul>
    <li class="googleplus">
            <a href="" title="">
                <i class="fa fa-google-plus"> </i>
                <p>ADD TO OUR CIRCLE</p>
                <span class="followers">268K Followers</span>
            </a>
        </li>
        <li class="linkedin">
            <a href="" title="">
                <i class="fa fa-linkedin"> </i>
                <p>CONNECT TO OUR NETWORK</p>
                <span class="followers">268K Followers</span>
            </a>
        </li>
<div id="powered-by" class="footer">Social Buttons by <a href="https://myimg.io" rel="generator">MYIMG</a> image hosting</div>


<script src="https://use.fontawesome.com/5a9643cca3.js"></script>

</body>
</html>

– If you want 4 buttons in there you need to adjust the CSS.
– With 4 buttons change the width to 25% instead of 50%

Example:

.mendi-social-networks li {
    float: left;
    display: inline;
    width: 25%;   <--*! change to 50% for 2 buttons !--->
    color: #ffffff;
    position: relative;
}
If you have any questions, feel free to ask.
Please follow and like us:

Leave a Reply