Adding custom classes to landing pages or reused global modules

Developer Support CMS Development
1

Why is there no way to add a custom page class on landing and web pages that use the same template. It could be as easy as having a field on in settings. Or even be able to target a module on the edit page and adding a class there. I know each form has a unique ID but when the pages have specific names are purposes is much simpler to be able to add a class that targets those specifics rather having a developer constantly having to check every page and find that long, unique ID. If there is a way, where would it be or how is it done?

2

@darivers

Adding @jonchim and @Anton to this one to get their perspectives.

3

Hi @darivers,

it’s possible. Just add

{{content_id}}

to your body class (or id)

It should look like this

<div class="MY-CUSTOM-BODY-CLASSES {{content_id}}">
...
your content
...
</div>

or

<div class="MY-CUSTOM-BODY-CLASSES" id="{{ content_id }}">
...
your content
...
</div>

when using it as class you can reference it through CSS by

.GENERATED-NUMBER{
your stylings
}

when using it as id

#GENERATED-NUMBER{
your stylings
}

To have more flexibilty you can add a text field-function into the template like this:

{% module "custom_class" path="@hubspot/text" label="custom body class", value="my-default-body-class", export_to_template_context=True %}
...

<div class="body {{ widget_data.custom_class.value }}">
...
your content
</div>

edit: by doing this you can set a unique class for every page when creating pages

best,

Anton