Adding Additional Social Media Icons (YouTube and Tumblr) to header « Support Forum | Kriesi.at

Support Forum » Habitat

Adding Additional Social Media Icons (YouTube and Tumblr) to header

5 posts from 2 voices

Started 3 months ago by lpionek
Latest reply from lpionek
This topic is closed
This topic is resolved

Tags:

lpionek
Member

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['includes']['acc_fl'] != '')
echo "<li class='youtube'>youtube";

if($k_option['includes']['acc_fl'] != '')
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: http://www.http://www.elizabeth-sauter.com/

Thank you!

Posted 3 months ago #

Ismael
Moderator

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

Posted 3 months ago #

lpionek
Member

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/

Posted 3 months ago #

Ismael
Moderator

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

Posted 3 months ago #

lpionek
Member

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!

Posted 3 months ago #