CENTERING SOCIAL ICONS IN SIDEBAR

• 

  revivingcharm · Member · Oct 30, 2016 at 1:09 pm

  • Copy link
  • Add topic to favorites

  My social icons are located in the right hand side sidebar. I am wondering if there is a way to center them under its header. Any help is appreciated!

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

• 

  somayyehblog · Member · Oct 30, 2016 at 1:33 pm

  • Copy link

  hello
  add a div tag under header and put social links with image in div tag.then make necessary changes in css file.
  read web design articles on the jahansite.com

• 

  revivingcharm · Member · Oct 30, 2016 at 1:54 pm

  • Copy link

  Thanks for the comment somayyehblog but I was hoping someone could help me and post the css code here. Thanks for the article but I only read English…

• 

  innisfreehomestead · Member · Oct 31, 2016 at 9:30 pm

  • Copy link

  Hello there!

  This is a two-step process, but it should work :)
  1) Replace the code, text, etc in your widget text block with the following:

  <ul class="social-list">
    	<li><a href="https://www.instagram.com/revivingcharm/"><img class="wp-image-7152" src="https://revivingcharm.files.wordpress.com/2016/06/instagram_reviving-charm-5_edited-1-logo1.png" alt="instagram_reviving-charm-5_edited-1-logo" width="22" height="22" data-pin-nopin="true"></a></li>
      <li><a href="https://www.pinterest.com/revivingcharm/"><img class="wp-image-7153" src="https://revivingcharm.files.wordpress.com/2016/06/pinterest_reviving-charm1-1-logo_edited-1.png" alt="pinterest_reviving-charm1-1-logo_edited-1" width="22" height="22" data-pin-nopin="true"></a></li>
      <li><a href="https://twitter.com/revivingcharm"><img class="wp-image-7155" src="https://revivingcharm.files.wordpress.com/2016/06/twitter_reviving-charm-logo_edited-1.jpg" alt="twitter_reviving-charm-logo_edited-1" width="22" height="21"></a></li>
      <li><a href="http://revivingcharm.tumblr.com/"><img class="wp-image-7154" src="https://revivingcharm.files.wordpress.com/2016/06/tumblr_reviving-charm-logo_edited-1.png" alt="tumblr_reviving-charm-logo_edited-1" width="22" height="22" data-pin-nopin="true"></a></li>
      <li><a href="https://www.bloglovin.com/blogs/reviving-charm-14572329"><img class="wp-image-7156" src="https://revivingcharm.files.wordpress.com/2016/06/bloglovin_reviving-charm1-logo_edited-1.png" alt="bloglovin_reviving-charm1-logo_edited-1" width="22" height="21" data-pin-nopin="true"></a></li>
    </ul>

  Then in your custom CSS area drop this code:

  .social-list {
  	width: 180px;
  	margin: 0 auto;
  }
  
  .social-list li {
  	border: none !important;
  	padding: 7px !important;
  	float: left;
  }

  Hope that helps!
  Sage

• 

  revivingcharm · Member · Nov 6, 2016 at 4:11 pm

  • Copy link

  Hi, Sage.
  Thanks for your help but unfortunately, it didn’t help.

  Does Sage or anyone else have any other suggestions?

  Thanks!

• 

  innisfreehomestead · Member · Nov 7, 2016 at 9:05 pm

  • Copy link

  Hi there!

  I’m not seeing the CSS show in your custom CSS area even to be overwritten, are you sure it’s in there? Do you have an upgraded account?

  Thanks,
  Sage

• 

  revivingcharm · Member · Nov 20, 2016 at 2:56 pm

  • Copy link

  Sage – I appreciate you commenting.

  Thank you..yes, I do have an upgraded account.
  Here is what I did:

  1. I went to “Appearance”
  2. Clicked on “Customize”
  3. Clicked “CSS” and added the coding you suggested. Then saved it

  Under CSS, if I click on “CSS Revisions” I see the code pop up under the “CSS Stylesheet Editor”.

  For some reason, the icons still do not center.

• 

  innisfreehomestead · Member · Nov 21, 2016 at 6:59 pm

  • Copy link

  Hey there!

  Would you mind pasting the contents of your custom CSS area in here so I can see if there’s any issues stopping the code?

  Thanks!
  Sage