How to write paragraph template to add tags and css classes?

Question

I have a paragraph bundle (pr_bnd1), which has several fields as below:

1. field_txt
2. field_bg_clr (list field whose key values are mapped to a css class)
3. field_font_clr (list field whose key values are mapped to a css class)

The an example output

<div> field_txt value</div>

Desired output

<div class="field_font_clr_value">.
   <span class="field_bg_clr_value"> field_txt value</span>
</div>

How would i achieve the desired results? I am having trouble getting the template file to work. Any thought?

My paragraph bundle name is "pr_bg_font_clr".

So i imagine i would have to write a template file with the name of "paragraph-items--pr-bg-font-clr", but i am not sure what the structure should be and which fields i can utilize.

Answer 1

Have a look here for the naming

The default paragraphs template is in paragraphs-item.tpl.php. It uses theme suggestions for other templates, the following suggestions are available:

• paragraphs__[view_mode] (e.g. paragraphs--default.tpl.php)
• paragraphs__[type] (e.g. paragraphs--image.tpl.php)
• paragraphs__[type]__[view_mode] (e.g. paragraphs--image--default.tpl.php)

As this seems to be wrong .. Try the suggestion:

paragraphs-items--pr_bg_font_clr.tpl.php
paragraphs-item--pr_bg_font_clr.tpl.php