Jump to content


Photo
- - - - -

Resize Social Connection Buttons At Header


Best Answer Rob , 15 December 2012 - 01:16 PM

Using Firebug you'll see many elements that affect the icons. Among them  .section-branding .icons and others.  The images are fixed sizes (they're images, not CSS elements) and thus they are not sized in CSS.  As a result, resizing them upward would pixelate them and shrinking them would cause them to disfigure.

 

If you prefer different size images,  I'd suggest you use a hook implementing your own images (of desired size).   There are many ways to do this, including using sprites  http://www.w3schools...age_sprites.asp

 

A hook would be added to your site in the PageLines Customize plugin's functions.php or in a child theme's functions.php.

 

If you're unfamiliar with hooks, I'd suggest getting our new Hooker plugin, that helps facilitate them.

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 patriknordkvist

patriknordkvist

    Advanced Member

  • Members
  • 30 posts
  • Framework Version:2.3.7
  • Country: Country Flag

Posted 14 December 2012 - 08:32 PM

Is there anyway to resize the buttons ie Facebook att the header?

Would also like to take away the shadoweffect



#2 catrina

catrina

    Advocate

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

Posted 14 December 2012 - 08:40 PM

You can resize with custom css:

Please Login or Register to see this Hidden Content

You can use the width property:

Please Login or Register to see this Hidden Content

 

As for the shadow effect, do you mean the hover effect?



#3 patriknordkvist

patriknordkvist

    Advanced Member

  • Members
  • 30 posts
  • Framework Version:2.3.7
  • Country: Country Flag

Posted 14 December 2012 - 08:57 PM

Yes I mean the hover effect (could find the rigth word)



#4 patriknordkvist

patriknordkvist

    Advanced Member

  • Members
  • 30 posts
  • Framework Version:2.3.7
  • Country: Country Flag

Posted 14 December 2012 - 09:00 PM

The link you adde is missing.

 

I got the code but not what

p.ex
{height:100px;
width:100px;}

 

But dont kno what to start with so they change



#5 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 December 2012 - 01:33 AM

Hi, sorry the link Cat added got the full stop placed on the end in error. www.pagelines.com/wiki/Custom_CSS

 

You mention you have the code, if you have it already you can paste it into Pagelines>site options>custom css



#6 patriknordkvist

patriknordkvist

    Advanced Member

  • Members
  • 30 posts
  • Framework Version:2.3.7
  • Country: Country Flag

Posted 15 December 2012 - 12:21 PM

I got the code but dont know what the element/start of the cod should be to control the Social buttons in the header?



#7 Rob

Rob

    One Smart Egg

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

Posted 15 December 2012 - 01:16 PM   Best Answer

Using Firebug you'll see many elements that affect the icons. Among them  .section-branding .icons and others.  The images are fixed sizes (they're images, not CSS elements) and thus they are not sized in CSS.  As a result, resizing them upward would pixelate them and shrinking them would cause them to disfigure.

 

If you prefer different size images,  I'd suggest you use a hook implementing your own images (of desired size).   There are many ways to do this, including using sprites 

Please Login or Register to see this Hidden Content

 

A hook would be added to your site in the PageLines Customize plugin's functions.php or in a child theme's functions.php.

 

If you're unfamiliar with hooks, I'd suggest getting our new Hooker plugin, that helps facilitate them.