Custom Social Icon For Footer

Support
#1

Hi everyone,

I am trying to add the social bar found on this site: www.truexteriors.ca to the footer of the new site I am developing www.blulionstaging.com.

I am not very good at coding, so I was wondering if someone here can help me with at least one of the following:

  1. Can just do it quickly if provided appropriate logins.
  2. Can provide me with instructions on how to do it.
  3. Know of a plug-in that does something similar.
  4. Knows a freelancer who won’t charge an arm and a leg for it.
#2

Hi There,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

First thing first, please update your X to the latest version (6.1.5), because you already updated the Cornerstone (3.1.5)

Updating Your Themes and Plugins

Only then you can have the Global Blocks feature, to do this please navigate to X > Global Blocks, then create a new Global Block (give it a descriptive name)

Add one Section and remove the spacing.

On that section add a Content Area element and paste this HTML markup in there.

<div class="footer-social">
	<label class="font-heading" for="">Follow us</label>
	<a target="_blank" href="#" title="Twitter">[x_icon type="twitter-square"]</a>
	<a target="_blank" href="#" title="Facebook">[x_icon type="facebook-square"]</a>
	<a target="_blank" href="mailto:#" title="Email">[x_icon type="envelope"]</a>
	<a target="_blank" href="#" title="RSS">[x_icon type="rss-square"]</a>
</div>

Replace the # with your actual social page URL.

Then add this to CSS area.

.footer-social {
	background-color: #0054a6 !important;
    float: left;
    padding: 10px 18.5px;
    color: #FFFFFF;
    background: #fab702;
    margin-top: -16px;
    position: relative;
}
.footer-social label {
display: inline;
margin-right: 12px;
}
.footer-social:after {
    border-right: 9px solid #777777;
    border-top: 16px solid transparent;
    content: "";
    display: block;
    height: 0;
    left: -9px;
    position: absolute;
    top: 0;
}

You’ll see that the bar is coming out now, but it does not look right. But that’s ok it will look right on an actual page. Save your Global Block navigate to your page.

On the page, add a new section on the bottom (before the footer), give this section the same background-color as the footer so they get blend, then remove the padding of that section, then add a Global Block element in it, the Global Block that you just created.



Have a nice weekend,
Cheers!

#3

Perfect, this solved the issue… but now my foot is appearing on the right side of the website. Any idea why?

#4

I used this line of code to move it back to the bottom. Still not sure what the root issue is though.

.x-root {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
footer.x-colophon.bottom {
width: 100%;
}

#5

Hi mrstreilein,

Please follow up the case here:

Thank you.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.