Skip to main content

Styling Taxonomy Terms

In:
19Mar2009

By default, Drupal outputs taxonomy terms as an unordered list in the div.meta section of nodes. Here is a simple CSS pattern to format taxonomy terms with either the pipe character (" | ") or as a comma-delimited list (in the example, change " | " to ", " to make a comma-delimited list).

  /* NRD: Display taxonomy and submitted terms inline. */
  .node .terms, /* Node terms (taxonomy) */
  .node .submitted /* The "posted by" information */
  {
    color: #666;
    font-size: 0.8em;
    display: inline;
  }
  /* NRD: Style taxonomy list like a list. */
  .node .terms ul.links.inline li
  {
    padding: 0;
  }
  .node .terms ul.links.inline li:after
  {
    content: " | ";
  }
  .node .terms ul.links.inline li.last:after
  {
    content: "";
  }

Comments

Post new comment

Warning
I strongly encourage and welcome links and feedback. However, this site is moderated and comments with inappropriate links are rejected. Please do not post a one-line "Me too" or "Great post!" comment just so you can link to your site. Thank you for your understanding.
The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.
  • Use to create page breaks.

More information about formatting options