Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #20447

    Hello,

    I have looked into other theme forums for adding additional social media icons (YouTube and Tumblr to be specific) to the header along with the pre-loaded twitter and facebook icons. I downloaded the matching icons suggested with the theme (http://www.komodomedia.com/download/#social-network-icon-pack) and placed in habitat/images/shared folder with the names youtube_16.png and tumbler_16.png.

    I added code to header.php under the pre-loaded icons:

    if($k_option != ”)

    echo “<li class=’youtube’>youtube“;

    if($k_option != ”)

    echo “<li class=’tumblr’>tumblr“;

    However, I’m not sure where to add the link to the pngs so they will show up. So far, nothing has changed on the website with the addition of code. Please let me know if I need to change any of the code above. You can see the website I am working on here: www.http://www.elizabeth-sauter.com/

    Thank you!

    #107674

    Hi Ipionek,

    For those two icons, just add this after your twitter:

    echo "<li class='youtube'><a class='ie6fix' href='http://YOUTUBE_LINK'>youtube</a></li>";
    echo "<li class='tumbler'><a class='ie6fix' href='http://TUMBLER_LINK'>tumbler</a></li>";

    add your images/icons here: wp-content/themes/habitat/images/shared/

    then finally, add this at the bottom of style.css:

    .social_bookmarks .youtube a {
    background: transparent url(../images/shared/youtube_16.png) 0 0 no-repeat;
    }
    .social_bookmarks .tumbler a {
    background: transparent url(../images/shared/tumbler_16.png) 0 0 no-repeat;
    }

    Hope this helps.

    Regards,

    Ismael

    #107675

    Hello again,

    So I have attempted this a few times in the past few days, and it isn’t quite working. I believe the first set of coding added to header.php works as spots are created and when you hover over the areas (though nothing there) you can still get to the links. However, when I click on you YouTube invisible button spot, a pop-up shows up that says “Image cannot be loaded. Make sure the path is correct and image exist.” I have checked the path, and it is placed in the code correctly (http://www.youtube.com/elizabethsauter). Additionally, it looks like the webpage is attempting to open a video (screen darkens, and process ticker shows up momentarily before “Image cannot be loaded…” message pops up. The Tumblr link works fine, but right now it is an invisible button as well.

    The invisible button part makes me think that there is something wrong with the 2nd line of code associated with style.css. However, the file names and location of the placed files are there. Should I replace the “…” portion of the retrieval link? I tried changing this as well in a few attempts and it didn’t work.

    I hope there is some solution as I feel like we are almost there, but something is slightly off. Thank you for your continuation of help.

    http://www.elizabeth-sauter.com/

    #107676

    Hi Ipionek,

    Kindly open style.css and find this code (the code I gave above):

    .social_bookmarks .youtube a {
    background: transparent url(../images/shared/youtube_16.png) 0 0 no-repeat;
    }
    .social_bookmarks .tumbler a {
    background: transparent url(../images/shared/tumbler_16.png) 0 0 no-repeat;
    }

    replace it with:

    .social_bookmarks .youtube a {
    background: transparent url(images/shared/youtube_16.png) 0 0 no-repeat;
    }
    .social_bookmarks .tumbler a {
    background: transparent url(images/shared/tumbler_16.png) 0 0 no-repeat;
    }

    Hope this helps.

    Regards,

    Ismael

    #107677

    Great! Everything is working perfectly. Thank you for your help. I also figured out that the original YouTube link prompts the website to attempt to open the page, for whatever reason, but I made the YouTube link into a bitmark, it works fine and goes directly to the page requested without a problem.

    Thank you for your help and patience!

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Adding Additional Social Media Icons (YouTube and Tumblr) to header’ is closed to new replies.