[Support request] How to add LinkedIn and YouTube clickable icons to footer area; plus 1 more

[Linda]

Hi and happy September – where did summer go?

Doing last minute edits on our new site and came up with 2 footer issues I can’t figure out.

1. How to add LinkedIn and YouTube clickable links/icons to the existing footer area.
2. How to make company name in footer with copyright symbol a clickable link.

Can you please help me with this? Or direct me to where I can find an answer?

Thanks for your help,

Linda

[David]

Hi there,

1. You can use the Lightweight Social Icons plugin:

https://en-gb.wordpress.org/plugins/lightweight-social-icons/

2. The copyright info accepts HTML. So you can wrap your content in an anchor tag:

<a href="add_your_url_to_site">My copyright info</a>

[Linda]

Hi David,

Thanks for your usual prompt and helpful reply! 🙂

One further question re. the icons: how can I (or can I) place them within the current footer, between the copyright info and the privacy/terms of use on the right?

Linda

[David]

There is the Footer Bar widget area you can add the icon widget to. Once its in place i can provide some CSS to position them if required.

[Linda]

Thanks, David. I had looked there, but will check it out again to see if I can figure out how they go in. Will post back with how I do. Appreciate your offer for CSS if needed.

By the way, your HTML for the company link in the footer worked perfectly! 🙂

Linda

[David]

You’re welcome – let us know

[Linda]

Well, David, 3 hours later and I still can’t get the footer area to look the way I’d like.

Good news is that I found the Footer Bar in Customizer and got the 2 icons in, using a plugin I’d been using: SiteOrigin and its Social Media buttons. If you can check, you’ll see they went onto a line below the first.

What I was trying to make the footer bar look like:
Line 1: More (the word as text) followed by LinkedIn and YouTube icons
Line 2: As it is now: Copyright and page link with Privacy and Terms on right.
Line 3: Gone since it will be above Line 2.

Tried to get them above that line. Went to Footer, added it above the footer bar, made its colour match the bar, and adjusted its margins so it was narrow.

Then I tried to add the 2 icons in that location. I tried adding widget areas to the Footer, but that didn’t work. Somehow, when I went in to the “new” footer area, my copyright info was there. Deleting it also removed it from where it should be. After working on this for awhile, I did get LI to go above, but YouTube went below that. I think that’s because I figured it would go in a second Footer Widget, but it should go in the first widget area with, LI???

I’m obviously totally confused re. footer, footer widgets, footer bar. Is there something I could study to clear this up or do you have a solution I could implement to make it look as imagined.

Sorry I couldn’t report success and am bugging you for more help and guidance!

Linda

[David]

Just so i understand, in your footer you want to display:

Top line: Social Icons prefixed with the word “More”
Bottom line: Your copyright info and the links to the side as it displays now.

If this is all you require in the footer then:

1. Customizer > Layout > Footer and set the number of footer widgets to 1.
2. Customizer > Widgets > Footer – remove the current widgets you have and add the Social Icons widget and edit the Title of the Widget to say: More.
3. Remove the social icons from the Footer Bar widget.

If this gets them in the right order and my assumptions are correct let me know. And ill help with the alignment.

[Linda]

Your assumptions were 100% correct. I followed your instructions and got everything in order (https://new.mygoforthegreen.com). Great!

Some Issues

1. Couldn’t get the footer area back to its original narrow height. I set all the margins (except bottom) to 0, but it remained the same height.
2. Footer width: should its margins be 20 instead of 0, which I set them at? Noticed the green CTA is narrower than the footer so wondered if I’d “over-widthed” the footer?
3 How do I prevent “back to the top” icon from overlapping other items?
4. Titled the social icons “More”, but it doesn’t show up. If this is a hassle, I’ll forget about it for now.

Thank you very much for your help and so easy to follow instructions! I think we’re almost there!

Linda

[David]

Ok:

1. Customizer > Widgets > Footer. You have a Text Widget before the social icons widget. Remove that.
2. Customizer > Colors > Footer Widgets –> Widget Title set this to white.
3. Then add this CSS:

.so-widget-sow-social-media-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em !important;
}
.so-widget-sow-social-media-buttons h2.widget-title {
    margin-bottom: 0;
    margin-right: 1em;
}

@media(min-width: 769px) {
    .so-widget-sow-social-media-buttons {
        justify-content: flex-end;
    }
}

[Linda]

Magic, David! Your CSS aligned everything perfectly. Fabulous … and thank you!

I fiddled with the footer/footer widget margins and got them more in line with the page width. Doing so also put the “back to the top” icon further to the right so it doesn’t cover any text. Yay!

It looks so much better and exactly as I’d hoped it would. Your help is invaluable and your generosity in offering it is very much appreciated!

We plan to launch this week … at last. I have a couple of questions re. appearance on mobile (will post later) and that’s it. 🙂

Thank you times 100,

Linda

[David]

You’re more than welcome – glad to be of help

[Author]

Posts