hubspot cloned module does not have associated style tab

[studiokb4]

Hi,

I wanted to simply add a class text field option to some modules, lets say a Header module for this example. So I decided I would clone the default hubspot Header module to my theme. That was all fine.

The hubspot header module has style options for spacing, typography, background etc.

But the cloned one in my theme does not have these options. Why is this? And when you view the hubspot header module in design view it doe not have a style tab either, but it does while editing the page.

[studiokb4]

Great, thanks for the tips. And thanks for the responses.

[Anton]

Hey @studiokb4, 

I'd say it's a bug. By default all fields and default settings of a module will be cloned.

Have you cloned it via Design-Manager or via local environment/CLI?

best, 

Anton

[studiokb4]

Hi Anton,

Thanks for the reply. I cloned it via design manager, I assumed that would be best to copy everything.

The thing is when I look at the header.module in design manager it actually has no Style fields. I'm wondering do the hubspot modules get assigned these default style fields in another way, save them having to do it individually per module.

[Anton]

Hi @studiokb4, 

thanks for the information. 

If you mean the header.module from the hubpost folder it's correct that it has no style fields or attached CSS files since it's getting the style information from the theme you're using it in. Also it's not recommended to have styling options in the header element since it will - most likely - provide to many options and you will have quite a hard time in the future to streamline the styling of every headline on every page. 

In other words:

You have to style the h-tags in your theme settings.

If you want to modify them, look at the theme-override.css (might be called differently).

There should be something like(just an example)

h1{
font-family: {{theme.fonts.headline.font-family }}
color: {{ theme.fonts.headline.color.color }}
}

 you can override this to your desired outcome.

Personally I don't use the default header.module since creating a custom solution is super simple and can have a lot options which are fitting your use-case.

As an example:

{% set h_tag = module.headline_tag %}
{% set h_size = module.headline_size %}
{% set h_class = module.custom_class %}
{% set headline = module.headline %}

<{{h_tag}} class="{{ h_size }}{% unless h_class == "" %} {{ h_class }}{% endunless %}">
{{ headline }}
</{{h_tag}}>

h_tag and h_size are choice fields with h1-h6 options. h_size can have other elements like p, small, title... what ever you like to define as styling options

h_class can be either another choice field which contains classes that are styled in the CSS or a simple text(not rich-text) field which let's you type in any word as a class. If this class exists in your CSS file, it will apply it to the text.

best, 

Anton

[studiokb4]

Hi Anton,

Thanks. I knew the theme could control styles with css or from the theme options. But the module itself, when editing a page, has got these options. I was wondering where these came from. The theme I am working with started as the boilerplate theme. See a screenshot from the edit page screen below.

So when I copied this module, these style fields were not there on the copied header module.

Anyway, I think creating a custom header module is probably best as you suggested, I just thought that other way would be quicker seeing as that module existed.

[Anton · Accepted solution]

I see, 

thanks for providing this information. 

I'd say:
HubSpot provides all sort of options(like those ones) to their default modules. You can imagine the logic to be kinda like "if module is header and inside the hubspot-folder, add those options"

Nobody except HubSpot can access or modify those options, so creating a custom module is always a good practise, if you want to extend the functionality and make it corporate design compliant.

Since you're using the boilerplate here a few tips:

Add choice fields to the module (and theme) to a lot almost every option you want to have. Like font-color, font-size...

My personal headline module looks a bit like this:

• headline tag(h-tag)
• headline size(class)
• headline(text)
• style-tab
  • headline color(primary, dark, light)
  • animation(group with a bunch of animation settings)

The module.html it looks a bit like the example above.

The CSS is like this

.pri-color{
color:{{ theme.colors.primary.color }};
}

.sec-color{
color:{{ theme.colors.secondary.color }};
}

.dark-color{
color:{{ theme.colors.common.dark.color }};
}

.light-color{
color:{{ theme.colors.common.light.color }};
}

...

hope this helps

best, 

Anton