# Customizing main layout
**URL:** https://meta.discourse.org/t/customizing-main-layout/164903
**Category:** Support
**Created:** [September 22, 2020, 2:03pm UTC](https://meta.discourse.org/t/customizing-main-layout/164903 "2020-09-22T14:03:35Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@akapetzoglou1](https://meta.discourse.org/u/akapetzoglou1)
#### Post date: [September 22, 2020, 2:03pm UTC](https://meta.discourse.org/t/customizing-main-layout/164903/1 "2020-09-22T14:03:35Z")
Hello, I want to add two columns (left and right) of the main-outlet, in order to use them as banners.
From what I understood already I can add new html code easily in the plugin-outlets space.
But it’s not the thing I want to do since there exists no space for this banners already.
What should be my approach?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [September 22, 2020, 2:06pm UTC](https://meta.discourse.org/t/customizing-main-layout/164903/2 "2020-09-22T14:06:30Z")
Take a look at:
> [@Layouts Plugin](https://meta.discourse.org/t/custom-layouts-plugin/55208):
>
> This plugin is a framework for custom Discourse layouts. Its main use case is adding sidebars to Discourse. Desktop Mobile (closed) Mobile (open)desktop_computer[Get the code](https://github.com/paviliondev/discourse-layouts)page_facing_up [Read the documentation](https://coop.pavilion.tech/c/documentation/discourse-layouts/92)bug [Report a bug](https://coop.pavilion.tech/w/bug-report)Quick Links [The advantages of the Layouts Plugin](https://coop.pavilion.tech/t/using-the-layouts-plugin/1737)[Installation and Setup](https://coop.pavilion.tech/t/installation-and-setup/1606)[Widget Development](https://coop.pavilion.tech/t/widget-development/1618)wave Before you post in this …
---
### Author:  [@akapetzoglou1](https://meta.discourse.org/u/akapetzoglou1)
#### Post date: [September 22, 2020, 2:22pm UTC](https://meta.discourse.org/t/customizing-main-layout/164903/3 "2020-09-22T14:22:05Z")
Hm.. so I would create a widget for each banner and then load it, right ?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [September 22, 2020, 2:25pm UTC](https://meta.discourse.org/t/customizing-main-layout/164903/4 "2020-09-22T14:25:03Z")
You might find the existing html widget does all you need. [GitHub - paviliondev/layouts-custom-html: A widget for the Layouts plugin that allows for Custom HTML to be inserted · GitHub](https://github.com/paviliondev/layouts-custom-html)
---
### Author:  [@akapetzoglou1](https://meta.discourse.org/u/akapetzoglou1)
#### Post date: [October 2, 2020, 10:04am UTC](https://meta.discourse.org/t/customizing-main-layout/164903/5 "2020-10-02T10:04:52Z")
It probably is the solution. Although, I haven’t been able to make it work yet.
Can’t understand what you mean or how would I use the existing html widget. 😕
So, I decided to create my own widget that would create the two banners and add them on the sides.
I created a widget: [https://github.com/teakap/banner-theme-component](https://github.com/teakap/banner-theme-component)
It’s loaded, and I added as a widget to the layout setting but still I am not seeing the widget’s html on the page.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [October 2, 2020, 1:01pm UTC](https://meta.discourse.org/t/customizing-main-layout/164903/6 "2020-10-02T13:01:28Z")
Great that you have delved in!
Always, always have your Browser console open when debugging javascript.
This is what I get:
You are missing an import statement:
`import { h } from 'virtual-dom';`
That then fixes it:
Note you should code it like this, though or your class name will show (like it does above):
`h ("span.some-banner-class", "my text")`:
Keep going! 🙂
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [November 1, 2020, 1:13pm UTC](https://meta.discourse.org/t/customizing-main-layout/164903/7 "2020-11-01T13:13:49Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.