Centering the widgets sela theme

• 

  polishedpurposefulandpretty · Member · May 25, 2015 at 8:25 am

  • Copy link
  • Add topic to favorites

  Hi There!
  I need help with css for centering the widgets in the footer area and also the social media icons at the bottom of each page/post

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

• 

  kathrynwp · Staff · May 25, 2015 at 4:10 pm

  • Copy link

  This CSS should center your three footer widgets:

  #tertiary .widget-area {
       text-align: center;
  }
  
  @media screen and (min-width: 1180px) {
    #tertiary  .widget_facebook_likebox { margin: 0px auto; width: 920px; }
    #tertiary .wpcom-instagram-images { margin: 0px auto; width: 1120px; }
  }

  I put the Instagram and Facebook declarations in a media query so they aren’t too wide at smaller screen sizes.

• 

  kathrynwp · Staff · May 25, 2015 at 4:13 pm

  • Copy link

  For the social-media sharing buttons below each post, try this:

  .sharedaddy {
    text-align: center;
  }

• 

  polishedpurposefulandpretty · Member · May 25, 2015 at 10:43 pm

  • Copy link

  You are wonderful! thankyou, they both worked perfectly. While its still about centering il ask you as well, how about code for centering widgets in the right widget area? and the like button at the bottom of pages/posts? I am all about centering hey haha.
  thankyou

• 

  kathrynwp · Staff · May 26, 2015 at 3:33 pm

  • Copy link

  The “Like” buttons are in an iframe so I don’t think it’s possible to style them with CSS.

  I’ll have a look at your right-sidebar widgets.

• 

  kathrynwp · Staff · May 26, 2015 at 3:49 pm

  • Copy link

  To centre your subscription button in the right sidebar, you need to target the widget’s class (.widget_blog_subscription) within the secondary ID (#secondary )

  #secondary .widget_blog_subscription {
   text-align: center;
  }

• 

  kathrynwp · Staff · May 26, 2015 at 3:51 pm

  • Copy link

  Looks like you have a second “follow” widget, which does the same thing as the first one. If you want to keep it, it’s a bit tricky to centre it, since it too is in an iframe.

  I found this old suggestion from designsimply for a “cheat”:

  https://en.forums.wordpress.com/topic/how-to-center-the-wordpress-follow-button-in-sidebar?replies=6#post-1728889

  .widget_follow_button_widget iframe {
      margin-left: 20px;
  }

• 

  polishedpurposefulandpretty · Member · May 27, 2015 at 4:04 am

  • Copy link

  you are incredible! thankyou thankyou!
  can I ask how you are so fab at coding? self taught or study?

• 

  kathrynwp · Staff · May 27, 2015 at 2:09 pm

  • Copy link

  You’re very welcome!

  can I ask how you are so fab at coding? self taught or study?

  Some of both. ;-)

  If you’d like to learn more CSS, you might like to check out this resource site my colleague Michelle and I put together:

  https://cssworkshop.wordpress.com/

  CSS is fun and powerful! Enjoy :-D