Jump to content
theinfinitywall

Social Icons

Recommended Posts

theinfinitywall    0
theinfinitywall

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Claude203    12
Claude203

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.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anderskrus    0
anderskrus

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
evscicats    14
evscicats

@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
mackenzie    12
mackenzie

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


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
evscicats    14
evscicats

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
Rob    547
Rob

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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
evscicats    14
evscicats

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
Danny    1,327
Danny

Thanks for sharing.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×