Jump to content


Photo
- - - - -

Social Icons


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


  • Please log in to reply
13 replies to this topic

#1 theinfinitywall

theinfinitywall

    Advanced Member

  • Members
  • 39 posts

Posted 01 September 2012 - 12:28 AM

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

#2 theinfinitywall

theinfinitywall

    Advanced Member

  • Members
  • 39 posts

Posted 01 September 2012 - 04:17 PM

anyone?

#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

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

Claude203

    Super Member

  • Members

  • 166 posts
  • LocationGreenwich, CT
  • Country: Country Flag

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

anderskrus

    Member

  • Members
  • 15 posts
  • Country: Country Flag

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 

Please Login or Register to see this Hidden Content

 

My site is

Please Login or Register to see this Hidden Content



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

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

anderskrus

    Member

  • Members
  • 15 posts
  • Country: Country Flag

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

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

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

evscicats

    Advanced Member

  • Members

  • 87 posts
  • LocationEvansville, IN, USA
  • Framework Version:DMS 2.1.7
  • Country: Country Flag

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

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 29 January 2013 - 04:31 PM

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



#11 evscicats

evscicats

    Advanced Member

  • Members

  • 87 posts
  • LocationEvansville, IN, USA
  • Framework Version:DMS 2.1.7
  • Country: Country Flag

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?

 

Please Login or Register to see this Hidden Content

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

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

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.

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

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.


  • evscicats likes this

#13 evscicats

evscicats

    Advanced Member

  • Members

  • 87 posts
  • LocationEvansville, IN, USA
  • Framework Version:DMS 2.1.7
  • Country: Country Flag

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.

Please Login or Register to see this Hidden Content



#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 February 2013 - 10:37 AM

Thanks for sharing.