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
Social Icons
Started by
theinfinitywall
, Sep 01 2012 12:28 AM
Best Answer Rob , 02 February 2013 - 03:45 AM
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.
Go to the full post
13 replies to this topic
#3
Rob
-
- Moderators
-
- 9,866 posts
One Smart Egg
- LocationEast Coast, USA
- Framework Version:The Latest, of course
-
Country:
Posted 01 September 2012 - 09:38 PM
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.
#4
Claude203
-
- Members
- 53 posts
Advanced Member
- LocationGreenwich, CT
-
Country:
Posted 14 September 2012 - 03:35 PM
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.
#5
anderskrus
-
- Members
- 15 posts
Member
-
Country:
Posted 17 January 2013 - 10:46 AM
Sorry to join the question so late - but I don't get how I upload the image. I have the Wordpress admin bar. Where do I find
My site is
#6
catrina
-
- Members
- 12,345 posts
Advocate
- LocationCalifornia
-
Country:
Posted 17 January 2013 - 03:26 PM
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.
#7
anderskrus
-
- Members
- 15 posts
Member
-
Country:
Posted 18 January 2013 - 08:17 AM
Hello...
On my harddrive?
If so, what happen if I want different icons on different sites?
#8
catrina
-
- Members
- 12,345 posts
Advocate
- LocationCalifornia
-
Country:
Posted 18 January 2013 - 03:44 PM
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.
#9
evscicats
-
- Members
- 16 posts
Member
- Framework Version:the latest
-
Country:
Posted 24 January 2013 - 06:11 PM
@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?
#10
mackenzie
-
- Members
- 333 posts
Advocate
-
Country:
Posted 29 January 2013 - 04:31 PM
Hi - were you able to try Catrina's suggestion?
#11
evscicats
-
- Members
- 16 posts
Member
- Framework Version:the latest
-
Country:
Posted 01 February 2013 - 08:00 PM
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?
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?
#12
Rob
-
- Moderators
-
- 9,866 posts
One Smart Egg
- LocationEast Coast, USA
- Framework Version:The Latest, of course
-
Country:
Posted 02 February 2013 - 03:45 AM Best Answer
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.
Here's an example of the Hook that would go into either Hooker plugin (premium) or PageLines Customize plugin's functions.php:
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.
#13
evscicats
-
- Members
- 16 posts
Member
- Framework Version:the latest
-
Country:
Posted 02 February 2013 - 08:03 AM
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.
I also added the following CSS to vertically center my icons with my logo - in case anyone else was wondering.
#14
Danny
-
- Moderators
-
- 7,570 posts
Ninja
- LocationManchester, UK
-
Country:
Posted 03 February 2013 - 10:37 AM
Thanks for sharing.
