topic Re: Center align text on @hubspot/header on a template level in CMS Development

Center align text on @hubspot/header on a template level

marth — Tue, 01 Feb 2022 06:58:31 GMT

How do you center the text in a hubspot/header module on a template level?

I have been checking on the hubspot documentation and I can't find it there.
Already checked here: https://developers.hubspot.com/en/docs/cms/building-blocks/modules/using-modules-in-templates, here: https://developers.hubspot.com/docs/cms/building-blocks/modules/default-modules, and here: https://developers.hubspot.com/docs/cms/hubl/tags/dnd-areas and didn't found any info/solution.

I think they should at least provide how to add default styling to modules on a template level.

Here's what my dnd_module looks like.

{% dnd_module path="@hubspot/header", value="Heading", header_tag="h2" %}

Re: Center align text on @hubspot/header on a template level

Oezcan — Tue, 01 Feb 2022 08:27:05 GMT

Hello @marth ,

you module should look like this:

{% dnd_module path="@hubspot/header", value="Heading", header_tag="h2" horizontal_alignment="CENTER" %} {%end_dnd_module%}

It is in this documentation:

https://developers.hubspot.com/docs/cms/hubl/tags/dnd-areas#drag-and-drop-module-code-dnd-module-code-

Best regards

Özcan

Re: Center align text on @hubspot/header on a template level

marth — Tue, 01 Feb 2022 08:31:30 GMT

Hi Oezan,

Thank you for the quick reply. But it only centers the wrapper of the heading itself. What we need is a way to center the text itself.

Re: Center align text on @hubspot/header on a template level

Oezcan — Tue, 01 Feb 2022 08:37:07 GMT

gladly,
for the text you have to select the element, in your code e.g. it was the h2, and in your css write e.g.

h2 {
text-align: center

}

Best regards,

Özcan

Re: Center align text on @hubspot/header on a template level

webdew — Tue, 01 Feb 2022 09:41:33 GMT

Hi @marth ,

There is no option provided by Hubspot header.module for aligning the text center. you can Center the text by using css or you can clone the module and add editable fields there for customizing.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

Re: Center align text on @hubspot/header on a template level

marth — Wed, 02 Feb 2022 01:38:23 GMT

I see. Thank you for the clarification. Although I am still confused because once you edit the module. There's a style tab on the module and there's a text alignment option on it.

Re: Center align text on @hubspot/header on a template level

marth — Wed, 02 Feb 2022 01:39:16 GMT

Thank Oezcan. We just did this one since Webdew mentioned there's no option for it.

Re: Center align text on @hubspot/header on a template level

louischausse — Thu, 05 Oct 2023 20:25:56 GMT

@Jaycee_Lewis this answer should be an accepted solution 🙂