http://www.kriesi.at/support/topic/adding-additional-social-media-icons-youtube-and-tumblr-to-header Support Forum - Topic: Adding Additional Social Media Icons (YouTube and Tumblr) to header en-US Tue, 21 May 2013 07:55:07 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/adding-additional-social-media-icons-youtube-and-tumblr-to-header#post-98052 Fri, 22 Feb 2013 14:43:21 +0000 lpionek 98052@http://www.kriesi.at/support/ <p>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. </p> <p>Thank you for your help and patience! </p> http://www.kriesi.at/support/topic/adding-additional-social-media-icons-youtube-and-tumblr-to-header#post-97774 Thu, 21 Feb 2013 08:23:04 +0000 Ismael 97774@http://www.kriesi.at/support/ <p>Hi Ipionek,</p> <p>Kindly open style.css and find this code (the code I gave above):<br /> <pre><code>.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; }</code></pre> <p>replace it with:<br /> <pre><code>.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; }</code></pre> <p>Hope this helps.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/adding-additional-social-media-icons-youtube-and-tumblr-to-header#post-97747 Thu, 21 Feb 2013 05:32:13 +0000 lpionek 97747@http://www.kriesi.at/support/ <p>Hello again, </p> <p>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 (<a href="http://www.youtube.com/elizabethsauter)" rel="nofollow">http://www.youtube.com/elizabethsauter)</a>. 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. </p> <p>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. </p> <p>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.</p> <p><a href="http://www.elizabeth-sauter.com/" rel="nofollow">http://www.elizabeth-sauter.com/</a> </p> http://www.kriesi.at/support/topic/adding-additional-social-media-icons-youtube-and-tumblr-to-header#post-97181 Mon, 18 Feb 2013 07:33:04 +0000 Ismael 97181@http://www.kriesi.at/support/ <p>Hi Ipionek,</p> <p>For those two icons, just add this after your twitter:<br /> <pre><code>echo &quot;&lt;li class=&#39;youtube&#39;&gt;&lt;a class=&#39;ie6fix&#39; href=&#39;http://YOUTUBE_LINK&#39;&gt;youtube&lt;/a&gt;&lt;/li&gt;&quot;; echo &quot;&lt;li class=&#39;tumbler&#39;&gt;&lt;a class=&#39;ie6fix&#39; href=&#39;http://TUMBLER_LINK&#39;&gt;tumbler&lt;/a&gt;&lt;/li&gt;&quot;;</code></pre> <p>add your images/icons here: wp-content/themes/habitat/images/shared/<br /> then finally, add this at the bottom of style.css:<br /> <pre><code>.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; }</code></pre> <p>Hope this helps.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/adding-additional-social-media-icons-youtube-and-tumblr-to-header#post-97159 Mon, 18 Feb 2013 06:33:29 +0000 lpionek 97159@http://www.kriesi.at/support/ <p>Hello, </p> <p>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 (<a href="http://www.komodomedia.com/download/#social-network-icon-pack" rel="nofollow">http://www.komodomedia.com/download/#social-network-icon-pack</a>) and placed in habitat/images/shared folder with the names youtube_16.png and tumbler_16.png. </p> <p>I added code to header.php under the pre-loaded icons: </p> <p>if($k_option['includes']['acc_fl'] != '')<br /> echo "&lt;li class='youtube'&gt;<a>youtube</a>";</p> <p> if($k_option['includes']['acc_fl'] != '')<br /> echo "&lt;li class='tumblr'&gt;<a>tumblr</a>";</p> <p>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: <a href="http://www.http://www.elizabeth-sauter.com/" rel="nofollow">http://www.http://www.elizabeth-sauter.com/</a></p> <p>Thank you! </p>