Prevent custom module CSS from being affected by theme CSS and other module CSS

Develop, Build & Integrate CMS Development
1

Hi all I’m new to hubspot and really need your help to figure out my styling problem in a template. Thanks!

It goes like this :

1. I created 2 custom module.

  • module.html (Only html)
  • module.css (This is where I put my styling)
  • module.js (No script)

2. I created a template by copying the About.html of Hubspot with it’s theme.

3. In the new theme I inserted the 2 custom modules. Here I can see that the Hubspot theme destroyed the styling of the custom modules.

My question is

1. How do I restrict a module styling from being affected by other modules or by the theme styling.

2. In the template, I would still like to use the Hubspot theme for some dnd areas in the template but not affect the styling of my custom module.

Template Code:

<!-- templateType: page isAvailableForNewContent: true label: Template 1--><!doctype html><html> <head> <meta charset="utf-8"> {% if page_meta.html_title or pageTitle %}<title>{{ page_meta.html_title or pageTitle }}</title>{% endif %} {% if brand_settings.primaryFavicon.src %}<link rel="shortcut icon" href="{{ brand_settings.primaryFavicon.src }}" />{% endif %} <meta name="description" content="{{ page_meta.meta_description }}"> {{ require_css(get_asset_url("../css/main.css")) }} {# This is intended to be used if a template requires template specific style sheets #} {% if template_css %} {{ require_css(get_asset_url(template_css)) }} {% endif %} {{ require_css(get_asset_url("../../css/theme-overrides.css")) }} {# To see a full list of what is included via standard_header_includes please reference this article: https://developers.hubspot.com/docs/cms/hubl/variables#required-page-template-variables #} {{ standard_header_includes }} </head> <body> {# Custom Header Module #} {% module "module_17149704516893" path="/custom/modules/custom-header", label="custom-header" %} {# #} {% dnd_area "dnd_area" label="Main section", class="body-container body-container--template-1" %} {% end_dnd_area %} {# #} {# Custom Footer Module #} {% module "module_166514144150" path="/custom/modules/custom-footer", label="custom-footer" %} {{ standard_footer_includes }} </body></html>

2

Hi @dtg001

So the first thing you need to do is move your styles inside a <style> tag in module.html and wrap that in {% scope_css %} this will prevent your custom module styles from being affected. You can go through this doc to learn more about custom modules. CLICK HERE

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!