1

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!

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.

| improve this answer | |
  • 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 Aug 11 at 12:17
  • @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 Aug 12 at 4:17
  • 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 Aug 12 at 20:38
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 %}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.