http://www.kriesi.at/support/tags/social-icons Support Forum - Tag: social icons - Recent Posts en-US Tue, 21 May 2013 07:41:35 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/angular-social-media-icons-background-color#post-110988 Tue, 14 May 2013 01:33:20 +0000 Ismael 110988@http://www.kriesi.at/support/ <p>Hi,</p> <p>They are already transparent. You can check the css style on css &gt; layout.css</p> <pre><code>.social_bookmarks .rss{background: transparent url(../images/layout/icon-rss.png) 0 center no-repeat;} .social_bookmarks .facebook{background: transparent url(../images/layout/icon-facebook.png) 0 center no-repeat;} .social_bookmarks .twitter{background: transparent url(../images/layout/icon-twitter.png) 0 center no-repeat;} .social_bookmarks .mail{background: transparent url(../images/layout/icon-mail.png) 0 center no-repeat;} .social_bookmarks .dribbble{background: transparent url(../images/layout/icon-dribbble.png) 0 center no-repeat;} .social_bookmarks .linkedin{background: transparent url(../images/layout/icon-linkedin.png) 0 center no-repeat;} .social_bookmarks .search{background: transparent url(../images/layout/icon-search-top.png) 0 center no-repeat;} .social_bookmarks .gplus{background: transparent url(../images/layout/icon-gplus.png) 0 center no-repeat;}</code></pre> <p>You can change the border color with this </p> <pre><code>#top .social_bookmarks li { border-color: red; }</code></pre> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/angular-social-media-icons-background-color#post-110906 Mon, 13 May 2013 18:01:47 +0000 justingrahamiam 110906@http://www.kriesi.at/support/ <p>I have tried everything in the css to remove the white background from behind the social media icons but am having no luck. Please help.<br /> If I can post a screenshot that would show what I need but I dont see where I can do that. I have a dark textured background and the containers that hold the independent social icons are white blocks I want to make them transparent. Even when I inspect the element I can't find where the white background is coming from. </p> http://www.kriesi.at/support/topic/how-to-add-more-social-links#post-99942 Thu, 07 Mar 2013 01:24:09 +0000 Devin 99942@http://www.kriesi.at/support/ <p>Glad we could help :)</p> <p>Let us know if you have any other questions or issues.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/how-to-add-more-social-links#post-99845 Wed, 06 Mar 2013 17:28:57 +0000 mllibre 99845@http://www.kriesi.at/support/ <p>Perfect! Great support Kriesi team!</p> <p>Congratulations,</p> <p>Marc </p> http://www.kriesi.at/support/topic/how-to-add-more-social-links#post-99755 Wed, 06 Mar 2013 08:25:20 +0000 Ismael 99755@http://www.kriesi.at/support/ <p>Hi mllibre,</p> <p>Kindly open wp-content/themes/flashlight/js/avia.js and find this code:<br /> <code>autolinkElements: &#39;a[rel^=&quot;prettyPhoto&quot;], a[rel^=&quot;lightbox&quot;], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href$=&quot;.mov&quot;] , a[href$=&quot;.swf&quot;] , a[href*=&quot;vimeo.com&quot;] , a[href*=&quot;youtube.com&quot;] , a[href*=&quot;screenr.com&quot;]&#39;</code><br /> then remove:<br /> <code>a[href*=&quot;vimeo.com&quot;] , a[href*=&quot;youtube.com&quot;] ,</code><br /> Hope this helps.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/how-to-add-more-social-links#post-99714 Wed, 06 Mar 2013 00:18:23 +0000 mllibre 99714@http://www.kriesi.at/support/ <p>Hi Dude, it works perfectly! I could add Flickr, Youtube and Vimeo with my custom icons, but I don't know why the link to vimeo and youtube is trying to open it with Pretty Photo and fails...</p> <p>The link to Flickr is loading correctly. The url are correct so I don't know what is happening.</p> <p>Thanks, </p> http://www.kriesi.at/support/topic/how-to-add-more-social-links#post-99568 Tue, 05 Mar 2013 10:29:01 +0000 Dude 99568@http://www.kriesi.at/support/ <p>Hi,<br /> 1) Open up wp-content/themes/flashlight/sidebar.php and replace following line:</p> <pre><code>echo &quot; &lt;li class=&#39;rss&#39;&gt;&lt;a href=&#39;&quot;.avia_get_option(&#39;feedburner&#39;,get_bloginfo(&#39;rss2_url&#39;)).&quot;&#39;&gt;RSS&lt;/a&gt;&lt;/li&gt;&quot;;</code></pre> <p>with:</p> <pre><code>echo &quot; &lt;li class=&#39;rss&#39;&gt;&lt;a href=&#39;&quot;.avia_get_option(&#39;feedburner&#39;,get_bloginfo(&#39;rss2_url&#39;)).&quot;&#39;&gt;RSS&lt;/a&gt;&lt;/li&gt;&quot;; echo &quot;&lt;li class=&#39;vimeo&#39;&gt;&lt;a href=&#39;http://vimeo.com/my-account&#39;&gt;Vimeo&lt;/a&gt;&lt;/li&gt;&quot;; echo &quot;&lt;li class=&#39;youtube&#39;&gt;&lt;a href=&#39;http://youtube.com/my-account&#39;&gt;Youtube&lt;/a&gt;&lt;/li&gt;&quot;; echo &quot;&lt;li class=&#39;flickr&#39;&gt;&lt;a href=&#39;http://flickr.com/my-account&#39;&gt;Flickr&lt;/a&gt;&lt;/li&gt;&quot;;</code></pre> <p>and instead of <a href="http://vimeo.com/my-account" rel="nofollow">http://vimeo.com/my-account</a> , <a href="http://youtube.com/my-account" rel="nofollow">http://youtube.com/my-account</a> and <a href="http://flickr.com/my-account" rel="nofollow">http://flickr.com/my-account</a> use/insert your custom account urls (depends on your username, user id, etc.).</p> <p>Then add following code to css/custom.css (or insert it into the quick css field):</p> <pre><code>.social_bookmarks .vimeo a{background: transparent url(../images/skin-minimal/icons-rounded-vimeo.png) 0 0 no-repeat;} .social_bookmarks .flickr a{background: transparent url(../images/skin-minimal/icons-rounded-flickr.png) 0 0 no-repeat;} .social_bookmarks .youtube a{background: transparent url(../images/skin-minimal/icons-rounded-youtube.png) 0 0 no-repeat;}</code></pre> <p>Last but not least upload your icon images into the wp-content/themes/flashlight/images/skin-minimal/ and name them "icons-rounded-vimeo.png", "icons-rounded-flickr.png" and "icons-rounded-youtube.png"- If you want to use different names (or a different image src path) you need to adjust the background url in the css code above. </p> http://www.kriesi.at/support/topic/how-to-add-more-social-links#post-99483 Mon, 04 Mar 2013 22:02:40 +0000 mllibre 99483@http://www.kriesi.at/support/ <p>Hello, great theme Flashlight!</p> <p>I don't know how to add more social links in this theme... There is only rss, facebook and twitter. I would like to add flickr, youtube and vimeo. Can you explain me how can I do it?</p> <p>Thanks!</p> <p>Marc </p> http://www.kriesi.at/support/topic/tool-tipo-on-social-icons#post-98918 Thu, 28 Feb 2013 16:43:33 +0000 Nick 98918@http://www.kriesi.at/support/ <p>Hi,</p> <p>You can try this plugin <a href="http://wordpress.org/extend/plugins/wordpress-tooltips/" rel="nofollow">http://wordpress.org/extend/plugins/wordpress-tooltips/</a> which seem to have the functionality that you are looking for.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/tool-tipo-on-social-icons#post-98887 Thu, 28 Feb 2013 15:24:48 +0000 dmaldonado 98887@http://www.kriesi.at/support/ <p>Good day,</p> <p>I would ask if there is a possibility of adding a tooltip to each social icons. I need to add some slogans to each of them.</p> <p>thanks </p> http://www.kriesi.at/support/topic/css-sprites-social-icons#post-95737 Thu, 07 Feb 2013 18:42:25 +0000 angelomaldito 95737@http://www.kriesi.at/support/ <p>Hi Devin, thank you for your prompt response. </p> <p>Yeah, I think you're quite right, it's a lot of work for little benefit. I was hoping that there was an easier fix for that, but CSS sprites are definitely a little complicated for my current knowledge in this field. Anyway, I may try that in future. I'm actually already using w3 cache (for two days now), and it has indeed improved my page speed score dramatically (from 52 to 90!) but I was trying to improve it even further, and Google's PageSpeed labeled the CSS sprites job as a "high priority" thing to do. It seems a little exaggerated though. Certainly my website has other priorities which I shall address first, such as content.</p> <p>Thank you very much for your attention, once again!</p> <p>Regards,</p> <p>Angelo </p> http://www.kriesi.at/support/topic/css-sprites-social-icons#post-95702 Thu, 07 Feb 2013 15:22:22 +0000 Devin 95702@http://www.kriesi.at/support/ <p>Hi Angelo,</p> <p>The background position doesn't matter for the responsive features. I think the issue is that you need to re-do all the hover effects using the new sprite.</p> <p>So in the layout.css you can see in lines 408-444 all of the social icons have their background image set and then the background image gets moved -43px when you hover over each on.</p> <p>What you should do is instead of using a program, just make your sprite image a single long image but the same width as the icon files are now. Basically stacking each image on top.</p> <p>Then you can modify each items background position to start at the correct point. Just add all the css changes to your custom.css unless you want to add in the css to the layout.css file again each time you make a theme update.</p> <p>Honestly though, its a lot of work to reduce your requests by 6 (in my opinion). If you really want to push for page speed, wordpress itself will be your biggest hurdle. Using something like wp super cache or w3 cache will get you far but getting it set up can take some serious tweaking.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/css-sprites-social-icons#post-95695 Thu, 07 Feb 2013 14:44:41 +0000 angelomaldito 95695@http://www.kriesi.at/support/ <p>Hi, there,</p> <p>I'm looking forward to improve my site's speed. Accordingly to Google's PageSpeed recommendations, I need to combine the [choices'] social media icons into a single CSS sprite. </p> <p>The good: - I've found a nice tool for making the CSS sprites ( <a href="http://spritepad.wearekiss.com/" rel="nofollow">http://spritepad.wearekiss.com/</a> ), and I was able to select the social icons from choices theme that I'm actually using (twitter, facebook, Gplus, LinkedIn, RSS, and mail), drag them into the tool's canvas and combine them into a single CSS sprite. </p> <p>The bad: Unfortunately, the CSS code automatically provided by that tool (not surprisingly) doesn't take into account responsive design. It has provided me the following code:</p> <pre><code>.icon-facebook, .icon-rss, .icon-mail, .icon-gplus, .icon-linkedin, .icon-twitter{ background: url(sprites.png) no-repeat; } .icon-facebook{ background-position: -43.5px 0; width: 42px; height: 84px; } .icon-rss{ background-position: -173px 0; width: 42px; height: 84px; } .icon-mail{ background-position: -216px 0; width: 42px; height: 84px; } .icon-gplus{ background-position: -87px 0; width: 42px; height: 84px; } .icon-linkedin{ background-position: -130px 0; width: 42px; height: 84px; } .icon-twitter{ background-position: 0 0; width: 42px; height: 84px; }</code></pre> <p>QUESTION: Is there an relatively easy fix to adapt the CSS code above to work on choices' responsive layout? If yes, how could I do that?</p> <p>Thank you very much!</p> <p>Angelo </p> http://www.kriesi.at/support/topic/social-icons-third-part-plugins-show-giant-icon-inside-the-icon-box#post-92763 Tue, 22 Jan 2013 05:09:41 +0000 Ismael 92763@http://www.kriesi.at/support/ <p>Hi FefoRipa,</p> <p>Glad that its fixed. :)</p> <p>Cheers,<br /> Ismael </p> http://www.kriesi.at/support/topic/social-icons-third-part-plugins-show-giant-icon-inside-the-icon-box#post-92707 Mon, 21 Jan 2013 20:31:55 +0000 FefoRipa 92707@http://www.kriesi.at/support/ <p>Resolved with the installation of a new plugin (easy social links). Thank you for the help! </p> http://www.kriesi.at/support/topic/social-icons-third-part-plugins-show-giant-icon-inside-the-icon-box#post-92699 Mon, 21 Jan 2013 20:15:40 +0000 FefoRipa 92699@http://www.kriesi.at/support/ <p>I actually use social accounts (<a href="http://wordpress.org/extend/plugins/social-accounts/" rel="nofollow">http://wordpress.org/extend/plugins/social-accounts/</a>) but the problem was the same with a previous one (social web links <a href="http://wordpress.org/extend/plugins/social-web-links/)" rel="nofollow">http://wordpress.org/extend/plugins/social-web-links/)</a>. I can re-activate the plugin if the picture attached isn't sufficient to make more clear the problem. My site is at <a href="http://www.fondazionemercantini.it" rel="nofollow">http://www.fondazionemercantini.it</a>. In the footer the plugin shows icon in the correct way. </p> http://www.kriesi.at/support/topic/social-icons-third-part-plugins-show-giant-icon-inside-the-icon-box#post-92690 Mon, 21 Jan 2013 19:52:14 +0000 Ismael 92690@http://www.kriesi.at/support/ <p>Hi,</p> <p>What social plugins did you use? It would be better if you can give us a link to your website so that we can check it out. Choices come with its own social media icons and it might be interfering with your plugins.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/social-icons-third-part-plugins-show-giant-icon-inside-the-icon-box#post-92656 Mon, 21 Jan 2013 17:34:05 +0000 FefoRipa 92656@http://www.kriesi.at/support/ <p>well, no idea? </p> http://www.kriesi.at/support/topic/social-icons-third-part-plugins-show-giant-icon-inside-the-icon-box#post-92579 Mon, 21 Jan 2013 09:48:38 +0000 FefoRipa 92579@http://www.kriesi.at/support/ <p>Hi everyone, i've this problem with every social icon plugin i've tried so far. Even if I set at 32px the height/width of the icons in the settings page of the plugins, the result is that one in the pic i attach. And the creators of all the plugins said me that the problem is related to the theme style and not connected with plugins. Please, i'm desperate, HELP ME!<br /> <a href="https://dl.dropbox.com/u/11650002/giant%20social%20icons.png" rel="nofollow">https://dl.dropbox.com/u/11650002/giant%20social%20icons.png</a> </p> http://www.kriesi.at/support/topic/social-icons-in-header-are-out-of-position-on-one-page#post-90297 Mon, 07 Jan 2013 02:24:47 +0000 Ismael 90297@http://www.kriesi.at/support/ <p>Hi,</p> <p>Try this on your custom.css</p> <pre><code>#top.page-id-26 .social_bookmarks { position: static; margin-top: 10px; margin-left: 780px; }</code></pre> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/social-icons-in-header-are-out-of-position-on-one-page#post-90288 Sun, 06 Jan 2013 22:46:43 +0000 hutzelm 90288@http://www.kriesi.at/support/ <p>So, after many tweaks, we've gotten the copyright text the way we want it. Unfortunately, the social icons on the Contact page are still out of place (directly above the logo and halfway cut off. How can we get these icons back in their original place?</p> <p>Thanks,</p> <p>Stephen </p> http://www.kriesi.at/support/topic/social-icons-in-header-are-out-of-position-on-one-page#post-89313 Sat, 22 Dec 2012 08:07:02 +0000 Dude 89313@http://www.kriesi.at/support/ <p>Hey! </p> <p> Please fix the copyright text: <a href="http://www.kriesi.at/support/topic/getting-text-html-on-next-line-imparting-links-footer#post-89310" rel="nofollow">http://www.kriesi.at/support/topic/getting-text-html-on-next-line-imparting-links-footer#post-89310</a> first - hopefully it will fix this issue too. </p> <p> Best regards,<br /> Peter </p> http://www.kriesi.at/support/topic/social-icons-in-header-are-out-of-position-on-one-page#post-89257 Fri, 21 Dec 2012 18:31:29 +0000 hutzelm 89257@http://www.kriesi.at/support/ <p>Sorry Peter,</p> <p>It's <a href="http://hutzelmedia.com/contact/" rel="nofollow">http://hutzelmedia.com/contact/</a> </p> <p>Thanks,</p> <p>Stephen </p> http://www.kriesi.at/support/topic/social-icons-in-header-are-out-of-position-on-one-page#post-89212 Fri, 21 Dec 2012 07:34:16 +0000 Dude 89212@http://www.kriesi.at/support/ <p>Hey! </p> <p> Please provide a link to your website. </p> <p> Best regards,<br /> Peter </p> http://www.kriesi.at/support/topic/social-icons-in-header-are-out-of-position-on-one-page#post-89104 Thu, 20 Dec 2012 16:18:02 +0000 hutzelm 89104@http://www.kriesi.at/support/ <p>For some reason, the social icons in the header are out of position on the Contact page. I think it may have something to do with our trying to edit the copyright information in our footer. For some reason, the icons are above the logo on the left side of the page (instead of being right aligned like it is on the other pages).</p> <p>Not knowing what caused this, I'm not sure how to fix it.</p> <p>Thanks,</p> <p>Stephen </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-87225 Sun, 09 Dec 2012 17:29:45 +0000 Ismael 87225@http://www.kriesi.at/support/ <p>Hi HouseofStrauss,</p> <p>That's our job. :) Glad we could help. :)</p> <p>Cheers,<br /> Ismael </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-87219 Sun, 09 Dec 2012 17:03:21 +0000 HouseofStrauss 87219@http://www.kriesi.at/support/ <p>Whoa! amazingly simple and effective! Thank-you so much ... works perfectly. </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-87170 Sun, 09 Dec 2012 10:42:05 +0000 Ismael 87170@http://www.kriesi.at/support/ <p>Hi HouseofStrauss,</p> <p>You don't need to transfer any html, if you haven't made any customizations yet, then try to add this code on your Quick CSS or custom.css:<br /> <pre><code>@media only screen and (min-width: 960px) { #top #header .social_bookmarks { width: 280px; left: 770px !important; top: 80%; } }</code></pre> <p>Just adjust the left value and top(the greater the value the more it is pushed on the bottom) value. Hope this helps. :)</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-87071 Sat, 08 Dec 2012 11:23:09 +0000 HouseofStrauss 87071@http://www.kriesi.at/support/ <p>I want to place the social icons in a similar way at the top of the sidebar. The conversation above seems to be incomplete in resolution, except for maybe to the asker outacontext.</p> <p>Can you please clarify:</p> <p>1- Which code should be transferred from the header to the sidebar.php?<br /> 2- What was the final CSS need to position these icons correctly?</p> <p>Many thanks for assistance. </p> http://www.kriesi.at/support/topic/social-icon-in-lightbox#post-83032 Fri, 09 Nov 2012 13:25:37 +0000 andreibartstudio 83032@http://www.kriesi.at/support/ <p>I see, it's clear enough!<br /> Thank you, Dude. I'm very satisfied with the support service! </p> <p>Best,<br /> Andrei </p>