Drupal 7 Taxonomy and Inline Terms


I just received some website feedback regarding my Drupal 7 Taxonomy Reinvented post. Since the question is an interesting one, I thought it would be better to write a post so more people can make use of the answer.

The question from pantherqin:

I have installed drupal 7 alpha 5 on my server. And inputed several tag words in taxonomy.

And at content type - article, I added in "tags" at "manage fields". However when I created an article with tags "tagA, tagB, tagC", those three words are displayed in a column.

How can I make those tags to display in a row?

I remember in the past, those tags are displayed in a row, and right-aligned as well.

The taxonomy terms presented on the pages for both Drupal 6 are enclosed in an <ul> (Unorded List) tag. Without any theming your list would look like this without theming:

  1. tagA
  2. tagB
  3. tagC

The basic theming in Drupal 6 removes the preceding numbers and the result is that they are listed as a column.

In Drupal 7 <div> tags are used to enclose each term instead, making it more flexible to theme.

Default presentation will be like this, again without theming:

tagA
tagB
tagB

Drupal 7 Core does not come with more than basic theming for the taxonomy. I suspect you are using the bundled Garland Theme and it will display the terms in a column like above. Here on Nutshell I am using the Bartik theme and it contains CSS styles for listing the terms inline.

So, the easy answer is that it is down to your theme when it comes to displaying the terms.

Personally I am looking forward to when the Skinr module is ready for Drupal 7 as it will offer great flexibility to manage displaying of tags.

Comments

Re: Drupal 7 Taxonomy and Inline Terms

Thank you ! :-)

And you are right. It is in label <div> instead of <ul>.

<div class="field-items">
<div class = "field-item odd">tagA</div>
<div class = "field-item even">tagB</div>
<div class = "field-item odd">tagC</div>
</div>

css for this is located at "drupal/modules/field/theme/field.css"

headache... will ANYONE who wants to see tags being displayed in column?? I thought it should be a default in the "field.css"......

Dun know if it could be fixed in the next release...

Re: Drupal 7 Taxonomy and Inline Terms

facing the same problem ... could anyone give a drupal newbie a clue to have the terms in one row? thanks!

Re: Drupal 7 Taxonomy and Inline Terms

I've added this to my css file:
article .field-type-taxonomy-term-reference .field-item {
display: inline;
margin: 0 5px;
}

You need a right/left margin to separate the items. I'm using the Omega theme with HTML5 tags. The tag 'article' was what I needed, but you may need to replace it by another tag. Note the spaces before each dot.

You can see the result here http://www.janetrimmer.co.uk/drupalcon-london-keynote-talks