How do I add Tumblr, Instagram, and Bechance icons in the footer?

[thehoboninja]

Hello, I would like to know how to include other social media icons in my footer other than the ones available by default, but how can I do this?

[Rui Guerreiro – SUPPORT]

Hi,

did you fill all your social profiles accounts?

-Rui

[thehoboninja]

I did fill out my social profile accounts according to link/username (for tumblr, Behance, Instagram, LinkedIn, and Facebook). Under “Theme Options,” there are different sections for “Social Profile” and “Footer Options.” There are lots of social media options to fill out under “Social Profile,” but more limited options under “Footer Options.” The result is that I am stuck wondering how to add other social media icons in the footer beyond what is currently available in “Footer Options.”

[Rui Guerreiro – SUPPORT]

Hi,

If you want to add different social icons from the existing ones you will have to edit the file footer.php and add the desire link to the new social profile.

https://www.dropbox.com/s/njils3ctn9zqizt/Screenshot%202015-10-06%2011.00.54.png?dl=0

It will be also necessary to upload the new icons and create css to display them.

If necessary we can help to setup 1 new social profile so you can see how it’s done.

-Rui

[thehoboninja]

Thank you, being shown an example would be very helpful. How can you show me? I am a newbie, so please be thorough with your explanation. Again, thanks a bunch.

[Rui Guerreiro – SUPPORT]

need to know first what is the new social network, Name and link to your social network profile.
Also you will need to upload the logo with similar dimensions to the current one. You can attach it here.

Will also need ftp access.

-Rui

[thehoboninja]

Here is my Behance username/link:

danilopez
https://www.behance.net/danilopez

I have attached a Behance icon to this reply. Let me know if the dimensions need to be changed, though.

Also, what do you mean by FTP access? Do you mean access to my WordPress Dashboard?

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

WordPress admin access will be enough.
-Rui

[thehoboninja]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

It’s done. Have a look.
https://www.dropbox.com/s/uoyqfw10yz6z5qe/Screenshot%202015-10-09%2011.46.35.png?dl=0

-Rui

[thehoboninja]

Thanks, that looks great! Where can I find that code so I can make edits, too? Also, is it possible for you to give me more specific directions on duplicating the process (because I basically know nothing about coding)? For instance, in the link you sent me https://www.dropbox.com/s/njils3ctn9zqizt/Screenshot%202015-10-06%2011.00.54.png?dl=0 why do some of the social media profiles have links to the site while others do not?

[Mohammad – SUPPORT]

Hi,
We edited footer.php file to make this change. You can find the behance related code there.
Thanks
Mohammad

[thehoboninja]

Thank you for helping me. I’ve successfully added instagram and tumblr to my footer.php file and they successfully display on the website. The last part I am having trouble finding is how you were able to add the custom Behance image. I have the icons ready to go for tumblr and instagram. I check the css file and the only information I see about bechance is for positioning. I can’t even find where you added the Behance. Any help would be appreciated.

[Rui Guerreiro – SUPPORT]

Hi,

Check the attached image.

I added that custom css on the right of the image.
https://www.dropbox.com/s/zk4t6poma2i2yqz/Screenshot%202015-10-26%2009.35.59.png?dl=0

-Rui

[thehoboninja]

I figured it out. However, I am not sure where you put your css code for behance. I did not find it with the rest of the social media icon information, so I don’t know if you just put it in some random location.

On to my solution. To be clear, the information that you are looking for is going to be located in the footer.php file and the style.css file in your Solid Code Theme Editor found on the wordpress dashboard for your website. The footer.php is how you add the “link” to your footer and the style.css is how you add an image to this new “link”. The footer.php code will look like this:

<li class=”behance”>Behance

look for the following code in your footer.php if you are having trouble finding the right place

<li class=”twitter”

then in order to add an image to the new footer social media link, you will need to have the following code added to your style.css file. In order to find the right place to add this code, look for the following piece of information.

#footer-social-icons li. <– include the period in your search

and you should see a few examples with that format but it would be something more like

#footer-social-icons li.twitter a {
background-image: url(images/social/twitter.png);
}

Now the format that you are going to want will be something like this for behance.

#footer-social-icons li.behance a {
background-image: url(http://www.danilopezstudio.com/wp-content/uploads/2015/10/behance2-e1444386135359.png);
}

——————————————

To recap, add the following to footer.php:

<li class=”(insert social media name, i.e. twitter”>(insert what your want the link to say when you hover over it)

Then add the following to style.css

#footer-social-icons li.(inserts same social media name as in the li class=””) a {
background-image: url((insert the url of the image you want to be displayed in footer.php));
}