Centering sidebar widgets

  • Author
    Posts
  • #19867

    ceo
    Member

    I’m not sure why I’m having such trouble with this. Maybe I just need more coffee.

    But for the life of me I can’t figure out how to center the content (not the label/title text) of the Flickr and Goodreads widgets and I’m pretty sure I should be able to with CSS. Right now they are shoved to the left a bit rather than appearing centered.

    Thanks for your assistance.

    The blog I need help with is gentlewit.com.

    #20079

    sillyandrea
    Theme Author

    You;d have to target that particular script with css, and add margin:auto; to it.

    See this handy tutorial. :)

    http://wpfab.com/how-to-customize-a-specific-wordpress-widget/

    #20083

    ceo
    Member

    Thank you, Andrea.

    Except . . . I knew all that. I mean, I understand how to determine what CSS class/id goes to the specific widgets. What I can’t figure out is how to target those scripts and center them.

    Anything that just targets the widget centers everything.

    Unless I’m missing something.

    #20084

    sillyandrea
    Theme Author

    The script in the widget itself. :)

    That, and using Firebug or Chrome’s inspect element will show you that it;s the embed in the widget.

    Put p tag around it. Target *that*. :D

    #wpcom-goodreads-2 p { margin: auto; }

    #20085

    ceo
    Member

    Um, I don’t think I can do that. There’s no way to insert HTML into the widgets themselves.

    (Seriously, this shouldn’t be as hard as it is.)

    #20086

    sillyandrea
    Theme Author

    Check the box on the widget that says “wrap in p tags”.

    Centring items in css is tricky wherever you do it.

    If that is not there, and there’s no way to change the good reads widget then you are stuck.

    #20089

    ceo
    Member

    Yes, it is. (I have a love-hate relationship with CSS.)

    Anyway, seems this is not something that can be done or I’m just missing the one magic thing that works. I give up, but thanks for your help, Andrea!

    #20207

    ceo
    Member

    Thanks to Daniel from Support, I got this to work. So, I’ll share the CSS for anyone that might wonder in the future:

    #wpcom-goodreads-2 {
    text-align: center;
    }

    #wpcom-goodreads-2 h4 {
    text-align: left;
    }

    #flickr_badge_uber_wrapper {
    margin-left: 55px;
    }

The topic ‘Centering sidebar widgets’ is closed to new replies.