Drupal UL styles, Part 2: .item-list ul
Drupal modules - both core and contributed - wrap a high percentage of unordered lists in the "item-list" class. If your lists aren't behaving as your css suggests, view source in your browser to find out whether the list you're trying to style is, in fact, an item list...
<div class="item-list>your list here</div>As of drupal 5.x, the relevant css styling appears in modules/system/system.css. When your output isn't what you were expecting, you'll find it's usually a simple matter of making sure you override the undesirable padding or margins drupal adds.
.item-list .icon {
color: #555;
float: right;
padding-left: 0.25em;
clear: right;
}
.item-list .title {
font-weight: bold;
}
.item-list ul {
margin: 0 0 0.75em 0;
padding: 0;
}
.item-list ul li {
margin: 0 0 0.25em 1.5em;
padding: 0;
list-style: disc;
}If your unordered list is appearing in a block, be aware of a further css snag, also present in modules/system/system.css:
.block ul {
margin: 0;
padding: 0 0 0.25em 1em;
}In the current demo.13jupiters.com theme, an item-list looks like this (when appearing within a node):
Optional title
- the first item
- the second item
- a link as an item
The block version of an item-list probably appears in one of the current theme's sidebars.
- Login to post comments
