Module fields css styling

[SRitchot]

Hi,

I am trying to style a module with fields and I think I am doing wrong.

I would like to define a selector on the module field :
{% simple_menu menu_tree="{{ module.simplemenu_field }}" data-identifier='identifier-menu-warpper-test' %}.

Right now I am actually wrapping the modules in a div and going down to the elements I need to style.

Is there a better way?

[alyssamwilie · Accepted solution]

It's not possible to place HTML attributes on a module tag, wrapping it in a div with your prefered selectors is the best solution there. If you're using the tag just in interest of having the Simple Menu field in the page editor you could instead create a custom module where you can still use the field, but have less bulk between your custom selector and the menu contents; or you could even build a completely custom menu using the menu() function.

[SRitchot]

Hi @himanshurauthan ,

Just to clarify, I am not asking how css selectors work. More like how to get to place an attribute that can act has a selector.

The best solution, I found for now is to use developper console inspect in preview and get the generate id for the field menu (in this case it's a menu) and use this has the selector "#module_generated_id".

Simon

[himanshurauthan]

Hello @SRitchot 

you are using a module field called simplemenu_field and rendering it using a custom module called simple_menu. To style the module field directly without wrapping it in a div, you can apply CSS to the generated HTML elements within the module.

target the module field elements using CSS

/* Styling the menu wrapper */
[data-identifier='identifier-menu-warpper-test'] {
  /* CSS properties for the menu wrapper */
}

/* Styling the individual menu items */
[data-identifier='identifier-menu-warpper-test'] ul li {
  /* CSS properties for the menu items */
}

/* Styling the links within the menu */
[data-identifier='identifier-menu-warpper-test'] ul li a {
  /* CSS properties for the menu links */
}

use the data-identifier attribute as the selector to target the specific module field. You can adjust the CSS properties within the curly braces to customize the styling according to your requirements.

place this CSS code within your HubSpot module's stylesheet or in a custom stylesheet included on the page where the module is being used. Inspecting the generated HTML elements using your browser's developer tools can help you identify the appropriate selectors to target the module field elements accurately.

[SRitchot]

Hi @himanshurauthan,

I know how css selectors work (atlest the basics 🙂 ). I am asking if I can set an html property that would make the selection easier. Because when I add something like in my example " data-identifier='identifier-menu-warpper-test' ". It not use in the generated module code.

<div id="main-header-section">
<span id="hs_cos_wrapper_module_118196520064_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu">
<div id="hs_menu_wrapper_module_118196520064_" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" role="navigation" data-sitemap-name="" data-menu-id="" aria-label="Navigation Menu">
 <ul role="menu">
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none"><a href="https://blog.robotel.com" aria-haspopup="true" aria-expanded="false" role="menuitem" target="_self">test simple Menu1</a>
   <ul role="menu" class="hs-menu-children-wrapper">
    <li class="hs-menu-item hs-menu-depth-2" role="none"><a href="https://blog.robotel.com/es" role="menuitem" target="_self">blog es</a></li>
   </ul></li>
  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="javascript&colon;void(0);" role="menuitem" target="_self">test</a></li>
  <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="https://blog.robotel.com/fr" role="menuitem" target="_self">blog fr</a></li>
 </ul>
</div>
</span>
</div>