Archived

This topic is now archived and is closed to further replies.

  • 0

Social Icons

Question

Posted · Report post

I would like to remove the color from the social media icons shown on our website. I saw one forum, where somebody stated to download them, remove the color, then upload them. Where would we download from, and then upload back to? Or, is there some kind of css that can be entered. Thanks much. mark

Share this post


Link to post
Share on other sites

13 answers to this question

Posted · Report post

Hi,

 

The key with replacing our social media icons in the header is to add a hook which makes the links, each with a unique class.  Then it's a matter of CSS for each with the dimensions and the background as well as any conditional, like hover, active, etc.

 

This isn't the actual CSS needed, it's merely an example of ONE button, the Google+ one.   Your code will have to be customized to your image sizes, URLs, etc.  It should go into Dashboard > PageLines > Site Options > Custom Code.

#connect-gplus {
   background: url("http://www.yoursite.com/wp-content/uploads/2013/01/googleplus.png") no-repeat scroll 0 0 transparent;
   height: 43px;
   width: 43px;
}

#connect-gplus:hover {
   background: url("http://www.yoursite/wp-content/uploads/2013/01/googleplus_rollover.png") no-repeat scroll 0 0 transparent;
   height: 43px;
   width: 43px;
}
.sbconnecticon {
   display: inline-block;
   margin: 1.9px;
}

Here's an example of the Hook that would go into either Hooker plugin (premium) or PageLines Customize plugin's functions.php:

add_action('pagelines_branding_icons_start', 'mynewicons');
function mynewicons(){
?>
<div class="mynewicons">
<div id="connect-gplus" class="sbconnecticon"><a href="http://URL-TO-YOUR-GPLUS-ACCOUNT/"></a></div>
<div id="connect-facebook" class="sbconnecticon"><a href="http://www.facebook.com/pages/YOUR-FB-PAGE"></a></div>
<div id="connect-twitter" class="sbconnecticon"><a href="https://twitter.com/YOURTWITTERACCOUNT"></a></div>
<div id="subscribe-email" class="sbconnecticon"><a href="http://www.YOURSITE.COM/Contact Page"></a></div>
<div id="subscribe-rss" class="sbconnecticon"><a href="http://www.YOURSITE.COM/feed/"></a></div>
</div>
<?php }
// end function

Again, you'll need your own images (this has a mouseover with two distinct colors of the same image) and you will need to do some customization work.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

What I would like to do is have the option for colored icons and grayed out icons.  I have a multisite setup so if I change out the icons as Catrina suggested, I'll lose the colored icons on the sites I want to stay colored.  

 

Is there a way to do it from this directory?

 

plugins/pagelines-customize/blogs/#/
 

Is there a way from the plugins/pagelines-sections/ - which there is not a branding folder here otherwise I would have tried adding a blog/#/ folder to see if that would work?

Share this post


Link to post
Share on other sites

Posted · Report post

Hello,

 

All you need to know is that the names of the social icon files so that you can save your files with those names and upload them to the folder where the original icons are (they're in the pagelines/sections/branding subdirectory in your theme folder.

Share this post


Link to post
Share on other sites

Posted · Report post

Mark, if you view your site in Firefox, you can right-click and "View Source" and find the images and via the stylesheet, the mouseover image. If you click the link, the browser will take you to the image where you may download it. Note the location. Make your changes and then upload again. However, please be prepared to repeat this since an update might overwrite the files you changed.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Rob! That worked perfect.

I also added the following CSS to vertically center my icons with my logo - in case anyone else was wondering.

div.icons {  bottom: 35px !important;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for sharing.

Share this post


Link to post
Share on other sites

Posted · Report post

@anderskrus - Are you asking about different icons on different sites using a MultiSite setup?  That's what I'm wondering about.  Is there a way to do it with the Customize tool?

Share this post


Link to post
Share on other sites

Posted · Report post

Hello...

 

On my harddrive?

If so, what happen if I want different icons on different sites?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, the resized icons on your hard drive will need to be uploaded to the subfolder I mentioned above.

 

If you want to use different icons on different sites, then you still name those icons the same names as I mentioned above and just follow the same instructions I provided.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi - were you able to try Catrina's suggestion?

Share this post


Link to post
Share on other sites

Posted · Report post

Dear Rob, using this same approach could I change the sizes of the social media icons, or replace the images with ones that I like better? If so, then how would I also replace the mouseover images? I am somewhat familiar with CSS and good at Photoshop. Finally, is there any way to make these changes "stick" even with future upgrades to WhiteHousePro? Thanks.

Share this post


Link to post
Share on other sites