villumtobe Support Forum - User Favorites: villumtobe en-US Sun, 19 May 2013 04:58:24 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/social-icons-always-in-color#post-59361 Fri, 08 Jun 2012 15:55:48 +0000 Devin 59361@http://www.kriesi.at/support/ <p>Glad that worked for you! Let us know if you have any other issues :)</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/social-icons-always-in-color#post-59145 Thu, 07 Jun 2012 03:27:22 +0000 smighty 59145@http://www.kriesi.at/support/ <p>This is perfect. Thank you, Mya! </p> http://www.kriesi.at/support/topic/social-icons-always-in-color#post-59142 Thu, 07 Jun 2012 02:50:49 +0000 Mya 59142@http://www.kriesi.at/support/ <p>Hi smighty,</p> <p>What's happening is the white icon is displaying against the white background which essentially causes the icon to disappear. What you'll need to do is change "transparent" to the background-color listed on the hover state.</p> <p>I've done the RSS icon for you here:</p> <p><code>.social_bookmarks .rss{background: #ffa133 url(/wp-content/themes/angular/images/layout/icon-rss.png) -42px center no-repeat !important;}</code></p> <p>Regards,<br /> Mya </p> http://www.kriesi.at/support/topic/social-icons-always-in-color#post-58602 Sun, 03 Jun 2012 13:25:37 +0000 smighty 58602@http://www.kriesi.at/support/ <p>Hi Ismael-<br /> When I changed the 0 to 42px, the icons disappear unless I hover. Here's the block of code that I changed (with the changes) and below it is the block of code following it, for context. </p> <pre><code>.social_bookmarks .rss{background: transparent url(../images/layout/icon-rss.png) -42px center no-repeat;} .social_bookmarks .facebook{background: transparent url(../images/layout/icon-facebook.png) -42px center no-repeat;} .social_bookmarks .twitter{background: transparent url(../images/layout/icon-twitter.png) -42px center no-repeat;} .social_bookmarks .mail{background: transparent url(../images/layout/icon-mail.png) -42px center no-repeat;} .social_bookmarks .dribbble{background: transparent url(../images/layout/icon-dribbble.png) -42px center no-repeat;} .social_bookmarks .linkedin{background: transparent url(../images/layout/icon-linkedin.png) -42px center no-repeat;} .social_bookmarks .search{background: transparent url(../images/layout/icon-search-top.png) -42px center no-repeat;} .social_bookmarks .gplus{background: transparent url(../images/layout/icon-gplus.png) -42px center no-repeat;}</code></pre> <pre><code>.social_bookmarks .rss:hover {background-position: -42px center; background-color:#ffa133;} .social_bookmarks .facebook:hover{background-position: -42px center; background-color:#37589b;} .social_bookmarks .twitter:hover {background-position: -42px center; background-color:#46d4fe;} .social_bookmarks .mail:hover {background-position: -42px center; background-color:#9fae37;} .social_bookmarks .dribbble:hover{background-position: -42px center; background-color:#e44885;} .social_bookmarks .linkedin:hover{background-position: -42px center; background-color:#419cca;} .social_bookmarks .search:hover {background-position: -42px center; background-color:#222222;} .social_bookmarks .gplus:hover {background-position: -42px center; background-color:#de5a49;}</code></pre> http://www.kriesi.at/support/topic/social-icons-always-in-color#post-58590 Sun, 03 Jun 2012 07:33:16 +0000 Ismael 58590@http://www.kriesi.at/support/ <p>Hello,</p> <p>Go to your CSS folder and open layout.css. Look for social_bookmarks .rss. Notice that the background position for each social media icon is 0 center. Just change those to -42px center.</p> <p>Hope this helps. :)</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/social-icons-always-in-color#post-58577 Sun, 03 Jun 2012 03:46:20 +0000 smighty 58577@http://www.kriesi.at/support/ <p>Hi there-<br /> I'd like to remove the pre-hover effect on the social icons at the top. Instead of having the white background and a color background on hover, I'd like to see the color background all the time.</p> <p>Thank you for your help! </p>