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.
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!
jhismith
Member
Proto,
Sorted. Many thanks indeed.
This topic has been closed to new replies.