CMS Development

SEmteryd
Member

Add class to body using Choice

SOLVE

I want to add a custom color scheme which will become activated by using a Choice dropdown in the edit section of the website. When they click "Purple" the color scheme changes to purple etc. The CSS is already set up, I just need to add a class in the body depending on the theme the user chooses. 
This is the code right know:

 

INSIDE THE HEAD TAG:

{% choice "theme" label="Select a theme", value='Purple', choices='Yellow, Purple, Green', export_to_template_context="True" %}

or referring to an actual module (this hasn't worked for me and is hidden in the code):

{# {% module "module_166746683164613" path="/template-masterplan/modules/theme-picker", label="Purple", export_to_template_context=True %} #} 

BELOW THE HEAD TAG, after </head>:

{% if widget.value == "Purple" %}
<body class="theme-purple_haze">
{% elif widget.value == "Green" %}
<body class="theme-green_hell">
{% else widget.value == "Yellow" %}
<body class="root-theme">
{% endif %}

 As of right know the if statements does not work because the 'root-theme' class is always acivated despite what is chosen in the Edit section. How can I go about to add the right class, depending on choice?

0 Upvotes
1 Accepted solution
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Add class to body using Choice

SOLVE

The variable you want for grabbing the data is {{ widget_data.theme.value }}. You can also cut down on the code by using a [value, label] setup in your choice field, with the value being your class. That way instead of having an if statement you can just put the value directly into the class. Like so:

 

Choice (use the choice tag, the choice module seems to be deprecated)

 {% choice "theme" label="Select a Theme", value="theme-purple_haze", choices="[[\"theme-purple_haze\", \"Purple\"], [\"theme-green_hell\", \"Green\"], [\"root-theme\", \"Yellow\"]]" %}

 

Body Class

<body class="{{ widget_data.theme.value }}">

 

If you wanted to use a custom module instead you could set the class using javascript from within the module.

<script>
  document.querySelector('body').classList.add({{ module.theme|tojson }});
</script>

 

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

View solution in original post

1 Reply 1
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Add class to body using Choice

SOLVE

The variable you want for grabbing the data is {{ widget_data.theme.value }}. You can also cut down on the code by using a [value, label] setup in your choice field, with the value being your class. That way instead of having an if statement you can just put the value directly into the class. Like so:

 

Choice (use the choice tag, the choice module seems to be deprecated)

 {% choice "theme" label="Select a Theme", value="theme-purple_haze", choices="[[\"theme-purple_haze\", \"Purple\"], [\"theme-green_hell\", \"Green\"], [\"root-theme\", \"Yellow\"]]" %}

 

Body Class

<body class="{{ widget_data.theme.value }}">

 

If you wanted to use a custom module instead you could set the class using javascript from within the module.

<script>
  document.querySelector('body').classList.add({{ module.theme|tojson }});
</script>

 

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.