Taxonomy inline with several category types? Is it possible for D7 to display several taxonomy fields inline with some separator between them? I want to have a node with 2 category types, say, a song with a Year and a Singer. Now the taxonomy displays in a column:

Year: 1999
Singer: Britney Spears


And I want it to appear inline with some separator:

Year: 1999 |separator| Singer: Britney Spears


I've found a similar question but it deals with displaying one multivalued taxonomy field. That's not quite what I want. So where should I look and what I should override to display several types of taxonomy fields inline?

Update: after spending 2 days on that I've done it using node.tpl.php and field.tpl.php. It's always better to print your separators outright. Relying on CSS is good but not when there are guys using IE6 out there (I've seen one as late as 2011). Not that I did the best solution ever here (I'm lousy with the code) but still it works and at least does what I want it to do. I did the following:

1) copied node.tpl.php from modules\node to sites\all\themes\mytheme.
2) used $content variable to find all taxonomy fields:

$taxonomy_field_names = array();
$all_field_names = array_keys($content);
foreach($all_field_names as $i =&gt; $value)
{
    $field_name = $all_field_names[$i];
    $field_type_name = '#field_type';

    //if content contains an array with $field_name and it is an array itself
    //and has an item #field_type of taxonomy_term_reference
    //it is a taxonomy field
    if(is_array($content[$field_name]) &amp;&amp;
        array_key_exists($field_type_name, $content[$field_name]) &amp;&amp;
        $content[$field_name][$field_type_name] == 'taxonomy_term_reference')
    {
        $taxonomy_field_names[] = $all_field_names[$i];
    }
} unset($i);


3) hid them to prevent rendering:


//hiding taxonomy fields
$count_taxonomy_fields = count($taxonomy_field_names);
for($i = 0; $i &lt; $count_taxonomy_fields; $i++)
{
    hide($content[$taxonomy_field_names[$i]]);
}


4) after rendering $content I rendered taxonomy fields:


//rendering taxonomy fields
for($i = 0; $i &lt; $count_taxonomy_fields; $i++)
{
    //printing a separator after each of the fields except the very last
    if($i &lt; $count_taxonomy_fields - 1)
    {
        $content[$taxonomy_field_names[$i]]['#separator'] = '&amp;bull;';
    }
    print render($content[$taxonomy_field_names[$i]]);
}


5) copied field.tpl.php from modules\field to sites\all\themes\mytheme and renamed it field--taxonomy-term-reference.tpl.php (affects all ). After setting $content[$taxonomy_field_names[$i]]['#separator'] at the previous step one can use it as $element['#separator'] in field--taxonomy-term-reference.tpl.php:


&lt;?php if (isset($element['#separator'])): ?&gt;
&lt;span class="field-item-separator"&gt;&lt;?php print $element['#separator']?&gt;&lt;/span&gt;
&lt;?php endif; ?&gt;


6) added the following lines to sites\all\themes\mytheme\css\fields.css:


.field-type-taxonomy-term-reference .field-item {
   float:left;
}


To people who answered my question I offer my sincere thanks.
Option 1: Pure CSS. Assuming that you have your Content type's display options are set so that all the taxonomy reference fields are next to each other, you would simply display each of the divs that wrap each taxonomy field as an inline element, then use the + selector and :before pseudo-element to add your separator between each field.

These two special selectors are supported in most web browsers, but you might want to check whether they can be used in older browsers your site may need to support.

For example, if each taxonomy field is wrapped with a div having the class "field-type-taxonomy-reference" and your nodes have a div with the class "node-type" wrapping them, your CSS would look something like this:

//make the taxonomy fields and their contents display as inline elements
.node-type .field-taxonomy-reference,
.node-type .field-taxonomy-reference * {
  display: inline;
}

//add a pipe separator between two taxonomy fields
.node-type .field-taxonomy-reference + .field-taxonomy-reference:before {
  display: inline;
  content: " | ";
}


Option 2: edit the HTML with a custom field template. Copy the field.tpl.php file from Drupal core into your theme and rename it field--taxonomy-reference.tpl.php. This would affect all taxonomy reference fields across your entire site, which may not be desirable. You can also implement  template_preprocess_field() in your theme's template.php to add a new template suggestion for only the nodes (and fields) that you want to have affected by this template.  For example:

function YOURTHEME_preprocess_field(&amp;$vars) {
  $variables['theme_hook_suggestions'] = array('field__' . $element['#field_type'] . '__' . $element['#bundle']);
}


This would allow you to use a field template named field--taxonomy-reference--news-article.tpl.php to affect all taxonomy reference fields on a node type named "new article". One the documentation page for template_preprocess_field() you can see a few other variables that are available for you to check (such as field name). You could make multiple fields with different names (and types) across multple node types use the same field template like this:

function YOURTHEME_preprocess_field(&amp;$vars) {
  $field_names = array('field_name_a', 'field_name_b', 'field_name_c');

  if(in_array($element['#field_name'], $field_names) {
    $variables['theme_hook_suggestions'] = array('field__inline-style');
  }
}


This would allow you to use one template named "field--inline-style.tpl.php" for the fields named "field_name_a", "field_name_b", etc.