topic How can I add a custom class to a dnd_column? in CMS Development

How can I add a custom class to a dnd_column?

marquizzo — Tue, 27 Sep 2022 21:30:44 GMT

I've successfully added my own class to a "dnd_section" template with the following code:

{% dnd_section class="thisClassWorks" %}
    {% dnd_column class="thisClassDoesNotWork" %}

    {% end_dnd_column %}
{% end_dnd_section %}

However, I am unable to add a custom class to the child "dnd_column". The HubL code above produces the following output:

<div class="row-fluid-wrapper row-depth-1 row-number-1 dnd-section thisClassWorks">
<div class="row-fluid ">
<div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12">

</div><!--end widget-span -->
</div><!--end row-->
</div><!--end row-wrapper -->

My custom class "thisClassDoesNotWork" doesn't show up anywhere in the column. How can I add a custom class to a dnd_column in my section template?

Re: How can I add a custom class to a dnd_column?

BarryGrennan — Wed, 28 Sep 2022 02:18:13 GMT

Yup, you can't add a class to a dnd_column. But you can use the custom class you added to the parent section to target it.

.thisClassWorks .dnd-column

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact

Re: How can I add a custom class to a dnd_column?

marquizzo — Wed, 28 Sep 2022 17:04:25 GMT

Thank you for the reply. However, this solution wouldn't work if the developer wants to have more than one column, or if the user adds more columns in the page editor.

Is there a place where we could post feature requests, like with Github? This seems like a very essential HTML functionality that Hubspot is missing.

Re: How can I add a custom class to a dnd_column?

BarryGrennan — Wed, 28 Sep 2022 17:10:41 GMT

In the developer case you could still target with something like nth-child.
But yeah the page editor scenario may be insurmountable. But the page editor would still cause issue evne if you could add a class to a column (.e.g. what if the user deletes the column, moves it, puts a column before it etc.)

The ideas forum can be found here!

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact

Re: How can I add a custom class to a dnd_column?

EdCupaioli — Fri, 17 May 2024 19:01:33 GMT

+1 on that. I'd also like to have CMS options for sections at the least so content editors can apply classes by using a dropdown. I have this functioning in modules just fine but I want to be able to add borders, custom background gradients, and box shadows, which arent available in the settings even if I wanted to have them preset. I don't want content editors to have to do CSS, that's my job!