Reduce space between two widgets?

  • Unknown's avatar
    gmdavenport · Member ·

    Specifically, on my blog, I would like to reduce the space between the twitter image and the actual tweets (two separate widgets).

    I have the edit CSS upgrade, but I am still relatively new. I understand the basics, but I am still confused on how to use terms like ul, li, etc.

    Any tips would be greatly appreciated.

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

  • Unknown's avatar
    gmdavenport · Member ·

    I suppose my main question is how to go about referencing specific widgets?

    How do I identify their tag?

    For instance, I would have thought the twitter reference would have been “twitter” and not “tweets.”

    Maybe I am missing something? Sorry for the amateur questions.

  • Unknown's avatar
    designsimply · Member ·

    I would like to reduce the space between the twitter image and the actual tweets (two separate widgets).

    the spacing below widgets in the Twenty Ten theme comes from a bottom-margin on the “widget-container” class. You can change the spacing for all of them at once with this:

    .widget-container {
    margin-bottom: 0;
}

    Or you can change the spacing for one of them in particular by using the class or ID used for that particular text widget. I checked your site and the widget with the Twitter image in it has the ID “text-6” so you could adjust it like this:

    #text-6 {
    margin-bottom: 0;
}
  • Unknown's avatar
    designsimply · Member ·

    I suppose my main question is how to go about referencing specific widgets? How do I identify their tag?

    Great questions! Each widget is assigned a unique ID. To find out what it is, you need to add the widget and then view the page source and look at the HTML. One way to do that is to right-click on the image and choose the “Inspect Element” option if your browser has it. Chrome has it built in, you can turn it on in Safari, and Firefox has an add-on you can use to get it: http://getfirebug.com/

    Once you select “Inspect Element,” you will see a panel highlighting the HTML of the element you selected as well as all of the CSS that applies to it. Very handy tool.

  • The topic ‘Reduce space between two widgets?’ is closed to new replies.