How to grab the values of field collection items in a template file?

Question

I have a field collection field_plaats_en_aantal with two fields: field_plaats (text) and field_aantal (integer). I'm currently displaying this field collection in a node view as an unordered list:

I'd now like to theme the field collection a bit in order to get something like this instead:

It seems fairly easy, but I can't find a way to achieve this. At first, I tried to work with a template file views-view-field--field-plaats-en-aantal.tpl.php, but I don't know how to grab the values of the field collection items there. Is this a good way to work on? If yes, how can I get the needed values?

Afterwards, I read some things on the internet about templates for the field collection items themselves and tried using two templates field-collection-item--field-plaats.tpl.php and field-collection-item--field-aantal.tpl.php, because that seemed an easier solution to me. However, those files aren't scanned and therefore don't affect the theming of the fields. What am I doing wrong?

Answer 1

It turned out that I was making things too complicated: the theming can be achieved with CSS by using the default classes of the field collection. Hopefully, my code underneath can be helpful for others too.

.item-list li {
  list-style: none;
}

.field-name-field-plaats:before {
  content: "@ ";
}

.field-name-field-plaats {
  display: inline;
}

.field-items {
  display: inline-block;
}

.field-name-field-aantal:before {
  content: " (";
}

.field-name-field-aantal:after {
  content: "x)";
}

.field-name-field-aantal {
  display: inline;
}