<p>Set up your dropdown so that the Option Labels are <code>default</code>, <code>yellow</code>, <code>green</code>, etc. and the Values are <code>page-project</code>, <code>page-project bg-yellow</code>, <code>page-project bg-green</code>, etc. Then, you can</p>
<pre><code>{% set bodyClass = entry.backgroundColor %}
</code></pre>
<p>This will set <code>bodyClass</code> to whatever the value is for the chosen dropdown element, i.e. <code>page-project</code> if you pick the <code>default</code> option.</p>

CC BY-SA 4.0
2020-08-11T12:17:09.680Z
Thanks for the reply Marion. Could you please elaborate a bit what you mean? Showing all of it as a snippet would be really helpful if possible :)
Stig Melón-Bratvold
CC BY-SA 4.0
2020-08-12T04:17:04.957Z
@StigMelón-Bratvold elaborating a bit more, but you really just replace that if-elseif-else code with the one set, and it does what you are looking for. Once you have `bodyClass` set, setting the actual body class is a different question. Do you need help with that part?
Marion Newlevant
CC BY-SA 4.0
2020-08-12T20:38:34.630Z
Thanks for taking the time! Yes I want all pages to have bodyClass `.page-project` no matter what you choose in the dropdown. And I want to use the dropdown to have some choices that will add a bodyClass. That is the part I am struggling with.
Stig Melón-Bratvold
CC BY-SA 4.0
2020-08-10T15:32:11.863Z
2020-08-12T04:14:53.337Z
2020-08-12T04:14:53.337Z
Marion Newlevant
<p>I found the answer in this thread
<a href="https://craftcms.stackexchange.com/questions/28876/dropdown-field-value-getting-outputted-multiple-times">Dropdown field value getting outputted multiple times</a></p>
<p>The correct syntax to achieve what I am trying to do is:</p>
<pre><code>{% if entry.backgroundColor.value == &quot;default&quot; %}
    {% set bodyClass = &quot;page-project&quot; %}
{% elseif entry.backgroundColor.value == &quot;yellow&quot; %}
    {% set bodyClass = &quot;page-project bg-yellow&quot; %}
{% elseif entry.backgroundColor.value == &quot;green&quot; %}
  {% set bodyClass = &quot;page-project bg-green&quot; %}
{% elseif entry.backgroundColor.value == &quot;blue&quot; %}
  {% set bodyClass = &quot;page-project bg-blue&quot; %}
{% elseif entry.backgroundColor.value == &quot;purple&quot; %}
  {% set bodyClass = &quot;page-project bg-purple&quot; %}
{% endif %}
</code></pre>

CC BY-SA 4.0
2020-08-12T21:16:38.610Z
2020-08-12T21:16:38.610Z
Stig Melón-Bratvold
<p>I have a website where I want to be able to use different background colors on different project pages.</p>
<p>The way I want to achieve this is by having a dropdown field in Craft to select from a set of values on each project page. I will then use that to set a class on the body tag so that I can style that accordingly with css.</p>
<p>I have created a dropdown field with the handle <code>backgroundColor</code>.
I have added the these options as values:</p>
<ul>
<li>default</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>purple</li>
</ul>
<p>and here is the code in the template</p>
<pre><code>{% if entry.backgroundColor.default %}
  {% set bodyClass = &quot;page-project&quot; %}
{% elseif entry.backgroundColor.yellow %}
  {% set bodyClass = &quot;page-project bg-yellow&quot; %}
{% elseif entry.backgroundColor.green %}
  {% set bodyClass = &quot;page-project bg-green&quot; %}
{% elseif entry.backgroundColor.blue %}
  {% set bodyClass = &quot;page-project bg-blue&quot; %}
{% elseif entry.backgroundColor.purple %}
  {% set bodyClass = &quot;page-project bg-purple&quot; %}
{% endif %}
</code></pre>
<p>This gives me and error saying that the property does not exist.
Does anyone know what the problem might be, or if there is a better way to do this.</p>
<p>Thanks!</p>

<templating><entries>
Use dropdown field to add a class to the body tag
# Use dropdown field to add a class to the body tag

(Asked by: username_0 on 2020-08-10)

I have a website where I want to be able to use different background colors on different project pages.
The way I want to achieve this is by having a dropdown field in Craft to select from a set of values on each project page. I will then use that to set a class on the body tag so that I can style that accordingly with css.
I have created a dropdown field with the handle backgroundColor.
I have added the these options as values:

default
yellow
green
blue
purple

and here is the code in the template
{% if entry.backgroundColor.default %}
  {% set bodyClass = "page-project" %}
{% elseif entry.backgroundColor.yellow %}
  {% set bodyClass = "page-project bg-yellow" %}
{% elseif entry.backgroundColor.green %}
  {% set bodyClass = "page-project bg-green" %}
{% elseif entry.backgroundColor.blue %}
  {% set bodyClass = "page-project bg-blue" %}
{% elseif entry.backgroundColor.purple %}
  {% set bodyClass = "page-project bg-purple" %}
{% endif %}

This gives me and error saying that the property does not exist.
Does anyone know what the problem might be, or if there is a better way to do this.
Thanks!

**Tags:** templating, entries


---

## 2 answers

### Answer by username_1 on 2020-08-10. Score: 2

Set up your dropdown so that the Option Labels are default, yellow, green, etc. and the Values are page-project, page-project bg-yellow, page-project bg-green, etc. Then, you can
{% set bodyClass = entry.backgroundColor %}

This will set bodyClass to whatever the value is for the chosen dropdown element, i.e. page-project if you pick the default option.

> **Comments:**
> **username_0**: Thanks for the reply Marion. Could you please elaborate a bit what you mean? Showing all of it as a snippet would be really helpful if possible :)  
> **username_1**: @StigMelón-Bratvold elaborating a bit more, but you really just replace that if-elseif-else code with the one set, and it does what you are looking for. Once you have `bodyClass` set, setting the actual body class is a different question. Do you need help with that part?  
> **username_0**: Thanks for taking the time! Yes I want all pages to have bodyClass `.page-project` no matter what you choose in the dropdown. And I want to use the dropdown to have some choices that will add a bodyClass. That is the part I am struggling with.  

---

### Answer by username_0 on 2020-08-12. Score: 1

I found the answer in this thread
Dropdown field value getting outputted multiple times
The correct syntax to achieve what I am trying to do is:
{% if entry.backgroundColor.value == "default" %}
    {% set bodyClass = "page-project" %}
{% elseif entry.backgroundColor.value == "yellow" %}
    {% set bodyClass = "page-project bg-yellow" %}
{% elseif entry.backgroundColor.value == "green" %}
  {% set bodyClass = "page-project bg-green" %}
{% elseif entry.backgroundColor.value == "blue" %}
  {% set bodyClass = "page-project bg-blue" %}
{% elseif entry.backgroundColor.value == "purple" %}
  {% set bodyClass = "page-project bg-purple" %}
{% endif %}


---

