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

**URL:** <https://community.hubspot.com/t/column-css-class-or-border-or-custom-module-to-drag-n-drop-module-into/46151>\
**Category:** CMS Development\
**Tags:** enterprise\
**Created:** [October 29, 2021, 1:15am UTC](https://community.hubspot.com/t/column-css-class-or-border-or-custom-module-to-drag-n-drop-module-into/46151 "2021-10-29T01:15:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![CP-BWG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cp-bwg/32/87988_2.png) [@CP-BWG](https://community.hubspot.com/u/CP-BWG)\
**Post date:** [October 29, 2021, 1:15am UTC](https://community.hubspot.com/t/column-css-class-or-border-or-custom-module-to-drag-n-drop-module-into/46151/1 "2021-10-29T01:15:31Z")

</div>

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.

 ![Screen Shot 2021-10-28 at 8.11.52 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/8/389f922f1fb8669df98cbf6a0224d4812a56fbae.png)

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [October 29, 2021, 1:17pm UTC](https://community.hubspot.com/t/column-css-class-or-border-or-custom-module-to-drag-n-drop-module-into/46151/2 "2021-10-29T13:17:39Z")

</div>

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

 ![webdew_0-1635513369405.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/3/73933e4d6c6c330d41095db5f84523e4d8b66ae3.png)

2. Add module in dnd.html template

 ![webdew_1-1635513368710.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/8/d87339f605f81878662fe60a856e354cf5fe2e48.png)

3. Publish change and show preview

 ![webdew_2-1635513368724.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/7/178e30d44af274a869f608f954b9bba7ce559095.png)

For more details please look at reference link:- [Drag and Drop areas overview - HubSpot docs](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.

---

<div class="post-metadata">

**Author:** ![CP-BWG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cp-bwg/32/87988_2.png) [@CP-BWG](https://community.hubspot.com/u/CP-BWG)\
**Post date:** [October 29, 2021, 3:50pm UTC](https://community.hubspot.com/t/column-css-class-or-border-or-custom-module-to-drag-n-drop-module-into/46151/3 "2021-10-29T15:50:46Z")

</div>

[@webdew](https://community.hubspot.com/t5/user/viewprofilepage/user-id/131510) 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?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [October 29, 2021, 3:39pm UTC](https://community.hubspot.com/t/column-css-class-or-border-or-custom-module-to-drag-n-drop-module-into/46151/4 "2021-10-29T15:39:41Z")

</div>

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](https://developers.hubspot.com/en/docs/cms/building-blocks/module-theme-fields) to your module via CLI
- create [custom section](https://developers.hubspot.com/docs/cms/building-blocks/templates/drag-and-drop-areas/sections) 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).

```lia-code-sample
{# 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

---

<div class="post-metadata">

**Author:** ![CP-BWG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cp-bwg/32/87988_2.png) [@CP-BWG](https://community.hubspot.com/u/CP-BWG)\
**Post date:** [October 29, 2021, 4:49pm UTC](https://community.hubspot.com/t/column-css-class-or-border-or-custom-module-to-drag-n-drop-module-into/46151/5 "2021-10-29T16:49:12Z")

</div>

@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.

2. the custom-section method… struggling here:

I really appreciate all your help on this!

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [November 4, 2021, 2:09pm UTC](https://community.hubspot.com/t/column-css-class-or-border-or-custom-module-to-drag-n-drop-module-into/46151/6 "2021-11-04T14:09:00Z")

</div>

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

```lia-code-sample
<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

```lia-code-sample
.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