Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Clique › How do I add Tumblr, Instagram, and Bechance icons in the footer?
New Landing › How can we help? › Themeforest Theme Support › Clique › How do I add Tumblr, Instagram, and Bechance icons in the footer?
- This topic has 15 replies, 3 voices, and was last updated 9 years by Mohammad – SUPPORT.
-
Posted in: Clique
-
October 2, 2015 at 10:37 pm #218226
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?
October 5, 2015 at 4:48 pm #218570Hi,
did you fill all your social profiles accounts?
-Rui
October 5, 2015 at 8:00 pm #218634I 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.”
October 6, 2015 at 11:01 am #218755Hi,
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
October 7, 2015 at 3:57 am #218957Thank 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.
October 7, 2015 at 10:49 am #219053need 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
October 8, 2015 at 4:00 pm #219479Here is my Behance username/link:
danilopez
https://www.behance.net/danilopezI 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.October 8, 2015 at 4:06 pm #219485WordPress admin access will be enough.
-RuiOctober 8, 2015 at 4:11 pm #219488This reply has been marked as private.October 9, 2015 at 11:44 am #219653It’s done. Have a look.
https://www.dropbox.com/s/uoyqfw10yz6z5qe/Screenshot%202015-10-09%2011.46.35.png?dl=0-Rui
October 21, 2015 at 3:58 am #222067Thanks, 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?
October 21, 2015 at 8:18 am #222081Hi,
We edited footer.php file to make this change. You can find the behance related code there.
Thanks
MohammadOctober 23, 2015 at 10:03 pm #223015Thank 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.
October 26, 2015 at 10:36 am #223186Hi,
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
November 3, 2015 at 2:42 am #225246I 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));
} -
Posted in: Clique
You must be logged in and have valid license to reply to this topic.