Size and appearance of sharing buttons

• 

  pklein · Member · Feb 11, 2014 at 6:11 pm

  • Copy link
  • Add topic to favorites

  Hi, can I use my custom CSS settings to adjust the size and appearance of the sharing buttons? I currently have them set to text only but there is way too much padding inside each button, so that I can fit only a few in the main column without them wrapping over to the next line. Even with just a few the appearance is awkward because they are so large. I tried to adjust padding or spacing in my custom CSS header but to no avail. The other style options — icon only, official button, etc. — are nice but they are also much too large to work with my design. Are there any sizing options? Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 13, 2014 at 3:24 pm

  • Copy link

  Hi there, yes you can adjust the padding on the new social media buttons. Add the following CSS and adjust the top/bottom and left/right padding values as desired. The first is top/bottom and the second is left/right.

  .sd-social-text .sd-content ul li a, .sd-social-text .sd-content ul li a.sd-button, body .sd-content ul li.no-icon div.option a, body .sd-content ul li.no-icon a.share-more {
      padding: 6px 8px;
  }

• 

  pklein · Member · Feb 13, 2014 at 4:26 pm

  • Copy link

  Thanks, it works!

• 

  pklein · Member · Feb 13, 2014 at 5:05 pm

  • Copy link

  Also, I don’t want to waste your time editing my style sheet, but can you point me to other places in the custom CSS code for adjusting placement and appearance of these text buttons? E.g., try as I might, I cannot seem to adjust the font size inside the buttons (I’ve changed many an appearance of “font-size” in the CSS, but something else is overriding it). Also, the horizontal line above the buttons wraps around a little and appears over the “Share” label; I can’t figure out how to adjust the width of this line, or tell the browser that “Share” begins a new line, and is not a continuation of the previous line…. If you can point me to some kind of tutorial, or other examples to study, that would be great. I can’t figure it out from examining the CSS myself. :(

• 

  thesacredpath · Member · Feb 13, 2014 at 11:38 pm

  • Copy link

  You can add a font declaration to the rule I gave previously.

  .sd-social-text .sd-content ul li a, .sd-social-text .sd-content ul li a.sd-button, body .sd-content ul li.no-icon div.option a, body .sd-content ul li.no-icon a.share-more {
      padding: 6px 8px;
  font-family: Georgia, serif;
  }

• 

  thesacredpath · Member · Feb 13, 2014 at 11:43 pm

  • Copy link

  This will get rid of the bit of borderline above the “Share:”.

  div.sharedaddy h3.sd-title:before {
      border: none;
  }

  If you are not yet familiar with the web inspector built into your browser, take a look at this support doc of ours on How to Find Your Theme’s CSS. It has brief screencasts to get you started and I find the web inspector an invaluable tool.

• 

  pklein · Member · Feb 14, 2014 at 4:24 am

  • Copy link

  Thanks, very helpful!