Column CSS class or Border, or custom module to drag-n-drop module into?

[CP-BWG]

Hello everyone - 

I'm new, and I appreciate your help guiding me.  I have searched and searched, and for the life of me cannot understand how to get a border added to a column or row.  

There is no option in the default module for a column to add a border, and there is no way to give a specific column "module" a CSS class to style it myself. 

My next idea was to try creating a custom module that would give me all the flexibility of dropping modules into it, as a row or column allows.  I'd like to have a truly drag-n-drop module that allows me to drag and drop other modules into it just like a row/column does (letting me create columns inside of it, and rows inside of those columns, for example). I have had no luck.  It seems like a much-needed capability, at least to me!

See attached for some examples of what I am trying to accomplish - a flexible row/column that lets me drop and build inside of it, that I can apply borders or shadows on.  CMS Columns have only background color as an option, so I am thoroughly confused. If anyone has any suggestions or workarounds to apply a CSS class to a column, or any other ideas how to emulate it, please let me know.  

[Anton]

Hi @CP-BWG, 

welcome to the community!

Unfortunatelly it's not possible to "drag&drop" modules into other/custom modules.

What you can do:

• add a border option to your module via CLI
• create custom section if you're working with themes. You can create everything you need with them. 

Or you create a complete "row" custom module with several columns(the "old" way to achive section like layouts). 

{# start module configuration #}
{% require_css %}
<style>
.container.{{ name }}{
background: rgba({{module.background_color.color|convert_rgb}}, {{module.background_color.opacity/100}}
border: {{module.border_thickness}}px {# number or simple text field for the thickness#}} solid rgba({{module.border_color.color|convert_rgb}}, {{module.border_color.opacity/100}};)
</style>
{% end_require_css %}
{# end module configuration #}

<div class="container {{ name }}">
<div class="row-fluid">
{# start left column #}
<div class="col-12 col-md-4">
...
INSERT YOUR CONTENT HERE
...
</div>
{# end left column #}
{# start right column #}
<div class="col-12 col-md-8">
...
INSERT YOUR CONTENT HERE
...
</div>
{# end right column #}
</div>
</div>

hope this helps, 

best, 

Anton

by doing this you can play with all the default "widgets" like numbers, colors and what ever you'd want to acchive a customization 

[CP-BWG]

@Anton This is getting there!  Thanks for the tips!

I was able to so far do:

1. the old-school method, but seems the columns need to be defined there.  So still playing with that. 
   1. Haven't been able to get the colors to stick - but assume that's because I ned to actually code HTML in the "insert your content here" for it to render?
      1. 
2. the custom-section method... struggling here:
   1. I'm using a marketplace theme that I have cloned, and I created a page that included the partial template I made following that link you provided. I was able to get the section to show up.
   2. My plan was to get this section into a page, configure it, and save it as a section I could re-use on other page templates from within the HubSpot builder interface
   3. Is there a way to apply options like in the "old-school" method to be able to allow the user to update the CSS class and other options like border, or will this always need to be done in the code?  The goal is ultimately creating a custom section, but have it have more options that the default row/column is missing, such as border, drop shadow, etc.
      1. 

I really appreciate all your help on this!

[Anton · Accepted solution]

Hi @CP-BWG, 

awesome!

Yeah - the "insert your content here" part is for your single-repeater option layout. 

What you can also do is give the whole thing a seperate class and style it in the main css(without the colors) like general paddings, (font) sizes ... 

Or - if you'd like to do it "the corporate way" where the marketer can only select from predefined colors you can do it like this:

• create a select option
• insert as many color names as names as you'd like and a lowercase and without spaces equivalent for value
• insert the widget value into your HTML layout
• write every possible result/combination into your CSS

Example:

• Select options(called "color select")
  • Name: Red / value: red
  • Name: Green / value: green
  • Name: Blue / value: blue

HTML Layout

<div class="container myCustomModule {{ module.color_select }}">
<div class="row-fluid">
{# start left column #}
<div class="col-12 col-md-4">
...
INSERT YOUR CONTENT HERE
...
</div>
{# end left column #}
{# start right column #}
<div class="col-12 col-md-8">
...
INSERT YOUR CONTENT HERE
...
</div>
{# end right column #}
</div>
</div>

CSS

.myCustomModule{
{# styling which will should be always applied #}
padding:2rem;
border-radius:.5rem;
}

{# begin styling for red option #}
.myCustomModule.red{
border:1px solid #ff0000;
}

.myCustomModule.red h1,.myCustomModule.red h2, .myCustomModule.red h3, .myCustomModule.red h4, .myCustomModule.red h5, .myCustomModule.red h6{
color:#ff0000;
}

.myCustomModule.red p, .myCustomModule.red a, .myCustomModule.red i{
color:#000000;
}

{# begin styling for green option #}
.myCustomModule.green{
border:1px solid #00ff00;
}

.myCustomModule.green h1,.myCustomModule.green h2, .myCustomModule.green h3, .myCustomModule.green h4, .myCustomModule.green h5, .myCustomModule.green h6{
color:#00ff00;
}

.myCustomModule.green p, .myCustomModule.green a, .myCustomModule.green i{
color:#000000;
}

{# begin styling for blue option #}
.myCustomModule.blue{
border:1px solid #0000ff;
}

.myCustomModule.blue h1,.myCustomModule.blue h2, .myCustomModule.blue h3, .myCustomModule.blue h4, .myCustomModule.blue h5, .myCustomModule.blue h6{
color:#0000ff;
}

.myCustomModule.blue p, .myCustomModule.blue a, .myCustomModule.blue i{
color:#000000;
}

hope this helps

best, 

Anton

[webdew]

Hi @CP-BWG ,

To add border to a column or row you need to create that content in custom module and after copying path you need to add in dnd.html template as shown below

1. Create Custom Module

 2. Add module  in dnd.html template

3. Publish change and show preview

For more details please look at reference link:- https://developers.hubspot.com/docs/cms/building-blocks/templates/drag-and-drop-areas 

Hope this helps!

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

Thanks and Regards.

[CP-BWG]

@webdew Thank you for that. Is there a way in which I can code a “super module” though, to be in itself something that acts as a row or column - in that it has a flexible grid inside of itself?

I am trying to give creators the ability to build drag and drop inside of a container that has a border, but is completely drag and drop buildable from a page editor, just as a row and column is.

Ideas?