We continue with this series intended for building a custom layout by using CTI_Flex as the base theme (CTI_Flex is the default theme of this site at the time of this writing). In this chapter we shall be customizing the display of taxonomy term links, which, by default, are located at the end of each node one below the other.

Although CTI Flex is not the default theme of this site anymore, the content of this article might be useful for use with other Drupal themes.

Customizing the display of taxonomy term links

By default, taxonomy term links are displayed one below the other and without any distinctive style applied to them (they are styled like the rest of page links). Every single taxonomy term link is wrapped with a <div> element to which a particular class is given depending on where they have been placed on the tags list. If the term is even, then class name will be even; if not, the term is odd and the class name will be odd. In addition, all of these <div> elements are given another class named field-item regardless of term links placement.

OK, what we are going to do is to style and display those taxonomy term items one beside the other (inline). In addition, we shall also hide the label of the field for these taxonomy terms, which, typically, is placed above the links.

Hiding the label ‘Tags:’ for taxonomy terms

Although the easiest way to carry out this task is to hide the label by using the administration menu (admin/structure/types/manage/articles/display), we are going to do it programmatically with the help of template_ preprocess_field, which is the theme hook responsible for theming this field:

/**
 * This preprocess function is the primary processor for theme hook field.
 */
function cti_flex_preprocess_field(&$variables) {

  $element = $variables['element'];

  if ($element['#field_name'] == 'field_tags') {

    $variables['label_hidden'] = true;

  }

}

The file to be edited in order for you to add this piece of code is named template.php, which is analogous to a module’s .module file. We have already talked about template_preprocess functions here.

What this piece of code does is to hide the label for the field named field_tags, the name of the field responsible for taxonomy terms. This name is the machine name and is given by the administrator at the moment of creating the field.

Styling the taxonomy term links

Once we have hidden the label for taxonomy terms, let’s give them some style. Although there are many ways you could perform this task, mine is as follows:

/* Taxonomy term links */
.fixed-layout .field-name-field-tags .field-item {
  display: inline;
}

.fixed-layout .field-name-field-tags a {
  background-color: chocolate;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  color: white;
  cursor: pointer;
  margin-right: .25em;
  padding: .25em .5em;
  text-decoration: none;
}

The file to be edited in order for you to add this piece of code is named layout.css. You can find this file in the subfolder for the theme to contain the .css files (sites/all/themes/cti_flex/css).