ThemeShaper Forums » Thematic

[closed]

extra padding for a specific widget

(3 posts)
  • Started 2 years ago by jhismith
  • Latest reply from jhismith
  • This topic is resolved
  1. jhismith
    Member

    I'm trying to increase the padding for a specific widget.

    http://democracyinafrica.org/election-monitor/kenya/

    I am trying to increase the padding for the 'DiA Articles on Kenya' widget.

    I have added the following (and variations of) to style.css:

    .main-aside ul li.listcategorypostswidget-2 {
    padding-top: 30px;
    }

    But no joy. Any help would be much appreciated.

    Thanks.

    Posted 2 years ago #
  2. proto
    Member

    Hello Jhismith,

    Are you using Firebug (Firefox) or Google Chrome to see the CSS ID's & classes you need to target? If you're not I would highly recommend that you use either of these to identify the area that you'd like to edit. They'll make your life so much easier for any changes that you need to do in the future, so you'll be able to have complete control over the changes you'd like to make!

    After inspecting the element in Google Chrome (just right click when using that browser, select, "inspect element") and you'll see the following ID's and classes appear:

    <li id="listcategorypostswidget-2" class="widgetcontainer widget_listcategorypostswidget"><h3 class="widgettitle">DiA Articles on Kenya</h3>

    So you might want to target those with something like:

    li#listcategorypostswidget-2 {padding-top: 30px;}

    Check if any other styles are overriding your style change (Firefox's Firebug and Google Chrome's in built developer tools show you all the styles applied to an element). Try experimenting but if that doesn't work use Google Chrome or Firefox's Firebug developer tools to assist.

    I hope it's of some help to you!

    Posted 2 years ago #
  3. jhismith
    Member

    Proto,

    Sorted. Many thanks indeed.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.