Support Forum - Tag: social media icons

Support Forum - Tag: social media icons - Recent Posts http://www.kriesi.at/support/tags/social-media-icons Support Forum - Tag: social media icons - Recent Posts en-US Sat, 25 May 2013 15:27:26 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php achieve1 on "Social Media Icons - open in new window?" http://www.kriesi.at/support/topic/social-media-icons-open-in-new-window-1#post-105653 Mon, 15 Apr 2013 16:27:34 +0000 achieve1 105653@http://www.kriesi.at/support/ Awesome! Worked perfectly thanks so much!! Dude on "Social Media Icons - open in new window?" http://www.kriesi.at/support/topic/social-media-icons-open-in-new-window-1#post-105603 Mon, 15 Apr 2013 07:05:53 +0000 Dude 105603@http://www.kriesi.at/support/ Yes, open up wp-content\themes\flagship\includes\helper-social-media.php and replace: <pre><code>$html .= "<a href='".$icon['social_icon_link']."'>".ucfirst($icon['social_icon'])."</a>";</code></pre> with: <pre><code>$html .= "<a target='_blank' href='".$icon['social_icon_link']."'>".ucfirst($icon['social_icon'])."</a>";</code></pre> achieve1 on "Social Media Icons - open in new window?" http://www.kriesi.at/support/topic/social-media-icons-open-in-new-window-1#post-105546 Sun, 14 Apr 2013 18:56:21 +0000 achieve1 105546@http://www.kriesi.at/support/ I'd like to have the social media icons in the Flagship theme open in a separate window rather than take them off the site altogether when someone clicks on them. Is that possible? Thank you! Devin on "Adding Social Media Icons to HEADER" http://www.kriesi.at/support/topic/adding-social-media-icons-to-header#post-103370 Wed, 27 Mar 2013 19:11:11 +0000 Devin 103370@http://www.kriesi.at/support/ Glad we could help :) Let us know if you have any other questions or issues. Regards, Devin CopyCatFilms on "Adding Social Media Icons to HEADER" http://www.kriesi.at/support/topic/adding-social-media-icons-to-header#post-103357 Wed, 27 Mar 2013 18:41:00 +0000 CopyCatFilms 103357@http://www.kriesi.at/support/ Thanks much. This seems to be doing the trick. I just added the "noLightbox" class to the whole social links section of the header. It would be nice to open these in a new tab, but I'm happy that it's working as it is for now. Cheers, Farrin Devin on "Adding Social Media Icons to HEADER" http://www.kriesi.at/support/topic/adding-social-media-icons-to-header#post-103299 Wed, 27 Mar 2013 14:16:13 +0000 Devin 103299@http://www.kriesi.at/support/ Hi Farrin, Typically, I just suggest adding new links right into the header and then you just add the class noLightbox to each. For example: <code><a class="noLightbox" href="http://www.youtube.com/">Youtube</a></code> This would be in the header.php file. However, if you've gone the route from that topic and added in the new options, for the Youtube and Vimeo links you'll need to use a url obfiscator so that the theme doesn't automatically try and put them in a lightbox. So put the url for your vimeo page and youtube page in here: <a href="http://goo.gl/" rel="nofollow">http://goo.gl/</a> and then use the shorter url in place on the theme options. Regards, Devin CopyCatFilms on "Adding Social Media Icons to HEADER" http://www.kriesi.at/support/topic/adding-social-media-icons-to-header#post-103185 Tue, 26 Mar 2013 18:40:07 +0000 CopyCatFilms 103185@http://www.kriesi.at/support/ Actually...I guess I spoke too soon. It appeared to work by adding the direct url. But sometimes it tries to open the lightbox for the icons. So then I tried the CSS custom route and it's back to being broken. How can I disable lighbox for these icons? Thanks again CopyCatFilms on "Adding Social Media Icons to HEADER" http://www.kriesi.at/support/topic/adding-social-media-icons-to-header#post-103181 Tue, 26 Mar 2013 17:13:05 +0000 CopyCatFilms 103181@http://www.kriesi.at/support/ Perfect--thank you so much. :D Dude on "Adding Social Media Icons to HEADER" http://www.kriesi.at/support/topic/adding-social-media-icons-to-header#post-103089 Tue, 26 Mar 2013 06:31:03 +0000 Dude 103089@http://www.kriesi.at/support/ The url to the image is not valid. You've two options: 1) Insert the code into css/custom.css - then the relative url will work. 2) Use an absolute url instead: <pre><code>.social_bookmarks .instagram {background: transparent url(http://www.copycatfilms.com/wp-content/themes/angular/images/layout/icon-instagram.png) 0 center no-repeat; }</code></pre> CopyCatFilms on "Adding Social Media Icons to HEADER" http://www.kriesi.at/support/topic/adding-social-media-icons-to-header#post-103051 Tue, 26 Mar 2013 00:56:39 +0000 CopyCatFilms 103051@http://www.kriesi.at/support/ Hi--I followed the instructions in the previous thread about adding additional social media networks--I mean YouTube and Vimeo are not included, but Dribble is?? Anyway, it's now working. It gives me the pink hover, and the link works correctly, but the icon is not visible, nor does it roll like the others. Site: <a href="http://www.copycatfilms.com" rel="nofollow">http://www.copycatfilms.com</a> previous, closed thread: <a href="http://www.kriesi.at/support/topic/add-more-social-media-icons-to-header" rel="nofollow">http://www.kriesi.at/support/topic/add-more-social-media-icons-to-header</a> Thanks, Farrin Devin on "Change Social Media Icons" http://www.kriesi.at/support/topic/change-social-media-icons#post-102475 Thu, 21 Mar 2013 18:18:33 +0000 Devin 102475@http://www.kriesi.at/support/ Fantastic! I know its not a simple process so I'm glad you were able to get it taken care of as needed :) Make sure to keep a note of the change you made in a text file or something so that when it comes time to update you can easily do so and know where you've changed the files yourself. Regards, Devin bmbuke on "Change Social Media Icons" http://www.kriesi.at/support/topic/change-social-media-icons#post-102474 Thu, 21 Mar 2013 17:57:44 +0000 bmbuke 102474@http://www.kriesi.at/support/ Thanks for the reply Devin. I made some adjustments based on your instructions and got just what I wanted out of it. Thanks so much for the help! GabrielleB925 on "Add More Social Media Icons to header" http://www.kriesi.at/support/topic/add-more-social-media-icons-to-header#post-102277 Wed, 20 Mar 2013 15:28:49 +0000 GabrielleB925 102277@http://www.kriesi.at/support/ Hi Ismael, It worked! Thank you so much! Ismael on "Add More Social Media Icons to header" http://www.kriesi.at/support/topic/add-more-social-media-icons-to-header#post-102157 Wed, 20 Mar 2013 00:52:57 +0000 Ismael 102157@http://www.kriesi.at/support/ Hi, The image source is not correct. Add this on your custom.css <pre><code>.social_bookmarks .instagram { background: transparent url(../images/layout/icon-instagram.png) 0 center no-repeat; }</code></pre> I edited the icon you provided. Please download the instagram icon here and replace the old file. <a href="http://www.mediafire.com/view/?qrs4htor8yeuo8b" rel="nofollow">http://www.mediafire.com/view/?qrs4htor8yeuo8b</a> Regards, Ismael GabrielleB925 on "Add More Social Media Icons to header" http://www.kriesi.at/support/topic/add-more-social-media-icons-to-header#post-102127 Tue, 19 Mar 2013 20:08:50 +0000 GabrielleB925 102127@http://www.kriesi.at/support/ Ok, a little update..since I added our account info it now turns pink when you hover over it, but no icon shows. I'm convinced the file I uploaded is wrong or needs to be a specific size or style :-/ GabrielleB925 on "Add More Social Media Icons to header" http://www.kriesi.at/support/topic/add-more-social-media-icons-to-header#post-102104 Tue, 19 Mar 2013 17:51:57 +0000 GabrielleB925 102104@http://www.kriesi.at/support/ Hi Nick, I followed all of these steps in order to try to add Instagram to my Social Media Options and it's not working. It does show an extra box next to Twitter, but it all white. No color or image shows when you hover over it, however it does show on the bottom of my browser that it's linking to Instagram/kriesi. I just double checked to make sure I followed everything as instructed and I believe I did. The only thing I might think is wrong is the image I selected for the instagram icon, but not really sure of that. Any way you can help? Thanks so much :) Devin on "Change Social Media Icons" http://www.kriesi.at/support/topic/change-social-media-icons#post-101708 Mon, 18 Mar 2013 01:22:54 +0000 Devin 101708@http://www.kriesi.at/support/ Hi bmbuke, Not easily no. The hover effect actually expand into the icons next to it so not only would you have to move all of the css for :hover for the social icons, you would then need to add 10 or so pixels of space between each. The css for them is in layout.css lines 476-561. What would have to be done is add the background position of -43 to each of the regular states (lines 526-541) as well as the background color. Then add the new extra left and right margin amount to the #top .social_bookmarks li a on line 509. Regards, Devin bmbuke on "Change Social Media Icons" http://www.kriesi.at/support/topic/change-social-media-icons#post-101485 Fri, 15 Mar 2013 13:56:58 +0000 bmbuke 101485@http://www.kriesi.at/support/ I am wondering if there is an easy way to change the Social Media icons so that they don't dynamically change on hover? I would actually just like them to show up on the page with the colored circles already behind them and for nothing to happen when you hover. Is this possible? Dude on "Additional Social Media Icons" http://www.kriesi.at/support/topic/additional-social-media-icons#post-97997 Fri, 22 Feb 2013 08:46:45 +0000 Dude 97997@http://www.kriesi.at/support/ Hi! Thanks for the tutorial :) Regards, Peter Adswork on "Additional Social Media Icons" http://www.kriesi.at/support/topic/additional-social-media-icons#post-97942 Thu, 21 Feb 2013 22:29:24 +0000 Adswork 97942@http://www.kriesi.at/support/ I'm posting this here as a helper for anyone looking to add or adjust their social media icon in the Propulsion theme. This will setup the controls in the backend, allowing you to turn them on or off in the theme's control panel. In the file register-admin-options.php find the code that matches and add the following directly under (i have used Pinterest for this example): $avia_elements[] = array( "name" => "Pinterest", "desc" => "Enter your Pinterest link. If you leave this blank the Pinterest link in the head / footer of your site wont be displayed.", "id" => "Pinterest", "slug" => "avia", "std" => "", "type" => "text"); In the file footer.php find the code that matches and add the following directly under: if($Pinterest = avia_get_option('Pinterest')) { $social ++; echo "<li class='Pinterest'><a href='http://www.pinterest.com/".$Pinterest."'></a>"; } In the file layout.css find the code that matches and add the following directly under: .social_bookmarks .Pinterest a{background: transparent url(../images/layout/icon-pinterest.png) 0 0 no-repeat;} Hope this helps! Best, A. Nick on "Add More Social Media Icons to header" http://www.kriesi.at/support/topic/add-more-social-media-icons-to-header#post-95000 Mon, 04 Feb 2013 13:50:05 +0000 Nick 95000@http://www.kriesi.at/support/ Hi, You need to make the following edits for each additional social network that you add. Please remember that everything is case sensitive so keep everything in small letters for theme names except where the code below has capital letters for the social network name. . The name of social network is kept consistent throughout the steps below 1) Find an icon that makes sense and use ftp to upload it inside the theme folder to /images/layout/ sub-folder. make sure the name of the image is icon-name.png. It must be a png file, and it must have a prefix of icon- ... so icon-social_network_name.png is how yours would look 2) In the code below which is located in the theme folder in the /admin/register-admin-options.php on line 111. you would insert the block of code below for each new social network. You would replace the word 'dribbble' in all the parts below with whatever the name of the social network you are adding (1 word no spaces, if have two word use a dash - ,just keep it consistent <pre><code>$avia_elements[] = array( "name" => "Your dribbble account", //you account name, number on the social network "slug" => "avia",//don't change "desc" => "Enter your dribbble account name. If you leave this blank the dribbble link in the head of your site wont be displayed.", "id" => "dribbble", //change to 1 word of new social network , no spaces "std" => "Kriesi", //this is initial value, just put same here as you wrote in 'name' above. "type" => "text"); //don't change</code></pre> 3. Add the code below to the bottom of your /css/custom.css file or in the backend of your theme add it to the bottom of the Quick CSS text area located in Angular > Theme Options > Styling.. .on bottom of the page. Don't forget to change dribbble to the same one word name of the new frame social network <pre><code>.social_bookmarks .dribbble:hover{background-position: -42px center; background-color:#e44885;} .social_bookmarks .dribbble{background: transparent url(../images/layout/icon-dribbble.png) 0 center no-repeat;}</code></pre> 4) In header.php please add the line below after chaning dribble to your social network name, in between any of the lines 122-126, based on where you want it to show up related to it neighbor icons. Also please change the your-social-network.url in the line below <pre><code>if($dribbble = avia_get_option('dribbble')) { $social ++; echo "<li class='dribbble'><a href='http://YOUR-SOCIAL-NETWORK-URL.com/".$dribbble."'>".__('Follow us on dribbble', 'avia_framework')."</a></li>"; }</code></pre> Thanks, Nick sneedesign on "Add More Social Media Icons to header" http://www.kriesi.at/support/topic/add-more-social-media-icons-to-header#post-94842 Sun, 03 Feb 2013 18:31:15 +0000 sneedesign 94842@http://www.kriesi.at/support/ How do I add more social media icons to the top header of Angular? I've seen lots of other sites using this theme add Instagram, Behance, etc.. in addition to the default Facebook, Twitter, Google+. I'm sure it's probably pretty easy, but I can't find any documentation or previous threads discussing this. Help? Dude on "Custom Social Media icons" http://www.kriesi.at/support/topic/custom-social-media-icons#post-93153 Thu, 24 Jan 2013 07:49:30 +0000 Dude 93153@http://www.kriesi.at/support/ Hi, Replace: <pre><code>echo "<li class='youtube'><a href='http://www.youtube.com/channel/UC0LkfJMe5NW3t4YST6oMrBQ'>Follow us on YouTube</a></code></pre> with: <pre><code>echo "<li class='youtube'><a href='http://www.youtube.com/channel/UC0LkfJMe5NW3t4YST6oMrBQ' class='noLightbox'>Follow us on YouTube</a></code></pre> orioshilario on "Custom Social Media icons" http://www.kriesi.at/support/topic/custom-social-media-icons#post-92994 Wed, 23 Jan 2013 11:37:52 +0000 orioshilario 92994@http://www.kriesi.at/support/ I need put on header youtube, I done the instructions I found in another topic, I need a little help: My final html code is: <li class="youtube"> href="http://www.youtube.com/channel/UC0LkfJMe5NW3t4YST6oMrBQ" rel="lightbox[auto_group1 how I can remove rel="lightbox[auto_group1]" ? This is my customitazion on header.php {$social ++;echo "<li class='youtube'>a href='http://www.youtube.com/channel/UC0LkfJMe5NW3t4YST6oMrBQ'>Follow us on YouTube</-a>";} I have done de css classes and I upload the icon, try all possible actions, but reslout is the same. I'll be grateful for any help JoeLamari on "Additional Social Media Icons" http://www.kriesi.at/support/topic/additional-social-media-icons-1#post-92432 Sat, 19 Jan 2013 18:59:59 +0000 JoeLamari 92432@http://www.kriesi.at/support/ Thanks Peter...Joe Dude on "Additional Social Media Icons" http://www.kriesi.at/support/topic/additional-social-media-icons-1#post-92392 Sat, 19 Jan 2013 09:19:38 +0000 Dude 92392@http://www.kriesi.at/support/ Hi! Afaik Kriesi uses the free iconsweet icons: <a href="http://www.iconsweets2.com/" rel="nofollow">http://www.iconsweets2.com/</a> Regards, Peter JoeLamari on "Additional Social Media Icons" http://www.kriesi.at/support/topic/additional-social-media-icons-1#post-92242 Fri, 18 Jan 2013 14:05:15 +0000 JoeLamari 92242@http://www.kriesi.at/support/ Hi All, Where can I find the additional social media icons that are the same style that is used in Propulsion (for example Google+)? Thanks Joe Devin on "Adding New Social Media Icons" http://www.kriesi.at/support/topic/adding-new-social-media-icons#post-90093 Fri, 04 Jan 2013 18:33:13 +0000 Devin 90093@http://www.kriesi.at/support/ Hi Naomi, For Flashlight, the social_bookmarks list is in the sidebar.php file. However, it doesn't have a lot of room to add additional icons so I would actually recommend just adding your new social media icons to a widget and have that displayed in the widget area "Displayed Everywhere (left)", That will give you the most simple way to control your new icons. Otherwise, you can just add more list items to the code in sidebar.php and adjust the css as needed with the additional icons. Regards, Devin nleeman on "Adding New Social Media Icons" http://www.kriesi.at/support/topic/adding-new-social-media-icons#post-90018 Fri, 04 Jan 2013 07:05:42 +0000 nleeman 90018@http://www.kriesi.at/support/ Hello, I would like to add Pinterest and other social media icons to the left sidebar at the bottom. I have the new icons uploaded to the server, but I cannot seem to get the code to work correctly (copying from other code found on this forum, but regarding a different theme). What code should I use and where should I add it? Thanks in advance for your help! Naomi Devin on "Additional Social Media Icons" http://www.kriesi.at/support/topic/additional-social-media-icons#post-88641 Mon, 17 Dec 2012 18:52:49 +0000 Devin 88641@http://www.kriesi.at/support/ Hi Frank, We'll need to see the page and icons live to give any kind of adjustment at this point. Just need a frame of reference to see what you have now and what else needs to be modified. For the footer icons, you just need to add the same list items with your google+ and pinterest code to the list there. Again, some minor adjustment may need to be done. Regards, Devin