New Landing How can we help? Themeforest Theme Support Clique How do I add Tumblr, Instagram, and Bechance icons in the footer?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Posted in: Clique
  • #218226
    thehoboninja
    Member
    Post count: 8

    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?

    #218570
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    did you fill all your social profiles accounts?

    -Rui

    #218634
    thehoboninja
    Member
    Post count: 8

    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.”

    #218755
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    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

    #218957
    thehoboninja
    Member
    Post count: 8

    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.

    #219053
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    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

    #219479
    thehoboninja
    Member
    Post count: 8

    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.
    #219485
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    WordPress admin access will be enough.
    -Rui

    #219488
    thehoboninja
    Member
    Post count: 8
    This reply has been marked as private.
    #219653
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779
    #222067
    thehoboninja
    Member
    Post count: 8

    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?

    #222081
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

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

    #223015
    thehoboninja
    Member
    Post count: 8

    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.

    #223186
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    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

    #225246
    thehoboninja
    Member
    Post count: 8

    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));
    }

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register