Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-08-11T12:17:09.680Z
Answers.Text: 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 :)
Answers.UserDisplayName: Stig Melón-Bratvold
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-08-12T04:17:04.957Z
Answers.Text: @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?
Answers.UserDisplayName: Marion Newlevant
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-08-12T20:38:34.630Z
Answers.Text: 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.
Answers.UserDisplayName: Stig Melón-Bratvold
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-08-10T15:32:11.863Z
Answers.LastActivityDate: 2020-08-12T04:14:53.337Z
Answers.LastEditDate: 2020-08-12T04:14:53.337Z
Answers.UserDisplayName: Marion Newlevant
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-08-12T21:16:38.610Z
Answers.LastActivityDate: 2020-08-12T21:16:38.610Z
Answers.UserDisplayName: Stig Melón-Bratvold
Body: <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>
  
Tags: <templating><entries>
Title: Use dropdown field to add a class to the body tag
ThreadText: # 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 username_1. Could you please elaborate a bit what you mean? Showing all of it as a snippet would be really helpful if possible :)  
  > **username_1**: @username_0 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](https://craftcms.stackexchange.com/questions/28876/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 %}
  
  ```
  
  
  ---
  
  